android 切换卡的两种种形式

切换卡是一种相对其他布局有点复杂的布局，如果你在切换卡中嵌入过多的其他布局话，估计大家都头昏脑胀了 ，特别是新手开始学习选项卡的时候更是如此。现在我为大家理一理切换卡布局：怎么样布局不详细说，相信学习过基本布局的朋友根据下面的提示就可以看出怎么写：值得注意的是TabHost的id可以为android:id="@android:id/tabhost" 也可以是自定义而TabWidget的id必须为 android:id="@android:id/tabs"  ，FrameLayout的id必须为android:id="@android:id/tabcontent"；@android:id的意思在系统找id即上面所给的id都预先存在于android之中；一   简单切换卡的实现（不隐藏TabHost，内容在帧布局之中）简单切换卡布局如下：content1到content3是线性布局的id；可以直接去掉不要这个布局，直接用TextView来展示(如果你需要在内容里面进行布局的话，还是请加上布局吧)xml代如下<TabHost xmlns:android="http://schemas.android.com/apk/res/android"android:id="@android:id/tabhost"android:layout_width="match_parent"android:layout_height="match_parent" ><LinearLayoutandroid:id="@+id/test"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><!-- TabWidget为wrap_content时候,如果宽度不够将切换卡内容将依照布局形式跟在切换卡名字之后,TabWidget决定切换的显示 --><TabWidgetandroid:id="@android:id/tabs"android:layout_width="match_parent"android:layout_height="wrap_content" ></TabWidget><FrameLayoutandroid:id="@android:id/tabcontent"android:layout_width="wrap_content"android:layout_height="wrap_content" ><LinearLayoutandroid:layout_marginRight="20dp"android:id="@+id/content1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal" ><TextViewandroid:id="@+id/text1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="选项卡1的内容" /></LinearLayout><LinearLayoutandroid:id="@+id/content2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal" ><TextViewandroid:id="@+id/text2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="选项卡2的内容" /></LinearLayout><LinearLayoutandroid:id="@+id/content3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal" ><TextViewandroid:id="@+id/text3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="选项卡3的内容" /></LinearLayout><!-- TabHost中必须有一个id为@android:id/tabcontent的FrameLayout --></FrameLayout></LinearLayout></TabHost>

通过xml布局后还不能够显示在程序之中，这时候需要在java代码中手动添加tab标签了，步骤如下：

1：获取TabHost对象并实例化

2:通过TabHost.TabSpec和TabHost对象的newTabSpec（""）获取选项卡

3：设置选项卡显示

4：把选项卡添加到tabHost之中:

主要代码是

TabHost tabHost=(TabHost)findViewById(android.R.id.tabhost);
//系统资源的id需要android.R.id.来访问

tabHost.setup();//对TabHost初始化
TabHost.TabSpec  tabSpec=  tabHost.newTabSpec("这是我的第一个");//实例化切换卡
tabSpec.setContent(R.id.content1);//设定切换卡上显示的view
tabSpec.setIndicator("选项卡1");//切换卡的名字

tabHost.addTab(tabSpec);//将切换卡添加入TabHost

tabSpec=  tabHost.newTabSpec("这是我的第二个");//初始化第二个切换卡
tabSpec.setContent(R.id.content2);//设定切换卡上显示的view
tabSpec.setIndicator("选项卡2");//切换卡的名字

tabHost.addTab(tabSpec);//将切换卡添加入TabHost

tabSpec=  tabHost.newTabSpec("这是我的第3个");//初始化第二个切换卡
tabSpec.setContent(R.id.content3);//设定切换卡上显示的view
tabSpec.setIndicator("选项卡3");//切换卡的名字

tabHost.addTab(tabSpec);//将切换卡添加入TabHost

tabHost.setCurrentTab(0);//默认显示第一个切换卡

注意：如果你想要处理点击选项卡事件：使用

setOnTabChangedListener原理和setOnClickListener一样；

二  复杂切换卡的实现（隐藏TabHost，内容在帧布局之外）使用Activity显示内容

TabHost标签的android:visibility="gone"（不占据控件空间隐藏）

整体结构如下：

其中第二个相对布局的作用是更改选项卡区域的背景颜色，之下的线性布局是确定横竖布局方式，LinearLayout下是具体的内容

这里是采用布局来显示；

布局详情如下

