當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

底部导航栏的几种实现方式

發布時間：2025/3/21 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了底部导航栏的几种实现方式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

概述

Android底部導航欄實現方式真的是太多了~在這里僅介紹幾種實現方式~建議使用TabLayout +ViewPager ，TabLayout是Android Material Design中的控件，布局文件簡單。

LinearLayout + TextView方式

效果圖

分析

根據效果圖，我們可以看出在選中的時候，文字圖片和背景都會發生改變，我們可以通過是否selected來判斷。
首先來說下圖片：
我們準備了如下的圖片

分別是選中和未選中兩種狀態的圖片。

要處理這些不同狀態下展示什么的問題，就要用selector來實現了。

selector標簽，可以添加一個或多個item子標簽，而相應的狀態是在item標簽中定義的。定義的xml文件可以作為兩種資源使用：drawable和color。更多詳細的細節請參考Android樣式的開發:selector篇

android:state_selected: 設置是否選中狀態，true表示已選中，false表示未選中。

我們在這里使用的是圖片，選中時為黃色的圖標，未選中時為灰色的圖標，如下所示。

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/tab_better_pressed" android:state_selected="true"/><item android:drawable="@drawable/tab_better_normal"/> </selector>

因為我們的思路是圖片在文字的上方
所以在TextView的xml屬性中設置

android:drawableTop="@drawable/tab_menu_channel"

即可。

其余的幾個同上，在這里就不一一列舉了。

接著說下文字的處理：

選中的時候為黃色，未選中灰色

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:color="@color/text_yellow" android:state_selected="true"/><item android:color="@color/text_gray"/></selector>

然后在TextView的xml屬性中設置

android:textColor="@drawable/tab_menu_text"

最后說下背景的處理：

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_selected="true"><shape><solid android:color="#FFC4C4C4" /></shape></item><item><shape><solid android:color="@color/transparent" /></shape></item></selector>

然后在TextView的xml屬性中設置

android:background="@drawable/tab_menu_bg"

綜上所述，布局文件中TextView的屬性如下：

<TextViewandroid:id="@+id/txt_channel"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:background="@drawable/tab_menu_bg"android:drawablePadding="3dp"android:drawableTop="@drawable/tab_menu_channel"android:gravity="center"android:padding="5dp"android:text="@string/tab_menu_alert"android:textColor="@drawable/tab_menu_text"android:textSize="16sp" />

也可以將公共的屬性，提取到style中，然后設置給TextView。

主Activity中要思考的問題：

1)Fragment什么時候初始化和add到容器中？
2)Fragment什么時候hide和show？
3)如何讓TextView被選中？選中一個TextView后，要做一些什么操作？
4)剛進入MainActivity怎么樣讓一個TextView處于Selected的狀態？

1)+2)我們選中TextView后對對應的Fragment進行判空，如果為空，初始化，并添加到容器中；而hide的話，我們定義一個方法hide所有的Fragment，每次觸發點擊事件就先調用這個hideAll方法，講所有Fragment隱藏起來，然后如果TextView對應的Fragment不為空，我們就將這個Fragment顯示出來；

3)這個我們通過點擊事件來實現，點擊TextView后先重置所有TextView的選中狀態為false，然后設置點擊的 TextView的選中狀態為true；
4)我們是通過點擊事件來設置選中的，那么在onCreate()方法里加個觸發點擊事件的方法模擬點擊就可以了~ txt_channel.performClick();

Code

BottomNvgWithTextView.java

