Android仿新闻顶部导航标签切换效果_Android

最近由于个人兴趣原因,写了个模仿新闻顶部导航标签的demo。具体看下图。

那么大致上我们会用到这些知识。

1.Fragment
2.FragmentPagerAdapter
3.HorizontalScrollView
4.PopupWindow

ok,那么首先进入第一步。

为了实现顶部的标签,我们要用到HorizontalScrollView,因为原有的HorizontalScrollView控件已经不能满足我们的使用了。所以这里就自定义一个HorizontalScrollView

import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.HorizontalScrollView;
import android.widget.ImageView; 

/**
 * 自定义垂直滑动View
 *
 */ 

public class ColumnHorizontalScrollView extends HorizontalScrollView {
 //传入的布局
 private View ll_content;
 //更多栏目的布局
 private View ll_more;
 //拖动栏布局
 private View rl_colnmn;
 //左阴影布局
 private ImageView leftImage;
 //右阴影布局
 private ImageView rightImage;
 //屏幕宽度
 private int mScreenWidth =0;
 //父类活动的activity
 private Activity activity;
 public ColumnHorizontalScrollView(Context context) {
  super(context);
 } 

 public ColumnHorizontalScrollView(Context context, AttributeSet attrs) {
  super(context, attrs);
 } 

 public ColumnHorizontalScrollView(Context context, AttributeSet attrs,
          int defStyle) {
  super(context, attrs, defStyle); 

 } 

 /**
  * 拖动的时候执行的事件
  * @param l
  * @param t
  * @param oldl
  * @param oldt
  */
 @Override
 protected void onScrollChanged(int l, int t, int oldl, int oldt) {
  super.onScrollChanged(l, t, oldl, oldt);
  //先设置左右的阴影
  shade_ShowOrHide();
  if(!activity.isFinishing() && ll_content != null && leftImage!= null && rightImage != null){
   if(ll_content.getWidth() <= mScreenWidth){
    leftImage.setVisibility(View.GONE);
    rightImage.setVisibility(View.GONE);
   }
  }else {
   return ;
  }
  if(l == 0){
   leftImage.setVisibility(View.GONE);
   rightImage.setVisibility(View.VISIBLE);
   return ;
  }
  if(ll_content.getWidth() - l + ll_more.getWidth() + rl_colnmn.getLeft() == mScreenWidth){
   leftImage.setVisibility(View.VISIBLE);
   rightImage.setVisibility(View.GONE);
   return ;
  }
  leftImage.setVisibility(View.VISIBLE);
  rightImage.setVisibility(View.VISIBLE);
 } 

 /**
  * 传入父类的资源文件等
  * @param activity
  * @param mScreenWidth
  * @param paramView1
  * @param paramView2
  * @param paramView3
  * @param paramView4
  * @param paramView5
  */
 public void setParam(Activity activity,int mScreenWidth,View paramView1,ImageView paramView2, ImageView paramView3 ,View paramView4,View paramView5)
 {
  this.activity = activity;
  this.mScreenWidth = mScreenWidth;
  ll_content = paramView1;
  leftImage = paramView2;
  rightImage = paramView3;
  ll_more = paramView4;
  rl_colnmn = paramView5;
 }
 /**
  * 判断左右阴影显示隐藏效果
  */
 public void shade_ShowOrHide(){
  if(!activity.isFinishing() && ll_content != null){
   measure(0,0);
   //如果整体的宽度小于屏幕的宽度的话,那左右阴影都隐藏
   if(mScreenWidth >= getMeasuredWidth()){
    leftImage.setVisibility(View.GONE);
    rightImage.setVisibility(View.GONE);
   }
  }else {
   return ;
  }
  //如果滑动到最左边的时候,左边阴影隐藏,右边显示
  if(getLeft() == 0){
   leftImage.setVisibility(View.GONE);
   rightImage.setVisibility(View.VISIBLE);
   return ;
  }
  //如果滑动在最右边的时候,左边阴影显示,右边隐藏
  if(getRight() == getMeasuredWidth() - mScreenWidth){
   leftImage.setVisibility(View.VISIBLE);
   rightImage.setVisibility(View.GONE);
   return ;
  }
  //否则,说明在中间位置,左右阴影都显示
  leftImage.setVisibility(View.VISIBLE);
  rightImage.setVisibility(View.VISIBLE);
 }
}

