【移動(dòng)應(yīng)用開發(fā)技術(shù)】怎么在Fragment中使用ViewPager實(shí)現(xiàn)一個(gè)底部導(dǎo)航欄

【移動(dòng)應(yīng)用開發(fā)技術(shù)】怎么在Fragment中使用ViewPager實(shí)現(xiàn)一個(gè)底部導(dǎo)航欄

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

xmlns:android="/apk/res/android"

xmlns:tools="/tools"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@color/theme_color"

android:clipToPadding="true"

android:fitsSystemWindows="true"

>

<include

android:id="@+id/actionbar_activity_main"

layout="@layout/actionbar"

/>

<RelativeLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_below="@id/actionbar_activity_main"

android:background="@color/white"

>

<RadioGroup

android:id="@+id/rg_menu_activity_main"

android:layout_width="fill_parent"

android:layout_height="55dp"

android:layout_alignParentBottom="true"

android:background="@color/theme_color"

android:gravity="center"

android:orientation="horizontal"

android:weightSum="3"

>

<RadioButton

android:id="@+id/rb_main_tab_menu1"

android:checked="true"

android:drawableTop="@drawable/radiobt_main_home"

android:gravity="center"

android:paddingTop="12dp"

android:text="@string/home_text"

android:textColor="@color/white"

/>

<RadioButton

android:id="@+id/rb_main_tab_menu2"

android:checked="false"

android:drawableTop="@drawable/radiobt_main_my"

android:gravity="center"

android:paddingTop="12dp"

android:text="@string/my_text"

android:textColor="@color/white"

/>

<RadioButton

android:id="@+id/rb_main_tab_menu3"

android:checked="false"

android:drawableTop="@drawable/radiobt_main_setting"

android:gravity="center"

android:paddingTop="12dp"

android:text="@string/setting_text"

android:textColor="@color/white"

/>

</RadioGroup>

<android.support.v4.view.ViewPager

android:id="@+id/vp_activity_main"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_above="@id/rg_menu_activity_main"

/>

</RelativeLayout>

</RelativeLayout>這個(gè)布局實(shí)現(xiàn)的效果如下：只看效果，大家覺(jué)得挺好的，但是重要的問(wèn)題來(lái)了。下面的radioButton點(diǎn)了沒(méi)反應(yīng)，我檢查了一下xml文件，再檢查了一下java代碼,沒(méi)有問(wèn)題啊，我開始方了，，，然后網(wǎng)上搜，好像沒(méi)有人遇到這個(gè)問(wèn)題，，檢查好幾遍之后，問(wèn)旁邊的同學(xué)，他說(shuō)既然設(shè)置了監(jiān)聽(tīng)，但是沒(méi)有反應(yīng)，那肯定是有一個(gè)東西把這個(gè)事件消費(fèi)掉了，我想起來(lái)了之前看的事件分發(fā)機(jī)制，，建議大家對(duì)事件分發(fā)機(jī)制不懂的小伙伴趕緊看看，面試和日常寫代碼都要用到，特別是面試，面試官特別喜歡問(wèn)?；貧w正題，大家看我的xml文件，我把viewpager寫在了Radiogroup的下面，并且，layout_height="fill_parent"

這樣我的viewpager就消費(fèi)掉了我的radiobutton的點(diǎn)擊事件，其實(shí)之后我覺(jué)得，是我的邏輯不正確，我應(yīng)該順序的寫下來(lái)，而不是只實(shí)現(xiàn)功能，這樣我看自己的代碼可以看懂，可是給別人可能會(huì)造成誤解。好了，開始說(shuō)一下，實(shí)現(xiàn)底部導(dǎo)航的整個(gè)流程，實(shí)現(xiàn)的界面還如上：（在studio中寫的）actionbar.xml

上面自定義的actionbar

系統(tǒng)自帶的actionbar在java代碼中去掉了代碼功能：

左邊返回鍵

中間顯示的文字右邊的更多鍵

上圖中沒(méi)有顯示出來(lái)，是因?yàn)槲覜](méi)有讓左右的鍵顯示出來(lái)<?xml

version="1.0"

encoding="utf-8"?>

<RelativeLayout

xmlns:android="/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="@dimen/actionBar_height"

android:background="@color/theme_color"

>

<RelativeLayout

android:id="@+id/rl_back_actionbar"

android:layout_width="@dimen/actionBar_back"

android:layout_height="fill_parent"

android:visibility="invisible">

<ImageView

android:layout_width="22dp"

android:layout_height="20dp"

android:layout_centerVertical="true"

android:layout_marginLeft="12dp"

android:background="@drawable/back"

android:contentDescription="@string/app_name"/>

</RelativeLayout>

<TextView

android:id="@+id/tv_title_actionbar"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:text="@string/TimeRobot"

android:textColor="#ffffff"

android:textSize="@dimen/actionBar_title_text_size"

/>

<RelativeLayout

android:id="@+id/rl_more_actionbar"

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:layout_alignParentRight="true"

android:visibility="invisible">

<ImageView

android:layout_width="25dp"

android:layout_height="25dp"

android:layout_centerVertical="true"

android:layout_marginRight="12dp"

android:background="@drawable/more"

android:contentDescription="@string/app_name"/>

</RelativeLayout>

</RelativeLayout>activity_main.xml文件

中間的部分color資源，是我引用的自動(dòng)的，大家可以自己選擇<?xml

version="1.0"

encoding="utf-8"?>

<RelativeLayout

xmlns:android="/apk/res/android"

xmlns:tools="/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/theme_color"

android:clipToPadding="true"

tools:context=".MainActivity">

<!--

引入