代码文件给出：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity" ><TabHostandroid:id="@android:id/tabhost"android:layout_width="fill_parent"android:layout_height="fill_parent" ><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><TabWidgetandroid:id="@android:id/tabs"4000android:layout_width="fill_parent"android:layout_height="wrap_content"android:visibility="gone" ></TabWidget><RelativeLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:background="@android:color/darker_gray"android:paddingBottom="5dip"android:paddingTop="5dip" ><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="horizontal" ><RelativeLayoutandroid:id="@+id/rl_conversation"android:layout_width="0dip"android:layout_height="wrap_content"android:layout_weight="1" ><!-- 在水平按比例 --><LinearLayoutandroid:id="@+id/ll_conversation"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:gravity="center_horizontal"android:orientation="vertical"android:paddingBottom="5dip"android:paddingLeft="15dip"android:paddingRight="15dip"android:paddingTop="5dip" ><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/tab_conversation" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="5dip"android:text="会话"android:textColor="@android:color/white"android:textSize="16sp" /></LinearLayout></RelativeLayout><RelativeLayoutandroid:id="@+id/rl_folder"android:layout_width="0dip"android:layout_height="wrap_content"android:layout_weight="1" ><LinearLayoutandroid:id="@+id/ill_folder"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:gravity="center_horizontal"android:orientation="vertical"android:paddingBottom="5dip"android:paddingLeft="15dip"android:paddingRight="15dip"android:paddingTop="5dip" ><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/tab_folder" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="5dip"android:text="文件夹"android:textColor="@android:color/white"android:textSize="16sp" /></LinearLayout></RelativeLayout><RelativeLayoutandroid:id="@+id/rl_group"android:layout_width="0dip"android:layout_height="wrap_content"android:layout_weight="1" ><LinearLayoutandroid:id="@+id/ill_group"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:gravity="center_horizontal"android:orientation="vertical"android:paddingBottom="5dip"android:paddingLeft="15dip"android:paddingRight="15dip"android:paddingTop="5dip" ><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="3dip"android:src="@drawable/tab_group" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="7dip"android:text="群组"android:textColor="@android:color/white"android:textSize="16sp" /></LinearLayout></RelativeLayout></LinearLayout></RelativeLayout><FrameLayoutandroid:id="@android:id/tabcontent"android:layout_width="fill_parent"android:layout_height="fill_parent" ></FrameLayout></LinearLayout></TabHost></RelativeLayout>

因为TabHost被隐藏了，所以选项卡的点击事件就不存在，即需要手动为选项卡添加点击事件；而且因为这里显示布局是采用

Activity来显示的（通过Intent添加），所以TabHost需要使用LocalActivityManager来初始化控件,否则会出现错误；

不过现在听说官方已经不推荐使用这种方法了 ，用TabHost+Fragment替代了 ,详情百度

代码给出：

package com.example.mywidget2;import android.R.anim;import android.app.Activity;import android.app.LocalActivityManager;import android.content.Intent;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewTreeObserver.OnGlobalLayoutListener;import android.view.animation.TranslateAnimation;import android.widget.TabHost;import android.widget.RelativeLayout.LayoutParams;import android.widget.TabHost.TabSpec;public class MainActivity extends Activity implements OnClickListener {private TabHost mTabHost;private LocalActivityManager mLocalActivityManager;//将Activity转化为view来显示@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mLocalActivityManager = new LocalActivityManager(this, false);mLocalActivityManager.dispatchCreate(savedInstanceState);initView();}private void initView() {mTabHost = (TabHost) findViewById(android.R.id.tabhost);findViewById(R.id.ll_conversation).setOnClickListener(this);findViewById(R.id.ill_folder).setOnClickListener(this);findViewById(R.id.ill_group).setOnClickListener(this);mTabHost.setup(mLocalActivityManager);addTabSpec("conversation", "会话", R.drawable.tab_conversation, new Intent(MainActivity.this, ConversationUI.class));addTabSpec("folder", "文件夹", R.drawable.tab_folder, new Intent(MainActivity.this, FolderUI.class));addTabSpec("group", "群组", R.drawable.tab_group, new Intent(MainActivity.this, GroupUI.class));mTabHost.setCurrentTab(0);}/*** 向tabhost中添加一个页签* @param tag* @param label* @param iconID* @param intent*/private void addTabSpec(String tag, String label, int iconID, Intent intent) {TabHost.TabSpec newTabSpec = mTabHost.newTabSpec(tag);newTabSpec.setIndicator(label, getResources().getDrawable(iconID));newTabSpec.setContent(intent);mTabHost.addTab(newTabSpec);}@Overridepublic void onClick(View v) {// TODO Auto-generated method stubswitch (v.getId()) {case R.id.ll_conversation:mTabHost.setCurrentTab(0);break;case R.id.ill_folder:mTabHost.setCurrentTab(1);break;case R.id.ill_group:mTabHost.setCurrentTab(2);break;default:break;}}}

相应的Activity就不给出了 ，只是自动生成的东西，相应布局也是一样。