Android学习之Tab控件(使用TabHost和与Tab对应的Menu,动态更改Tabhost的Tab的背景图标，用到Ratingbar控件)

刚接触Android，按Boss要求要做一个能使用Tab分并且ListView显示内容的程序，其中还要包含RatingBar控件使得用户可以自行评分，并且当Tab标签切换时能改变默认风格使得动态更改Tab的背景或者图标。参考了很多名家大作，受教颇多，下面我把我自己的点点经验和大家分享一下。

 先给图：

a.这是没有更改Tab默认设置之前                                           b.这个是自定义Tab,这里设置的是动态更改背景，动态更改图标也是  样，当然我的界面不太美观。。。

   各位可以看到我所用的图片还有基本框架有那么点眼熟，又有点四不像。。。。是了，创新源于模仿对不？我这个就是个大杂烩其实。。。

http://www.cnblogs.com/allin/archive/2010/05/11/1732200.html写的非常好。。。。

以及http://www.eoeandroid.com/thread-1035-1-1.html这篇是对于Android中Tab组件经典代码的分析说的也不错。。。这个的

源码地址是http://www.pudn.com/downloads338/sourcecode/comm/android/detail1480789.html，作者不详。是基于menu的Tab实例，很容易上手。

1.布局

回归正传，首先说一下布局：

从我的工程中可以看到，有两个布局文件。一个用来填充列表的list_views.xml还有一个就是main.xml，除此之外还定义了三个menu文件（当然你有几个Tab就定义几个，当然还要在main.xml里添加供显示的控件）。

list_views.xml

 <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="horizontal" android:layout_width="fill_parent"android:layout_height="fill_parent"><ImageView android:id="@+id/img" android:layout_width="wrap_content"android:layout_height="wrap_content" android:layout_margin="5px" /><LinearLayout android:orientation="vertical"android:layout_width="wrap_content" android:layout_height="wrap_content"android:layout_weight="2"><TextView android:id="@+id/title" android:layout_width="wrap_content"android:layout_height="wrap_content" android:textColor="#CCCCCCCC"android:textSize="17px" /><TextView android:id="@+id/name" android:layout_width="wrap_content"android:layout_height="wrap_content" android:textColor="#FFFFFFFF"android:textSize="22px" /><TextView android:id="@+id/info" android:layout_width="wrap_content"android:layout_height="wrap_content" android:textColor="#CCCCCCCC"android:textSize="17px" /></LinearLayout><LinearLayout android:orientation="vertical"android:gravity="right" android:layout_width="wrap_content"android:layout_height="wrap_content" android:layout_weight="1"><LinearLayout android:orientation="horizontal"android:layout_width="wrap_content" android:layout_height="wrap_content"><TextView android:id="@+id/mark" android:gravity="right"android:layout_width="fill_parent" android:layout_height="fill_parent"android:textColor="#CCCCCCCC" android:textSize="17px" /><TextView android:id="@+id/widget46" android:gravity="right"android:text="@string/fen" android:layout_width="fill_parent"android:layout_height="fill_parent" android:textColor="#CCCCCCCC"android:textSize="17px" /></LinearLayout><RatingBar android:id="@+id/small_ratingbar" style="?android:attr/ratingBarStyleSmall" mce_style="?android:attr/ratingBarStyleSmall"android:layout_marginLeft="5dip" android:isIndicator="false"android:numStars="5" android:rating="1" android:layout_width="wrap_content"android:layout_height="wrap_content" android:layout_gravity="right" /><TextView android:id="@+id/price" android:layout_width="fill_parent"android:layout_height="fill_parent" android:textColor="#CCCCCCCC"android:textSize="17px" android:gravity="right" /></LinearLayout></LinearLayout>

main.xml

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent" android:layout_height="fill_parent"android:background="@drawable/back_blue"><LinearLayout android:id="@+id/widget_layout_yellow"android:layout_width="fill_parent" android:layout_height="fill_parent"android:orientation="vertical"><ListView android:layout_width="wrap_content"android:layout_height="wrap_content" android:id="@+id/listView2" /></LinearLayout><LinearLayout android:id="@+id/widget_layout_pink"android:layout_width="fill_parent" android:layout_height="fill_parent"android:orientation="vertical"><ListView android:layout_width="wrap_content"android:layout_height="wrap_content" android:id="@+id/listView3" /></LinearLayout><LinearLayout android:id="@+id/widget_layout_grey"android:layout_width="fill_parent" android:layout_height="fill_parent"android:orientation="vertical"><ListView android:layout_width="wrap_content"android:layout_height="wrap_content" android:id="@+id/listView4" /></LinearLayout></FrameLayout>

