Android实现顶部+底部双导航界面功能.docx

Android实现顶部+底部双导航界面功能.docx

《Android实现顶部+底部双导航界面功能.docx》由会员分享，可在线阅读，更多相关《Android实现顶部+底部双导航界面功能.docx（21页珍藏版）》请在冰点文库上搜索。

Android实现顶部+底部双导航界面功能

Android-实现顶部+底部双导航界面功能

最近想弄一个双导航功能，查看了许多资料，总算是实现了功能，这边就算是给自己几个笔记吧！

先来看看效果

那么就开始实现了！

底部导航栏我选择用FragmentTabHost+Fragment来实现，这个方法我觉得挺好用的，代码量也不多

首先是开始的activity_main.xml

[java]viewplaincopyprint?

android="

xmlns:

tools="

android:

layout_width="match_parent"

android:

layout_height="match_parent"

tools:

context="${relativePackage}.${activityClass}">

android:

id="@+id/main_view"

android:

layout_width="match_parent"

android:

layout_height="match_parent"

android:

layout_above="@+id/main_tab"

android:

layout_alignParentLeft="true"

android:

layout_alignParentTop="true">

android:

id="@+id/main_tab"

android:

layout_width="match_parent"

android:

layout_height="50dp"

android:

layout_alignParentBottom="true"

android:

layout_alignParentLeft="true"

class="android.support.v4.app.FragmentTabHost"/>

其中我是直接拉的view所以是形成的FragmentTabHost

也可以直接在xml文件里面写

这xml文件就一个view加一个tabview用来显示碎片，tab用来放置底部按钮的数量

再来是tab_foot.xml

[java]viewplaincopyprint?

xmlversion="1.0"encoding="utf-8"?

>

android="

android:

layout_width="match_parent"

android:

layout_height="match_parent"

android:

background="#F6F6F6"

android:

gravity="center"

android:

orientation="vertical">

android:

id="@+id/foot_iv"

android:

layout_width="wrap_content"

android:

layout_height="wrap_content"

android:

src="@drawable/home1"/>

android:

id="@+id/foot_tv"

android:

layout_width="wrap_content"

android:

layout_height="wrap_content"

android:

layout_marginTop="3dp"

android:

text="首页"

android:

textColor="@color/tab_color"/>

这是每个底部按钮的布局设置的xml文件

显示效果。

再来是MainActivity的代码

[java]viewplaincopyprint?

packagecom.gjn.mynavigation;

importandroid.os.Bundle;

importandroid.support.v4.app.FragmentActivity;

importandroid.support.v4.app.FragmentTabHost;

importandroid.view.LayoutInflater;

importandroid.view.View;

importandroid.view.Window;

importandroid.widget.ImageView;

importandroid.widget.TabWidget;

importandroid.widget.TextView;

importandroid.widget.TabHost.OnTabChangeListener;

importandroid.widget.TabHost.TabSpec;

publicclassMainActivityextendsFragmentActivityimplementsOnTabChangeListener{

privateFragmentTabHostmTabHost;

@Override

protectedvoidonCreate（BundlesavedInstanceState）{

super.onCreate（savedInstanceState）;

requestWindowFeature（Window.FEATURE_NO_TITLE）;

setContentView（R.layout.activity_main）;

//初始化FragmentTabHost

initHost（）;

//初始化底部导航栏

initTab（）;

//默认选中

mTabHost.onTabChanged（TabDb.getTabsTxt（）[0]）;

}

privatevoidinitTab（）{

String[]tabs=TabDb.getTabsTxt（）;

for（inti=0;i

//新建TabSpec

TabSpectabSpec=mTabHost.newTabSpec（TabDb.getTabsTxt（）[i]）;

//设置view

Viewview=LayoutInflater.from（this）.inflate（R.layout.tabs_foot,null）;

（（TextView）view.findViewById（R.id.foot_tv））.setText（TabDb.getTabsTxt（）[i]）;

（（ImageView）view.findViewById（R.id.foot_iv））.setImageResource（TabDb.getTabsImg（）[i]）;

tabSpec.setIndicator（view）;

//加入TabSpec

mTabHost.addTab（tabSpec,TabDb.getFramgent（）[i],null）;

}

}

/***

*初始化Host

*/

privatevoidinitHost（）{

mTabHost=（FragmentTabHost）findViewById（R.id.main_tab）;

//调用setup方法设置view

mTabHost.setup（this,getSupportFragmentManager（）,R.id.main_view）;

//去除分割线

mTabHost.getTabWidget（）.setDividerDrawable（null）;

//监听事件

mTabHost.setOnTabChangedListener（this）;

}

@Override

publicvoidonTabChanged（Stringarg0）{

//从分割线中获得多少个切换界面

TabWidgettabw=mTabHost.getTabWidget（）;

for（inti=0;i

Viewv=tabw.getChildAt（i）;

TextViewtv=（TextView）v.findViewById（R.id.foot_tv）;

ImageViewiv=（ImageView）v.findViewById（R.id.foot_iv）;

//修改当前的界面按钮颜色图片

if（i==mTabHost.getCurrentTab（））{

tv.setTextColor（getResources（）.getColor（R.color.tab_light_color））;

iv.setImageResource（TabDb.getTabsImgLight（）[i]）;

}else{

tv.setTextColor（getResources（）.getColor（R.color.tab_color））;

iv.setImageResource（TabDb.getTabsImg（）[i]）;

}

}

}

}

其中TabDb类是用来设置导航栏的数据和图片切换时候的资源

以下是TabDb类

[java]viewplaincopyprint?

packagecom.gjn.mynavigation;

