【移动应用开发技术】android实现底部导航栏的方法

【移动应用开发技术】android实现底部导航栏的方法

这篇文章给大家分享的是有关android实现底部导航栏的方法的内容。在下觉得挺实用的，因此分享给大家做个参考，一起跟随在下过来看看吧。底部导航栏我选择用FragmentTabHost+Fragment来实现，这个方法比较好用，代码量也不多首先是开始的activity_main.xml<RelativeLayout

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

xmlns:tools="/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="${relativePackage}.${activityClass}"

>

<FrameLayout

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"

>

</FrameLayout>

<view

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"

/>

</RelativeLayout>也可以直接在xml文件里面写<android.support.v4.view.FragmentTabHost

>

</android.support.v4.view.FragmentTabHost>这xml文件就一个view加一个tab

view用来显示碎片，tab用来放置底部按钮的数量再来是tab_foot.xml<?xml

version="1.0"

encoding="utf-8"?>

<LinearLayout

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#F6F6F6"

android:gravity="center"

android:orientation="vertical"

>

<ImageView

android:id="@+id/foot_iv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/home1"

/>

<TextView

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"

/>

</LinearLayout>这是每个底部按钮的布局设置的xml文件再来是MainActivity的代码package

com.gjn.mynavigation;

import

android.os.Bundle;

import

android.support.v4.app.FragmentActivity;

import

android.support.v4.app.FragmentTabHost;

import

android.view.LayoutInflater;

import

android.view.View;

import

android.view.Window;

import

android.widget.ImageView;

import

android.widget.TabWidget;

import

android.widget.TextView;

import

android.widget.TabHost.OnTabChangeListener;

import

android.widget.TabHost.TabSpec;

public

class

MainActivity

extends

FragmentActivity

implements

OnTabChangeListener

