Android中怎么使用TabLayout+ViewPager實(shí)現(xiàn)底部導(dǎo)航欄

本篇文章給大家分享的是有關(guān)Android中怎么使用TabLayout+ViewPager實(shí)現(xiàn)底部導(dǎo)航欄，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話(huà)不多說(shuō)，跟著小編一起來(lái)看看吧。

創(chuàng)新互聯(lián)公司是一家專(zhuān)注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃、小程序設(shè)計(jì)、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動(dòng)互聯(lián)開(kāi)發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立十多年以來(lái)，已經(jīng)為數(shù)千家假山制作各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)?，F(xiàn)在，服務(wù)的數(shù)千家客戶(hù)與我們一路同行，見(jiàn)證我們的成長(zhǎng)；未來(lái)，我們一起分享成功的喜悅。

布局

<?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:orientation="vertical">      <include layout="@layout/fragment_content"/>      <LinearLayout         android:layout_width="match_parent"         android:layout_height="match_parent"         android:orientation="vertical">           <android.support.v4.view.ViewPager             android:id="@+id/view_pager"             android:layout_width="match_parent"             android:layout_height="0dp"             android:layout_weight="1"></android.support.v4.view.ViewPager>          <android.support.design.widget.TabLayout             android:id="@+id/tab_layout"             android:layout_width="match_parent"             android:layout_height="56dp"             app:tabBackground="@color/white"             app:tabIndicatorHeight="0dp"             app:tabSelectedTextColor="@color/colorPrimary"             app:tabTextAppearance="@style/tabTextSizeStyle"             app:tabTextColor="@color/black_1"></android.support.design.widget.TabLayout>     </LinearLayout> </RelativeLayout>

代碼

mViewPager = (ViewPager) view.findViewById(R.id.view_pager);         mTabLayout = (TabLayout) view.findViewById(R.id.tab_layout);         initTabList();         mAdapter = new TabLayoutFragmentAdapter(getChildFragmentManager(), mTabList, getActivity(), mFragments, mTabImgs);         mViewPager.setAdapter(mAdapter);         mViewPager.setCurrentItem(0);         mTabLayout.setupWithViewPager(mViewPager);         mTabLayout.setTabMode(TabLayout.MODE_FIXED);//設(shè)置TabLayout的模式         for (int i = 0; i < mTabLayout.getTabCount(); i++) {             mTabLayout.getTabAt(i).setCustomView(mAdapter.getTabView(i));         }         mTabLayout.addOnTabSelectedListener(this);//設(shè)置TabLayout的選中監(jiān)聽(tīng)

這里需要注意的就是TabLayout的使用。TabLayou配合ViewPager使用。要用  mTabLayout.setupWithViewPager(mViewPager);使二者聯(lián)系起來(lái)。另外這里面使用的是customView，當(dāng)然TabLayout自帶方法也可實(shí)現(xiàn)icon+text的效果。也就是效果：TabLayout  + ViewPager 2

根據(jù)Tab選中狀態(tài)顯示Tab鍵效果

@Override    public void onTabSelected(TabLayout.Tab tab) {        setTabSelectedState(tab);    }     @Override    public void onTabUnselected(TabLayout.Tab tab) {        setTabUnSelectedState(tab);    }      @Override    public void onTabReselected(TabLayout.Tab tab) {     }     private void setTabSelectedState(TabLayout.Tab tab) {        View customView = tab.getCustomView();        TextView tabText = (TextView) customView.findViewById(R.id.tv_tab_text);        ImageView tabIcon = (ImageView) customView.findViewById(R.id.iv_tab_icon);        tabText.setTextColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary));        String s = tabText.getText().toString();        if (getString(R.string.item_home).equals(s)) {            tabIcon.setImageResource(R.drawable.home_fill);        } else if (getString(R.string.item_location).equals(s)) {            tabIcon.setImageResource(R.drawable.location_fill);        } else if (getString(R.string.item_like).equals(s)) {            tabIcon.setImageResource(R.drawable.like_fill);        } else if (getString(R.string.item_person).equals(s)) {            tabIcon.setImageResource(R.drawable.person_fill);        }    }     private void setTabUnSelectedState(TabLayout.Tab tab) {        View customView = tab.getCustomView();        TextView tabText = (TextView) customView.findViewById(R.id.tv_tab_text);        ImageView tabIcon = (ImageView) customView.findViewById(R.id.iv_tab_icon);        tabText.setTextColor(ContextCompat.getColor(getActivity(), R.color.black_1));        String s = tabText.getText().toString();        if (getString(R.string.item_home).equals(s)) {            tabIcon.setImageResource(R.drawable.home);        } else if (getString(R.string.item_location).equals(s)) {            tabIcon.setImageResource(R.drawable.location);        } else if (getString(R.string.item_like).equals(s)) {            tabIcon.setImageResource(R.drawable.like);        } else if (getString(R.string.item_person).equals(s)) {            tabIcon.setImageResource(R.drawable.person);        }    }

