Tab选项卡+实例 - 军军小站|张军博客

Tab选项卡是一个非常方便的组件。

一.使用Tab组件的步骤：

1.在布局文件中使用FrameLayout列出Tab组件以及Tab中的内容组件

2. Activity要继承TabActivity

3.调用TabActivity的getTabHost( )方法来获得TabHost对象

4.通过TabHost创建Tab选项

二.实现不同Tab里面的内容有两种方式：

1.切换不同的Tab时候，不同Tab里面的内容在同一个Activity显示，主要是通过修改布局文件里面的id来实现的。下面是一个具体的例子：

MainActivity.java

package com.android.tab.activity;
import android.app.TabActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;
public class MainActivity extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
//获得TabHost对象
TabHost tah = getTabHost();
// from(this)从TabActivity获取LayoutInflater
// R.layout.main 存放Tab布局
// 通过TabHost获得存放Tab标签页内容的FrameLayout
// 是否将inflate 加到根布局元素上
LayoutInflater.from( this ).inflate(R.layout.main, tah.getTabContentView(), true );
//设置Tab标签的内容和显示内容
tah.addTab(tah.newTabSpec( "tab1" ).setIndicator( "图片1" ).setContent(R.id.TextView01));
tah.addTab(tah.newTabSpec( "tab2" ).setIndicator( "图片2" ).setContent(R.id.TextView02));
tah.addTab(tah.newTabSpec( "tab3" ).setIndicator( "图片3" ).setContent(R.id.TextView03));
}
}

main.xml

<? xml version = "1.0" encoding = "utf-8" ?>
< FrameLayout xmlns:android = "http://schemas.android.com/apk/res/android"
android:id = "@+id/FrameLayout01"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
>
< TabHost
android:id = "@+id/TabHost01"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
/>
< TextView
android:id = "@+id/TextView01"
android:background = "@drawable/pic1"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
/>
< TextView
android:id = "@+id/TextView02"
android:background = "@drawable/pic2"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
/>
< TextView
android:id = "@+id/TextView03"
android:background = "@drawable/pic3"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
/>
</ FrameLayout >

效果图：

1.切换不同的Tab时候，不同Tab里面的内容在不同的Activity显示

先创建三个类FirstActivity.java，SecondActivity.java，ThirdActivity.java，都是继承Activity

FirstActivity.java

package com.android.tabtest.activity;
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class FirstActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
TextView textview = new TextView( this );
textview.setText( "这是Tab1" );
setContentView(textview);
}
}

SecondActivity.java

package com.android.tabtest.activity;
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class SecondActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
TextView textview = new TextView( this );
textview.setText( "这是Tab2" );
setContentView(textview);
}
}

ThirdActivity.java

package com.android.tabtest.activity;
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class ThirdActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
TextView textview = new TextView( this );
textview.setText( "这是Tab3" );
setContentView(textview);
}
}

在layout文件夹中对main.xml进行修改

<? xml version = "1.0" encoding = "utf-8" ?>
< TabHost android:id = "@android:id/tabhost" android:layout_width = "fill_parent"
android:layout_height = "fill_parent" xmlns:android = "http://schemas.android.com/apk/res/android" >
< LinearLayout
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
>
< TabWidget
android:id = "@android:id/tabs"
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
/>
< FrameLayout
android:id = "@android:id/tabcontent"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:padding = "5dp"
/>
</ LinearLayout >
</ TabHost >

新建一个测试Tab的类TabDemo.java，继承于TabActivity类