menu的我只贴一个，因为都差不多。

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"><group android:id="@+id/group_a"><item android:id="@+id/item_a" android:icon="@drawable/gimp" android:title="Gimp"></item></group></menu>

2.源程序代码

添加Tab

myTabhost.addTab(myTabhost.newTabSpec("One")// make a new Tab.setIndicator("A", getResources().getDrawable(R.drawable.gimp))// set the Title and Icon.setContent(R.id.widget_layout_yellow));// set the layoutmyTabhost.addTab(myTabhost.newTabSpec("Two")// make a new Tab.setIndicator("B",getResources().getDrawable(R.drawable.mumule))// set the Title and Icon.setContent(R.id.widget_layout_grey));// set the layoutmyTabhost.addTab(myTabhost.newTabSpec("Three")// make a new Tab.setIndicator("C",getResources().getDrawable(R.drawable.notepad))// set the Title and Icon.setContent(R.id.widget_layout_pink));

 

 初始化Tab背景

for (int i = 0; i < tabWidget.getChildCount(); i++) {View vvv = tabWidget.getChildAt(i);if (myTabhost.getCurrentTab() == i) {vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_on));} else {vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_off));}}

当点击tab选项卡的时候，更改当前的背景，并装载对应的 menu

myTabhost.setOnTabChangedListener(new OnTabChangeListener() {@Overridepublic void onTabChanged(String tagString) {// TODO Auto-generated method stubfor (int i = 0; i < tabWidget.getChildCount(); i++) {View vvv = tabWidget.getChildAt(i);if (myTabhost.getCurrentTab() == i) {vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_on));} else {vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_off));}}if (tagString.equals("One")) {myMenuSettingTag = 1;}if (tagString.equals("Two")) {myMenuSettingTag = 2;}if (tagString.equals("Three")) {myMenuSettingTag = 3;}if (myMenu != null) {onCreateOptionsMenu(myMenu);}}});

RatingBar的不能映射，即使你成功的用布局文件显示出了按钮也无法添加按钮的响应，这时就要研究一下ListView是如何现实的了，所以我们必须要自己写一个Adapter继承BaseAdapter，并实现其 getView()。Adapter 显示中 每一行就是一个View 你可以把这个View 定义成任何子布局。

public final class ViewHolder {public ImageView img;public TextView title;public TextView info;public TextView price;public TextView name;public TextView mark;public RatingBar rb;}public class MyAdapter extends BaseAdapter {private LayoutInflater mInflater;public MyAdapter(Context context) {this.mInflater = LayoutInflater.from(context);}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn mData.size();}@Overridepublic Object getItem(int arg0) {// TODO Auto-generated method stubreturn null;}@Overridepublic long getItemId(int arg0) {// TODO Auto-generated method stubreturn 0;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ViewHolder holder = null;if (convertView == null) {holder = new ViewHolder();convertView = mInflater.inflate(R.layout.list_views, null);holder.img = (ImageView) convertView.findViewById(R.id.img);holder.title = (TextView) convertView.findViewById(R.id.title);holder.info = (TextView) convertView.findViewById(R.id.info);holder.name = (TextView) convertView.findViewById(R.id.name);holder.mark = (TextView) convertView.findViewById(R.id.mark);holder.price = (TextView) convertView.findViewById(R.id.price);holder.rb = (RatingBar) convertView.findViewById(R.id.small_ratingbar);convertView.setTag(holder);} else {holder = (ViewHolder) convertView.getTag();}holder.img.setBackgroundResource((Integer) mData.get(position).get("img"));holder.title.setText((String) mData.get(position).get("title"));holder.info.setText((String) mData.get(position).get("info"));holder.name.setText((String) mData.get(position).get("name"));holder.mark.setText((String) mData.get(position).get("mark"));holder.price.setText((String) mData.get(position).get("price"));holder.rb.setRating(Float.parseFloat((String) mData.get(position).get("mark")));return convertView;}}

获取数据。HashMap的每个键值数据映射到布局文件中对应id的组件上。下面做适配，new一个MyAdapter参数一次是：this，布局文件（list_views.xml），HashMap的 title 和 info，img等。布局文件的组件id，title，info，img等。布局文件的各组件分别映射到HashMap的各元素上，完成适配。

private ArrayList<HashMap<String, Object>> getData() {ArrayList<HashMap<String, Object>> listItem = new ArrayList<HashMap<String, Object>>();HashMap<String, Object> map = new HashMap<String, Object>();map.put("name", "Greek");map.put("title", "G1");map.put("info", "google 1");map.put("img", R.drawable.gimp);map.put("price", "免费");map.put("mark", "3.5");listItem.add(map);map = new HashMap<String, Object>();map.put("name", "China");map.put("title", "G2");map.put("info", "google 2 ");map.put("img", R.drawable.mumule);map.put("price", "免费");map.put("mark", "4");listItem.add(map);map = new HashMap<String, Object>();map.put("name", "Japan");map.put("title", "G3");map.put("info", "google 3");map.put("img", R.drawable.notepad);map.put("price", "免费");map.put("mark", "2");listItem.add(map);return listItem;}

获取填充Listview

mData = getData();ListView lv = (ListView) findViewById(R.id.listView2);MyAdapter adapter = new MyAdapter(this);lv.setAdapter(adapter);

3.完整代码

package com.my.tabs;import java.util.ArrayList;import java.util.HashMap;import android.app.TabActivity;import android.content.Context;import android.graphics.Color;import android.os.Bundle;import android.util.Log;import android.view.LayoutInflater;import android.view.Menu;import android.view.MenuInflater;import android.view.ViewGroup;import android.view.View;import android.widget.ArrayAdapter;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.ListView;import android.widget.RatingBar;import android.widget.TabHost;import android.widget.TabWidget;import android.widget.TextView;import android.widget.TabHost.OnTabChangeListener;public class Tabs extends TabActivity {private TabHost myTabhost;protected int myMenuSettingTag = 0;protected Menu myMenu;private static final int myMenuResources[] = { R.menu.a_menu,R.menu.b_menu, R.menu.c_menu };private ArrayList<HashMap<String, Object>> mData;private String[] GENRES = { "Action", "Adventure", "Animation", "Children","Comedy", "Documentary", "Drama", "Foreign", "History","Independent", "Romance", "Sci-Fi", "Television", "Thriller" };/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);myTabhost = this.getTabHost();final TabWidget tabWidget = myTabhost.getTabWidget();LayoutInflater.from(this).inflate(R.layout.main,myTabhost.getTabContentView(), true);myTabhost.setBackgroundColor(Color.argb(150, 0, 0, 0));myTabhost.addTab(myTabhost.newTabSpec("One")// make a new Tab.setIndicator("A", getResources().getDrawable(R.drawable.gimp))// set the Title and Icon.setContent(R.id.widget_layout_yellow));// set the layoutmyTabhost.addTab(myTabhost.newTabSpec("Two")// make a new Tab.setIndicator("B",getResources().getDrawable(R.drawable.mumule))// set the Title and Icon.setContent(R.id.widget_layout_grey));// set the layoutmyTabhost.addTab(myTabhost.newTabSpec("Three")// make a new Tab.setIndicator("C",getResources().getDrawable(R.drawable.notepad))// set the Title and Icon.setContent(R.id.widget_layout_pink));// 初始化Tab选项卡背景for (int i = 0; i < tabWidget.getChildCount(); i++) {View vvv = tabWidget.getChildAt(i);if (myTabhost.getCurrentTab() == i) {vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_on));} else {vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_off));}}// //** * 当点击tab选项卡的时候，更改当前的背景，并装载对应的 menu */myTabhost.setOnTabChangedListener(new OnTabChangeListener() {@Overridepublic void onTabChanged(String tagString) {// TODO Auto-generated method stubfor (int i = 0; i < tabWidget.getChildCount(); i++) {View vvv = tabWidget.getChildAt(i);if (myTabhost.getCurrentTab() == i) {vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_on));} else {vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_off));}}if (tagString.equals("One")) {myMenuSettingTag = 1;}if (tagString.equals("Two")) {myMenuSettingTag = 2;}if (tagString.equals("Three")) {myMenuSettingTag = 3;}if (myMenu != null) {onCreateOptionsMenu(myMenu);}}});initList();initList3();}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// TODO Auto-generated method stub// Hold on to thismyMenu = menu;myMenu.clear();// Inflate the currently selected menu XML resource.MenuInflater inflater = getMenuInflater();switch (myMenuSettingTag) {case 1:inflater.inflate(myMenuResources[0], menu);break;case 2:inflater.inflate(myMenuResources[1], menu);break;case 3:inflater.inflate(myMenuResources[2], menu);break;default:inflater.inflate(myMenuResources[0], menu);break;}return super.onCreateOptionsMenu(menu);}//获取填充ListViewprivate void initList() {// 得到想要填充的ListViewmData = getData();ListView lv = (ListView) findViewById(R.id.listView2);MyAdapter adapter = new MyAdapter(this);lv.setAdapter(adapter);}private void initList3() {ListView listView1 = (ListView) findViewById(R.id.listView3);ArrayAdapter<String> Adapter = new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, GENRES);listView1.setAdapter(Adapter);}//获取填充数据private ArrayList<HashMap<String, Object>> getData() {ArrayList<HashMap<String, Object>> listItem = new ArrayList<HashMap<String, Object>>();HashMap<String, Object> map = new HashMap<String, Object>();map.put("name", "Greek");map.put("title", "G1");map.put("info", "google 1");map.put("img", R.drawable.gimp);map.put("price", "免费");map.put("mark", "3.5");listItem.add(map);map = new HashMap<String, Object>();map.put("name", "China");map.put("title", "G2");map.put("info", "google 2 ");map.put("img", R.drawable.mumule);map.put("price", "免费");map.put("mark", "4");listItem.add(map);map = new HashMap<String, Object>();map.put("name", "Japan");map.put("title", "G3");map.put("info", "google 3");map.put("img", R.drawable.notepad);map.put("price", "免费");map.put("mark", "2");listItem.add(map);return listItem;}// ListView 中某项被选中后的逻辑// @Overrideprotected void onListItemClick(ListView l, View v, int position, long id) {Log.v("MyListView4-click", (String) mData.get(position).get("title"));}public final class ViewHolder {public ImageView img;public TextView title;public TextView info;public TextView price;public TextView name;public TextView mark;public RatingBar rb;}public class MyAdapter extends BaseAdapter {private LayoutInflater mInflater;public MyAdapter(Context context) {this.mInflater = LayoutInflater.from(context);}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn mData.size();}@Overridepublic Object getItem(int arg0) {// TODO Auto-generated method stubreturn null;}@Overridepublic long getItemId(int arg0) {// TODO Auto-generated method stubreturn 0;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ViewHolder holder = null;if (convertView == null) {holder = new ViewHolder();convertView = mInflater.inflate(R.layout.list_views, null);holder.img = (ImageView) convertView.findViewById(R.id.img);holder.title = (TextView) convertView.findViewById(R.id.title);holder.info = (TextView) convertView.findViewById(R.id.info);holder.name = (TextView) convertView.findViewById(R.id.name);holder.mark = (TextView) convertView.findViewById(R.id.mark);holder.price = (TextView) convertView.findViewById(R.id.price);holder.rb = (RatingBar) convertView.findViewById(R.id.small_ratingbar);convertView.setTag(holder);} else {holder = (ViewHolder) convertView.getTag();}holder.img.setBackgroundResource((Integer) mData.get(position).get("img"));holder.title.setText((String) mData.get(position).get("title"));holder.info.setText((String) mData.get(position).get("info"));holder.name.setText((String) mData.get(position).get("name"));holder.mark.setText((String) mData.get(position).get("mark"));holder.price.setText((String) mData.get(position).get("price"));holder.rb.setRating(Float.parseFloat((String) mData.get(position).get("mark")));return convertView;}}}

listView在开始绘制的时候，系统首先调用getCount（）函数，根据他的返回值得到listView的长度（这也是为什么在开始的第一张图特别的标出列表长度），然后根据这个长度，调用getView（）逐一绘制每一行。如果你的getCount（）返回值是0的话，列表将不显示同样return 1，就只显示一行。

　　系统显示列表时，首先实例化一个适配器（这里将实例化自定义的适配器）。当手动完成适配时，必须手动映射数据，这需要重写getView（）方法。系统在绘制列表的每一行的时候将调用此方法。getView()有三个参数，position表示将显示的是第几行，covertView是从布局文件中inflate来的布局。我们用LayoutInflater的方法将定义好的list_views.xml文件提取成View实例用来显示。然后将xml文件中的各个组件实例化（简单的findViewById()方法）。这样便可以将数据对应到各个组件上了。但是按钮为了响应点击事件，需要为它添加点击监听器，这样就能捕获点击事件。至此一个自定义的listView就完成了，现在让我们回过头从新审视这个过程。系统要绘制ListView了，他首先获得要绘制的这个列表的长度，然后开始绘制第一行，怎么绘制呢？调用getView()函数。在这个函数里面首先获得一个View（实际上是一个ViewGroup），然后再实例并设置各个组件，显示之。好了，绘制完这一行了。那 再绘制下一行，直到绘完为止。在实际的运行过程中会发现listView的每一行没有焦点了，这是因为Button抢夺了listView的焦点，只要布局文件中将Button设置为没有焦点就OK了。