package com.turing.base.activity.fragment.fragmentPractice1;import android.os.Bundle; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.FrameLayout; import android.widget.TextView;import com.turing.base.R;public class BottomNvgWithTextView extends AppCompatActivity implements View.OnClickListener {//UI Objectprivate TextView txt_topbar;private TextView txt_channel;private TextView txt_message;private TextView txt_better;private TextView txt_setting;private FrameLayout ly_content;//Fragment Objectprivate Fragment_btm_nvg_tv_context fg1, fg2, fg3, fg4;private FragmentManager fManager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_fragment__bottom_nvg_with_text_view);fManager = getSupportFragmentManager();bindViews();//模擬一次點擊，既進去后選擇第一項txt_channel.performClick();}/*** UI組件初始化與事件綁定*/private void bindViews() {txt_topbar = (TextView) findViewById(R.id.txt_topbar);txt_channel = (TextView) findViewById(R.id.txt_channel);txt_message = (TextView) findViewById(R.id.txt_message);txt_better = (TextView) findViewById(R.id.txt_better);txt_setting = (TextView) findViewById(R.id.txt_setting);ly_content = (FrameLayout) findViewById(R.id.ly_content);txt_channel.setOnClickListener(this);txt_message.setOnClickListener(this);txt_better.setOnClickListener(this);txt_setting.setOnClickListener(this);}/*** 重置所有文本的選中狀態*/private void setSelected() {txt_channel.setSelected(false);txt_message.setSelected(false);txt_better.setSelected(false);txt_setting.setSelected(false);}/*** 隱藏所有Fragment*/private void hideAllFragment(FragmentTransaction fragmentTransaction) {if (fg1 != null) fragmentTransaction.hide(fg1);if (fg2 != null) fragmentTransaction.hide(fg2);if (fg3 != null) fragmentTransaction.hide(fg3);if (fg4 != null) fragmentTransaction.hide(fg4);}@Overridepublic void onClick(View v) {FragmentTransaction fTransaction = fManager.beginTransaction();hideAllFragment(fTransaction);switch (v.getId()) {case R.id.txt_channel:setSelected();txt_channel.setSelected(true);if (fg1 == null) {fg1 = new Fragment_btm_nvg_tv_context("第一個Fragment");fTransaction.add(R.id.ly_content, fg1);} else {fTransaction.show(fg1);}break;case R.id.txt_message:setSelected();txt_message.setSelected(true);if (fg2 == null) {fg2 = new Fragment_btm_nvg_tv_context("第二個Fragment");fTransaction.add(R.id.ly_content, fg2);} else {fTransaction.show(fg2);}break;case R.id.txt_better:setSelected();txt_better.setSelected(true);if (fg3 == null) {fg3 = new Fragment_btm_nvg_tv_context("第三個Fragment");fTransaction.add(R.id.ly_content, fg3);} else {fTransaction.show(fg3);}break;case R.id.txt_setting:setSelected();txt_setting.setSelected(true);if (fg4 == null) {fg4 = new Fragment_btm_nvg_tv_context("第四個Fragment");fTransaction.add(R.id.ly_content, fg4);} else {fTransaction.show(fg4);}break;}fTransaction.commit();} }

activity_fragment__bottom_nvg_with_text_view.xml

首先定義頂部標題欄的樣式，48dp的LinearLayout中間加上一個TextView作為標題！
接著定義一個大小為80dp的LinerLayout對其底部，在這個里面加入四個TextView，比例1:1:1:1，并且設置相關屬性，接著在這個LinearLayout上加一條線段！
最后以標題欄和底部導航欄為邊界，寫一個FrameLayout，寬高match_parent，用做Fragment的容器！
PS：這里四個TextView屬性是重復的，你也可以自行抽取出來，編寫一個style，設置下~

隱藏頂部導航欄

如果繼承的是AppCompatActivity，以前在Activity中調用requestWindowFeature(Window.FEATURE_NO_TITLE);可以隱藏手機自帶頂部導航欄，，即使這句話寫在了setContentView()之前，也會報錯的，我們可以在AndroidManifest.xml設置下theme屬性： NoActionBar

Fragment_btm_nvg_tv_context.java

package com.turing.base.activity.fragment.fragmentPractice1;import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView;import com.turing.base.R;/*** A simple {@link Fragment} subclass.*/ public class Fragment_btm_nvg_tv_context extends Fragment {private String content;/*** 無參構造函數*/public Fragment_btm_nvg_tv_context() {}/*** 帶有參數的構造函數** @param content*/public Fragment_btm_nvg_tv_context(String content) {this.content = content;}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentView view = inflater.inflate(R.layout.fragment_btm_nvg_tv_context, container, false);TextView txt_content = (TextView) view.findViewById(R.id.txt_content);txt_content.setText(content);return view;}}