package com.android.tabtest.activity;
import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
public class TabDemo extends TabActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.main); //这里使用了上面创建的xml文件（Tab页面的布局）
Resources res = getResources(); // Resource object to get Drawables
TabHost tabHost = getTabHost(); // The activity TabHost
TabSpec spec;
Intent intent; // Reusable Intent for each tab
//第一个Tab
intent = new Intent( this ,FirstActivity. class ); //新建一个Intent用作Tab1显示的内容
spec = tabHost.newTabSpec( "tab1" ) //新建一个 Tab
.setIndicator ( "Tab1" , res.getDrawable(android.R.drawable.ic_media_play)) //设置名称以及图标
.setContent (intent); //设置显示的intent，这里的参数也可以是R.id.xxx
tabHost.addTab(spec); //添加进tabHost
//第二个Tab
intent = new Intent( this ,SecondActivity. class ); //第二个Intent用作Tab1显示的内容
spec = tabHost.newTabSpec( "tab2" ) //新建一个 Tab
.setIndicator( "Tab2" , res.getDrawable(android.R.drawable.ic_menu_edit)) //设置名称以及图标
.setContent(intent); //设置显示的intent，这里的参数也可以是R.id.xxx
tabHost.addTab(spec); //添加进tabHost
//第三个Tab
intent = new Intent( this ,SecondActivity. class ); //第二个Intent用作Tab1显示的内容
spec = tabHost.newTabSpec( "tab2" ) //新建一个 Tab
.setIndicator( "Tab3" , res.getDrawable(android.R.drawable.ic_menu_help)) //设置名称以及图标
.setContent(intent); //设置显示的intent，这里的参数也可以是R.id.xxx
tabHost.addTab(spec); //添加进tabHost
tabHost.setCurrentTab( 0 ); //设置当前的选项卡,这里为Tab1
}
}

在AndroidManifest.xml里加入9~29行的声明代码

<? xml version = "1.0" encoding = "utf-8" ?>
< manifest xmlns:android = "http://schemas.android.com/apk/res/android"
package = "com.android.tabtest.activity"
android:versionCode = "1"
android:versionName = "1.0" >
< uses-sdk android:minSdkVersion = "10" />
< application android:icon = "@drawable/icon" android:label = "@string/app_name" >
< activity android:name = ".TabDemo"
android:label = "@string/app_name" >
< intent-filter >
< action android:name = "android.intent.action.MAIN" />
< category android:name = "android.intent.category.LAUNCHER" />
</ intent-filter >
</ activity >
< activity android:name = ".FirstActivity"
android:label = "@string/app_name" >
< intent-filter >
< action android:name = "android.intent.action.MAIN" />
< category android:name = "android.intent.category.LAUNCHER" />
</ intent-filter >
</ activity >
< activity android:name = ".SecondActivity"
android:label = "@string/app_name" >
< intent-filter >
< action android:name = "android.intent.action.MAIN" />
< category android:name = "android.intent.category.LAUNCHER" />
</ intent-filter >
</ activity >
</ application >
</ manifest >

效果图：

======== =实例:选项卡的收藏列表 5个文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/listcolor"
    android:orientation="vertical" >

    <TabHost
        android:id="@android: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="fill_parent"
                android:layout_height="0.0dip"
                android:layout_weight="1.0" >
            </FrameLayout>

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

            <include layout="@layout/ layout_favorite_bottom_radiobutton "/>
        </LinearLayout>
    </TabHost>

</LinearLayout>

layout_favorite_bottom_radiobutton.xml 单选效果

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_bottom"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

    < RadioGroup
        android:id="@+id/radiogroup"
        style="@style/news_tab_bottom_group" >

        <RadioButton
            android:id="@+id /radio_trade "
            style="@style/news_tab_bottom"
            android:checked="true"
            android:text="@string/table_news" />

        <RadioButton
            android:id="@+id /radio_cps "
            style="@style/news_tab_bottom"
            android:text="@string/table_exhibitors" />
    </RadioGroup>

</RelativeLayout>

FavoriteTabHostActivity.java

package com.cps.media.ui.favorite;

import com.cps.media.R;
import com.cps.media.util.Util;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.RadioGroup;
import android.widget.RelativeLayout;
import android.widget.TabHost;
import android.widget.RadioGroup.OnCheckedChangeListener;

public class FavoriteTabHostActivity extends TabActivity {

