FragmentTabHost

Android - FragmentTabHost                                                                  

     FragmentTabHost可实现类似IOS中的UITabBarController的功能，FramentTabHost实现效果与UITabBarController一样，但是前者比较麻烦，而且注意事项也很多，不过只要用过一两次，基本也就掌握了，2年多没开发Android应用了，Eclipse早已远去，接下来我将详细记录基于Android Studio使用FramentTabHost的过程。

     主要分两部分：tabhost（底部菜单）、tabcontent（页面内容）

一、Item的信息：TabItem.java

public enum TabItem {

    HOME(0, R.string.main_tab_name_shouyw, R.drawable.tabbar_selector_home,
            HomeFragment.class),

    ACTIVITY(1, R.string.main_tab_name_huodong, R.drawable.tabbar_selector_activity,
            ActivityFragment.class),

    MINE(2, R.string.main_tab_name_wode, R.drawable.tabbar_selector_mine,
            HomeFragment.class);

    private int idx;
    private int resName;
    private int resIcon;
    private Class<?> clz;

    private TabItem(int idx, int resName, int resIcon, Class<?> clz) {
        this.idx = idx;
        this.resName = resName;
        this.resIcon = resIcon;
        this.clz = clz;
    }

    public int getIdx() {
        return idx;
    }

    public void setIdx(int idx) {
        this.idx = idx;
    }

    public int getResName() {
        return resName;
    }

    public void setResName(int resName) {
        this.resName = resName;
    }

    public int getResIcon() {
        return resIcon;
    }

    public void setResIcon(int resIcon) {
        this.resIcon = resIcon;
    }

    public Class<?> getClz() {
        return clz;
    }

    public void setClz(Class<?> clz) {
        this.clz = clz;
    }
}

二、item的布局文件：tabitem_layout.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"
    android:orientation="vertical"
    android:id="@+id/id_fragment_item_layout">

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_marginTop="6dp"
        android:layout_width="match_parent"
        android:layout_height="36dp"
        android:layout_centerHorizontal="true"
        android:background="@color/CDCOR_Clear" />

    <TextView
        android:id="@+id/tab_title"
        android:layout_below="@id/iv_icon"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:textAlignment="center"
        android:textColor="@color/tab_titletext_selector"
        android:textSize="13sp" />

</LinearLayout>

三、需要创建一个Activity（TabbarActivity），这个Activity的布局文件中用于放置FragmentTabHost

/**
 * Created by luohan on 16/7/10.
 */
public class TabBarActivity extends AppCompatActivity implements View.OnTouchListener,TabHost.OnTabChangeListener {

    private MyFragmentTabHost mTabHost;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tabbar_activity);

        initViews();

    }

    private void initViews() {
        mTabHost = (MyFragmentTabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);
        mTabHost.setOnTabChangedListener(this);
//        mTabHost.getTabWidget().setDividerDrawable(null); // 去掉分割线

       TabItem[] tabs = TabItem.values();
        int size = tabs.length;
        for (int i = 0; i < mImages.length; i++) {
            TabItem mainTab = tabs[i];
            WindowManager wm = (WindowManager) this.getSystemService(Context.WINDOW_SERVICE);
            int swidth = wm.getDefaultDisplay().getWidth();
            // Tab按钮添加文字和图片
            View indicator = View.inflate(this, R.layout.tabitem_layout, null);
            TextView title = (TextView) indicator.findViewById(R.id.tab_title);
            ImageView icon = (ImageView) indicator.findViewById(R.id.iv_icon);

            title.setText(getString(mainTab.getResName()));
            Drawable drawable = this.getResources().getDrawable(mainTab.getResIcon());
            icon.setImageDrawable(drawable);
            TabHost.TabSpec spec = mTabHost.newTabSpec(mFragmentTags[i]);
            spec.setIndicator(indicator);
            spec.setContent(new TabHost.TabContentFactory() {
                @Override
                public View createTabContent(String tag) {
                    return new View(TabBarActivity.this);
                }
            });
            // 添加Fragment
            mTabHost.addTab(spec, mainTab.getClz(), null);
            // 设置Tab按钮的背景
            mTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.color.CDCOR_FFFFFF);
            mTabHost.getTabWidget().getChildAt(i).setOnTouchListener(this);
        }

    }

    @Override
    public void onTabChanged(String tabId) {
        final int size = mTabHost.getTabWidget().getTabCount();
        for (int i = 0; i < size; i++) {
            View v = mTabHost.getTabWidget().getChildAt(i);
            if (i == mTabHost.getCurrentTab()) {
                v.setSelected(true);
            } else {
                v.setSelected(false);
            }
        }

        supportInvalidateOptionsMenu();
    }

    @Override
    public boolean onTouch(View view, MotionEvent motionEvent) {
        return false;

    }

}

四、TabBarActivity对应的布局文件：（红色部分必须使用android提供的标准id）

tabcontent:页面内容显示区域，使用Frament填充

tabhost:底部菜单区域，使用上面的tabitem_layout.xml布局文件填充，布局文件的相关资源来源于TabItem.java

<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/id_drawer_layout"
    android:layout_width="match_parent"

   android:layout_height="match_parent"

   tools:context="com.example.luohan.a_app01.TabBarActivity”>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dip"
            android:layout_weight="1" />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/CDCOR_Clear">


            <com.example.luohan.a_app01.widget.MyFragmentTabHost
                android:id="@android:id/tabhost"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical" />

            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="@color/DCOR_GRAY_bcbcbc" />
        </FrameLayout>
    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

五、分别创建三个界面的显示内容：Frament（另外两个界面省略）

public class HomeFragment extends Fragment {

    private View mViewContent; // 缓存视图内容

    @Nullable @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_home, container, false);

    }

}

六、MyFragmentTabHost

public class MyFragmentTabHost extends FragmentTabHost {
   

   private String mCurrentTag;

   private String mNoTabChangedTag;
   
   public MyFragmentTabHost(Context context, AttributeSet attrs) {
      super(context, attrs);
   }
   
   @Override
   public void onTabChanged(String tag) {

      if (tag.equals(mNoTabChangedTag)) {
         setCurrentTabByTag(mCurrentTag);
      } else {
         super.onTabChanged(tag);
         mCurrentTag = tag;
      }
   }

   public void setNoTabChangedTag(String tag) {
      this.mNoTabChangedTag = tag;
   }

}

其他资源文件：

tabbar_selector_home.xml（另外两个省略）

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@mipmap/tab_home_selected" />
    <item android:state_checked="true" android:drawable="@mipmap/tab_home_selected" />
    <item android:state_selected="true" android:drawable="@mipmap/tab_home_selected" />
    <item android:drawable="@mipmap/tab_home_default" />

</selector>

tab_titletext_selector.xml

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

    <item android:state_pressed="true" android:color="@color/DCOR_RED_fd7778"/>
    <item android:state_selected="true" android:color="@color/DCOR_RED_fd7778"/>
    <item android:color="@color/DCOR_GRAY_787878"/>

</selector>