android开发中TabHost使用方法

一、效果图

二、android开发中TabHost使用方法详解

1、定义一个布局文件，将一个RadioGroup放在TabWidget中，然后将TabWidget放在TabHost中，其中TabWidget是选项卡切换按钮，通过点击该组件可以切换选项卡，该组件与FrameLayout组件是TabHost组件中必备的两个组件

    <?xml version="1.0" encoding="utf-8"?><com.weipeng.android.pocketlife.AnimationTabHostUtils xmlns:android="http://schemas.android.com/apk/res/android"android:id="@android:id/tabhost"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><TabHostandroid:id="@+id/tabhost"android:layout_width="fill_parent"android:layout_height="fill_parent" ><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><FrameLayoutandroid:id="@android:id/tabcontent"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1.0" /><LinearLayoutandroid:id="@+id/console_line_bottom"android:layout_width="match_parent"android:layout_height="70dp"android:layout_alignParentBottom="true"android:background="@color/transparent"android:orientation="horizontal" ><TabWidgetandroid:id="@android:id/tabs"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="0.0"android:visibility="gone" /><RadioGroupandroid:id="@+id/main_tab_group"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:background="@drawable/head_bg"android:gravity="bottom"android:orientation="horizontal" ><RadioButtonandroid:id="@+id/main_tab_traffic"style="@style/main_tab_bottom"android:layout_height="69dp"android:drawableTop="@drawable/main_navigation_living"android:text="@string/main_navigation_traffic"android:textColor="#ffffff" /><RadioButtonandroid:id="@+id/main_tab_property"style="@style/main_tab_bottom"android:layout_height="69dp"android:drawableTop="@drawable/main_navigation_property"android:text="@string/main_navigation_property"android:textColor="#ffffff" /><RadioButtonandroid:id="@+id/main_tab_living"style="@style/main_tab_bottom"android:checked="true"android:layout_height="69dp"android:drawableTop="@drawable/main_navigation_traffic"android:text="@string/main_navigation_living"android:textColor="#ffffff" /><RadioButtonandroid:id="@+id/main_tab_wiki"style="@style/main_tab_bottom"android:layout_height="69dp"android:drawableTop="@drawable/main_navigation_more"android:text="@string/main_navigation_sociality"android:textColor="#ffffff" /><RadioButtonandroid:id="@+id/main_tab_more"style="@style/main_tab_bottom"android:layout_height="69dp"android:drawableTop="@drawable/main_navigation_settings"android:text="@string/main_navigation_settings"android:textColor="#ffffff" /></RadioGroup></LinearLayout></LinearLayout></TabHost></com.weipeng.android.pocketlife.AnimationTabHostUtils>

AnimationTabHostUtils是为选项卡切换添加动画，其源代码为

    import android.content.Context;import android.util.AttributeSet;import android.view.animation.Animation;import android.view.animation.AnimationUtils;import android.widget.TabHost;/** 继承 TabHost 组件，带有切入切出的滑动动画效果。 */public class AnimationTabHostUtils extends TabHost {private Animation slideLeftIn;private Animation slideLeftOut;private Animation slideRightIn;private Animation slideRightOut;/** 记录是否打开动画效果 */private boolean isOpenAnimation;/** 记录当前标签页的总数 */private int mTabCount;public AnimationTabHostUtils(Context context, AttributeSet attrs) {super(context, attrs);//       slideLeftIn = AnimationUtils//             .loadAnimation(context, R.anim.push_left_in);//     slideLeftOut = AnimationUtils.loadAnimation(context,//             R.anim.push_left_out);//        slideRightIn = AnimationUtils.loadAnimation(context,//             R.anim.push_right_in);//        slideRightOut = AnimationUtils.loadAnimation(context,//                R.anim.push_right_out);////     isOpenAnimation = false;}/*** 设置是否打开动画效果* * @param isOpenAnimation*            true：打开*/public void setOpenAnimation(boolean isOpenAnimation) {this.isOpenAnimation = isOpenAnimation;}/*** 设置标签滑动动画。<br>* 动画顺序为“左进——>左出——>右进——>左出”* * @param animationResIDs*            动画的资源文件ID* @return true：四个动画文件;<br>*         false：非四个动画文件（无法匹配，采用默认动画）*/public boolean setTabAnimation(int[] animationResIDs) {if (3 == animationResIDs.length) {slideLeftIn = AnimationUtils.loadAnimation(getContext(),animationResIDs[0]);slideLeftOut = AnimationUtils.loadAnimation(getContext(),animationResIDs[1]);slideRightIn = AnimationUtils.loadAnimation(getContext(),animationResIDs[2]);slideRightOut = AnimationUtils.loadAnimation(getContext(),animationResIDs[3]);return true;} else {return false;}}/*** @return 返回当前标签页的总数*/public int getTabCount() {return mTabCount;}@Overridepublic void addTab(TabSpec tabSpec) {mTabCount++;super.addTab(tabSpec);}@Overridepublic void setCurrentTab(int index) {int mCurrentTabID = getCurrentTab();if (null != getCurrentView()) {// 第一次设置 Tab 时，该值为 null。if (isOpenAnimation) {if (mCurrentTabID == (mTabCount - 1) && index == 0) {getCurrentView().startAnimation(slideLeftOut);} else if (mCurrentTabID == 0 && index == (mTabCount - 1)) {getCurrentView().startAnimation(slideRightOut);} else if (index > mCurrentTabID) {getCurrentView().startAnimation(slideLeftOut);} else if (index < mCurrentTabID) {getCurrentView().startAnimation(slideRightOut);}}}super.setCurrentTab(index);if (isOpenAnimation) {if (mCurrentTabID == (mTabCount - 1) && index == 0) {getCurrentView().startAnimation(slideLeftIn);} else if (mCurrentTabID == 0 && index == (mTabCount - 1)) {getCurrentView().startAnimation(slideRightIn);} else if (index > mCurrentTabID) {getCurrentView().startAnimation(slideLeftIn);} else if (index < mCurrentTabID) {getCurrentView().startAnimation(slideRightIn);}}}}

2、创建一个Activity并让它继承TabActivity，定义一个TabHost，然后通过newTabSpec(String tag)创建一个选项卡，其中tag为选项卡的唯一标识，然后通过setIndicator(String tabSpecName)设置选项卡按钮的名称，然后再通过setContent(Activity act or Layout ly)设置选项卡内容，其参数可以为一个Activity或者是一个Layout布局，然后通过tabHost.addTab(tabSpec)的方法添加选项卡

    tabHost.addTab(tabHost.newTabSpec("traffic").setIndicator("traffic").setContent(new Intent(this, MainActivityTraffic.class)));

3、通过将按钮的监听事件设置为tabHost.setCurrentTabByTag("traffic")的方法将布局中的按钮与tabHost中的选项卡相互绑定，从而实现点击tabHost中的选项卡显示相应的界面

    main_tab_traffic=(RadioButton)findViewById(R.id.main_tab_traffic);main_tab_traffic.setOnClickListener(new OnClickListener() {public void onClick(View view) {tabHost.setCurrentTabByTag("traffic");}});

MainActivityTraffic.java

    import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.view.View;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.GridView;import com.weipeng.android.pocketlife.R;import com.weipeng.android.pocketlife.adapter.MainActivityTrafficAdapter;public class MainActivityTraffic extends Activity {private GridView gridView;private Intent intent;private MainActivityTrafficAdapter mainActivityTrafficAdapter;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.mainactivity_traffic);gridView=(GridView) findViewById(R.id.gridView_home);mainActivityTrafficAdapter=new MainActivityTrafficAdapter(MainActivityTraffic.this);gridView.setAdapter(mainActivityTrafficAdapter);gridView.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> arg0, View arg1, int arg2,long arg3) {//                1.1 天气查询 WeatherInquiry//               1.2 地铁查询 SubwayInquiry//                1.3 火车票查询 TrainTicketsInquiry//                 1.4 公交查询 BusInquiry//               1.5 酒店查询 HotelInquiry//                 1.6 旅游百事 TravellingInquiry//                1.7 长途查询 CoachInquiry//                 1.8 航班查询 FlightInquiry //               1.9 万年历 Calendarswitch (arg2) {case 0:intent=new Intent(MainActivityTraffic.this, com.weipeng.android.pocketlife.traffic.WeatherInquiry.MainActivity.class);startActivity(intent);break;case 1:intent=new Intent(MainActivityTraffic.this, com.weipeng.android.pocketlife.traffic.SubwayInquiry.MainActivity.class);startActivity(intent);break;case 2:intent=new Intent(MainActivityTraffic.this, com.weipeng.android.pocketlife.traffic.TrainTicketsInquiry.MainActivity.class);startActivity(intent);break;case 3:intent=new Intent(MainActivityTraffic.this, com.weipeng.android.pocketlife.traffic.BusInquiry.MainActivity.class);startActivity(intent);break;case 4:intent=new Intent(MainActivityTraffic.this, com.weipeng.android.pocketlife.traffic.HotelInquiry.MainActivity.class);startActivity(intent);break;case 5:intent=new Intent(MainActivityTraffic.this, com.weipeng.android.pocketlife.traffic.TravellingInquiry.MainActivity.class);startActivity(intent);break;case 6:intent=new Intent(MainActivityTraffic.this, com.weipeng.android.pocketlife.traffic.CoachInquiry.MainActivity.class);startActivity(intent);break;case 7:intent=new Intent(MainActivityTraffic.this, com.weipeng.android.pocketlife.traffic.FlightInquiry.MainActivity.class);startActivity(intent);break;case 8:intent=new Intent(MainActivityTraffic.this, com.weipeng.android.pocketlife.traffic.Calendar.MainActivity.class);startActivity(intent);break;}}});}}

MainActivityTrafficAdapter.java（为界面设置适配器，将相应的元素添加到界面中）

    import android.content.Context;
<pre name="code" class="java">    import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.RelativeLayout;import android.widget.TextView;import com.weipeng.android.pocketlife.R;public class MainActivityTrafficAdapter extends BaseAdapter {private Context myContext;private int[] gridViewIconId={R.drawable.weather,R.drawable.ditie,R.drawable.train,R.drawable.gongjiao,R.drawable.hotel,R.drawable.lvyoubst,R.drawable.changtu,R.drawable.plane,R.drawable.wnl};private String[] gridViewText={"天气查询", "地铁查询", "火车票查询", "公交查询","酒店查询", "旅游百事", "长途查询", "航班查询","万年历"};private View view;private ImageView imageView;private TextView textView;private RelativeLayout relativeLayout;public MainActivityTrafficAdapter(Context context) {myContext=context;}@Overridepublic int getCount() {return gridViewIconId.length;}@Overridepublic Object getItem(int position) {return null;}@Overridepublic long getItemId(int position) {return 0;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {view=View.inflate(myContext, R.layout.gridview_item, null);relativeLayout=(RelativeLayout) view.findViewById(R.id.relaGrid);imageView=(ImageView) view.findViewById(R.id.image_weather);textView=(TextView) view.findViewById(R.id.text_weather);imageView.setImageResource(gridViewIconId[position]);textView.setText(gridViewText[position]);return view;}}

mainactivity_traffic.xml

    <?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"android:orientation="vertical" android:background="@drawable/pocketlife_background2"><RelativeLayoutandroid:id="@+id/top_relative"android:layout_width="fill_parent"android:layout_height="45.0dip"android:background="@color/transparent" ><TextViewandroid:id="@+id/titleText"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:singleLine="true"android:text="掌上生活"android:textColor="@android:color/white"android:textSize="18dp" /></RelativeLayout><GridViewandroid:id="@+id/gridView_home"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="50dp"android:columnWidth="120dp"android:gravity="center"android:horizontalSpacing="10dp"android:numColumns="3"android:stretchMode="columnWidth"android:verticalSpacing="10dp" ></GridView></RelativeLayout>