Android TabLayout 實(shí)現(xiàn)底部Tab的示例代碼

更新時(shí)間：2018年01月23日 11:48:45 作者：人言落日是天涯

本篇文章主要介紹了Android TabLayout 實(shí)現(xiàn)底部Tab的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

前言

底部Tab已經(jīng)是一個(gè)應(yīng)用的標(biāo)配了，因?yàn)槭謾C(jī)屏幕大小的限制，使得我們必須去最大化的利用可見的空間。當(dāng)然底部Tab一般為3個(gè)左右，最多不會超過5個(gè)。

效果圖

下面是我使用TabLayout來實(shí)現(xiàn)的底部Tab，

實(shí)現(xiàn)方式也很簡單，因?yàn)檫@里沒有“小滑塊”。只需要去處理，Tab的滑動和點(diǎn)擊即可。

代碼：

public class CustomBotTabItem {

  private TabLayout mTabLayout;
  private ViewPager mViewPager;
  private Context mContext;
  //底部Tab標(biāo)題
  private final String[] mTitles = {"主頁", "理財(cái)", "添加", "消息", "我的"};
  //返回CustomBotTabItem實(shí)例
  public static CustomBotTabItem create() {
    return TabItemHolder.sCustomTabItem;
  }
  //創(chuàng)建CustomBotTabItem實(shí)例
  private static class TabItemHolder {
    private static CustomBotTabItem sCustomTabItem = new CustomBotTabItem();
  }
  //引入布局需要的Context
  public CustomBotTabItem setContext(Context context) {
    mContext = context;
    return this;
  }
  //需要自定義的TabLayout
  public CustomBotTabItem setTabLayout(TabLayout tabLayout) {
    mTabLayout = tabLayout;
    return this;
  }
  //設(shè)置與TabLayout關(guān)聯(lián)的ViewPager
  public CustomBotTabItem setViewPager(ViewPager viewPager) {
    mViewPager = viewPager;
    return this;
  }
  //創(chuàng)建Tab
  public CustomBotTabItem build() {
    initTabLayout();
    return this;
  }
  //初始化Tab
  private void initTabLayout() {
    mTabLayout.setupWithViewPager(mViewPager);
    //第二個(gè)參數(shù)為selector，下同
    mTabLayout.getTabAt(0).setCustomView(getTabView(0, R.drawable.home_icon_selector));
    mTabLayout.getTabAt(1).setCustomView(getTabView(1, R.drawable.manage_icon_selector));
    mTabLayout.getTabAt(2).setCustomView(getTabView(2, R.drawable.add_icon_selector));
    mTabLayout.getTabAt(3).setCustomView(getTabView(3, R.drawable.find_icon_selector));
    mTabLayout.getTabAt(4).setCustomView(getTabView(4, R.drawable.money_icon_selector));
    tabSelectListener();
  }
   //自定義Tab樣式
  private View getTabView(final int position, int resId) {
    final View view = LayoutInflater.from(mContext).inflate(R.layout.bottom_tab_item, null);
    TextView tvTitle = (TextView) view.findViewById(R.id.id_tv_title);
    final ImageView ivTitle = (ImageView) view.findViewById(R.id.id_iv_title);
    ivTitle.setImageResource(resId);
    tvTitle.setText(mTitles[position]);
    //默認(rèn)第一個(gè)tab選中，設(shè)置字體為選中色
    if (position == 0) {
      tvTitle.setTextColor(Color.parseColor("#4192e3"));
    } else {
      tvTitle.setTextColor(Color.parseColor("#262a3b"));
    }
    //點(diǎn)擊Tab切換
    view.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        mViewPager.setCurrentItem(position);
      }
    });
    return view;
  }
  //Tab監(jiān)聽
  private void tabSelectListener() {
    mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
      @Override
      public void onTabSelected(TabLayout.Tab tab) {
        changeTabStatus(tab, true);
      }

      @Override
      public void onTabUnselected(TabLayout.Tab tab) {
        changeTabStatus(tab, false);
      }

      @Override
      public void onTabReselected(TabLayout.Tab tab) {

      }
    });
  }
  //切換Tab文字是否選中的的顏色
  private void changeTabStatus(TabLayout.Tab tab, boolean selected) {
    View view = tab.getCustomView();
    if (view == null) {
      return;
    }
    TextView tvTitle = (TextView) view.findViewById(R.id.id_tv_title);
    if (selected) {
      tvTitle.setTextColor(Color.parseColor("#4192e3"));
    } else {
      tvTitle.setTextColor(Color.parseColor("#262a3b"));
    }
  }
}

Activity 代碼：

public class BottomTabLayoutActivity extends AppCompatActivity {
  private TabLayout mTabLayout;
  private ViewPager mViewPager;
  private List<Fragment> mFragmentList;

  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_bot_tab_layout);
    findView();
    initFragmentList();
    setVpAdapter();
    CustomBotTabItem item = CustomBotTabItem.create();
    item.setContext(this)
        .setViewPager(mViewPager)
        .setTabLayout(mTabLayout)
        .build();
  }
  //findViewById
  private void findView() {
    mTabLayout = (TabLayout) findViewById(R.id.id_tab_layout);
    mViewPager = (ViewPager) findViewById(R.id.id_vp);
  }
  //初始化需要的Fragment
  private void initFragmentList() {
    mFragmentList = new ArrayList<>();
    mFragmentList.add(TabFragment.getInstance("主頁"));
    mFragmentList.add(TabFragment.getInstance("理財(cái)"));
    mFragmentList.add(TabFragment.getInstance("添加"));
    mFragmentList.add(TabFragment.getInstance("消息"));
    mFragmentList.add(TabFragment.getInstance("我的"));
  }
  //設(shè)置ViewPager的Adapter
  private void setVpAdapter() {
    mViewPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(), mFragmentList, this));
  }
}

Activity.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

  <android.support.design.widget.TabLayout
    android:id="@+id/id_tab_layout"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:layout_alignParentBottom="true"
    android:background="#fff"
    android:fillViewport="false"
    app:layout_scrollFlags="scroll"
    app:tabIndicatorHeight="0dp"
    app:tabMode="fixed"
    >
  </android.support.design.widget.TabLayout>

  <android.support.v4.view.ViewPager
    android:id="@+id/id_vp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/id_tab_layout"
    />
</RelativeLayout>

好了，具體思路、代碼就這么多了，其它需要的文件都比較簡單，自己添加一下吧。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: