FragmentTableHost+Fragment

团购商城的框架:FragmentTableHost+Fragment

使用FragmentTableHost和Fragment来实现一个可以在底部进行点选操作来切换Fragment的框架.

大概效果图如下:

MainActivity代码:

//添加fragment的数组,主要是为了动态的改变APP以及界面的个数,如果要添加新的模块,只需要在这里添加一个fragmentprivate Class[] fragments = new Class[]{MainFragment.class,AroundFragment.class,MineFragment.class,MoreFragment.class};//为框架底部设置图片的状态选择器数组,如果需要添加新的模块的话,还要添加状态选择器private int[] imgSelectors = new int[]{R.drawable.ic_home_tab_index,R.drawable.ic_home_tab_near,R.drawable.ic_home_tab_my,R.drawable.ic_home_tab_more};

//为空间底部设置文本资源,如果要添加新的模块,还要在这里添加文本信息private String[] tabTitles = new String[]{"首页","热卖","乐一乐","更多"};@Overrideprotected 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.官方要求写死的    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);        //进行控件查找        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,newTabSped(""+x)为每个子标签添加标识并添加加载显示的底部View对象        //第二个参数为添加动态加载的fragment对象,从集合里动态的拿fragment,第三个参数,给null即可.        tabHost.addTab(tabHost.newTabSpec(""+x).setIndicator(inflate),fragments[x],null);    }}

MainActivity布局文件:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <!--有V4包的就是为了支持低版本        框架的布局不要轻易改动    -->    <android.support.v4.app.FragmentTabHost        android:id="@+id/tabHost"        android:layout_alignParentTop="true"        android:layout_alignParentRight="true"        android:layout_alignParentEnd="true"        android:layout_width="match_parent"        android:layout_height="match_parent">        <!--更改TabWidget这个空间在LinearLayout容器里的上下位置,就可以改变TabHost里控制fragment的按钮所在的上下位置-->        <LinearLayout            android:orientation="vertical"            android:layout_width="match_parent"            android:layout_height="match_parent">            <!--权重是LinerLayout里独有的属性-->            <FrameLayout                android:id="@android:id/tabcontent"                android:layout_width="match_parent"                android:layout_height="0dp"                android:layout_weight="1"></FrameLayout>            <TabWidget                android:id="@android:id/tabs"                android:divider="@null"                android:background="#ffffff"                android:layout_width="match_parent"                android:layout_height="wrap_content"></TabWidget>        </LinearLayout>    </android.support.v4.app.FragmentTabHost></RelativeLayout>

SelectorChapek for Android(更加图片资源生产状态选择器)用于生成Selector的插件。你需要在drawable文件夹中右键，在弹出的菜单中选择Generate Android Selectors，它就会根据你的几个drawable文件夹里的资源的命名，帮你生成Selector代码。注意:(使用这个插件,命名必须规范,前缀名必须一致,都必须是同一类型,资源文件需要根据约定的后缀来命名。最后一个单词分为按下状态为_pressed，正常状态为_normal，不可用状态为_disable，等等。)比如:ic_home_tab_index_selected.png和ic_home_tab_index_normal.png方可以.

利用插件selectorChapek自动根据图片名称生成相应的点选操作时需要用到的XML文件.

在value文件夹中的color中新建两个color

<color name="tab_normal">#c5c9d0</color><color name="tab_selected">#fb773b</color>

drawable中新建XML用来更改文字颜色

<?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>

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:orientation="vertical"              android:layout_width="match_parent"              android:layout_height="match_parent"><LinearLayout    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="wrap_content">    <ImageView        android:id="@+id/iv"        android:layout_gravity="center"        android:src="@mipmap/ic_launcher"        android:layout_width="30dp"        android:layout_height="30dp"/>    <!--改变框架字体的颜色,找textColor,进tab_text修改-->    <TextView        android:id="@+id/tv"        android:text="首页"        android:layout_gravity="center"        android:textColor="@drawable/tab_text"        android:layout_width="wrap_content"        android:layout_height="wrap_content"/></LinearLayout></LinearLayout>

配置图片和文字颜色

最后在每一个Fragment中更改TextView中的Test查看效果是否实现