FragmentTabHost+ViewPager實(shí)現(xiàn)底部導(dǎo)航欄

首先使用FragmentTabHost實(shí)現(xiàn)底部菜單欄。

content_act_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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">

    <FrameLayout
        android:id="@+id/act_main_layout_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="?attr/actionBarSize">

    </FrameLayout>
    <android.support.v4.app.FragmentTabHost
        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">
        <FrameLayout
            android:id="@+id/act_main_layout_frame"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"></FrameLayout>
    </android.support.v4.app.FragmentTabHost>

</RelativeLayout>

MainAct繼承自項(xiàng)目框架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){
                //生成一個(gè)tab標(biāo)簽，i=0是默認(rèn)選中的
                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);

        }
    }


    /**
     * 設(shè)置每個(gè)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;
    }

此時(shí)可以實(shí)現(xiàn)fragment的切換

fragment主界面
切換fragment時(shí)

可以看到，雖然fragment的內(nèi)容已經(jīng)切換了，但是下面的圖標(biāo)和文字并沒(méi)有進(jìn)行切換。而且也不支持手勢(shì)滑動(dòng)切換。

解決方法

1. 為fragmentTabHost添加點(diǎn)擊事件
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);
            }
        }
    }

此時(shí)已經(jīng)可以實(shí)現(xiàn)fragmentTabHost的文字圖標(biāo)切換

文字圖標(biāo)切換
2. ViewPager

為了實(shí)現(xiàn)手勢(shì)滑動(dòng)切換fragment，需要加入ViewPager組件
content_act_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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.support.v4.view.ViewPager
        android:id="@+id/act_main_view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="?attr/actionBarSize" />

    <FrameLayout
        android:id="@+id/act_main_layout_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="?attr/actionBarSize">
    </FrameLayout>

    <android.support.v4.app.FragmentTabHost
        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">
        <FrameLayout
            android:id="@+id/act_main_layout_frame"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"></FrameLayout>
    </android.support.v4.app.FragmentTabHost>
</RelativeLayout>

此處需要將上述的fragmentTabHost的setup方法進(jìn)行修改，將其內(nèi)容容器修改為ViewPager

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

在上述代碼的基礎(chǔ)上，添加

        /**
         * 當(dāng)點(diǎn)擊Tab時(shí)，用ViewPager對(duì)fragment進(jìn)行切換，否則fragment將會(huì)疊加
         */
        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和實(shí)現(xiàn)OnPagerChangeListener

     /**
     * ViewPager適配器
     * 繼承自PagerAdapter，將頁(yè)面信息持續(xù)的保存在fragment manager中，方便用戶(hù)返回該頁(yè)面
     */
    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的監(jiān)聽(tīng)事件
     * 當(dāng)前選擇頁(yè)面發(fā)生變化時(shí)的回調(diào)接口
     */
    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) {

        }
    }

如此，即可實(shí)現(xiàn)手勢(shì)滑動(dòng)。


手勢(shì)滑動(dòng)
所有的源代碼如下：

content_act_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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.support.v4.view.ViewPager
        android:id="@+id/act_main_view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="?attr/actionBarSize" />
    <FrameLayout
        android:id="@+id/act_main_layout_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="?attr/actionBarSize">
    </FrameLayout>

    <android.support.v4.app.FragmentTabHost
        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">
        <FrameLayout
            android:id="@+id/act_main_layout_frame"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"></FrameLayout>
    </android.support.v4.app.FragmentTabHost>
</RelativeLayout>

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){
                //生成一個(gè)tab標(biāo)簽，i=0是默認(rèn)選中的
                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添加點(diǎn)擊事件
            fragmentTabHost.getTabWidget().getChildTabViewAt(i).setOnClickListener(new TabOnClickListener(fragmentTabHost,i));
        }

        /**
         * 當(dāng)點(diǎn)擊Tab時(shí)，用ViewPager對(duì)fragment進(jìn)行切換，否則fragment將會(huì)疊加
         */
        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());

    }


    /**
     * 設(shè)置每個(gè)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的點(diǎn)擊事件
     */
    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，將頁(yè)面信息持續(xù)的保存在fragment manager中，方便用戶(hù)返回該頁(yè)面
     */
    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的監(jiān)聽(tīng)事件
     * 當(dāng)前選擇頁(yè)面發(fā)生變化時(shí)的回調(diào)接口
     */
    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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="HOME_FRG"/>
</LinearLayout>

其他四個(gè)Fragment也是一樣，只是TextView的內(nèi)容不一樣而已。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容