重寫了一個onCreateView()方法，其他方法可以按需重寫!

fragment_btm_nvg_tv_context.xml

RadioGroup + RadioButton

上個方法使用LinearLayout + TextView實現了底部導航欄的效果，每次點擊我們都要重置所有TextView的狀態，然后選中點擊的TextView，有點麻煩是吧，接下來我們用另一種方法： RadioGroup + RadioButton實現相同的效果

效果圖

分析

簡單來說，一個RadioGroup包著四個RadioButton，和前面的一樣用比例來劃分:1:1:1:1；
另外我們只需重寫RadioGroup的onCheckedChange，判斷checkid即可知道點擊的是哪個RadioButton。

drawable類的資源都是將selected 狀態修改成checked

Code

Step 1：編寫底部選項的一些資源文件

圖片：tab_menu_channel_radiobutton.xml

android:state_checked=”true”

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/tab_channel_pressed" android:state_checked="true"/><item android:drawable="@drawable/tab_channel_normal"/> </selector>

其他三個同上，只需替換對應的圖片資源即可。

文字：tab_menu_text_radiobutton.xml

android:state_checked=”true”

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:color="@color/text_yellow" android:state_checked="true"/><item android:color="@color/text_gray"/></selector>

背景資源：tab_menu_bg_radiobutton.xml

同TextView的

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_checked="true"><shape><solid android:color="#FFC4C4C4" /></shape></item><item><shape><solid android:color="@color/transparent" /></shape></item></selector>

Step 2：主Activity布局

在前面用TextView實現底部導航欄我們就發現了一個問題，每個TextView的屬性都幾乎是差不多的，而在建議那里我們也說讓大家把相同的屬性抽取出來寫到Style中

首先我們取出其中一個RadioGroup的標簽：

<RadioButtonandroid:id="@+id/rb_channel"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:background="@drawable/tab_menu_bg"android:button="@null"android:drawableTop="@drawable/tab_menu_channel"android:gravity="center"android:paddingTop="3dp"android:text="@string/tab_menu_alert"android:textColor="@drawable/tab_menu_text"android:textSize="18sp" />

我們可以把每個RadioButton都相同的屬性抽取出來，寫到style.xml文件中：

然后我們的主布局文件中的RadioButton就用不著每個都編寫相同的代碼了，只需讓RadioButton的style=”@style/tab_menu_item”就可以了！

activity_bottom_nvg_with_radio_button.xml

Step 3：隱藏頂部導航欄同TextView的方式

Step 4：創建一個Fragment的簡單布局與類，直接使用TextView中的~

Step 5: 主布局Activity的編寫

