android开发中TabHost使用方法

来源：互联网发布：网络视频传输套接字编辑：程序博客网时间：2024/06/05 17:05

一、效果图

二、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 返回当前标签页的总数     */    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>

0 0