android viewpager 底部tabhost,FragmentTabHost+ViewPager实现底部导航栏

首先使用FragmentTabHost实现底部菜单栏。

content_act_main.xml

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

tools:context=".ActMainActivity"

tools:showIn="@layout/act_main">

android:id="@+id/act_main_layout_content"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginBottom="?attr/actionBarSize">

android:id="@+id/act_main_tab_host"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:layout_alignParentBottom="true"

android:background="@color/bg_layout"

android:paddingTop="8dp">

android:id="@+id/act_main_layout_frame"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:layout_gravity="bottom">

MainAct继承自项目框架BasicAct。

private Class[] tabFragmentArray = {HomeFrg.class, AllGoodFrg.class,

ShoppingCartFrg.class, PersonalCenterFrg.class};

private int[] tabStringArray = {R.string.act_main_tab_string_home,R.string.act_main_tab_string_all_good, R.string.act_main_tab_string_shopping_cart, R.string.act_main_tab_string_personal_center};

private int[] tabImageNoramlArray = {

R.drawable.ic_tab_home_normal,R.drawable.ic_tab_classfication_normal,

R.drawable.ic_tab_shoppingcart_normal,R.drawable.ic_tab_userinfo_normal};

private int[] tabImageSelectedArray = {

R.drawable.ic_tab_home_selected,R.drawable.ic_tab_classfication_selected,

R.drawable.ic_tab_shoppingcart_selected,R.drawable.ic_tab_userinfo_selected};

@Bind (R.id.act_main_tab_host)

FragmentTabHost fragmentTabHost;

private LayoutInflater layoutInflater;

private Fragment[] fragments;

@Override

public void initView() {

layoutInflater = LayoutInflater.from(this);

fragmentTabHost.setup(this,getSupportFragmentManager(),R.id.act_main_layout_content);

int count = tabStringArray.length;

for(int i = 0;i < count;i++){

TabHost.TabSpec tabSpec ;

if(i == 0){

//生成一个tab标签，i=0是默认选中的

tabSpec = fragmentTabHost.newTabSpec(getString(tabStringArray[i])).setIndicator(getTabItemView(tabImageSelectedArray[i], tabStringArray[i]));

}else{

tabSpec = fragmentTabHost.newTabSpec(getString(tabStringArray[i])).setIndicator(getTabItemView(tabImageNoramlArray[i],tabStringArray[i]));

}

//给tabspec添加fragment

fragmentTabHost.addTab(tabSpec,tabFragmentArray[i],null);

}

}

/**

* 设置每个Tab的上面的文字和图片

*/

public View getTabItemView(int imageResId,int stringResId){

View view = layoutInflater.inflate(R.layout.item_main_menu_tab,null);

ImageView imageView = (ImageView)view.findViewById(R.id.act_main_tab_item_image);

TextView text = (TextView)view.findViewById(R.id.act_main_tab_item_text);

imageView.setImageResource(imageResId);

text.setText(ResUtils.getString(stringResId));

return view;

}

此时可以实现fragment的切换

fragment主界面

切换fragment时

可以看到，虽然fragment的内容已经切换了，但是下面的图标和文字并没有进行切换。而且也不支持手势滑动切换。

解决方法

1. 为fragmentTabHost添加点击事件

fragmentTabHost.getTabWidget().getChildTabViewAt(i).setOnClickListener(new TabOnClickListener(fragmentTabHost,i));

TabOnClickListener

class TabOnClickListener implements View.OnClickListener{

private FragmentTabHost fragmentTabHost;

private int index;

public TabOnClickListener(FragmentTabHost fragmentTabHost,int index){

this.fragmentTabHost = fragmentTabHost;

this.index = index;

}

@Override

public void onClick(View v) {

for(int i = 0 ; i < fragmentTabHost.getTabWidget().getTabCount();i++){

View view = fragmentTabHost.getTabWidget().getChildAt(i);

ImageView imageView = (ImageView)view.findViewById(R.id.act_main_tab_item_image);

if(i == index){

imageView.setImageResource(tabImageSelectedArray[i]);

}else{

imageView.setImageResource(tabImageNoramlArray[i]);

}

fragmentTabHost.setCurrentTab(index);

}

}

}

