android FragmentTabHost的使用技巧及注意事项

目前主流的app主页都是由几个tab页组成，因此我们开发app的时候一般都会涉及到主页tab的切换实现。常用的主页tab切换实现有viewpage和FragmentActivity组合，FragmentTransaction的add、replace、remove、hide和show方法，以及Android官方的FragmentTabHost。看标题，这次我们只讲FragmentTabHost的tab实现。

首先是3个效果图

三星note4 小米2s 小米2s

上面是使用FragmentTabHost实现的3个效果图。

下面来一段一般FragmentTabHost的tab实现

<?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:background="#89c"
    android:fitsSystemWindows="false"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/tabContent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />


    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

Activity代码如下：

package hai.com.android_test.ui;

import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.util.Log;
import android.widget.FrameLayout;
import android.widget.TabHost;

import butterknife.BindView;
import butterknife.ButterKnife;
import hai.com.android_test.R;
import hai.com.android_test.ui.fragment.MyFragment;

public class HostTabActivity extends FragmentActivity {
    private static final String TAG = "HostTabActivity";
    @BindView(R.id.tabContent)
    FrameLayout tabContent;
    @BindView(android.R.id.tabhost)
    FragmentTabHost tabhost;
    private String tabSpecs[] = {"首页", "消息", "好友", "广场"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tabhost);
        ButterKnife.bind(this);
        init();
    }

    private void init() {
        tabhost.setup(this, getSupportFragmentManager(), R.id.tabContent);
        for (int i = 0; i < tabSpecs.length; i++) {
            TabHost.TabSpec tabSpec = tabhost.newTabSpec(tabSpecs[i]).setIndicator(tabSpecs[i]);
            Bundle b = new Bundle();
            b.putString("data", tabSpecs[i]);
            tabhost.addTab(tabSpec, MyFragment.class, b);
        }
        tabhost.setBackgroundColor(Color.WHITE);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        Log.d(TAG, "onActivityResult() called with: requestCode = [" + requestCode + "], resultCode = [" + resultCode + "], data = [" + data + "]");
        super.onActivityResult(requestCode, resultCode, data);
    }
}

由于MyFragment的代码过于简单，就不贴了。

附上一段日志

02-24 11:22:58.587 9886-9886/hai.com.android_test E/HostTabActivity: onStart: 
02-24 11:22:58.587 9886-9886/hai.com.android_test E/HostTabActivity: onResume: 
02-24 11:22:58.587 9886-9886/hai.com.android_test E/HostTabActivity: onResumeFragments: 
02-24 11:22:58.597 9886-9886/hai.com.android_test E/MyFragment: MyFragment: null
02-24 11:22:58.597 9886-9886/hai.com.android_test E/MyFragment: onAttach: null
02-24 11:22:58.597 9886-9886/hai.com.android_test E/MyFragment: onCreate: 首页
02-24 11:22:58.597 9886-9886/hai.com.android_test E/MyFragment: onCreateView:  首页
02-24 11:22:58.597 9886-9886/hai.com.android_test E/MyFragment: onViewCreated:  首页
02-24 11:22:58.597 9886-9886/hai.com.android_test E/MyFragment: onActivityCreated: 首页

点击消息Tab后
02-24 11:23:14.857 9886-9886/hai.com.android_test E/MyFragment: MyFragment: null
02-24 11:23:14.862 9886-9886/hai.com.android_test E/MyFragment: onAttach: null
02-24 11:23:14.862 9886-9886/hai.com.android_test E/MyFragment: onCreate: 消息
02-24 11:23:14.862 9886-9886/hai.com.android_test E/MyFragment: onDestroyView:  首页
02-24 11:23:14.862 9886-9886/hai.com.android_test E/MyFragment: onCreateView:  消息
02-24 11:23:14.867 9886-9886/hai.com.android_test E/MyFragment: onViewCreated:  消息
02-24 11:23:14.867 9886-9886/hai.com.android_test E/MyFragment: onActivityCreated: 消息

02-24 12:38:06.837 9886-9886/hai.com.android_test E/MyFragment: onDestroyView:  消息
02-24 12:38:06.837 9886-9886/hai.com.android_test E/MyFragment: onCreateView:  首页
02-24 12:38:06.842 9886-9886/hai.com.android_test E/MyFragment: onViewCreated:  首页
02-24 12:38:06.842 9886-9886/hai.com.android_test E/MyFragment: onActivityCreated: 首页

说明：通过日志发现当各个tab切换的时候：每个tab都是延迟加载的，点击一个tab的时候，前一个tab就会执行onDestroyView，进入的这个就会执行onAttach、onCreate...
onActivityCreated。即每个tab的Fragment都是onCreate、onDestroy一次，onCreateView和onDestroyView执行多次。

从日志观察我们可以实现一个需求：Fragment在FragmentTabHost中可以实现延迟加载的需求。

下面说下上面为什么会有3张效果图

观察发现FragmentTabHost实现的tab在不同的手机上会有不同的效果，在三星note4（6.0）上各个tab之间没有分割线，而在小米2s（5.0）上却有分割线，这是我们需要注意的地方。

其实通过 TabSpec.setIndicator(View view) 方法我们也可以自定义tabView，以实现自定义效果，如第三个的效果图的tabView就是自定义实现。

最新补充：FragmentTabHost可以去除分割线：

fragmentTabHost.setup(this, getSupportFragmentManager(), R.id.nav_fragment);
fragmentTabHost.getTabWidget().setDividerDrawable(null);//去除分割线

android FragmentTabHost的使用技巧及注意事项

猜你喜欢