actionbar-->

<include

android:id="@+id/actionbar_activity_main"

layout=

"@layout/actionbar"/>

<android.support.v4.view.ViewPager

android:id="@+id/vp_activity_main"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_below="@+id/actionbar_activity_main"

android:layout_alignParentRight="true"

android:layout_alignParentEnd="true"

android:background="@color/white"/>

<RadioGroup

android:id="@+id/rg_main_radioGroup"

android:layout_width="fill_parent"

android:layout_height="58dp"

android:layout_alignParentBottom="true"

android:background="@color/theme_color"

android:gravity="center"

android:orientation="horizontal"

android:weightSum="3">

<RadioButton

android:id="@+id/rb_main_tab_menu1"

android:layout_weight="1"

android:layout_width="0dp"

android:layout_height="fill_parent"

android:checked="true"

android:drawableTop="@drawable/radio_bt_plan"

android:gravity="center"

android:button="@null"

android:paddingTop="8dp"

android:text="@string/home_text"

android:textColor="@color/white"/>

<RadioButton

android:id="@+id/rb_main_tab_menu2"

android:layout_weight="1"

android:layout_width="0dp"

android:layout_height="fill_parent"

android:checked="false"

android:drawableTop="@drawable/radio_bt_time"

android:gravity="center"

android:button="@null"

android:paddingTop="8dp"

android:text="@string/timeGroup"

android:textColor="@color/white"/>

<RadioButton

android:id="@+id/rb_main_tab_menu3"

android:layout_weight="1"

android:layout_width="0dp"

android:layout_height="fill_parent"

android:checked="false"

android:drawableTop="@drawable/radio_bt_my"

android:gravity="center"

android:button="@null"

android:paddingTop="8dp"

android:textColor="@color/white"

android:text="@string/My"/>

</RadioGroup>

</RelativeLayout>注意一下，radiobutton中的一個(gè)屬性是

drawableTop屬性，這個(gè)后面引用的drawable資源是實(shí)現(xiàn)點(diǎn)擊改變r(jià)adiobutton狀態(tài)的布局文件，我給大家貼出來(lái)radio_bt_plan.xml文件的代碼，其他的只要新建，copy代碼，改顯示的圖片即可。還有，對(duì)于初次用studio的伙伴，這里要注意了，new的時(shí)候，drawable>右鍵

>

new>newresourcefile

（即出來(lái)的第一個(gè)）而不是XMLradio_bt_plan.xml<?xml

version="1.0"

encoding="utf-8"?>

<selector

xmlns:android="/apk/res/android">

<item

android:drawable="@drawable/planning_press"

android:state_enabled="true"

android:state_focused="true"

android:state_pressed="false"/>

<item

android:drawable="@drawable/planning_press"

android:state_enabled="true"

android:state_pressed="true"

/>

<item

android:drawable="@drawable/planning_press"

android:state_checked="true"

android:state_enabled="true"

/>

<item

android:drawable="@drawable/planning"/>

</selector>接下來(lái)就是

MainActivity.java文件了public

class

MainActivity

extends

FragmentActivity

{

private

TextView

title_text;

private

ViewPager

vp_main_tab;

private

List<Fragment>

fragmentList

=

null;

private

FragmentPagerAdapter

mAdapter

=

null;

private

MyFragment

myFragment;

private

TimeGroupFragment

timeGroupFragment;

private

PlanningFragment

planningFragment;

private

RadioButton

rb_main_tab_menu1;

private

RadioButton

rb_main_tab_menu2;

private

RadioButton

rb_main_tab_menu3;

private

RadioGroup

rg_main_group;

@Override

protected

void

onCreate(Bundle

savedInstanceState)

{

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

init();

rg_main_group.setOnCheckedChangeListener(new

RadioGroup.OnCheckedChangeListener()

{

@Override

public

void

onCheckedChanged(RadioGroup

group,

int

checkedId)

{

switch

(checkedId)

{

case

R.id.rb_main_tab_menu1:

vp_main_tab.setCurrentItem(0);

initActionbar(0);

break;

case

R.id.rb_main_tab_menu2:

vp_main_tab.setCurrentItem(1);

initActionbar(1);

break;

case

R.id.rb_main_tab_menu3:

vp_main_tab.setCurrentItem(2);

initActionbar(2);

break;

default:

break;

}

}

});

initViewPage();

}

private

void

initActionbar(int

currentPage)

{

switch

(currentPage)

{

case

0:

title_text.setText(getResources().getString(R.string.TimeRobot));

break;

case

1:

title_text.setText(getResources().getString(R.string.timeGroup));

break;

case

2:

title_text.setText(getResources().getString(R.string.My));

break;

default:

break;

}

}

private

void

init()

{

title_text

=

(TextView)

findViewById(R.id.tv_title_actionbar);

vp_main_tab

=

(ViewPager)

findViewById(R.id.vp_activity_main);

fragmentList

=

new

ArrayList<Fragment>();

rg_main_group

=

(RadioGroup)

findViewById(R.id.rg_main_radioGroup);

rb_main_tab_menu1

=

(RadioButton)

findViewById(R.id.rb_main_tab_menu1);

rb_main_tab_menu2

=

(RadioButton)

findViewById(R.id.rb_main_tab_menu2);

rb_main_tab_menu3

=

(RadioButton)

findViewById(R.id.rb_main_tab_menu3);

myFragment

=

new

MyFragment();

timeGroupFragment

=

new

TimeGroupFragment();

planningFragment

=

new

PlanningFragment();

fragmentList.add(myFragment);

fragmentList.add(timeGroupFragment);

fragmentList.add(plannin