此时已经可以实现fragmentTabHost的文字图标切换

文字图标切换

2. ViewPager

为了实现手势滑动切换fragment，需要加入ViewPager组件

content_act_main.xml

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

tools:context=".ActMainActivity"

tools:showIn="@layout/act_main">

android:id="@+id/act_main_view_pager"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginBottom="?attr/actionBarSize" />

android:id="@+id/act_main_layout_content"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginBottom="?attr/actionBarSize">

android:id="@+id/act_main_tab_host"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:layout_alignParentBottom="true"

android:background="@color/bg_layout"

android:paddingTop="8dp">

android:id="@+id/act_main_layout_frame"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:layout_gravity="bottom">

此处需要将上述的fragmentTabHost的setup方法进行修改，将其内容容器修改为ViewPager

fragmentTabHost.setup(this,getSupportFragmentManager(),R.id.act_main_view_pager);

在上述代码的基础上，添加

/**

* 当点击Tab时，用ViewPager对fragment进行切换，否则fragment将会叠加

*/

fragmentTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {

@Override

public void onTabChanged(String tabId) {

int position = fragmentTabHost.getCurrentTab();

viewPager.setCurrentItem(position);

}

});

HomeFrg homeFrg = new HomeFrg();

AllGoodFrg allGoodFrg = new AllGoodFrg();

LatestAnnouncementFrg latestAnnouncementFrg = new LatestAnnouncementFrg();

ShoppingCartFrg shoppingCartFrg = new ShoppingCartFrg();

PersonalCenterFrg personalCenterFrg = new PersonalCenterFrg();

fragments = new Fragment[]{homeFrg,allGoodFrg,latestAnnouncementFrg,shoppingCartFrg,personalCenterFrg};

fragmentTabHost.setCurrentTab(0);

viewPager.setOffscreenPageLimit(4);

viewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));

viewPager.setOnPageChangeListener(new ViewPagerListener());

其中需要继承FragmentPagerAdapter和实现OnPagerChangeListener

/**

* ViewPager适配器

* 继承自PagerAdapter，将页面信息持续的保存在fragment manager中，方便用户返回该页面

*/

class ViewPagerAdapter extends FragmentPagerAdapter{

public ViewPagerAdapter(android.support.v4.app.FragmentManager fragmentManager){

super(fragmentManager);

}

@Override

public Fragment getItem(int position) {

return fragments[position];

}

@Override

public int getCount() {

return fragments.length;

}

}

/**

* ViewPager的监听事件

* 当前选择页面发生变化时的回调接口

*/

class ViewPagerListener implements ViewPager.OnPageChangeListener{

@Override

public void onPageSelected(int position) {

for(int i = 0;i < fragmentTabHost.getTabWidget().getTabCount();i ++){

View view = fragmentTabHost.getTabWidget().getChildAt(i);

ImageView image = (ImageView)view.findViewById(R.id.act_main_tab_item_image);

TextView text = (TextView)view.findViewById(R.id.act_main_tab_item_text);

if(i == position){

image.setImageResource(tabImageSelectedArray[i]);

text.setText(ResUtils.getString(tabStringArray[i]));

}else{

image.setImageResource(tabImageNoramlArray[i]);

}

}

fragmentTabHost.setCurrentTab(position);

}

@Override

public void onPageScrollStateChanged(int state) {

}

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

}

如此，即可实现手势滑动。

手势滑动

所有的源代码如下：

content_act_main.xml

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

tools:context=".ActMainActivity"

tools:showIn="@layout/act_main">

android:id="@+id/act_main_view_pager"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginBottom="?attr/actionBarSize" />

android:id="@+id/act_main_layout_content"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginBottom="?attr/actionBarSize">