完成之后，是不是需要编写Fragment 了? 为了显示图中的效果,这里我们就自定义一个,方便控制

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView; 

/**
 * 自定义的Fragment类
 */ 

public class NewsFragment extends Fragment {
 String text; 

 @Override
 public void onCreate(Bundle savedInstanceState) {
  Bundle args = getArguments();
  text = args != null ? args.getString("text"):"";
  super.onCreate(savedInstanceState);
 } 

 @Nullable
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  View view = LayoutInflater.from(getActivity()).inflate(R.layout.news_fragment,null);
  TextView item_textview = (TextView)view.findViewById(R.id.item_textview);
  item_textview.setText(text);
  return view; 

 }
}

 news_fragment.xml

Ok,为了方便控制,我们来写个适配器 

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.view.ViewGroup; 

import java.util.ArrayList; 

/**
 * 消息 Fragment 的适配器
 */ 

public class NewsFragmentPagerAdapter extends FragmentPagerAdapter {
 private ArrayList<Fragment> fragments;//定义一个集合管理所有的fragment 

 private FragmentManager fm;//fragment 管理器 

 public NewsFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> fragments) {
  super(fm);
  this.fm = fm;
  this.fragments = fragments;
 }
 @Override
 public int getCount() {
  return fragments.size();
 } 

 @Override
 public android.support.v4.app.Fragment getItem(int position) {
  return fragments.get(position);
 } 

 @Override
 public int getItemPosition(Object object) {
  return POSITION_NONE;
 } 

 //设置集合
 public void setFragments(ArrayList<Fragment> fragments) {
  if(this.fragments != null){
   FragmentTransaction ft = fm.beginTransaction();
   for(Fragment f : this.fragments){
    ft.remove(f);
   }
   ft.commit();
   ft = null;
   fm.executePendingTransactions();
  }
  this.fragments = fragments;
  notifyDataSetChanged();
 } 

 @Override
 public Object instantiateItem(ViewGroup container, int position) {
  Object obj = super.instantiateItem(container, position);
  return obj;
 }
}

完成这些,就差不多开始编写Activity 的代码了。

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.view.Gravity;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView; 

import java.util.ArrayList; 

/**
 */ 

public class MainActivity extends FragmentActivity {
 /**自定义的HorizontalScrollView**/
 private ColumnHorizontalScrollView mColumnHorizontalScrollView; 

 private LinearLayout mRadioGroup_content; 

 private LinearLayout ll_more_columns; 

 private RelativeLayout rl_colum; 

 private ViewPager mViewPager; 

 private ImageView button_more_columns; 

 private String[] news = new String[] {
  "1","2","3","4","5","6","7","8","9","10"
 };
 //当前选中的栏目
 private int colnmuSelectIndex = 0;
 //左阴影部分
 public ImageView shade_left;
 //右阴影部分
 public ImageView shade_right;
 //屏幕宽度
 private int mScreenWidth = 0; 

 //Item 的高度
 private int mItemWidth = 0; 

