android使用Tab效果滑动

使用`SlidingTabLayout`

这是android L最新的使用tab的效果，Google Play的应用
教程：Google Play Style Tabs using SlidingTabLayout，挺详细的教程
通过这篇：SlidingTabLayout的使用--替代ActionBar的Tab导航，可以知道

样式：直接在xml上的SlidingTabLayout上改，他是继承HorizontalScrollView的，可以通过background来设置颜色
加入custom_tab.xml的时候，是代表tab使用图标
改tab中的字体颜色，参考这里：Custom selected tab text color in SlidingTabLayout
改下划线的颜色：
第一种方式：

slidingTabLayout.setSelectedIndicatorColors(getResources().getColor(R.color.tab_text_color));

第二种方式

slidingTabLayout.setCustomTabColorizer(new SlidingTabLayout.TabColorizer(){            @Override            public int getIndicatorColor(int position) {                return Color.WHITE;            }        });

想改Tab点击的效果，发现slidingTabLayout的createDefaultTabView方法，是根据设定的Theme来进行改变的。
如何使用在Fragment中的静态方法newInstance传递数据呢
思路：通过Bundle进行传递，在oncreate方法中使用getArguments()方法得到，另一种方式是通过fragment.title的方式来改变成员变量的值

  public  static  final String BG_PAGE="BgManagerFragment";    public  static  final String FRAGMENT_TITLE="tilte";    private int mPage;    private String title;    public BgManagerFragment() {        // Required empty public constructor    }    public static BgManagerFragment newInstance(String title,int page){        Bundle args = new Bundle();        args.putInt(BG_PAGE, page);        args.putString(FRAGMENT_TITLE, title);        BgManagerFragment fragment = new BgManagerFragment();        fragment.setArguments(args);        return fragment;    }    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        mPage=getArguments().getInt(BG_PAGE);//在newInstance方法中通过Bundle进行传递值        title=getArguments().getString(FRAGMENT_TITLE);    }

另一种，只列出newInstance()方法

public static BgManagerFragment newInstance(String title,int page){    BgManagerFragment fragment = new BgManagerFragment();    fragment.title=title;    fragment.mPage=page;    return  fragment;}

如何让不同的fragment加载不同数据，进行不同的显示。通过别人的案例，可以知道需要对adapter和Fragment进行修改

添加图标到`tab`

private int[] imageResId = {        R.drawable.ic_one,        R.drawable.ic_two,        R.drawable.ic_three};  // ...  @Override public CharSequence getPageTitle(int position) {    // Generate title based on item position     // return tabTitles[position];     Drawable image = context.getResources().getDrawable(imageResId[position]);    image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());    SpannableString sb = new SpannableString(" ");    ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);    return sb;}

注意

但是由于SlidingTabLayout自带的TextView会调用 setAllCaps(true)，会取消所有的 ImageSpan 的效果。所以需要自定义TabView。

接着：
在 tab.setViewPager(pager) 之前调用 tab.setCustomTabView(R.layout.custom_tab,0) 设置自定义TabView。

tab.setCustomTabView(R.layout.custom_tab,0);tab.setViewPager(pager);

如果要每个TabView都平分屏幕宽度，只需在自定义的TextView 上加上权重属性即可;

android:layout_weight="1"

通过以上方式，是实现了显示图标，但是`selector`的效果完全没有了，那么如何解决？

参考：ADeveloper: Add Icons to SlidingTabLayout instead of Text的答案5.
和这个Add Icons to SlidingTabLayout instead of Text，只有三个赞成的答案，得到启发。

第一种解决方式：

按照stackoverflow来，就可以解决了
第一步：修改适配器FragmentPagerAdapter

public class ClubMemberManagerAdapter extends FragmentPagerAdapter {private int[] imageResId = {R.drawable.tab_select_home,R.drawable.tab_select_act,R.drawable.tab_select_data};//添加一个获取资源的方法public int getDrawableId(int position){    //Here is only example for getting tab drawables    return imageResId[position];}//下面这个方法，是为了不让字体消失出来@Overridepublic CharSequence getPageTitle(int position) {   Drawable image = context.getResources().getDrawable(imageResId[position]);    image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());    SpannableString sb = new SpannableString(" ");    ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);    return sb;}

第二步：
那么相应的加载SlidingTabLayout的Activity/fragment就不需要这句

//slidingTabLayout.setCustomTabView(R.layout.custom_tab, 0);

第三步：
修改SlidingTabLayout的populateTabStrip()方法

private void populateTabStrip() {    //强制转换成ClubMemberManagerAdapter，为了得到ClubMemberManagerAdapter下的得到资源的方法：getDrawableId    final ClubMemberManagerAdapter adapter = (ClubMemberManagerAdapter)mViewPager.getAdapter();    final OnClickListener tabClickListener = new TabClickListener();    for (int i = 0; i < adapter.getCount(); i++) {        View tabView = null;        TextView tabTitleView = null;        if (mTabViewLayoutId != 0) {            tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,                    false);            tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);        }        if (tabView == null) {            //默认是生成TextView            tabView = createDefaultTabView(getContext());        }        if (tabImageView == null && TextView.class.isInstance(tabView)) {            //这里依然是TextView.class.的判断父系            tabImageView = (ImageView) tabView;        }        if (mDistributeEvenly) {            LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams();            lp.width = 0;            lp.weight = 1;        }                             tabTitleView.setCompoundDrawablesWithIntrinsicBounds(0,adapter.getDrawableId(i), 0, 0);        //上面这句是TexView加载资源的方式，参数为（左，上，右，下）        tabTitleView.setText(adapter.getPageTitle(i));        tabTitleView.setTextColor(Color.WHITE);        tabView.setOnClickListener(tabClickListener);        String desc = mContentDescriptions.get(i, null);        if (desc != null) {            tabView.setContentDescription(desc);        }        mTabStrip.addView(tabView);        if (i == mViewPager.getCurrentItem()) {            tabView.setSelected(true);        }    }}

通过上面的配置会发现，图标的selector效果有了，但是毕竟是TextView,虽然没有字体，但还是会继续占位置，效果依然不理想。所以...

第二种解决方式：直接将`TextView`改成`ImageView`便可以。

第一步：同理，依然需要资源

public class ClubMemberManagerAdapter extends FragmentPagerAdapter {public int getDrawableId(int position){    //Here is only example for getting tab drawables    return imageResId[position];//图标资源}@Overridepublic CharSequence getPageTitle(int position) {    return tabTitles[position];//使用imageview,这个只是一个摆设而已}}

第二步，依然是修改SlidingTabLayout的方法populateTabStrip

private void populateTabStrip() {   //强制转换成ClubMemberManagerAdapter，为了得到ClubMemberManagerAdapter下的得到资源的方法：getDrawableId   final ClubMemberManagerAdapter adapter = (ClubMemberManagerAdapter)mViewPager.getAdapter();   final OnClickListener tabClickListener = new TabClickListener();   for (int i = 0; i < adapter.getCount(); i++) {       View tabView = null;       ImageView tabImageView = null;       if (mTabViewLayoutId != 0) {           // If there is a custom tab view layout id set, try and inflate it           tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,                   false);           tabImageView = (ImageView) tabView.findViewById(mTabViewTextViewId);       }       if (tabView == null) {           //改成ImageView生成方式           tabView = createImageViewTabView(getContext());       }       if (tabImageView == null && ImageView.class.isInstance(tabView)) {           //这里是ImageView.class.的判断父系，因为改成ImageView的生成方式           tabImageView = (ImageView) tabView;       }       if (mDistributeEvenly) {           LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams();           lp.width = 0;           lp.weight = 1;       }       //加载图标资源       tabImageView.setImageResource(adapter.getDrawableId(i));       tabView.setOnClickListener(tabClickListener);       String desc = mContentDescriptions.get(i, null);       if (desc != null) {           tabView.setContentDescription(desc);       }       mTabStrip.addView(tabView);       if (i == mViewPager.getCurrentItem()) {           tabView.setSelected(true);       }   }}

第三步，就是方法createImageViewTabView是怎么实现的呢

protected ImageView createImageViewTabView(Context context){    ImageView imageView = new ImageView(context);    imageView.setLayoutParams(new LinearLayout.LayoutParams(            ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));    TypedValue outValue = new TypedValue();    getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground,            outValue, true);//使用系统的主题    imageView.setBackgroundResource(outValue.resourceId);    int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);    imageView.setPadding(padding, padding, padding, padding);    return imageView;}

改成这种imageview后，感觉已经将SlidingTabLayout改成了自能加载ImageView的类了。

用另一种的实现

Sliding Tabs with PagerSlidingTabStrip

Fragment上使用`Tab`

参考：ActionBar Tabs with Fragments

android使用Tab效果滑动