android:id="@+id/act_main_tab_host"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:layout_alignParentBottom="true"

android:background="@color/bg_layout"

android:paddingTop="8dp">

android:id="@+id/act_main_layout_frame"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:layout_gravity="bottom">

MainAct.java

package com.chenyu.yiyuangou.activity;

import android.content.Context;

import android.content.Intent;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentPagerAdapter;

import android.support.v4.app.FragmentTabHost;

import android.support.v4.view.ViewPager;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.ImageView;

import android.widget.TabHost;

import android.widget.TextView;

import com.chenyu.R;

import com.chenyu.core.Utils.ResUtils;

import com.chenyu.core.controller.BasicAct;

import com.chenyu.yiyuangou.fragment.AllGoodFrg;

import com.chenyu.yiyuangou.fragment.HomeFrg;

import com.chenyu.yiyuangou.fragment.LatestAnnouncementFrg;

import com.chenyu.yiyuangou.fragment.PersonalCenterFrg;

import com.chenyu.yiyuangou.fragment.ShoppingCartFrg;

import butterknife.Bind;

public class MainAct extends BasicAct {

private Class[] tabFragmentArray = {HomeFrg.class, AllGoodFrg.class,LatestAnnouncementFrg.class,

ShoppingCartFrg.class, PersonalCenterFrg.class};

private int[] tabStringArray = {R.string.act_main_tab_string_home,R.string.act_main_tab_string_all_good, R.string.act_main_tab_string_latest_announcement,R.string.act_main_tab_string_shopping_cart, R.string.act_main_tab_string_personal_center};

private int[] tabImageNoramlArray = {

R.drawable.ic_tab_home_normal,R.drawable.ic_tab_classfication_normal,R.drawable.ic_tab_home_normal,

R.drawable.ic_tab_shoppingcart_normal,R.drawable.ic_tab_userinfo_normal};

private int[] tabImageSelectedArray = {

R.drawable.ic_tab_home_selected,R.drawable.ic_tab_classfication_selected,R.drawable.ic_tab_home_selected,

R.drawable.ic_tab_shoppingcart_selected,R.drawable.ic_tab_userinfo_selected};

@Bind (R.id.act_main_tab_host)

FragmentTabHost fragmentTabHost;

@Bind(R.id.act_main_view_pager)

ViewPager viewPager;

private LayoutInflater layoutInflater;

private Fragment[] fragments;

public MainAct(){

super(R.layout.act_main, R.string.act_main_title);

}

public static void startActivity(Context context){

Intent intent = new Intent(context,MainAct.class);

context.startActivity(intent);

}

@Override

public void initView() {

layoutInflater = LayoutInflater.from(this);

fragmentTabHost.setup(this,getSupportFragmentManager(),R.id.act_main_view_pager);

int count = tabStringArray.length;

for(int i = 0;i < count;i++){

TabHost.TabSpec tabSpec ;

if(i == 0){

//生成一个tab标签，i=0是默认选中的

tabSpec = fragmentTabHost.newTabSpec(getString(tabStringArray[i])).setIndicator(getTabItemView(tabImageSelectedArray[i], tabStringArray[i]));

}else{

tabSpec = fragmentTabHost.newTabSpec(getString(tabStringArray[i])).setIndicator(getTabItemView(tabImageNoramlArray[i],tabStringArray[i]));

}

//去除分割线

fragmentTabHost.getTabWidget().setDividerDrawable(null);

//给tabspec添加fragment

fragmentTabHost.addTab(tabSpec,tabFragmentArray[i],null);

//给fragmentTabHost添加点击事件

fragmentTabHost.getTabWidget().getChildTabViewAt(i).setOnClickListener(new TabOnClickListener(fragmentTabHost,i));

}

/**

* 当点击Tab时，用ViewPager对fragment进行切换，否则fragment将会叠加

*/

fragmentTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {

@Override

public void onTabChanged(String tabId) {

int position = fragmentTabHost.getCurrentTab();

viewPager.setCurrentItem(position);

}

});

HomeFrg homeFrg = new HomeFrg();

AllGoodFrg allGoodFrg = new AllGoodFrg();

LatestAnnouncementFrg latestAnnouncementFrg = new LatestAnnouncementFrg();

ShoppingCartFrg shoppingCartFrg = new ShoppingCartFrg();

PersonalCenterFrg personalCenterFrg = new PersonalCenterFrg();

fragments = new Fragment[]{homeFrg,allGoodFrg,latestAnnouncementFrg,shoppingCartFrg,personalCenterFrg};

fragmentTabHost.setCurrentTab(0);

viewPager.setOffscreenPageLimit(4);

viewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));

