安卓从零开发之购物商城（一）--底部菜单栏的的实现（FragmentTabHost)

　　 前言：最近计划学习一个商城项目进行开发练手，所以准备写写记录一下，加深一下理解。

（一）

商城的效果界面大概与主流的手机购物app类似，万地高楼平地起，所以第一步先进行主界面的搭建，这边文章先实现底部菜单栏。这篇文章最后的效果图应该是这样：



在这里这个功能主要是用FragmentTabHost和Selector选择器来实现；

有如下几个步骤：

FragmentTabHost初始化必须调用setup的有参构造方法；

设置好Fragment,TabSpec 与 Indicator添加到TabHost；

直接上代码：

主界面的布局文件(activity_main.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="liyong.shop.MainActivity">

<FrameLayout
android:id="@+id/realtabcontent"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"/>

<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<!--注意布局的ID，官方要求是这样-->
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />
</android.support.v4.app.FragmentTabHost>
</LinearLayout>

tabitem.xml- - -每个tab的通用布局

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

<ImageView
android:id="@+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:padding="3dp">
</ImageView>

<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</TextView>
</LinearLayout>

接下来再把要使用的资源配置好，这里我把他集中在了Config类里面

public class Config {

//Tab中的图片资源
public static final int[] pictures = {
R.drawable.selector_home,
R.drawable.selector_category,
R.drawable.selector_hot,
R.drawable.selector_cart,
R.drawable.selector_my
};

//Tab中的字符串资源
public static final int[] strings = {
R.string.tab_home,
R.string.tab_category,
R.string.tab_hot,
R.string.tab_cart,
R.string.tab_my
};

//Tab中需要的Fragment
public static final Class[] fragmeents = {
HomeFragment.class,
CategoryFragment.class,
HotFragment.class,
CartFragment.class,
MyFragment.class
};
}

Config类是所有资源的集合，tabhost要使用的资源当然也包含在了里面，新建一个TableModel用与tabhost获取数据

public class TabModel {

public static final int[] getStrings() {
return Config.strings;
}

public static final int[] getPictures() {

4000
return Config.pictures;
}

public static final Class[] getFragments() {
return Config.fragmeents;
}
}

另外，创建5个fragment和selector选择器的代码就不贴了，比较简单，最后直接初始化

public class MainActivity extends AppCompatActivity {

private FragmentTabHost mTabHost;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
//setup的时候注意把R.id.realtabcontent要添加进来，否则看不见fragment的布局
mTabHost.setup(this,getSupportFragmentManager(),R.id.realtabcontent);
initTab();
}

private void initTab(){
int length = TabModel.getFragments().length;
for (int i = 0; i < length; i++) {
TabHost.TabSpec tabSpec = mTabHost.newTabSpec(getString(TabModel.getStrings()[i]));
tabSpec.setIndicator(getTabView(i));
mTabHost.addTab(tabSpec, TabModel.getFragments()[i], null);
}
}

private View getTabView(int position) {
View view = LayoutInflater.from(this).inflate(R.layout.tabitem,null);
if (view != null) {
((ImageView) view.findViewById(R.id.imageview)).setImageResource(TabModel.getPictures()[position]);
((TextView) view.findViewById(R.id.textview)).setText(getString(TabModel.getStrings()[position]));
return view;
}
return null;
}

}

就是这么点代码。

需要注意的是，在进行selector选择器创建的时候，如果想文字的颜色也跟着变化，要在res下建一个color文件夹，在color文件夹里面去定义，在drawable里面定义是没作用的。