 private ArrayList<Fragment> fragments = new ArrayList<>(); 

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState); 

  setContentView(R.layout.actiivty_top_news);
  DisplayMetrics dm = new DisplayMetrics();
  getWindowManager().getDefaultDisplay().getMetrics(dm);
  mScreenWidth = dm.widthPixels;
  mItemWidth = mScreenWidth / 7;// 一个Item宽度为屏幕的1/7
  intiViews();
 }
 private final int SWITCH_PAGE = 0x00123; 

 private Handler mHandler = new Handler(){
  @Override
  public void handleMessage(Message msg) {
   super.handleMessage(msg);
   switch (msg.what){
    case SWITCH_PAGE:
     int selectIndex = msg.getData().getInt("selectIndex");
     for(int i = 0;i < mRadioGroup_content.getChildCount();i++){
      View localView = mRadioGroup_content.getChildAt(i);
      if (i != selectIndex)
       localView.setSelected(false);
      else{
       localView.setSelected(true);
       mViewPager.setCurrentItem(i);
      }
     }
     break;
   }
  }
 };
 /**
  * 初始化组件
  */
 protected void intiViews() {
  mColumnHorizontalScrollView = (ColumnHorizontalScrollView)findViewById(R.id.mColumnHorizontalScrollView);
  mRadioGroup_content = (LinearLayout) findViewById(R.id.mRadioGroup_content);
  ll_more_columns = (LinearLayout) findViewById(R.id.ll_more_columns);
  rl_colum = (RelativeLayout) findViewById(R.id.rl_column);
  button_more_columns = (ImageView) findViewById(R.id.button_more_columns);
  mViewPager = (ViewPager) findViewById(R.id.mViewPager);
  shade_left = (ImageView) findViewById(R.id.shade_left);
  shade_right = (ImageView) findViewById(R.id.shade_right);
  button_more_columns.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    // TODO Auto-generated method stub
   }
  });
  setChangelView();
 }
 /**
  * 当栏目项发生变化时候调用
  * */
 private void setChangelView() {
  // initColumnData();
  initTabColumn();
  initFragment();
 }
 /**
  * 初始化Column栏目项
  * */
 private void initTabColumn() {
  //先删除所有的控件
  mRadioGroup_content.removeAllViews();
  //获取所有的结合
  int count = news.length;
  //设置自定义的所有布局
  mColumnHorizontalScrollView.setParam(this, mScreenWidth, mRadioGroup_content, shade_left, shade_right, ll_more_columns, rl_colum);
  for(int i = 0; i< count; i++){
   LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(mItemWidth , ViewPager.LayoutParams.WRAP_CONTENT);
   params.leftMargin = 10;
   params.rightMargin = 10;
   TextView localTextView = new TextView(this);
   localTextView.setTextAppearance(this, R.style.top_category_scroll_view_item_text);
   localTextView.setBackgroundResource(R.drawable.radio_buttong_bg);
   localTextView.setGravity(Gravity.CENTER);
   localTextView.setPadding(5, 0, 5, 0);
   localTextView.setId(i);
   localTextView.setText(news[i]);
   localTextView.setTextColor(getResources().getColorStateList(R.color.top_category_scroll_text_color_day));
   if(colnmuSelectIndex == i){
    localTextView.setSelected(true);
   }
   /**
    * 设置点击事件
    */
   localTextView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
     for(int i = 0;i < mRadioGroup_content.getChildCount();i++){
      View localView = mRadioGroup_content.getChildAt(i);
      if (localView != v)
       localView.setSelected(false);
      else{
       localView.setSelected(true);
       mViewPager.setCurrentItem(i);
      }
     }
    }
   });
   mRadioGroup_content.addView(localTextView, i ,params);
  }
 }
 /**
  * 选择的Column里面的Tab
  * */
 private void selectTab(int tab_postion) {
  colnmuSelectIndex = tab_postion;
  for (int i = 0; i < mRadioGroup_content.getChildCount(); i++) {
   View checkView = mRadioGroup_content.getChildAt(tab_postion);
   int k = checkView.getMeasuredWidth();
   int l = checkView.getLeft();
   int i2 = l + k / 2 - mScreenWidth / 2;
   mColumnHorizontalScrollView.smoothScrollTo(i2, 0);
  }
  //判断是否选中
  for (int j = 0; j < mRadioGroup_content.getChildCount(); j++) {
   View checkView = mRadioGroup_content.getChildAt(j);
   boolean ischeck;
   if (j == tab_postion) {
    ischeck = true;
   } else {
    ischeck = false;
   }
   checkView.setSelected(ischeck);
  }
 }
 /**
  * 初始化Fragment
  * */
 private void initFragment() {
  int count = news.length;
  for(int i = 0; i< count;i++){
   Bundle data = new Bundle();
   data.putString("text", news[i]);
   NewsFragment newfragment = new NewsFragment();
   newfragment.setArguments(data);
   fragments.add(newfragment);
  }
  NewsFragmentPagerAdapter mAdapetr = new NewsFragmentPagerAdapter(getSupportFragmentManager(), fragments);
  mViewPager.setAdapter(mAdapetr);
  mViewPager.setOnPageChangeListener(pageListener);
 }
 /**
  * ViewPager切换监听方法
  * */
 public ViewPager.OnPageChangeListener pageListener= new ViewPager.OnPageChangeListener(){ 

  @Override
  public void onPageScrollStateChanged(int arg0) {
  } 

  @Override
  public void onPageScrolled(int arg0, float arg1, int arg2) {
  } 

  @Override
  public void onPageSelected(int position) {
   // TODO Auto-generated method stub
   mViewPager.setCurrentItem(position);
   selectTab(position);
  }
 }; 

}