這里面不用設(shè)置defaultFragment，TabLayout會(huì)默認(rèn)顯示***個(gè);

另外，這里也貼出使用TabLayout自帶方法來(lái)實(shí)現(xiàn)效果代碼

值得說(shuō)的是，自帶方法不能自定義icon和text的間距。用起來(lái)很方便，但是可能不是你要求的那個(gè)尺寸大小。我沒(méi)有去深究這里面的源碼。如果有人知道這個(gè)自帶方法怎么改變的，也請(qǐng)告知一下。

 mViewPager = (ViewPager) view.findViewById(R.id.view_pager);         mTabLayout = (TabLayout) view.findViewById(R.id.tab_layout);         initTabList();         mAdapter = new TabLayoutFragment2Adapter(getChildFragmentManager(), mTabList, getActivity(), mFragments, mTabImgs);         mViewPager.setAdapter(mAdapter);         mViewPager.setCurrentItem(0);         mTabLayout.setupWithViewPager(mViewPager);         mTabLayout.setTabMode(TabLayout.MODE_FIXED); //        for (int i = 0; i < mTabLayout.getTabCount(); i++) { //            mTabLayout.getTabAt(i).setCustomView(mAdapter.getTabView(i)); //        }         mTabLayout.addOnTabSelectedListener(this); //        mViewPager.setCurrentItem(0);         mTabLayout.getTabAt(0).setIcon(R.drawable.home_fill);//自有方法添加icon         mTabLayout.getTabAt(1).setIcon(R.drawable.location);         mTabLayout.getTabAt(2).setIcon(R.drawable.like);         mTabLayout.getTabAt(3).setIcon(R.drawable.person);

Tab切換

@Override     public void onTabSelected(TabLayout.Tab tab) { //        setTabSelectedState(tab);//這個(gè)也無(wú)需使用         resetTabIcon();         int position = tab.getPosition();         Log.e("Kevin", "position--->" + position);         switch (position) {             case 0:                 tab.setIcon(R.drawable.home_fill);                 break;             case 1:                 tab.setIcon(R.drawable.location_fill);                 break;             case 2:                 tab.setIcon(R.drawable.like_fill);                 break;             case 3:                 tab.setIcon(R.drawable.person_fill);                 break;          }     }   private void resetTabIcon() {         mTabLayout.getTabAt(0).setIcon(R.drawable.home);         mTabLayout.getTabAt(1).setIcon(R.drawable.location);         mTabLayout.getTabAt(2).setIcon(R.drawable.like);         mTabLayout.getTabAt(3).setIcon(R.drawable.person);     }

以上就是Android中怎么使用TabLayout+ViewPager實(shí)現(xiàn)底部導(dǎo)航欄，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱(chēng)欄目：Android中怎么使用TabLayout+ViewPager實(shí)現(xiàn)底部導(dǎo)航欄
分享網(wǎng)址：http://bm7419.com/article20/pcicco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站內(nèi)鏈、網(wǎng)站營(yíng)銷(xiāo)、品牌網(wǎng)站設(shè)計(jì)、企業(yè)建站、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)