publicclassTabDb{

/***

*获得底部所有项

*/

publicstaticString[]getTabsTxt（）{

String[]tabs={"首页","交易","地点","我的"};

returntabs;

}

/***

*获得所有碎片

*/

publicstaticClass[]getFramgent（）{

Class[]cls={OneFm.class,TwoFm.class,ThreeFm.class,FourFm.class};

returncls;

}

/***

*获得所有点击前的图片

*/

publicstaticint[]getTabsImg（）{

int[]img={R.drawable.home1,R.drawable.glod1,R.drawable.xc1,R.drawable.user1};

returnimg;

}

/***

*获得所有点击后的图片

*/

publicstaticint[]getTabsImgLight（）{

int[]img={R.drawable.home2,R.drawable.glod2,R.drawable.xc2,R.drawable.user2};

returnimg;

}

}

到此，底部导航栏就算是完全实现了。

--------------------------------------------------------------------------------------------------------------------------

现在来实现顶部导航栏，看了许多最后使用了RadioGroup+ViewPager来实现

首先是为第一个碎片设计一个xml布局

fm_one.xml

[java]viewplaincopyprint?

xmlversion="1.0"encoding="utf-8"?

>

android="

android:

layout_width="match_parent"

android:

layout_height="match_parent"

android:

orientation="vertical">

android:

id="@+id/one_hv"

android:

layout_width="match_parent"

android:

layout_height="wrap_content"

android:

scrollbars="none">

android:

id="@+id/one_rg"

android:

layout_width="match_parent"

android:

layout_height="match_parent"

android:

orientation="horizontal">

android:

id="@+id/one_view"

android:

layout_width="match_parent"

android:

layout_height="0dp"

android:

layout_weight="1"

class="android.support.v4.view.ViewPager"/>

设置顶部导航栏和显示view

之后吧导航栏的每个项的布局

tab_rb.xml

[java]viewplaincopyprint?

xmlversion="1.0"encoding="utf-8"?

>

android="

android:

layout_width="wrap_content"

android:

layout_height="wrap_content"

android:

background="@drawable/tab_rb_selector"

android:

button="@null"

android:

paddingBottom="10dp"

android:

paddingLeft="15dp"

android:

paddingRight="15dp"

android:

paddingTop="10dp"

android:

text="今日">

其中设置selector文件来控制点击和未点击的状态

tab_rb_selector.xml

[java]viewplaincopyprint?

xmlversion="1.0"encoding="utf-8"?

>

android=">

--点击-->

state_checked="true">

shape="rectangle">

width="5dp"android:

color="@color/tab_light_color"/>

bottom="5dp">

shape="rectangle">

color="#fff"/>

--默认-->

color="#fafafa"/>

设置了点击和默认的时候的显示状态

最后来实现OneFm类

[java]viewplaincopyprint?

packagecom.gjn.mynavigation;

importjava.util.ArrayList;

importjava.util.List;

importandroid.os.Bundle;

importandroid.support.annotation.Nullable;

importandroid.support.v4.app.Fragment;

importandroid.support.v4.view.ViewPager;

importandroid.support.v4.view.ViewPager.OnPageChangeListener;

importandroid.util.DisplayMetrics;

importandroid.view.LayoutInflater;

importandroid.view.View;

importandroid.view.ViewGroup;

importandroid.widget.HorizontalScrollView;

importandroid.widget.RadioButton;

importandroid.widget.RadioGroup;

importandroid.widget.RadioGroup.LayoutParams;

importandroid.widget.RadioGroup.OnCheckedChangeListener;

publicclassOneFmextendsFragmentimplementsOnPageChangeListener{

privateViewview;

privateRadioGrouprg_;

privateViewPagervp_;

privateHorizontalScrollViewhv_;

privateListnewsList=newArrayList（）;

privateOneFmAdapteradapter;

@Override

publicViewonCreateView（LayoutInflaterinflater,

@NullableViewGroupcontainer,@NullableBundlesavedInstanceState）{

if（view==null）{

//初始化view

view=inflater.inflate（R.layout.fm_one,container,false）;

rg_=（RadioGroup）view.findViewById（R.id.one_rg）;

vp_=（ViewPager）view.findViewById（R.id.one_view）;

hv_=（HorizontalScrollView）view.findViewById（R.id.one_hv）;

//设置RadioGroup点击事件

rg_.setOnCheckedChangeListener（newOnCheckedChangeListener（）{

@Override

publicvoidonCheckedChanged（RadioGroupgroup,intid）{

vp_.setCurrentItem（id）;

}

}）;

//初始化顶部导航栏

initTab（inflater）;

//初始化viewpager

initView（）;

}

/*

*底部导航栏切换后由于没有销毁顶部设置导致如果没有重新设置view

*导致底部切换后切回顶部页面数据会消失等bug

*以下设置每次重新创建view即可

*/

ViewGroupparent=（ViewGroup）view.getParent（）;

if（parent!

=null）{

parent.removeView（view）;

}

returnview;

}

/***

*初始化viewpager

*/

privatevoidinitView（）{

ListhTabs=HTabDb.getSelected（）;

for（inti=0;i

OneFm1fm1=newOneFm1（）;

Bundlebundle=newBundle（）;

bundle.putString（"name",hTabs.get（i）.getName（））;

fm1.setArguments（bundle）;

newsList.add（fm1）;

}

//设置viewpager适配器

adapter=newOneFmAdapter（getActivity（）.getSupportFragmentManager（）,newsList）;

vp_.setAdapter（adapter）;

//两个viewpager切换不重新加载

vp_.setOffscreenPageLimit

（2）;

//设置默认

vp_.s