actiivty_top_news.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" > 

 <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="40.0dip"
  android:background="#fff3f3f3"
  android:orientation="horizontal" > 

  <RelativeLayout
   android:id="@+id/rl_column"
   android:layout_width="match_parent"
   android:layout_height="40.0dip"
   android:layout_weight="1.0" > 

   <cn.com.topnews.ui.ColumnHorizontalScrollView
    android:id="@+id/mColumnHorizontalScrollView"
    android:layout_width="match_parent"
    android:layout_height="40.0dip"
    android:scrollbars="none" > 

    <LinearLayout
     android:id="@+id/mRadioGroup_content"
     android:layout_width="fill_parent"
     android:layout_height="40.0dip"
     android:layout_centerVertical="true"
     android:gravity="center_vertical"
     android:orientation="horizontal"
     android:paddingLeft="10.0dip"
     android:paddingRight="10.0dip" />
   </cn.com.topnews.ui.ColumnHorizontalScrollView> 

   <ImageView
    android:id="@+id/shade_left"
    android:layout_width="10.0dip"
    android:layout_height="40.0dip"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:background="@drawable/channel_leftblock"
    android:visibility="gone" /> 

   <ImageView
    android:id="@+id/shade_right"
    android:layout_width="10.0dip"
    android:layout_height="40.0dip"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:background="@drawable/channel_rightblock"
    android:visibility="visible" />
  </RelativeLayout> 

  <LinearLayout
   android:id="@+id/ll_more_columns"
   android:layout_width="wrap_content"
   android:layout_height="40.0dip" > 

   <ImageView
    android:id="@+id/button_more_columns"
    android:layout_width="40.0dip"
    android:layout_height="40.0dip"
    android:layout_gravity="center_vertical"
    android:src="@drawable/channel_glide_day_bg" />
  </LinearLayout>
 </LinearLayout> 

 <View
  android:id="@+id/category_line"
  android:layout_width="fill_parent"
  android:layout_height="0.5dip"
  android:background="#ffdddddd" /> 

 <android.support.v4.view.ViewPager
  android:id="@+id/mViewPager"
  android:layout_width="match_parent"
  android:layout_height="match_parent" /> 

</LinearLayout>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索ios 顶部标签式导航栏、顶部tab切换导航栏、app顶部标签切换、微信小程序顶部导航栏、android顶部导航栏，以便于您获取更多的相关知识。

时间： 2024-12-21 21:20:13

Android仿新闻顶部导航标签切换效果_Android的相关文章

Android仿新闻顶部导航标签切换效果

最近由于个人兴趣原因,写了个模仿新闻顶部导航标签的demo.具体看下图. 那么大致上我们会用到这些知识. 1.Fragment 2.FragmentPagerAdapter 3.HorizontalScrollView 4.PopupWindow ok,那么首先进入第一步. 为了实现顶部的标签,我们要用到HorizontalScrollView,因为原有的HorizontalScrollView控件已经不能满足我们的使用了.所以这里就自定义一个HorizontalScrollView impor

