你的位置:首页 > 操作系统

[操作系统]PagerTabStrip及自定义的PagerTab


如图是效果图

    

开发中经常会用到上面是一个Tab下面是一个ViewPager(ViewPager再包含几个Fragment),当点击Tab或是滑动ViewPager,Tab及ViewPager都会发生对应的变化

如图我实现的上面一个Tab是自己定义的布局让其继承HorizontalScrollView,下面一个使用系统PagerTabStrip很简单,

当然引用别人的框架Android-ViewPagerIndicator(https://github.com/JakeWharton/ViewPagerIndicator)实现更简单

如下是主要代码

package com.it.hello.activity.assets;import java.util.ArrayList;import com.it.hello.R;import com.it.hello.activity.entity.ChannelItem;import com.it.hello.activity.fragment.FourFragment;import com.it.hello.activity.fragment.MThreeFragment;import com.it.hello.activity.fragment.OneFragment;import com.it.hello.activity.myfragment.MyFragmentOne;import com.it.hello.activity.myfragment.MyFragmentTwo;import com.it.hello.activity.util.DensityUtils;import com.it.hello.activity.widget.ColumnHorizontalScrollView;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentStatePagerAdapter;import android.support.v4.view.PagerTabStrip;import android.support.v4.view.ViewPager;import android.util.SparseArray;import android.view.View;import android.widget.LinearLayout;import android.widget.RelativeLayout;import android.widget.TextView;import android.widget.RelativeLayout.LayoutParams;/** * PagerTabStrip实现ViewPager的滑动 * @author zh * */public class MyStripActivity extends FragmentActivity {  private ViewPager mViewPager;  private PagerTabStrip pager_tab_strip;  /** 自定义的HorizontalScrollView */  private ColumnHorizontalScrollView mColumnHorizontalScrollView;  private LinearLayout mRadioGroup_content;  /** 用户选择的分类列表 */  private ArrayList<ChannelItem> userChannelItems = new ArrayList<ChannelItem>();  /** 当前选中的栏目 */  private int columnSelectIndex = 0;  /** 屏幕的宽度 */  private int mScreeWidth = 0;  /** Item宽度 */  private int mItemWidth = 0;  private View view;  @Override  protected void onCreate(Bundle arg0) {    // TODO Auto-generated method stub    super.onCreate(arg0);    setContentView(R.layout.activity_strip);    mScreeWidth = DensityUtils.getWindowsWidth(this);    mItemWidth = mScreeWidth / 3; // 一个Item宽度为屏幕的3分之一    mViewPager = (ViewPager) findViewById(R.id.vp);    pager_tab_strip = (PagerTabStrip) findViewById(R.id.pager_tab_strip);    // 设置标签下划线的颜色    mColumnHorizontalScrollView = (ColumnHorizontalScrollView) findViewById(R.id.mColumnHorizontal);    mRadioGroup_content = (LinearLayout) findViewById(R.id.mRadioGroup);        initColumData();    //取消Tab 下面的长横线    pager_tab_strip.setDrawFullUnderline(false);    //改变Tab线的颜色    pager_tab_strip.setTabIndicatorColor(getResources().getColor(        R.color.indecolor));    mViewPager.setOffscreenPageLimit(3);    mViewPager.setAdapter(new MainAdapter(getSupportFragmentManager()));  }  private void initColumData() {    // TODO Auto-generated method stub    userChannelItems = new ArrayList<ChannelItem>();    ChannelItem item = new ChannelItem(0, "标签0", 0, 0);    ChannelItem item1 = new ChannelItem(0, "标签1", 0, 0);    ChannelItem item2 = new ChannelItem(0, "标签2", 0, 0);    ChannelItem item3 = new ChannelItem(0, "标签3", 0, 0);    ChannelItem item4 = new ChannelItem(0, "标签4", 0, 0);    userChannelItems.add(item);    userChannelItems.add(item1);    userChannelItems.add(item2);    userChannelItems.add(item3);    userChannelItems.add(item4);    initTabColumn();    /**     * ViewPager切换监听的方法     */    mViewPager        .setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {          @Override          public void onPageSelected(int position) {            // TODO Auto-generated method stub            mViewPager.setCurrentItem(position);            selectTab(position);            initColumData();          }        });  }  /**   * 初始化TabColumn栏目项   */  private void initTabColumn() {    // TODO Auto-generated method stub    mRadioGroup_content.removeAllViews();    int count = userChannelItems.size();    mColumnHorizontalScrollView.setParam(this, mScreeWidth,        mRadioGroup_content);    for (int i = 0; i < count; i++) {      RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(          mItemWidth, LayoutParams.WRAP_CONTENT);      params.leftMargin = 5;      params.rightMargin = 5;      view = View.inflate(this, R.layout.item_mytab, null);      TextView tv = (TextView) view.findViewById(R.id.tab_title);      View line = (View) view.findViewById(R.id.tab_line);      tv.setId(i);      tv.setText(userChannelItems.get(i).getName());      if (columnSelectIndex == i) {        tv.setSelected(true);        line.setSelected(true);      }      view.setOnClickListener(new View.OnClickListener() {        @Override        public void onClick(View arg0) {          // TODO Auto-generated method stub          for (int i = 0; i < mRadioGroup_content.getChildCount(); i++) {            View localView = mRadioGroup_content.getChildAt(i);            if (localView != arg0) {              localView.setSelected(false);            } else {              localView.setSelected(true);              mViewPager.setCurrentItem(i);            }          }        }      });      mRadioGroup_content.addView(view, i, params);    }  }  /**   * 选择的Column里面的Tab   * */  private void selectTab(int tab_postion) {    columnSelectIndex = 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 - mScreeWidth / 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);    }  }    /**   * ViewPager的适配器   * @author zh   *   */  private class MainAdapter extends FragmentStatePagerAdapter {    public MainAdapter(FragmentManager fm) {      super(fm);      // TODO Auto-generated constructor stub    }    // 每个条目返回的Fragment    @Override    public Fragment getItem(int position) {      // TODO Auto-generated method stub      return createFragment(position);    }    // 一共多少个条目    @Override    public int getCount() {      // TODO Auto-generated method stub      return 5;    }    // 返回每个条目的标题    @Override    public CharSequence getPageTitle(int position) {      return "标签" + position;    }  }  //private static Map<Integer, Fragment> mFragmentMap = new HashMap<Integer, Fragment>();  private static SparseArray<Fragment> mFragmentMap = new SparseArray<Fragment>();  public Fragment createFragment(int position) {    // TODO Auto-generated method stub    Fragment fragment = null;    fragment = mFragmentMap.get(position);//在集合中去除Fragment    if(fragment == null){//如果没在集合中取出来 需要重新创建            if (position == 0) {        fragment = new MyFragmentOne();      } else if (position == 1) {        fragment = new MyFragmentTwo();      } else if (position == 3) {        fragment = new MThreeFragment();      } else if (position == 4) {        fragment = new FourFragment();      } else {        fragment = new OneFragment();      }      if(fragment != null){        mFragmentMap.put(position, fragment);//把创建好的Fragment存放到集合中缓存起来      }    }    return fragment;  }}

布局代码

<?  android:layout_width="match_parent"  android:layout_height="match_parent"  android:orientation="vertical" >  <com.it.hello.activity.widget.ColumnHorizontalScrollView    android:id="@+id/mColumnHorizontal"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:scrollbars="none" >    <LinearLayout      android:id="@+id/mRadioGroup"      android:layout_width="match_parent"      android:layout_height="wrap_content"      android:background="#333"      android:gravity="center_vertical"      android:orientation="horizontal" />  </com.it.hello.activity.widget.ColumnHorizontalScrollView>  <android.support.v4.view.ViewPager    android:id="@+id/vp"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <android.support.v4.view.PagerTabStrip      android:id="@+id/pager_tab_strip"      android:layout_width="match_parent"      android:layout_height="wrap_content"      android:layout_gravity="top"      android:background="#ffffff"      android:paddingBottom="4dp"      android:paddingTop="4dp"      android:textColor="#000" />  </android.support.v4.view.ViewPager></LinearLayout>

自定义的ColumnHorizontalScrollView

package com.it.hello.activity.widget;import android.app.Activity;import android.content.Context;import android.util.AttributeSet;import android.view.View;import android.widget.HorizontalScrollView;public class ColumnHorizontalScrollView extends HorizontalScrollView {  /** 传入整体布局 */  private View ll_content;  /** 传入拖动栏布 */  // private View rl_column;  /** 屏幕宽度 */  private int mScreenWitdh = 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);  }  /**   * 在拖动的时   * */  // @Override  // protected void onScrollChanged(int paramInt1, int paramInt2, int  // paramInt3, int paramInt4) {  // super.onScrollChanged(paramInt1, paramInt2, paramInt3, paramInt4);  // //shade_ShowOrHide();  // if(!activity.isFinishing() && ll_content !=null){  // }else{  // return;  // }  // if(paramInt1 ==0){  // return;  // }  // if(ll_content.getWidth() - paramInt1 + rl_column.getLeft() ==  // mScreenWitdh){  // return;  // }  // }  /**   * 传入父类布局中的资源文件   * */  public void setParam(Activity activity, int mScreenWitdh, View paramView1) {    this.activity = activity;    this.mScreenWitdh = mScreenWitdh;    this.ll_content = paramView1;  }  /**   * 判断左右阴影的显示隐藏效   * */  public void shade_ShowOrHide() {    if (!activity.isFinishing() && ll_content != null) {      measure(0, 0);      // 如果整体宽度小于屏幕宽度的话,那左右阴影都隐藏      if (mScreenWitdh >= 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() - mScreenWitdh) {      // leftImage.setVisibility(View.VISIBLE);      // rightImage.setVisibility(View.GONE);      return;    }    // 否则,说明在中间位置,左、右阴影都显示    // leftImage.setVisibility(View.VISIBLE);    // rightImage.setVisibility(View.VISIBLE);  }}

/**获取屏幕的宽*/  public final static int getWindowsWidth(Activity activity) {    DisplayMetrics dm = new DisplayMetrics();    activity.getWindowManager().getDefaultDisplay().getMetrics(dm);    return dm.widthPixels;  }