android使用Tab效果滑動

android使用Tab效果滑動

使用SlidingTabLayout

這是android L最新的使用tab的效果，Google Play的應(yīng)用
教程：Google Play Style Tabs using SlidingTabLayout，挺詳細的教程
通過這篇：SlidingTabLayout的使用--替代ActionBar的Tab導(dǎo)航，可以知道

  • 樣式：直接在xml上的SlidingTabLayout上改，他是繼承HorizontalScrollView的，可以通過background來設(shè)置顏色
  • 加入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點擊的效果，發(fā)現(xiàn)slidingTabLayout的createDefaultTabView方法，是根據(jù)設(shè)定的Theme來進行改變的。
  • 如何使用在Fragment中的靜態(tài)方法newInstance傳遞數(shù)據(jù)呢
    思路：通過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加載不同數(shù)據(jù)，進行不同的顯示。通過別人的案例，可以知道需要對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會調(diào)用 setAllCaps(true)，會取消所有的 ImageSpan 的效果。所以需要自定義TabView。

接著：
在 tab.setViewPager(pager) 之前調(diào)用 tab.setCustomTabView(R.layout.custom_tab,0) 設(shè)置自定義TabView。

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

如果要每個TabView都平分屏幕寬度，只需在自定義的TextView 上加上權(quán)重屬性即可;

android:layout_weight="1"

通過以上方式，是實現(xiàn)了顯示圖標，但是selector的效果完全沒有了，那么如何解決？

參考：ADeveloper: Add Icons to SlidingTabLayout instead of Text的答案5.
和這個Add Icons to SlidingTabLayout instead of Text，只有三個贊成的答案，得到啟發(fā)。

第一種解決方式：

按照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];
}
//下面這個方法，是為了不讓字體消失出來
@Override
public 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;
}

第二步：
那么相應(yīng)的加載SlidingTabLayout的Activity/fragment就不需要這句

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

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

private void populateTabStrip() {
    //強制轉(zhuǎn)換成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加載資源的方式，參數(shù)為（左，上，右，下）
        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);
        }
    }
}

通過上面的配置會發(fā)現(xiàn)，圖標的selector效果有了，但是畢竟是TextView,雖然沒有字體，但還是會繼續(xù)占位置，效果依然不理想。所以...

第二種解決方式：直接將TextView改成ImageView便可以。

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

public class ClubMemberManagerAdapter extends FragmentPagerAdapter {
public int getDrawableId(int position){
    //Here is only example for getting tab drawables
    return imageResId[position];//圖標資源
}
@Override
public CharSequence getPageTitle(int position) {
    return tabTitles[position];//使用imageview,這個只是一個擺設(shè)而已
}
}

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

private void populateTabStrip() {
   //強制轉(zhuǎn)換成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是怎么實現(xiàn)的呢

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);//使用系統(tǒng)的主題
    imageView.setBackgroundResource(outValue.resourceId);

    int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);
    imageView.setPadding(padding, padding, padding, padding);

    return imageView;
}

改成這種imageview后，感覺已經(jīng)將SlidingTabLayout改成了自能加載ImageView的類了。

用另一種的實現(xiàn)

Sliding Tabs with PagerSlidingTabStrip

Fragment上使用Tab

參考：ActionBar Tabs with Fragments

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容