FragmentTabHost的开发指南

来源:互联网 发布:钢铁侠网络寄生虫主机 编辑:程序博客网 时间:2024/06/07 18:43

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/    

千图网:http://www.58pic.com/

偷偷告诉你,我的demo图片都是从上面偷来的,哈哈。。。。






2 0