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

<TabHost
android:id="@+id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.0" />

<LinearLayout
android: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" >

<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.0"
android:visibility="gone" />

<RadioGroup
android: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" >

<RadioButton
android: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" />

<RadioButton
android: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" />

<RadioButton
android: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" />

<RadioButton
android: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" />

<RadioButton
android: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 返回当前标
4000
签页的总数
*/
public int getTabCount() {
return mTabCount;
}

@Override
public void addTab(TabSpec tabSpec) {
mTabCount++;
super.addTab(tabSpec);
}

@Override
public 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;

@Override
protected 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() {

@Override
public 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 万年历 Calendar
switch (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;
}

@Override
public int getCount() {
return gridViewIconId.length;
}

@Override
public Object getItem(int position) {
return null;
}

@Override
public long getItemId(int position) {
return 0;
}

@Override
public 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">

<RelativeLayout
android:id="@+id/top_relative"
android:layout_width="fill_parent"
android:layout_height="45.0dip"
android:background="@color/transparent" >

<TextView
android: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>

<GridView
android: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>