Android -- FragmentTabHost實現微信底部切換

1，在商城類的項目中我們開始一個項目的時候經常出現這樣的需求，如下圖所示：

下面使用戶可以切換的模塊，上面是對應的模塊的詳細內容，實現這個效果有很多方式，可以使用radiobutton+fragment來實現，也可以用LinearLayout+fragment來實現，但是如何很快速的把我們的ui框架給搭建起來呢，今天就給大家介紹使用Fragment+FragmentTabHost來實現。

2，說一下FragmentTabHost實現的步驟吧：

 ①、Activity要繼承FragmentActivity

 ②、調用FragmentTabHost的setup（）方法

 ③、添加TabSpec

ok，那讓我們一起來實現一下吧

首先，創建布局文件，可以看到，由於我們的fragment要放在FragmentTabHost的上面，所以創建了一個realtabcontent，但是官網給的給的FragmentTabHost的使用方法是必須在這個控件里面放一個fragment，那我們就來放一個假的fragment吧。布局代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.wangjitao.myfragmenttabhost.MainActivity">

    <FrameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/white"
        />
    <android.support.v4.app.FragmentTabHost
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabhost"
        android:background="@color/white"
        >
        <FrameLayout
            android:id="@android:id/tabhost"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0"
            />
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

然后我們要創建一個MainActivity，需要的是繼承Fragment ，由於我們的AppCompatActivity是繼承Fragment的（不知道的同學可以去看一下源碼），所以我們直接去繼承一下AppCompatActivity就行，這就實現了我們使用FragmentTabHost使用的第一個要求，然后找到我們的FragmentTabHost，調用其setup（）方法 

mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

可以看到，第一個參數是上下文環境，第二個參數是我們的FragmentManager，第三個參數是要與我們FragmentTabHost切換的同步的Fragment，ok這樣我們的第二個要求就寫完成了。然后是我們的四三個要求，添加TabSpec，代碼如下：

mTabHost.addTab(mTabHost.newTabSpec(getString(mTabs.get(i).getTitle())).setIndicator(view),
                    mTabs.get(i).getFragment(), null);

首先我們要創建一個TabSpec，所以調用TabHost.newTabSpec（我們tab的title）.setIndicator(對應的圖標和文字的布局)

來看一下我們view的布局，很簡單的，就是一個圖標和一個textview

<?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"
              android:layout_gravity="center"
              android:gravity="center"
              android:orientation="vertical"
              android:paddingBottom="3dp"
              android:paddingTop="3dp"
    >

    <ImageView
        android:id="@+id/icon_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <TextView
        android:id="@+id/txt_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="2dp"
        android:textColor="@color/selector_tab_text"
        />
</LinearLayout>

ok，由於一個Tab對應的有一個title，一個icon，一個對應的fragment，所以我們可以把這個Tab抽出來，創建出來這個對象Tab.java

package com.wangjitao.myfragmenttabhost.bean;

/**
 * Created by jh on 2016/5/10.
 */
public class Tab {
    private int title ;
    private int icon ;
    private Class fragment ;

    public Tab(int title, int icon, Class fragment) {
        this.title = title;
        this.icon = icon;
        this.fragment = fragment;
    }

    public int getTitle() {
        return title;
    }

    public void setTitle(int title) {
        this.title = title;
    }

    public int getIcon() {
        return icon;
    }

    public void setIcon(int icon) {
        this.icon = icon;
    }

    public Class getFragment() {
        return fragment;
    }

    public void setFragment(Class fragment) {
        this.fragment = fragment;
    }
}

ok,這樣的話加上我們的選擇器和對應的fragment，代碼基本上就ok了

就簡單的貼一個例子選擇器和fragment代碼就行了　　

TabHome.java

package com.wangjitao.myfragmenttabhost.fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.wangjitao.myfragmenttabhost.R;

/**
 * Created by jh on 2016/5/10.
 */
public class HomeFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab_home, null);
        return view;
    }
}　　

　對應的圖片的selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/weixin_pressed" android:state_selected="true"/>
    <item android:drawable="@drawable/weixin_normal"/>

</selector>

再加上對應的文字的selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:color="#0c760c" android:state_selected="true"/>
    <item android:color="#0c760c" android:state_active="true"/>
    <item android:color="#a9b7b7" android:state_selected="false"/>
    <item android:color="#a9b7b7" android:state_active="false"/>
</selector>

MainActivity.java

package com.wangjitao.myfragmenttabhost;

import android.content.Context;
import android.media.Image;
import android.support.v4.app.FragmentTabHost;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.wangjitao.myfragmenttabhost.bean.Tab;
import com.wangjitao.myfragmenttabhost.fragment.AddressFragment;
import com.wangjitao.myfragmenttabhost.fragment.FindFriendFragment;
import com.wangjitao.myfragmenttabhost.fragment.HomeFragment;
import com.wangjitao.myfragmenttabhost.fragment.SettingsFragment;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private Context mContext = MainActivity.this ;
    private FragmentTabHost mTabHost ;
    private LayoutInflater mInflater ;
    private List<Tab> mTabs = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //1,activity 繼承FragmentActivity  AppCompatActivity本身就是繼承的FragmentActivity

        //2,調用FragmentTabHost的setup方法

//        View view = mInflater.inflate(R.layout.tab_indicator,null) ;
//        ImageView img = (ImageView) view.findViewById(R.id.icon_tab);
//        TextView tex = (TextView) view.findViewById(R.id.txt_indicator);
//
//
//        img.setImageResource(R.mipmap.tab_address_normal);
//        tex.setText("主頁");
//
//        mTabHost.addTab(mTabHost.newTabSpec("home").setIndicator(view), HomeFragment.class, null);

        initTab();
    }

    private void initTab() {
        mInflater = LayoutInflater.from(this);

        mTabHost = (FragmentTabHost) findViewById(R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

        Tab tab_nome = new Tab(R.string.home,R.drawable.tab_weixin,HomeFragment.class) ;
        Tab tab_address = new Tab(R.string.address,R.drawable.tab_profile,AddressFragment.class) ;
        Tab tab_find_friend = new Tab(R.string.findfriend,R.drawable.tab_find,FindFriendFragment.class) ;
        Tab tab_setting = new Tab(R.string.setting,R.drawable.tab_contact_list,SettingsFragment.class) ;

        mTabs.add(tab_nome);
        mTabs.add(tab_address);
        mTabs.add(tab_find_friend);
        mTabs.add(tab_setting);

        for (int i = 0 ; i < mTabs.size() ;i++ ){
            View view = mInflater.inflate(R.layout.tab_indicator,null) ;
            ImageView img = (ImageView) view.findViewById(R.id.icon_tab);
            TextView tex = (TextView) view.findViewById(R.id.txt_indicator);


            img.setImageResource(mTabs.get(i).getIcon());
            tex.setText(mTabs.get(i).getTitle());

            mTabHost.addTab(mTabHost.newTabSpec(getString(mTabs.get(i).getTitle())).setIndicator(view),
                    mTabs.get(i).getFragment(), null);
        }

        mTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
        mTabHost.setCurrentTab(0);
    }
}

　ok ,這樣就完全實現了，看一下效果圖（丑哭了，找不到好的UI圖 \流淚）：