怎么在Android中使用TabLayout 實(shí)現(xiàn)一個(gè)底部Tab

本篇文章為大家展示了怎么在Android中使用TabLayout 實(shí)現(xiàn)一個(gè)底部Tab，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

代碼：

public class CustomBotTabItem {

  private TabLayout mTabLayout;
  private ViewPager mViewPager;
  private Context mContext;
  //底部Tab標(biāo)題
  private final String[] mTitles = {"主頁(yè)", "理財(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)聽(tīng)
  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("主頁(yè)"));
    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)容就是怎么在Android中使用TabLayout 實(shí)現(xiàn)一個(gè)底部Tab，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。