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

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

main.xml

1. <?xml version="1.0" encoding="utf-8"?> 
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
3.     android:id="@+id/FrameLayout01"   
4.     android:layout_width="wrap_content"   
5.     android:layout_height="wrap_content" 
6.     >     
7.     <TabHost   
8.         android:id="@+id/TabHost01" 
9.         android:layout_width="wrap_content"   
10.         android:layout_height="wrap_content"   
11.         /> 
12.     <TextView   
13.         android:id="@+id/TextView01"   
14.         android:background="@drawable/pic1" 
15.         android:layout_width="wrap_content"   
16.         android:layout_height="wrap_content"   
17.         />    
18.     <TextView   
19.         android:id="@+id/TextView02"   
20.         android:background="@drawable/pic2" 
21.         android:layout_width="wrap_content"   
22.         android:layout_height="wrap_content"   
23.         />    
24.     <TextView   
25.         android:id="@+id/TextView03"   
26.         android:background="@drawable/pic3" 
27.         android:layout_width="wrap_content"   
28.         android:layout_height="wrap_content"   
29.         />    
30. </FrameLayout> 
31.  
32.  

效果图：

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

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

FirstActivity.java

1. package com.android.tabtest.activity;  
2.  
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.widget.TextView;  
6.  
7. public class FirstActivity extends Activity {  
8.     public void onCreate(Bundle savedInstanceState) {  
9.        super.onCreate(savedInstanceState);  
10.        TextView textview = new TextView(this);  
11.        textview.setText("这是Tab1");  
12.        setContentView(textview);  
13.     }  
14. }  

SecondActivity.java

1. package com.android.tabtest.activity;  
2.  
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.widget.TextView;  
6.  
7. public class SecondActivity extends Activity {  
8.     public void onCreate(Bundle savedInstanceState) {  
9.         super.onCreate(savedInstanceState);  
10.         TextView textview = new TextView(this);  
11.         textview.setText("这是Tab2");  
12.         setContentView(textview);  
13.     }  
14.  
15. }  

ThirdActivity.java

1. package com.android.tabtest.activity;  
2.  
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.widget.TextView;  
6.  
7. public class ThirdActivity extends Activity {  
8.     public void onCreate(Bundle savedInstanceState) {  
9.            super.onCreate(savedInstanceState);  
10.            TextView textview = new TextView(this);  
11.            textview.setText("这是Tab3");  
12.            setContentView(textview);  
13.         }  
14.  
15. }  

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

1. <?xml version="1.0" encoding="utf-8"?> 
2. <TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent" 
3.     android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> 
4.     <LinearLayout 
5.         android:orientation="vertical" 
6.         android:layout_width="fill_parent" 
7.         android:layout_height="fill_parent" 
8.         > 
9.         <TabWidget   
10.             android:id="@android:id/tabs" 
11.             android:layout_width="fill_parent"   
12.             android:layout_height="wrap_content" 
13.             /> 
14.         <FrameLayout 
15.             android:id="@android:id/tabcontent" 
16.             android:layout_width="fill_parent" 
17.             android:layout_height="fill_parent" 
18.             android:padding="5dp"   
19.             /> 
20.     </LinearLayout> 
21. </TabHost> 

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

1. package com.android.tabtest.activity;  
2.  
3. import android.app.TabActivity;  
4. import android.content.Intent;  
5. import android.content.res.Resources;  
6. import android.os.Bundle;  
7. import android.widget.TabHost;  
8. import android.widget.TabHost.TabSpec;  
9.    
10. public class TabDemo extends TabActivity {  
11.     /** Called when the activity is first created. */ 
12.     @Override 
13.     public void onCreate(Bundle savedInstanceState) {  
14.         super.onCreate(savedInstanceState);  
15.         setContentView(R.layout.main);//这里使用了上面创建的xml文件（Tab页面的布局）  
16.         Resources res = getResources(); // Resource object to get Drawables  
17.         TabHost tabHost = getTabHost();  // The activity TabHost  
18.         TabSpec spec;  
19.         Intent intent;  // Reusable Intent for each tab  
20.    
21.       //第一个Tab  
22.         intent = new Intent(this,FirstActivity.class);//新建一个Intent用作Tab1显示的内容  
23.         spec = tabHost.newTabSpec("tab1")//新建一个 Tab  
24.         .setIndicator("Tab1", res.getDrawable(android.R.drawable.ic_media_play))//设置名称以及图标  
25.         .setContent(intent);//设置显示的intent，这里的参数也可以是R.id.xxx  
26.         tabHost.addTab(spec);//添加进tabHost  
27.    
28.         //第二个Tab  
29.         intent = new Intent(this,SecondActivity.class);//第二个Intent用作Tab1显示的内容  
30.         spec = tabHost.newTabSpec("tab2")//新建一个 Tab  
31.         .setIndicator("Tab2", res.getDrawable(android.R.drawable.ic_menu_edit))//设置名称以及图标  
32.         .setContent(intent);//设置显示的intent，这里的参数也可以是R.id.xxx  
33.         tabHost.addTab(spec);//添加进tabHost  
34.           
35.        //第三个Tab  
36.         intent = new Intent(this,SecondActivity.class);//第二个Intent用作Tab1显示的内容  
37.         spec = tabHost.newTabSpec("tab2")//新建一个 Tab  
38.         .setIndicator("Tab3", res.getDrawable(android.R.drawable.ic_menu_help))//设置名称以及图标  
39.         .setContent(intent);//设置显示的intent，这里的参数也可以是R.id.xxx  
40.         tabHost.addTab(spec);//添加进tabHost  
41.    
42.         tabHost.setCurrentTab(0);//设置当前的选项卡,这里为Tab1  
43.     }   
44. } 

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

1. <?xml version="1.0" encoding="utf-8"?> 
2. <manifest xmlns:android="http://schemas.android.com/apk/res/android" 
3.       package="com.android.tabtest.activity" 
4.       android:versionCode="1" 
5.       android:versionName="1.0"> 
6.     <uses-sdk android:minSdkVersion="10" /> 
7.  
8.     <application android:icon="@drawable/icon" android:label="@string/app_name"> 
9.     <activity android:name=".TabDemo" 
10.                   android:label="@string/app_name"> 
11.             <intent-filter> 
12.                 <action android:name="android.intent.action.MAIN" /> 
13.                 <category android:name="android.intent.category.LAUNCHER" /> 
14.             </intent-filter> 
15.     </activity> 
16.     <activity android:name=".FirstActivity" 
17.                   android:label="@string/app_name"> 
18.             <intent-filter> 
19.                 <action android:name="android.intent.action.MAIN" /> 
20.                 <category android:name="android.intent.category.LAUNCHER" /> 
21.             </intent-filter> 
22.     </activity> 
23.     <activity android:name=".SecondActivity" 
24.                   android:label="@string/app_name"> 
25.             <intent-filter> 
26.                 <action android:name="android.intent.action.MAIN" /> 
27.                 <category android:name="android.intent.category.LAUNCHER" /> 
28.             </intent-filter> 
29.     </activity> 
30.     </application> 
31. </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);
    }

}