    private TabHost mTabHost;

    private RadioGroup mRadioGroup;

    private RelativeLayout mRelativeLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_favorite_tabhost);

        mTabHost = getTabHost();

        mRelativeLayout = (RelativeLayout) findViewById(R.id.layout_bottom);

       initCpsNewsTab();
        initTradeNewsTab();

        mRadioGroup = (RadioGroup) findViewById(R.id.radiogroup);
        mRadioGroup.setOnCheckedChangeListener(checkedChangeListener);

        mTabHost.setCurrentTab(0);
        Util.setBottomButtonBackground(mRadioGroup, mRadioGroup.getCheckedRadioButtonId());

    }

    private void initCpsNewsTab() {

        //引入不同的actibity
        Intent intent = new Intent(this, FavoriteActivityList .class);
        intent.putExtra(FavoriteActivityList.NEWS_TITLE, R.string.table_news);
        intent.putExtra(FavoriteActivityList.NEWS_TYPE, Util.FAVORITE_NEWS);
        mTabHost. addTab (mTabHost
                .newTabSpec(getResources().getString(R.string. table_news ))
                .setIndicator(getResources().getString(R.string.table_news))
                . setContent (intent));
    }

    private void initTradeNewsTab() {
        Intent intent = new Intent(this, FavoriteActivityList.class);
        intent.putExtra(FavoriteActivityList.NEWS_TITLE, R.string .table_exhibitors );
        intent.putExtra(FavoriteActivityList.NEWS_TYPE, Util.FAVORITE_EXHIBITOR);
        mTabHost.addTab(mTabHost
                .newTabSpec(getResources().getString(R.string.table_exhibitors))
                .setIndicator(getResources().getString(R.string.table_exhibitors))
                .setContent(intent));
    }

    private OnCheckedChangeListener checkedChangeListener = new OnCheckedChangeListener() {

        @Override
        public void onCheckedChanged (RadioGroup group, int checkedId) {
            switch (checkedId) {
            case R.id.radio_cps:
                mTabHost.setCurrentTabByTag(getResources().getString(R.string.table_exhibitors));
                break;
            case R.id.radio_trade:
                mTabHost.setCurrentTabByTag(getResources().getString(R.string.table_news));
                break;

            default:
                break;
            }
            Util.setBottomButtonBackground(group, checkedId);
        }
    };

}

layout_favorite_list.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/listcolor"
    android:orientation="vertical" >

    <include layout="@layout/header_bar"/>

    < FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        < ViewSwitcher
            android:id="@+id/viewswitcher_news_top"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center" >
        </ViewSwitcher>

        < ListView
            android:id="@+id/favorite_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:cacheColorHint="@color/transparent"
            android:divider="@drawable/tip_line" />
    </FrameLayout>

</LinearLayout>

package com.cps.media.ui.favorite;

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.util.ArrayList;
import java.util.List;

import org.apache.http.HttpResponse;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;
import org.json.JSONArray;
import org.json.JSONObject;

import com.cps.media.R;
import com.cps.media.model.ExhibitorItem;
import com.cps.media.model.FavoriteItem;
import com.cps.media.model.NewsItem;
import com.cps.media.ui.PopupWindowImageButton;
import com.cps.media.ui.account.AccountManager;
import com.cps.media.ui.exhibitors.ExhibitorActivity;
import com.cps.media.ui.news.NewsContainerActivity;
import com.cps.media.util.CONST;
import com.cps.media.util.Util;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ImageButton;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.ViewSwitcher;
import android.widget.AdapterView.OnItemClickListener;

public class FavoriteActivityList extends Activity implements OnClickListener{

   public static String NEWS_TITLE = "title";
   public static String NEWS_TYPE = "type";

   private ListView mList;

   private List<FavoriteItem> mFavoriteList;

   private ItemAdapter mAdapter;

   private ViewSwitcher viewSwitcher;

   private ImageButton mBackImageButton;

   private TextView mTitleTextView;