viewPager.setOnPageChangeListener(new ViewPagerListener());

}

/**

* 设置每个Tab的上面的文字和图片

*/

public View getTabItemView(int imageResId,int stringResId){

View view = layoutInflater.inflate(R.layout.item_main_menu_tab,null);

ImageView imageView = (ImageView)view.findViewById(R.id.act_main_tab_item_image);

TextView text = (TextView)view.findViewById(R.id.act_main_tab_item_text);

imageView.setImageResource(imageResId);

text.setText(ResUtils.getString(stringResId));

return view;

}

/**

* FragmentTabHost的点击事件

*/

class TabOnClickListener implements View.OnClickListener{

private FragmentTabHost fragmentTabHost;

private int index;

public TabOnClickListener(FragmentTabHost fragmentTabHost,int index){

this.fragmentTabHost = fragmentTabHost;

this.index = index;

}

@Override

public void onClick(View v) {

for(int i = 0 ; i < fragmentTabHost.getTabWidget().getTabCount();i++){

View view = fragmentTabHost.getTabWidget().getChildAt(i);

ImageView imageView = (ImageView)view.findViewById(R.id.act_main_tab_item_image);

if(i == index){

imageView.setImageResource(tabImageSelectedArray[i]);

}else{

imageView.setImageResource(tabImageNoramlArray[i]);

}

fragmentTabHost.setCurrentTab(index);

}

}

}

/**

* ViewPager适配器

* 继承自PagerAdapter，将页面信息持续的保存在fragment manager中，方便用户返回该页面

*/

class ViewPagerAdapter extends FragmentPagerAdapter{

public ViewPagerAdapter(android.support.v4.app.FragmentManager fragmentManager){

super(fragmentManager);

}

@Override

public Fragment getItem(int position) {

return fragments[position];

}

@Override

public int getCount() {

return fragments.length;

}

}

/**

* ViewPager的监听事件

* 当前选择页面发生变化时的回调接口

*/

class ViewPagerListener implements ViewPager.OnPageChangeListener{

@Override

public void onPageSelected(int position) {

for(int i = 0;i < fragmentTabHost.getTabWidget().getTabCount();i ++){

View view = fragmentTabHost.getTabWidget().getChildAt(i);

ImageView image = (ImageView)view.findViewById(R.id.act_main_tab_item_image);

TextView text = (TextView)view.findViewById(R.id.act_main_tab_item_text);

if(i == position){

image.setImageResource(tabImageSelectedArray[i]);

text.setText(ResUtils.getString(tabStringArray[i]));

}else{

image.setImageResource(tabImageNoramlArray[i]);

}

}

fragmentTabHost.setCurrentTab(position);

}

@Override

public void onPageScrollStateChanged(int state) {

}

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

}

}

HomeFrg.java

package com.chenyu.yiyuangou.fragment;

import android.view.View;

import com.chenyu.R;

import com.chenyu.core.controller.BasicFrg;

/**

* Created by Chenyu on 2016/1/1.

*/

public class HomeFrg extends BasicFrg {

public HomeFrg(){

super(R.layout.frg_home);

}

@Override

public void initView(View view) {

}

}

frg_home.xml

android:layout_width="match_parent" android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="HOME_FRG"/>

其他四个Fragment也是一样，只是TextView的内容不一样而已。