团购商城的框架:FragmentTableHost+Fragment
使用FragmentTableHost和Fragment来实现一个可以在底部进行点选操作来切换Fragment的框架.
大概效果图如下:
MainActivity代码:
//添加fragment的数组,主要是为了动态的改变APP以及界面的个数,如果要添加新的模块,只需要在这里添加一个fragment private 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[]{"首页","热卖","乐一乐","更多"}; @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.官方要求写死的 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查看效果是否实现