{

private

FragmentTabHost

mTabHost;

@Override

protected

void

onCreate(Bundle

savedInstanceState)

{

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

//初始化FragmentTabHost

initHost();

//初始化底部导航栏

initTab();

//默认选中

mTabHost.onTabChanged(TabDb.getTabsTxt()[0]);

}

private

void

initTab()

{

String[]

tabs

=

TabDb.getTabsTxt();

for

(int

i

=

0;

i

<

tabs.length;

i++)

{

//新建TabSpec

TabSpec

tabSpec

=

mTabHost.newTabSpec(TabDb.getTabsTxt()[i]);

//设置view

View

view

=

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

*/

private

void

initHost()

{

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

public

void

onTabChanged(String

arg0)

{

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

TabWidget

tabw

=

mTabHost.getTabWidget();

for

(int

i

=

0;

i

<

tabw.getChildCount();

i++)

{

View

v

=

tabw.getChildAt(i);

TextView

tv

=

(TextView)

v.findViewById(R.id.foot_tv);

ImageView

iv

=

(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类package

com.gjn.mynavigation;

public

class

TabDb

{

/***

*

获得底部所有项

*/

public

static

String[]

getTabsTxt()

{

String[]

tabs

=

{"首页","交易","地点","我的"};

return

tabs;

}

/***

*

获得所有碎片

*/

public

static

Class[]

getFramgent(){

Class[]

cls

=

{OneFm.class,TwoFm.class,ThreeFm.class,FourFm.class};

return

cls

;

}

/***

*

获得所有点击前的图片

*/

public

static

int[]

getTabsImg(){

int[]

img

=

{R.drawable.home1,R.drawable.glod1,R.drawable.xc1,R.drawable.user1};

return

img

;

}

/***

*

获得所有点击后的图片

*/

public

static

int[]

getTabsImgLight(){

int[]

img

=

{R.drawable.home2,R.drawable.glod2,R.drawable.xc2,R.drawable.user2};

return

img

;

}

}到此，底部导航栏就算是完全实现了。现在来实现顶部导航栏，看了许多最后使用了RadioGroup+ViewPager来实现

首先是为第一个碎片设计一个xml布局：fm_one.xml<?xml

version="1.0"

encoding="utf-8"?>

<LinearLayout

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

>

<HorizontalScrollView

android:id="@+id/one_hv"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:scrollbars="none"

>

<RadioGroup

android:id="@+id/one_rg"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal"

>

</RadioGroup>

</HorizontalScrollView>

<view

android:id="@+id/one_view"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"

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

/>

</LinearLayout>

设置顶部导航栏和显示view之后是导航栏的每个项的布局

tab_rb.xml<?xml

version="1.0"

encoding="utf-8"?>

<RadioButton

xmlns:android="/apk/res/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="今日"

>

</RadioButton>其中设置selector文件来控制点击和未点击的状态tab_rb_selector.xml<?xml

version="1.0"

encoding="utf-8"?>

<selector

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

>

<!--

点击

-->

<item

android:state_checked="true">

<layer-list

>

<item

>

<shape

android:shape="rectangle">

<stroke

android:width="5dp"

android:color="@color/tab_light_color"/>

</shape>

</item>

<item

android:bottom="5dp">

<shape

android:shape="rectangle">

<solid

android:color="#fff"/>

</shape>

</item>

</layer-list>

</item>

<!--

默认

-->

<item

>

<shape

>

<solid

android:color="#fafafa"/>

</shape>

</item>

</selector>

设置了点击和默认的时候的显示状态最后来实现OneFm类package

com.gjn.mynavigation;

import

java.util.ArrayList;

import

java.util.List;

import

android.os.Bundle;

import

android.support.annotation.Nullable;

import

android.support.v4.app.Fragment;

import

android.support.v4.view.ViewPager;

import

android.support.v4.view.ViewPager.OnPageChangeListener;

import

android.util.DisplayMetrics;

import

android.view.LayoutInflater;

import

android.view.View;

import

android.view.ViewGroup;

import

android.widget.HorizontalScrollView;

import

android.widget.RadioButton;

import

android.widget.RadioGroup;

import

android.widget.RadioGroup.LayoutParams;

import

android.widget.RadioGroup.OnCheckedChangeListener;

public

class

OneFm

extends

Fragment

implements

OnPageChangeListener

{

private

View

view;

private

RadioGroup

rg_;

private

ViewPager

vp_;

private

HorizontalScrollView

hv_;

private

List<Fragment>

newsList

=

new

ArrayList<Fragment>();

private

OneFmAdapter

adapter;

@Override

public

View

onCreateView(LayoutInflater

inflater,

@Nullable

ViewGroup

container,

@Nullable

Bundle

savedInstanceState)

{

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(new

OnCheckedChangeListener()

{

@Override

public

void

onCheckedChanged(RadioGroup

group,

int

id)

{

vp_.setCurrentItem(id);

}

}

//初始化顶部导航栏

initTab(inflater);

//初始化viewpager

initView();

}

/**

*

底部导航栏切换后

由于没有销毁顶部设置导致如果没有重新设置view

*

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

*

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

*/

ViewGroup

parent

=

(ViewGroup)

view.getParent();

if

(parent

!=

null)

{

parent.removeView(view);

}

return

view;

}

/***

*

初始化viewpager

*/

private

void

initView()

{

List<HTab>

hTabs

=

HTabDb.getSelected();

for

(int

i

=

0;

i

<

hTabs.size();

i++)

{

OneFm1

fm1

=

new

OneFm1();

Bundle

bundle

=

new

Bundle();

bundle.putString("name",

hTabs.get(i).getName());

fm1.setArguments(bundle);

newsList.add(fm1);

}

//设置viewpager适配器

adapter

=

new

OneFmAdapter(getActivity().getSupportFragmentManager(),newsList);

vp_.setAdapter(adapter);

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

vp_.setOffscreenPageLimit(2);

//设置默认

vp_.setCurrentItem(0);

//设置viewpager监听事件

vp_.setOnPageChangeListener(this);

}

/***

*

初始化头部导航栏

*

@param

inflater

*/

private

void

initTab(LayoutInflater

inflater)

{

List<HTab>

hTabs

=

HTabDb.getSelected();

for

(int

i

=

0;

i

<

hTabs.size();

i++)

{

//设置头部项布局初始化数据

RadioButton

rbButton

=

(RadioButton)

inflater.inflate(R.layout.tab_rb,

null);

rbButton.setId(i);

rbButton.setText(hTabs.get(i).getName());

LayoutParams

params

=

new

LayoutParams(LayoutParams.WRAP_CONTENT,

LayoutParams.WRAP_CONTENT);

//加入RadioGroup

rg_.addView(rbButton,params);

}

//默认点击

rg_.check(0);

}

@Override

public

void

onPageScrollStateChanged(int

arg0)

{

}

@Override

public

void

onPageScrolled(int

arg0,

float

arg1,

int

arg2)

{

}

@Override

public

void

onPageSelected(int

id)

{

setTab(id);

}

/***

*

页面跳转切换头部偏移设置

*

@param

id

*/

private

void

setTab(int

id)

{

RadioButton

rbButton

=

(RadioButton)

rg_.getChildAt(id);

//设置标题被点击

rbButton.setChecked(true);

//偏移设置

int

left

=

rbButton.getLeft();

int

width

=

rbButton.getMeasuredWidth();

DisplayMetrics

metrics

=

new

DisplayMetrics();

getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);

int

screenWidth

=

metrics.widthPixels;

//移动距离=

左边的位置

+

button宽度的一半

-

屏幕宽度的一半

int

len

=

left

+

width

/

2

-

screenWidth

/

2;

//移动

hv_.smoothScrollTo(len,

0);

}

}其中有两个数据类和一个碎片类数据类HTab.javapackage

com.gjn.mynavigation;

/***

*

头部Tab属性

*

*/

public

class

HTab

{

private

String

name;

public

HTab(String

name)

{

super();

this.setName(name);

}

public

String

getName()

{

return

name;

}

public

void

setName(String

name)

{

=

name;

}

}

HTabDb.javapackage

com.gjn.mynavigation;

import

java.util.ArrayList;

import

java.util.List;

public

class

HTabDb

{

private

static

final

List<HTab>

Selected

=

new

ArrayList<HTab>();

static{

Selected.add(new

HTab("今日"));

Selected.add(new

HTab("头条"));

Selected.add(new

HTab("娱乐"));

Selected.add(new

HTab("财经"));

Selected.add(new

HTab("军事"));

Selected.add(new

HTab("科技"));

Selected.add(new

HTab("时尚"));

Selected.add(new

HTab("体育"));

}

/***

*

获得头部tab的所有项

*/

public

static

List<HTab>

getSelected()

{

return

Selected;

}

}碎片类OneFm1.javapackage

com.gjn.mynavigation;

import

android.os.Bundle;

import

androi