package com.turing.base.activity.fragment.fragmentPractice2;import android.os.Bundle; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentTransaction; import android.support.v7.app.AppCompatActivity; import android.widget.RadioButton; import android.widget.RadioGroup;import com.turing.base.R;/*** 我們使用LinearLayout + TextView實現了底部導航欄的效果，每次點擊我們都要重置所有TextView的狀態，* 然后選中點擊的TextView，有點麻煩是吧，* 接下來我們用另一種方法： RadioGroup + RadioButton來實現同樣的效果*/ public class BottomNvgWithRadioButton extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener{private RadioGroup rg_tab_bar;private RadioButton rb_channel;//Fragment Objectprivate Fragment_btm_nvg_rb_context fg1,fg2,fg3,fg4;private FragmentManager fManager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_bottom_nvg_with_radio_button);fManager = getSupportFragmentManager();rg_tab_bar = (RadioGroup) findViewById(R.id.rg_tab_bar);rg_tab_bar.setOnCheckedChangeListener(this);//獲取第一個單選按鈕，并設置其為選中狀態rb_channel = (RadioButton) findViewById(R.id.rb_channel);rb_channel.setChecked(true);}@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {// FragmentTransaction只能使用一次，// 每次使用都要調用FragmentManager 的beginTransaction()方法獲得FragmentTransaction事務對象FragmentTransaction fTransaction = fManager.beginTransaction();hideAllFragment(fTransaction);switch (checkedId){case R.id.rb_channel:if(fg1 == null){fg1 = new Fragment_btm_nvg_rb_context("第一個Fragment");fTransaction.add(R.id.ly_content,fg1);}else{fTransaction.show(fg1);}break;case R.id.rb_message:if(fg2 == null){fg2 = new Fragment_btm_nvg_rb_context("第二個Fragment");fTransaction.add(R.id.ly_content,fg2);}else{fTransaction.show(fg2);}break;case R.id.rb_better:if(fg3 == null){fg3 = new Fragment_btm_nvg_rb_context("第三個Fragment");fTransaction.add(R.id.ly_content,fg3);}else{fTransaction.show(fg3);}break;case R.id.rb_setting:if(fg4 == null){fg4 = new Fragment_btm_nvg_rb_context("第四個Fragment");fTransaction.add(R.id.ly_content,fg4);}else{fTransaction.show(fg4);}break;}fTransaction.commit();}//隱藏所有Fragmentprivate void hideAllFragment(FragmentTransaction fragmentTransaction){if(fg1 != null)fragmentTransaction.hide(fg1);if(fg2 != null)fragmentTransaction.hide(fg2);if(fg3 != null)fragmentTransaction.hide(fg3);if(fg4 != null)fragmentTransaction.hide(fg4);} }

RadioGroup + RadioButton +ViewPager

效果圖

分析

我們在第二個實例的基礎上(RadioButton方式) 加上ViewPager來實現滑動切換頁面的效果。

ViewPager概念

一個頁面切換的組件，我們可以往里面填充多個View，然后我們可以通過觸摸屏幕左右滑動切換不同的View，和前面學習的ListView一樣，我們需要一個Adapter(適配器)，將要顯示的View和我們的ViewPager進行綁定，而ViewPager有他自己特定的Adapter——PagerAdapter！另外，Google 官方是建議我們使用Fragment來填充ViewPager的,這樣可以更加方便的生成每個Page以及管理每個Page的生命周期!當然它給我們提供了兩個不同的Adapter，他們分別是： FragmentPageAdapter和FragmentStatePagerAdapter！而我們本節用到的則是前者：FragmentPageAdapter！另外要說一點的是ViewPager的緩存機制： ViewPager會緩存當前頁，前一頁，以及后一頁，比如有1，2，3，4這四個頁面：
——>當我們處于第一頁：緩存1，2
——> 處于第二頁：緩存 1，2，3
——> 處于第三頁：緩存2，3，4 ——> 處于第四頁緩存3，4這樣！

使用PagerAdapter要重寫相關方法

getCount( ):獲得viewpager中有多少個view
destroyItem( ):移除一個給定位置的頁面。適配器有責任從容器中刪除這個視圖。這是為了確保在finishUpdate(viewGroup)返回時視圖能夠被移除。
instantiateItem( ):①將給定位置的view添加到ViewGroup(容器)中,創建并顯示出來 ②返回一個代表新增頁面的Object(key),通常都是直接返回view本身就可以了, 當然你也可以自定義自己的key,但是key和每個view要一一對應的關系
isViewFromObject( ):判斷instantiateItem(ViewGroup, int)函數所返回來的Key與一個頁面視圖是否是代表的同一個視圖(即它倆是否是對應的，對應的表示同一個View),通常我們直接寫 return view == object；就可以了,至于為什么要這樣講起來比較復雜,后面有機會進行了解吧貌似是ViewPager中有個存儲view狀態信息的ArrayList,根據View取出對應信息的吧!

PS:不一定要重寫所有方法~

Code

Step 1：相關資源文件的準備：

同方法2

Step 2：編寫主Activity的布局文件：

只是把前面的FrameLayout替換成了：android.support.v4.view.ViewPager而已：

.....<android.support.v4.view.ViewPagerandroid:id="@+id/vpager"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_above="@id/div_tab_bar"android:layout_below="@id/ly_top_bar"></android.support.v4.view.ViewPager>

Step 3：編寫Fragment的布局以及代碼:

Fragment1.java

package com.turing.base.activity.fragment.fragmentPractice4;import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView;import com.apkfuns.logutils.LogUtils; import com.turing.base.R;/*** 為了順便演示ViewPager的機制，* 特意寫成了四個Fragment！在onCreateView中打印創建Log！*/ public class Fragment1 extends Fragment {public Fragment1() {// Required empty public constructor}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentView view = inflater.inflate(R.layout.fragment_fragment1, container, false);TextView txt_content = (TextView) view.findViewById(R.id.txt_content);txt_content.setText("第一個Fragment");LogUtils.e("Fragment1 onCreateView");return view;}}

布局文件

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/bg_white"android:orientation="vertical"><TextView android:id="@+id/txt_content"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="XXX"android:textColor="@color/text_yellow"android:textSize="20sp" /></LinearLayout>

Step 4：自定義FragmentPagerAdapter類：

MyFragmentPagerAdapter.java

package com.turing.base.activity.fragment.fragmentPractice4;import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter;/*** MyApp** @author Mr.Yang on 2016-03-16 22:50.* @version 1.0* @desc*/ public class MyFragmentPagerAdapter extends FragmentPagerAdapter {private final int PAGER_COUNT = 4;private Fragment1 myFragment1 = null;private Fragment2 myFragment2 = null;private Fragment3 myFragment3 = null;private Fragment4 myFragment4 = null;public MyFragmentPagerAdapter(FragmentManager fm) {super(fm);myFragment1 = new Fragment1();myFragment2 = new Fragment2();myFragment3 = new Fragment3();myFragment4 = new Fragment4();}@Overridepublic Fragment getItem(int position) {Fragment fragment = null;switch (position) {case BottomNvgViewPageAct.PAGE_ONE:fragment = myFragment1;break;case BottomNvgViewPageAct.PAGE_TWO:fragment = myFragment2;break;case BottomNvgViewPageAct.PAGE_THREE:fragment = myFragment3;break;case BottomNvgViewPageAct.PAGE_FOUR:fragment = myFragment4;break;}return fragment;}@Overridepublic int getCount() {return PAGER_COUNT;} }

Step 5：BottomNvgViewPageAct的編寫：

package com.turing.base.activity.fragment.fragmentPractice4;import android.os.Bundle; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.widget.RadioButton; import android.widget.RadioGroup; import android.widget.TextView;import com.turing.base.R;public class BottomNvgViewPageAct extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener,ViewPager.OnPageChangeListener {//UI Objectsprivate TextView txt_topbar;private RadioGroup rg_tab_bar;private RadioButton rb_channel;private RadioButton rb_message;private RadioButton rb_better;private RadioButton rb_setting;private ViewPager vpager;private MyFragmentPagerAdapter mAdapter;//幾個代表頁面的常量public static final int PAGE_ONE = 0;public static final int PAGE_TWO = 1;public static final int PAGE_THREE = 2;public static final int PAGE_FOUR = 3;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_bottom_nvg_view_page);mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());bindViews();rb_channel.setChecked(true);}private void bindViews() {txt_topbar = (TextView) findViewById(R.id.txt_topbar);rg_tab_bar = (RadioGroup) findViewById(R.id.rg_tab_bar);rb_channel = (RadioButton) findViewById(R.id.rb_channel);rb_message = (RadioButton) findViewById(R.id.rb_message);rb_better = (RadioButton) findViewById(R.id.rb_better);rb_setting = (RadioButton) findViewById(R.id.rb_setting);rg_tab_bar.setOnCheckedChangeListener(this);vpager = (ViewPager) findViewById(R.id.vpager);vpager.setAdapter(mAdapter);vpager.setCurrentItem(0);vpager.addOnPageChangeListener(this);}@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {switch (checkedId) {case R.id.rb_channel:vpager.setCurrentItem(PAGE_ONE);break;case R.id.rb_message:vpager.setCurrentItem(PAGE_TWO);break;case R.id.rb_better:vpager.setCurrentItem(PAGE_THREE);break;case R.id.rb_setting:vpager.setCurrentItem(PAGE_FOUR);break;}}//重寫ViewPager頁面切換的處理方法@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {}@Overridepublic void onPageScrollStateChanged(int state) {//state的狀態有三個，0表示什么都沒做，1正在滑動，2滑動完畢if (state == 2) {switch (vpager.getCurrentItem()) {case PAGE_ONE:rb_channel.setChecked(true);break;case PAGE_TWO:rb_message.setChecked(true);break;case PAGE_THREE:rb_better.setChecked(true);break;case PAGE_FOUR:rb_setting.setChecked(true);break;}}} }

TabLayout +ViewPager

關于TabLayout的使用，請查看本人博客TabLayout-Android M新控件

效果圖

分析

導航欄顯示的圖片和導航TAB下的橫線顏色，可以在自定義的style中設置tabIndicatorColor來決定，如果要顯示TAB，textAllCaps需要設置為false。如下所示

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout"><item name="tabIndicatorColor">#0000FF</item><item name="tabTextAppearance">@style/MyCustomTextAppearance</item></style><style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab"><item name="textAllCaps">false</item></style>

如果要將TAB放在底部，只需要在主布局文件LinearLayout中將TabLayout放在下面即可
ViewPager 我們引用的是V4包下的，以實現更好地兼容，這樣的話就需要使用getSupportFragmentManager來獲取FragmentManager
TabLayout設置TabMode為TabLayout.MODE_FIXED，防止TAB擠在一起
FragmentPageAdapter子類中，我們的標題是帶有圖片的，因此可以重寫getPageTitle方法，通過SpannableString+ImageSpan來設置

Code

TabLayoutAct.java

package demo.turing.com.materialdesignwidget.tabLayout;import android.os.Bundle; import android.support.design.widget.TabLayout; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity;import demo.turing.com.materialdesignwidget.R;public class TabLayoutAct extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_tab_layout);// Get the ViewPager and set it's PagerAdapter so that it can display itemsViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);viewPager.setAdapter(new SimpleFragmentPagerAdapter(getSupportFragmentManager(), TabLayoutAct.this));// Give the TabLayout the ViewPagerTabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);tabLayout.setupWithViewPager(viewPager);// 設置MODE_FIXED避免TabLayout擠到一塊去tabLayout.setTabMode(TabLayout.MODE_FIXED);} }

activity_tab_layout.xml

style見分析中的第一條

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><android.support.design.widget.TabLayout android:id="@+id/sliding_tabs"android:layout_width="match_parent"android:layout_height="wrap_content"style="@style/MyCustomTabLayout"/><android.support.v4.view.ViewPager android:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="0px"android:layout_weight="1"android:background="@android:color/white" /></LinearLayout>

SimpleFragmentPagerAdapter.java

package demo.turing.com.materialdesignwidget.tabLayout;import android.content.Context; import android.graphics.drawable.Drawable; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.text.Spannable; import android.text.SpannableString; import android.text.style.ImageSpan; import android.util.Log; import android.view.LayoutInflater; import android.view.View;import demo.turing.com.materialdesignwidget.R;/*** MyApp** @author Mr.Yang on 2016-03-08 09:58.* @version 1.0* @desc*/ public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {/*** Add Icons to TabLayout ,在getPageTitle獲取*/private int[] imageResId = {R.drawable.tag_blue,R.drawable.flag_mark_violet,R.drawable.flag_mark_yellow};final int PAGE_COUNT = 3;private String tabTitles[] = new String[]{"TAB_1", "TAB_2", "TAB_3"};private Context context;/*** 構造函數** @param fm* @param context*/public SimpleFragmentPagerAdapter(FragmentManager fm, Context context) {super(fm);this.context = context;}@Overridepublic Fragment getItem(int position) {return PageFragment.newInstance(position + 1);}@Overridepublic int getCount() {return PAGE_COUNT;}@Overridepublic CharSequence getPageTitle(int position) {// Generate title based on item position 設置文字// return tabTitles[position];// 設置圖片 // Drawable image = ContextCompat.getDrawable(context, 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;// 設置文字和圖片// Generate title based on item positionDrawable image = context.getResources().getDrawable(imageResId[position]);image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());// Replace blank spaces with image iconSpannableString sb = new SpannableString(" " + tabTitles[position]);ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);return sb;}/*** 自定義tab* 如果需要每個TAB都需要指定成單獨的布局，switch即可，如果是相同的，寫一個即可* 這里自定義的不是Fragment的布局，不要搞混了，僅僅是TAB的樣式* @param* @return*/public View getTabView(int position) {View view = null;Log.d("getTabView", String.valueOf(position));switch (position) {case 0:// Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageViewview = LayoutInflater.from(context).inflate(R.layout.custom_tab, null); // TextView tv = (TextView) view.findViewById(R.id.textView); // tv.setText(tabTitles[position]); // ImageView img = (ImageView) view.findViewById(R.id.imageView); // img.setImageResource(imageResId[position]);break;case 1:// Given you have a custom layout in `res/layout/custom_tab1.xml` with a TextView and ImageViewview = LayoutInflater.from(context).inflate(R.layout.custom_tab1, null); // TextView tv2 = (TextView) view.findViewById(R.id.textView); // tv2.setText(tabTitles[position]); // ImageView img2 = (ImageView) view.findViewById(R.id.imageView); // img2.setImageResource(imageResId[position]);break;case 2:// Given you have a custom layout in `res/layout/custom_tab2.xml` with a TextView and ImageViewview = LayoutInflater.from(context).inflate(R.layout.custom_tab2, null); // TextView tv3 = (TextView) view.findViewById(R.id.textView); // tv3.setText(tabTitles[position]); // ImageView img3 = (ImageView) view.findViewById(R.id.imageView); // img3.setImageResource(imageResId[position]);break;default:break;}return view;} }

PageFragment.java

package demo.turing.com.materialdesignwidget.tabLayout;import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView;import demo.turing.com.materialdesignwidget.R;/*** MyApp** @author Mr.Yang on 2016-03-08 09:43.* @version 1.0* @desc*/ public class PageFragment extends Fragment {public static final String ARG_PAGE = "ARG_PAGE";private int mPage;public static PageFragment newInstance(int page) {Bundle args = new Bundle();args.putInt(ARG_PAGE, page);PageFragment fragment = new PageFragment();// 傳遞參數fragment.setArguments(args);return fragment;}@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 獲取參數mPage = getArguments().getInt(ARG_PAGE);}@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment_page, container, false);TextView textView = (TextView) view;textView.setText("Fragment~" + mPage);return view;} }

fragment_page.xml

僅作為演示，fragment的布局文件只有一個TextView~

<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="fragment~"/>

總結

以上是生活随笔為你收集整理的底部导航栏的几种实现方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Android零碎知识点-更新中
下一篇： ANDROID ASSET STUDIO

编程问答

底部导航栏的几种实现方式

概述

LinearLayout + TextView方式

效果圖

分析

Code

BottomNvgWithTextView.java

activity_fragment__bottom_nvg_with_text_view.xml

隱藏頂部導航欄

Fragment_btm_nvg_tv_context.java

fragment_btm_nvg_tv_context.xml

RadioGroup + RadioButton

效果圖

分析

Code

Step 1：編寫底部選項的一些資源文件

圖片：tab_menu_channel_radiobutton.xml

文字：tab_menu_text_radiobutton.xml

背景資源：tab_menu_bg_radiobutton.xml

Step 2：主Activity布局

Step 3：隱藏頂部導航欄 同TextView的方式

Step 4：創建一個Fragment的簡單布局與類 ，直接使用TextView中的~

Step 5: 主布局Activity的編寫

RadioGroup + RadioButton +ViewPager

效果圖

分析

ViewPager概念

使用PagerAdapter要重寫相關方法

Code

Step 1：相關資源文件的準備：

Step 2：編寫主Activity的布局文件：

Step 3：編寫Fragment的布局以及代碼:

Step 4：自定義FragmentPagerAdapter類：

Step 5：BottomNvgViewPageAct的編寫：

TabLayout +ViewPager

效果圖

分析

Code

TabLayoutAct.java

activity_tab_layout.xml

SimpleFragmentPagerAdapter.java

PageFragment.java

fragment_page.xml

總結

Step 3：隱藏頂部導航欄同TextView的方式

Step 4：創建一個Fragment的簡單布局與類，直接使用TextView中的~