jquery实现的仿天猫侧导航tab切换效果_jquery

本文实例讲述了jquery实现的仿天猫侧导航tab切换效果.分享给大家供大家参考.具体如下: 这里演示jquery实现仿天猫侧导航tab切换效果,引入外部JS,若初次运行有错误请刷新一页面即可.本菜单是仿天猫商城的菜单,大块的div菜单,支持超多的产品分类,大网站风格,大气实用的多分类网页菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ftmail-nav-tab-cha-codes/ 具体代码如下: <!DOCTYPE h

Android仿京东首页轮播文字效果_Android

京东客户端的轮播文字效果: 本次要实现的只是后面滚动的文字(前面的用ImageView或者TextView实现即可),看一下实现的效果 实现思路 上图只是一个大概的思路,要实现还需要完善更多的细节,下面会一步步的来实现这个效果: 1.封装数据源:从图上可以看到,轮播的文字是分为两个部分的,暂且把它们分别叫做前缀和内容,而且实际的使用过程中点击轮播图肯定是需要跳转页面的,而且大部分应该是WebView,不妨我们就设置点击时候需要获取的内容就是一个链接,那么数据源的结构就很明了了 创建ADEnity

Android仿微信对话列表滑动删除效果_Android

微信对话列表滑动删除效果很不错的,借鉴了github上SwipeListView(项目地址:https://github.com/likebamboo/SwipeListView),在其上进行了一些重构,最终实现了微信对话列表滑动删除效果. 实现原理 1.通过ListView的pointToPosition(int x, int y)来获取按下的position,然后通过android.view.ViewGroup.getChildAt(position)来得到滑动对象swipeView  2.

Android仿支付宝支付从底部弹窗效果_Android

我们再用支付宝支付的时候,会从底部弹上来一个对话框,让我们选择支付方式等等,今天我们就来慢慢实现这个功能 效果图 实现 主界面很简单,就是一个按钮,点击后跳到支付详情的Fragment中 package com.example.hfs.alipayuidemo; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.wi

Android仿今日头条APP实现下拉导航选择菜单效果_Android

本文实例为大家分享了在Android中如何实现下拉导航选择菜单效果的全过程,供大家参考,具体内容如下 关于下拉导航选择菜单效果在新闻客户端中用的比较多,当然也可以用在其他的项目中,这样可以很方便的选择更多的菜单.我们可以让我们的应用顶部有左右滑动或进行切换的导航菜单,也可以为了增强用户体验在应用中添加这样的下拉导航选择菜单效果. 关于它的实现原理,其实也是挺简单的,就是使用PopupWindow来进行展现,在显示时控制其高度并配置以相应的动画效果.在PopupWindow中我使用GridView

Android实现下拉导航选择菜单效果

本文介绍在Android中如何实现下拉导航选择菜单效果.   关于下拉导航选择菜单效果在新闻客户端中用的比较多,当然也可以用在其他的项目中,这样可以很方便的选择更多的菜单.我们可以让我们的应用顶部有左右滑动或进行切换的导航菜单,也可以为了增强用户体验在应用中添加这样的下拉导航选择菜单效果. 关于它的实现原理,其实也是挺简单的,就是使用PopupWindow来进行展现,在显示时控制其高度并配置以相应的动画效果.在PopupWindow中我使用GridView来控制里面的菜单项,每个菜单项对应相应的

基于Bootstrap实现tab标签切换效果_javascript技巧

本文实例为大家分享了Bootstrap实现tab标签切换效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script

ViewPager顶部导航栏联动效果(标题栏条目多)_Android

如果标题栏过多,超过屏幕的宽度,该怎么弄,下面我们就来解决一下,效果如下: 其实和之前写的也差不多,我就是在哪个demo里面添加和修改了一下,就加了几个title标题,加了几个图片,最重要的是给TableLayout添加了一个属性: app:tabMode="scrollable" 这个属性就是设置设置TableLayout可以滚动,看我滚动上面的标题栏: 这里我还给标题栏设置了几个附加的属性,让它显得更好看: <span style="white-space:pre&