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的內容不一樣而已。
總結
以上是生活随笔為你收集整理的android viewpager 底部tabhost,FragmentTabHost+ViewPager实现底部导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android 勿扰模式代码,andro
- 下一篇： android底层rsa加密,andro