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);
    }

}