1.FragmentTabHost的整体架构模型
2.FragmentTabHost的痛点解析
1.通过tabHost.setup()方法，我们能够正式的使用FragemtTabHost的实例
tabHost.setup(this,getSupportFragmentManager(),R.id.content);
2.通过tabHost.newTabSpec()创建Tab的子项。
TabHost.TabSpec tab=tabHost.newTabSpec(getString(mainTab.getResName()));3.指针控件的实例化（Tab的定位控件）
View indication= LayoutInflater.from(this).inflate(R.layout.tab_indication,null);这样主界面的Tab的指针控件就定义好了，然后指针控件里实例化自己所需的子控件。
4.设置Tab的分割线
tabHost.getTabWidget().setDividerDrawable(R.drawable.example1);有的人可能会问这样设置分割线不起作用，我也是醉了！别急，我表示深深的同情，不过只要再加上一句代码就万事大吉，见代码：
tabHost.getTabWidget().setDividerDrawable(R.drawable.example1);
if(Build.VERSION.SDK_INT >= 11){
tabHost.getTabWidget().setShowDividers(TabWidget.SHOW_DIVIDER_MIDDLE);}
如果不要分割线，也是一句代码搞定：
tabHost.getTabWidget().setDividerDrawable(null);//去掉分割<strong>线</strong>
5.能会问这样设置分割android.support.v4.app.FragmentTabHost的id必须是@android:id/tabhost,因为FragmentTabHost是系统原生控件。
3.具体开发流程
1.主界面的xml
<?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=".ui.MainActivity">
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp">
<android.support.v4.app.FragmentTabHost
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@android:id/tabhost"
android:layout_marginTop="4dp"
/>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#666"/>
</RelativeLayout>
</LinearLayout>
2.新建MainTab选项卡
public enum MainTab {
FIRST(0, R.string.first,R.drawable.tab_icon, FirstViewPagerFragment.class),
SECOND(1,R.string.second, R.drawable.tab_icon1, SecondViewPagerFragment.class),
THIRD(2,R.string.third, R.drawable.tab_icon2, ThirdFragment.class),
FOURTH(3,R.string.fourth,R.drawable.tab_icon3,FourthFragment.class);
private int index,resName,resIcon;
Class<?> clz;
private MainTab(int index,int resName,int resIcon,Class<?> clz){
this.index=index;
this.resName=resName;
this.resIcon=resIcon;
this.clz=clz;
}
public int getIndex() {
return index;
}
public void setIndex(int index) {
this.index = index;
}
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;
}
}
3.然后在Mainactivity中实例化控件
public class MainActivity extends FragmentActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
}
FragmentTabHost tabHost;
private void initView(){
tabHost= (FragmentTabHost) findViewById(android.R.id.tabhost);
tabHost.setup(this,getSupportFragmentManager(),R.id.content);
initTabs();
}
private void initTabs(){
MainTab[] tabs = MainTab.values();
final int size = tabs.length;
for (int i=0;i<size ;i++){
MainTab mainTab=tabs[i];
TabHost.TabSpec tab=tabHost.newTabSpec(getString(mainTab.getResName()));
View indication= LayoutInflater.from(this).inflate(R.layout.tab_indication,null);
TextView textView= (TextView) indication.findViewById(R.id.tab_title);
textView.setText(mainTab.getResName());
Drawable drawable= ContextCompat.getDrawable(this,mainTab.getResIcon());
textView.setCompoundDrawablesWithIntrinsicBounds(null, drawable,null,null);
tab.setIndicator(indication);
tabHost.addTab(tab,mainTab.getClz(),null);
tabHost.getTabWidget().setDividerDrawable(R.drawable.example1);
if(Build.VERSION.SDK_INT >= 11){
tabHost.getTabWidget().setShowDividers(TabWidget.SHOW_DIVIDER_MIDDLE);}
tabHost.getTabWidget().setDividerDrawable(null);//去掉分割线
}
}
}
4.创建一个BaseFragmentInterface类
/**
* Created by zhangxing on 2016/10/7.
*/
public interface BaseFragmentInterface {
public void initView(View view);
public void initData();
}
5.创建BaseFragment
**
* Created by Administrator on 2016/4/22.
*/
public class BaseFragment extends Fragment implements BaseFragmentInterface {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return super.onCreateView(inflater, container, savedInstanceState);
}
@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
}
@Override
public void initView(View view) {
}
@Override
public void initData() {
}
}
6.创建viewPagerFragment
/**
* Created by zhangxing on 2016/10/7.
*/
public class FirstViewPagerFragment extends BaseViewPagerFragment {
@Override
public void onSetupTabAdater(ViewPagerFragmentAdapter adapter) {
String[] titles = getResources().getStringArray(R.array.first_viewpage_arrays);
adapter.addTab(titles[0],titles[0],FirstFragment.class,null);
adapter.addTab(titles[1],titles[1],SecondFragment.class,null);
adapter.addTab(titles[2],titles[2],ThirdFragment.class,null);
adapter.addTab(titles[3],titles[3],FourthFragment.class,null);
}
@Override
public void setTabLayout(TabLayout tabLayout) {
tabLayout.setTabMode(TabLayout.MODE_FIXED);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
}
@Override
public void setScreenPageLimit() {
mViewPager.setOffscreenPageLimit(3);
}
}
7.创建Adapter,继承FragmentStatePagerAdapter
/**
* Created by zhangxing on 2016/10/7.
*/
public class ViewPagerFragmentAdapter extends FragmentStatePagerAdapter {
private TabLayout tabLayout;
private ViewPager viewPager;
private Context context;
private ArrayList<ViewPagerInfo> mTabs=new ArrayList<ViewPagerInfo>();
public ViewPagerFragmentAdapter(FragmentManager fm, TabLayout tabLayout, final ViewPager viewPager) {
super(fm);
this.tabLayout=tabLayout;
this.viewPager=viewPager;
context=viewPager.getContext();
viewPager.setAdapter(this);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//设置点击tab时不用使用动画效果
viewPager.setCurrentItem(tab.getPosition(),true);
}
});
}
public void addTab(String title, String tag, Class<?> clss, Bundle args){
ViewPagerInfo info=new ViewPagerInfo(title,tag,clss,args);
addFragment(info);
}
private void addFragment(ViewPagerInfo info){
if (info==null){
return;
}
//View v= LayoutInflater.from(context).inflate(R.layout.base_viewpage_fragment_tab_item,null);
//TextView title= (TextView) v.findViewById(R.id.tab_title);
//title.setText(info.title);
mTabs.add(info);
tabLayout.addTab(tabLayout.newTab().setText(info.title));
notifyDataSetChanged();
}
@Override
public CharSequence getPageTitle(int position) {
if(mTabs.size()==0)
return super.getPageTitle(position);
return mTabs.get(position).title;
}
@Override
public Fragment getItem(int position) {
ViewPagerInfo info=mTabs.get(position);
return Fragment.instantiate(context,info.clss.getName(),info.args);
}
@Override
public int getCount() {
return mTabs.size();
}
}
8.效果图为：
demo下载地址：https://github.com/zhangxingping/fragmentTabHost，这是一个fragment中包含FragmentTabHost的例子，欢迎大家下载学习。好了，今天的分享就到这里吧。最后发放两个 图片采集的神网址：
阿里巴巴矢量图标库：http://www.iconfont.cn/
偷偷告诉你，我的demo图片都是从上面偷来的，哈哈。。。。