   private int mMode;

   private PopupWindowImageButton mMenuImageButton;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       // TODO Auto-generated method stub
       super.onCreate(savedInstanceState);
       setContentView(R.layout.layout_favorite_list);

       mList = (ListView) findViewById(R.id.favorite_list);

       viewSwitcher = (ViewSwitcher) findViewById(R.id.viewswitcher_news_top);
       viewSwitcher.addView(getLayoutInflater().inflate(
               R.layout.layout_progress_page, null));

       mBackImageButton = (ImageButton) findViewById(R.id.btn_newscontent_back);
       mBackImageButton.setOnClickListener(this);

       mMenuImageButton = (PopupWindowImageButton) findViewById(R.id.header_menu);

       mTitleTextView = (TextView) findViewById(R.id.new_header_title);
       mTitleTextView.setText(getIntent().getIntExtra(NEWS_TITLE, R.string.news_top_left_text));
       mMode = getIntent().getIntExtra(NEWS_TYPE, Util.FAVORITE_NEWS);
       requestData();
   }

   @Override
   protected void onResume() {
       // TODO Auto-generated method stub
       super.onResume();
       mMenuImageButton.reload(Util.SHOW_FAVORITE);
   }

   private OnItemClickListener listener = new OnItemClickListener() {

       @Override
       public void onItemClick(AdapterView<?> parent, View view, int position,
               long id) {
           Intent intent = null;
           if(mMode == Util.FAVORITE_NEWS){
               intent = new Intent(FavoriteActivityList.this,
                       NewsContainerActivity.class);
               NewsItem item = new NewsItem();
               item.setId(mFavoriteList.get(position).getCid());
               item.setNewsType(mFavoriteList.get(position).getSrc_type());
               item.setTitle(mFavoriteList.get(position).getTitle());
               intent.putExtra("news_item", item);
               startActivityForResult(intent, 0);
           }else if(mMode == Util.FAVORITE_EXHIBITOR){
               intent = new Intent(FavoriteActivityList.this,
                       ExhibitorActivity.class);
               ExhibitorItem item = new ExhibitorItem();
               item.setId(mFavoriteList.get(position).getCid());
               item.setName(mFavoriteList.get(position).getTitle());
               intent.putExtra("exhibitor_item", item);
               startActivityForResult(intent,0);
           }
       }
   };

   protected void onActivityResult(int requestCode, int resultCode, Intent data) {
       switch (requestCode) {
       case 0:
           requestData();
           break;

       default:
           break;
       }
   }

   private void requestData() {
       viewSwitcher.setVisibility(View.VISIBLE);
       viewSwitcher.showNext();
       Thread t = new Thread() {
           @Override
           public void run() {
               super.run();
               HttpClient client = new DefaultHttpClient();
               StringBuilder builder = new StringBuilder();
               int error = 1;
               JSONArray array = null;
               HttpGet myget = null;
               if (getIntent().getIntExtra(NEWS_TYPE, Util.FAVORITE_NEWS) == Util.FAVORITE_NEWS) {
                   myget = new HttpGet(CONST.URL_FAVORIT_LIST
                           .replace("{0}", "english")
                           .replace("{1}", "favorList")
                           .replace("{2}", Util.FAVORITE_NEWS+"")
                           .replace(
                                   "{3}",
                                   AccountManager.getInstance().getAccount()
                                           .getId()
                                           + ""));
               } else {
                   myget = new HttpGet(CONST.URL_FAVORIT_LIST
                           .replace("{0}", "english")
                           .replace("{1}", "favorList")
                           .replace("{2}", Util.FAVORITE_EXHIBITOR+"")
                           .replace(
                                   "{3}",
                                   AccountManager.getInstance().getAccount()
                                           .getId()
                                           + ""));
               }
               try {
                   HttpResponse response = client.execute(myget);
                   BufferedReader reader = new BufferedReader(
                           new InputStreamReader(response.getEntity()
                                   .getContent()));
                   for (String s = reader.readLine(); s != null; s = reader
                           .readLine()) {
                       builder.append(s);
                   }
                   JSONObject jsonObject = new JSONObject(builder.toString());
                   error = jsonObject.getInt("errno");
                   String errormsg = jsonObject.getString("errmsg");
                   Log.v("wgp",myget.getURI().toString());
                   Log.v("wgp", "error=" + error);
                   Log.v("wgp", "errormsg=" + errormsg);
                   if (error == 0) {
                       array = jsonObject.getJSONArray("data");
                       mFavoriteList = new ArrayList<FavoriteItem>();
                       FavoriteItem item = null;
                       String srcType;
                       for (int i = 0; i < array.length(); i++) {
                           item = new FavoriteItem();
                           item.setId(array.getJSONObject(i).getInt("id"));
                           item.setUserId(array.getJSONObject(i).getInt("userid"));
                           item.setUsername(array.getJSONObject(i).getString("username"));
                           item.setType(array.getJSONObject(i).getInt("type"));
                           item.setCid(array.getJSONObject(i).getInt("cid"));
                           item.setTitle(array.getJSONObject(i).getString("title"));
                           item.setUrl(array.getJSONObject(i).getString("url"));
                           item.setTag(array.getJSONObject(i).getString("tag"));
                           item.setSrc(array.getJSONObject(i).getString("src"));
                           item.setCreateDate(array.getJSONObject(i).getString("created"));
                           item.setModifiedDate(array.getJSONObject(i).getString("modified"));
                           srcType = array.getJSONObject(i).getString("src_type");
                           if(srcType != null && srcType.equals("cps")){
                               item.setSrc_type("industry");
                           }else{
                               item.setSrc_type(srcType);
                           }
                           mFavoriteList.add(item);
                       }
                       if (mFavoriteList.size() == 0) {
                           handler.sendEmptyMessage(-1);
                       } else {
                           handler.sendEmptyMessage(1);
                       }
                   }
               } catch (Exception e) {
                   e.printStackTrace();
                   handler.sendEmptyMessage(-1);
               } finally {
               }
           }
       };
       t.start();
   }

   Handler handler = new Handler() {
       public void handleMessage(android.os.Message msg) {
           if (msg.what == 1) {
               mAdapter = new ItemAdapter();
               mList.setAdapter(mAdapter);
               mList.setOnItemClickListener(listener);
           }
           viewSwitcher.setVisibility(View.INVISIBLE);
       };
   };

   class ItemAdapter extends BaseAdapter {

       private ViewHolder holder;

       @Override
       public int getCount() {
           return mFavoriteList.size();
       }

       @Override
       public Object getItem(int location) {
           return mFavoriteList.get(location);
       }

       @Override
       public long getItemId(int location) {
           return mFavoriteList.get(location).getId();
       }

       @Override
       public View getView(int position, View convertView, ViewGroup parent) {

           try {
               if (convertView == null) {
                   holder = new ViewHolder();
                   convertView = getLayoutInflater().inflate(
                           R.layout.layout_favorite_list_item, null);
                   holder.title = (TextView) convertView
                           .findViewById(R.id.favorite_title);
                   convertView.setTag(holder);
               } else {
                   holder = (ViewHolder) convertView.getTag();
               }
               holder.title.setText(mFavoriteList.get(position).getTitle());
           } catch (Exception e) {
               e.printStackTrace();
           }
           return convertView;

       }

       class ViewHolder {
           TextView title;
       }
   }

   @Override
   public void onClick(View v) {
       int id = v.getId();
       switch (id) {
       case R.id.btn_newscontent_back:
           backKey();
           break;

       default:
           break;
       }
   }

   private void backKey() {
       setResult(RESULT_OK);
       finish();
       getParent().overridePendingTransition(R.anim.news_dync_in_from_left,
               R.anim.news_dync_out_to_right);
   }

}

Tab选项卡+实例

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义