基于FragmentTableHost+fragment框架搭建

任何一个app诞生之初，都需要程序员根据需求搭建框架，就好比建楼房就要先搭地基一样，首先有了地基才能在上面盖出各种各样的楼房，同时，楼房的稳固性也是由地基来决定的。搭框架也是同理，最近着手一款商城类的app是基于FragmentTableHost+fragment来完成一个框架搭建，使用FragmentTableHost+fragment搭建框架的难度相对来说适中，首先给大家看一下搭建之后的几张效果图。（为了让大家更好的区分，我将每个fragment的颜色进行改变，大家可以看到，每次点击底部的标签所对应的fragment就会进行切换。）

首先第一步一定是设计界面：

打开Studio进行layout设计：

需要注意的几点：

1.使用fragmentTabHost时，如果我们手动进行添加此控件，注意最好用的是v4包下的fragmentTabHost（可以兼容低版本）。

2.布局里所用到的id是固定模式,不能改变(比如:@android:id/tabcontent,@android:id/tabs)。

3.框架的布局，不要轻易改动。

4.可以直接将fragmentTabHost控件拖拽到演示屏幕上,进行修改,提高开发效率

基于FragmentTableHost+fragment框架搭建

5.大家可以在图片中看出，布局却和最上面的效果图不一样，就是下面所说的TabWidget属性，在下面注释里有。

具体布局代码如下：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<!--框架的布局,不要轻易改动-->
    <android.support.v4.app.FragmentTabHost
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/tabHost"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true">
<!--更改TabWidget这个控件在LinearLayout容器里上下位置，就可以改变TabHost里控制fragment按钮所在的上下位置-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="0dp">
            </FrameLayout>
            <TabWidget
                android:background="#000"
                android:divider="@null"
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            </TabWidget>
        </LinearLayout>
    </android.support.v4.app.FragmentTabHost>
</RelativeLayout>

第二步：注意创建的时候将下面两个框的蓝勾取消掉,方可建立一个空白的Fragment，名字可以自定义。

 第三步：将用到的图片放到drawable中。               

注意图片的后缀名是(_normal,_selected),方便插件的自动生成状态选择器文件,.xml文件就是状态选择器文件.   
这里给大家安利一下Studio插件 SelectorChapek for Android,可以自动生成状态选择器文件的插件
使用规范：
SelectorChapek for Android(更加图片资源生产状态选择器)：
    用于生成Selector的插件。你需要在drawable文件夹中右键，在弹出的菜单中选择Generate Android Selectors，它就会根据你的几个drawable文件夹里的资源的命名，帮你生成Selector代码。
注意:(使用这个插件,命名必须规范,前缀名必须一致,都必须是同一类型,资源文件需要根据约定的后缀来命名。最后一个单词分为按下状态为_pressed，正常状态为_normal，不可用状态为_disable，等等。)
    看完之后我们就可以知道了所用图片为什么起了这些奇葩的后缀名，至于插件怎么用，给大家在上张图。

右键点击drawable，就会发现多了一个SelectorChapek for Android选项，点击一下就会生成.xml文件了。

   到这我们前期准备工作完成，那就正式进入正题：
 值得思考：大家看了最上面的效果图就会知道，底部栏对应着五个fragment，但是实际中每个app根据不同的需求(比如QQ：是三个fragment：消息，联系人，以及动态)，那么问题来了，如果我们研发的一个app进行更新，
需求要求我们新加入一个fragment或者减少一个fragment(比如QQ新加入一个fragment是qq邮箱)，我们怎么办，代码难道要重新推翻重新写吗？这样消耗的时间和精力太多了，根本不切实际。
      那我们用什么方法来进行动态的添加呢？
打开MainActivity，在里面编写代码(其中每一步对应的注释我都写的很清楚，相信大家看起来不会有太大的问题)：
public class MainActivity extends AppCompatActivity {    //添加fragment的数组,主要是为了动态的改变app一级界面的个数,如果要添加新的模块,只需要在这里添加一个fragment    private Class[] fragments=new Class[]{MainFragment.class,AroundFragment.class,ShopFragment.class,MoreFragment.class,MineFragment.class};    //为框架底部设置图片的状态选择器数组,如果需要添加新的模块,就还要添加状态选择器    private int[] imgSelectors=new int[]{R.drawable.ic_home_tab_index,R.drawable.ic_home_tab_more,R.drawable.ic_home_tab_le,R.drawable.ic_home_tab_near,R.drawable.ic_home_tab_my};    //为框架底部设置文本资源,如果要添加新的模块,还要在这里添加文本信息    private String [] tabTitles=new String[]{"首页","分类","乐一乐","购物车","我的"};    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //初始化控件        FragmentTabHost tabHost = (FragmentTabHost) findViewById(R.id.tabHost);        //为fragmentTabHost来填充fragment的方法,使用必须带有参数, 1.上下文  2.Fragment的管理器:FragmentManager 3.官方要求写死的参数 android.R.id.tabcontent        tabHost.setup(MainActivity.this,getSupportFragmentManager(), android.R.id.tabcontent);        //使用FragmentTabHost去添加子标签,根据fragment集合里有多少个fragment,动态的进行添加.        for(int x=0; x<fragments.length; x++){            //把一个布局的XML资源转换为一个View的对象,第一个参数就是layout布局文件,第二参数设置为空null即可            View inflate = getLayoutInflater().inflate(R.layout.tab_item, null);//注意,如果这个View对象下有子控件,就用这个控件对象去查找            //进行控件查找            ImageView tab_iv= (ImageView) inflate.findViewById(R.id.iv);           TextView tab_tv = (TextView) inflate.findViewById(R.id.tv);            //为这些子控件设置图片文本资源,从对应的集合里拿            tab_iv.setImageResource(imgSelectors[x]);            tab_tv.setText(tabTitles[x]);            //使用FragmentTabHost去添加子标签核心代码,TabHost,newTabSpec(""+x)为每个子标签添加标识,并添加加载显示的底部View对象            //第二参数为添加动态加载的fragment对象,从集合里动态的那fragment,第三个参数,给null即可            tabHost.addTab(tabHost.newTabSpec(""+x).setIndicator(inflate),fragments[x],null);        }    }}    做到这里我们还没有完成，还有一个小细节也是必要的：      我们根据效果图会发现，每次切换fragment，下面字体的颜色也跟着换了，没有点击他的时候，都是白色，切换之后变成了颜色，所以我们把这个功能也加上。我们需要在drawable下新建立一个状态选择器.xml文件(tab_text)，编写相应代码。
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:color="@color/tab_selected" android:state_selected="true"></item>    <item android:color="@color/tab_normal" ></item></selector> 我们在colors中加入相关代码：
 <resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="tab_normal">#c5c9d0</color>
    <color name="tab_selected">#fb773b</color>
</resources>
      
       做到这一步就大功告成了，可以运行一下看看效果，希望您看了会有收获。

秒客网

基于FragmentTableHost+fragment框架搭建

相关文章