首先使用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的内容不一样而已。

android viewpager 底部tabhost,FragmentTabHost+ViewPager实现底部导航栏相关推荐

  1. Android 11.0 解决切换横屏时SystemUI导航栏固定在桌面右侧而不是底部的问题

    前言 正常情况下横竖屏旋转的时候导航栏也会跟着一起旋转,但是在Android R上面发现导航栏在横屏的时候是固定在右侧的,而不是旋转到底部.这个功能其实是Android 高版本特意修改的,为了是方便横 ...

  2. Android开发笔记（二十）顶部导航栏ActionBar

    标题栏ActionBar ActionBar是在Android3.0之后引入的,所以Android2.x之前的版本不能直接使用ActionBar.现在ActionBar广泛用做APP的顶部导航栏,它在 ...

  3. 关于Fragment、Tabhost和FragmentPagerAdapter来实现导航栏的效果

    1.通过定义TabHost和viewpager 2.定义TabsAdapter extends FragmentPagerAdapter implements TabHost.onTabChangeL ...

  4. Android 平板应用隐藏状态栏和底下的导航栏（navigation bar）

    Android 4.4 允许应用以两种方式进入全屏模式: 横置屏幕 (Lean Back) 和沉浸模式(Immersive).无论使用何种方式,进入全屏模式后所有的系统栏都会被隐藏.这两种方式的不同在 ...

  5. Android布局延伸状态栏,Android沉浸式全屏讲解(状态栏、导航栏处理)

    Android应用中经常会有一些要求全屏显隐状态栏导航栏的需求.通过全屏沉浸式的处理可以让应用达到更好的显示效果.下面系统的讲解一下有关全屏,隐藏状态栏导航栏,沉浸式的知识. 在Android4.1之 ...

  6. Android手机获取屏幕分辨率高度因虚拟导航栏带来的问题

    大家都知道,Android系统在4.4(KITKAT)版本后,增加了更炫的交互,并且对于标题栏和状态栏也增加了可定制化,于此同时在获取手机分辨率的时候一些旧方法已经不那么好使了. 常用获取屏幕分辨率的 ...

  7. android 沉浸式菜单栏,Android沉浸式全屏讲解(状态栏、导航栏处理)

    Android应用中经常会有一些要求全屏显隐状态栏导航栏的需求.通过全屏沉浸式的处理可以让应用达到更好的显示效果.下面系统的讲解一下有关全屏,隐藏状态栏导航栏,沉浸式的知识. 在Android4.1之 ...

  8. Android 加载页 完美隐藏系统状态栏和导航栏 适用刘海屏

    适用版本(因为一些方法被高版本弃用或淘汰,可能效果不太好,以下版本验证可用): android {compileSdkVersion 28buildToolsVersion '28.0.0'defau ...

  9. android沉浸式模式简书,Android 沉浸式模式与常见状态栏和导航栏效果

    Android沉浸式模式 官方称沉浸式状态栏为沉浸式模式. 什么是沉浸式? 沉浸式就是让人专注当前的(由设计者营造)情境下感到愉悦和满足,而忘记真实的情境. 什么是Android中的沉浸式? 当启用该 ...

最新文章

  1. 学习C语言必须知道的理论知识(第一章)
  2. vb退出窗体代码_VB中基本概念（3）
  3. [ARM异常]-图解armv7/armv8的异常向量表和基地址
  4. tableview动态修改和删除_Ubuntu加载动态库失败的解决方案
  5. SpringBoot demo初始
  6. c语言无符号数除法,[求助]关于双字节无符号数除法
  7. /bin/bash: jar: command not found(
  8. 黄聪：走进wordpress 详细说说template-loader.php
  9. iOS 关于使用xib创建cell的两种初始化方式
  10. 【最小割】HDU 4971 A simple brute force problem.
  11. c#时间 转换成java_Java与C#时间转换
  12. mysql删除源码_mysql关于删除的命令实例源码删除数据库数据表等
  13. 用Python开始机器学习（2：决策树分类算法）
  14. 【病毒分析】——熊猫烧香 专杀工具C源码
  15. Spring data JPA图文教程（一）
  16. ZOJ 3551 Bloodsucker 题解
  17. 图的存储结构之边集数组
  18. 计算机科学速成课 Crash Course Computer Science 笔记（摘要形式）
  19. win7删除Guest和administrator内置账户及账户所属文件
  20. oracle 计算当前日期是今年的第几周的计算方法

热门文章

  1. cf831D(dp)
  2. Android-Activity启动流程
  3. 大数据下的BI新特性
  4. office 2010中自带的 微软拼音输入法2010卸载
  5. UOJ #588. 图图的旅行
  6. Weblogic二种修改端口的方法(转)
  7. Sublime Text3前端必备插件
  8. tcp3次握手，https加密，ca认证
  9. 解决子线程操作UI的方法
  10. 【黑客免杀攻防】读书笔记6 - PE文件知识在免杀中的应用