用FragmentTabhost實現仿京東頁面

用FragmentTabhost實現仿京東頁面

前言：前段時間用了倆個月做了一個項目，希望在這個月把基礎知識以及項目所學到的東西更總結一遍，方便自己，方便同仁。

這個項目我使用FragmentTabhost實現底部菜單，讓五個Fragment通過點擊底部的Tab進行切換！我們先看官方網站是怎麼說明使用方法的：
Special TabHost that allows the use of Fragment objects for its tab content. When placing this in a view hierarchy, after inflating the hierarchy you must call setup(Context, FragmentManager, int) to complete the initialization of the tab host.
Here is a simple example of using a FragmentTabHost in an Activity:

import com.example.android.supportv4.R;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;

/**
 * This demonstrates how you can implement switching between the tabs of a
 * TabHost through fragments, using FragmentTabHost.
 */
public class FragmentTabs extends FragmentActivity {
    private FragmentTabHost mTabHost;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

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

        mTabHost.addTab(mTabHost.newTabSpec("simple").setIndicator("Simple"),
                FragmentStackSupport.CountingFragment.class, null);
        mTabHost.addTab(mTabHost.newTabSpec("contacts").setIndicator("Contacts"),
                LoaderCursorSupport.CursorLoaderListFragment.class, null);
        mTabHost.addTab(mTabHost.newTabSpec("custom").setIndicator("Custom"),
                LoaderCustomSupport.AppListFragment.class, null);
        mTabHost.addTab(mTabHost.newTabSpec("throttle").setIndicator("Throttle"),
                LoaderThrottleSupport.ThrottledLoaderListFragment.class, null);
    }
}

• 從代碼中我們可以看出FragmentTabhost要注意幾個關鍵的類TabSpec，Indicator；我的理解是TabSpec是指每個Tab的標籤，Indicator用來加載Tab的view。

　　

接下來開始實現京東頁面功能：

　　　　

（一）首先新建一個Tab.java類，作爲javabean對象來存儲Tab的信息。

 */
public class Tab {
    //文字放在String.xml文件中，所以是id，用int值修飾
    private  int title;
    private  int icon;
    private Class fragment;

    public Tab(Class fragment,int title, int icon) {
        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;
    }
}

MainActivity.java

public class MainActivity extends AppCompatActivity {


    //用於動態加載View
    private LayoutInflater mInflater;

    private FragmentTabHost mTabhost;



    private CartFragment cartFragment;

    /**
     * 通過Arraylist存儲五個Tab對象，再通過循環把Tab對象與FragmentTabHost綁定
     */

    private List<Tab> mTabs = new ArrayList<>(5);
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);



        initTab();

    }



    private void initTab() {


        Tab tab_home = new Tab(HomeFragment.class,R.string.home,R.drawable.selector_icon_home);
        Tab tab_hot = new Tab(HotFragment.class,R.string.hot,R.drawable.selector_icon_hot);
        Tab tab_category = new Tab(CategoryFragment.class,R.string.catagory,R.drawable.selector_icon_category);
        Tab tab_cart = new Tab(CartFragment.class,R.string.cart,R.drawable.selector_icon_cart);
        Tab tab_mine = new Tab(MineFragment.class,R.string.mine,R.drawable.selector_icon_mine);

        mTabs.add(tab_home);
        mTabs.add(tab_hot);
        mTabs.add(tab_category);
        mTabs.add(tab_cart);
        mTabs.add(tab_mine);



        mInflater = LayoutInflater.from(this);
        mTabhost = (FragmentTabHost) this.findViewById(android.R.id.tabhost);
        mTabhost.setup(this,getSupportFragmentManager(),R.id.realtabcontent);


        //對Tab變換監聽，當變換到CartFragment時進行刷新
        mTabhost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabId) {

                if (tabId == getString(R.string.cart)) {

                    refData();

                }

            }
        });

        //通過循環把每個封裝好的Tab與FragmentTabhost綁定
        for (Tab tab : mTabs){

            TabHost.TabSpec tabSpec = mTabhost.newTabSpec(getString(tab.getTitle()));

            tabSpec.setIndicator(buildIndicator(tab));

            mTabhost.addTab(tabSpec,tab.getFragment(),null);

        }

        //對每個Tab設置分割線爲NONE
        mTabhost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
        //默認初始化爲第一個Tab
        mTabhost.setCurrentTab(0);



    }

    //把佈局與Tab類信息綁定，封裝成view
    private  View buildIndicator(Tab tab){

        //動態加載佈局
        View view =mInflater.inflate(R.layout.tab_indicator,null);
        ImageView img = (ImageView) view.findViewById(R.id.icon_tab);
        TextView text = (TextView) view.findViewById(R.id.txt_indicator);

        img.setBackgroundResource(tab.getIcon());
        text.setText(tab.getTitle());

        return  view;
    }
}

• 上面是完整的代碼，現在對代碼進行分析！首先初始化Tab對象信息，裏面包含Title，Icon和每個Tab對象的Fragment！

        Tab tab_home = new Tab(HomeFragment.class,R.string.home,R.drawable.selector_icon_home);
        Tab tab_hot = new Tab(HotFragment.class,R.string.hot,R.drawable.selector_icon_hot);
        Tab tab_category = new Tab(CategoryFragment.class,R.string.catagory,R.drawable.selector_icon_category);
        Tab tab_cart = new Tab(CartFragment.class,R.string.cart,R.drawable.selector_icon_cart);
        Tab tab_mine = new Tab(MineFragment.class,R.string.mine,R.drawable.selector_icon_mine);

• 之後模仿官方例子，初始化FragmentTabHost實例：mTabhost.setup(this,getSupportFragmentManager(),R.id.realtabcontent); 再通過Tab信息得到TabHost.TabSpec.

 //通過循環把每個封裝好的Tab與FragmentTabhost綁定

        for (Tab tab : mTabs){

            TabHost.TabSpec tabSpec = mTabhost.newTabSpec(getString(tab.getTitle()));

            tabSpec.setIndicator(buildIndicator(tab));

            mTabhost.addTab(tabSpec,tab.getFragment(),null);

        }

• Tab類是一個javabean類，用於存儲對象信息，tabSpec.setIndicator(buildIndicator(tab));中需要傳入一個View，所以我們需要使用動態加載View的方法：首先我們看通用動態加載View的方法：

private LayoutInflater mInflater;

mInflater = LayoutInflater.from(this);
View view = mInflater.inflate(R.layout.tab_indicator,null);

• 把每個Tab的佈局與Tab類的信息進行動態綁定，封裝成View

  //把佈局與Tab類信息綁定，封裝成view
    private  View buildIndicator(Tab tab){

        //動態加載佈局
        View view =mInflater.inflate(R.layout.tab_indicator,null);
        ImageView img = (ImageView) view.findViewById(R.id.icon_tab);
        TextView text = (TextView) view.findViewById(R.id.txt_indicator);

        img.setBackgroundResource(tab.getIcon());
        text.setText(tab.getTitle());

        return  view;
    }

【使用FragmentTabHost要注意的點】

• 佈局文件中，FragmentTabHost中必須有一個FrameLayout，而真正佈局Fragment的是外面的FrameLayout。

    <FrameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        android:background="@color/bg_color"
        />


    <cniao5.com.cniao5shop.widget.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
    </cniao5.com.cniao5shop.widget.FragmentTabHost>

• FragmentTabHost有Tab轉換時的監聽器OnTabChangedListener：

 //對Tab變換監聽，當變換到CartFragment時進行刷新
        mTabhost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabId) {

                if (tabId == getString(R.string.cart)) {

                    refData();

                }

            }
        });