android 切换卡的两种种形式

来源：互联网发布：超高速网络编辑：程序博客网时间：2024/05/22 03:50

切换卡是一种相对其他布局有点复杂的布局，如果你在切换卡中嵌入过多的其他布局话，估计大家都头昏脑胀了，特别是新手开始学习选项卡的时候更是如此。现在我为大家理一理切换卡布局：

怎么样布局不详细说，相信学习过基本布局的朋友根据下面的提示就可以看出怎么写：值得注意的是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" >    <LinearLayout        android:id="@+id/test"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical" >        <!-- TabWidget为wrap_content时候,如果宽度不够将切换卡内容将依照布局        形式跟在切换卡名字之后,TabWidget决定切换的显示 -->        <TabWidget            android:id="@android:id/tabs"                        android:layout_width="match_parent"            android:layout_height="wrap_content" >        </TabWidget>                                 <FrameLayout            android:id="@android:id/tabcontent"            android:layout_width="wrap_content"            android:layout_height="wrap_content" >            <LinearLayout                android:layout_marginRight="20dp"                android:id="@+id/content1"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:orientation="horizontal" >                <TextView                    android:id="@+id/text1"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:text="选项卡1的内容" />            </LinearLayout>            <LinearLayout                android:id="@+id/content2"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:orientation="horizontal" >                <TextView                    android:id="@+id/text2"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:text="选项卡2的内容" />            </LinearLayout>             <LinearLayout                android:id="@+id/content3"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:orientation="horizontal" >                <TextView                    android: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" >    <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" >            <TabWidget                android:id="@android:id/tabs"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:visibility="gone" >            </TabWidget>            <RelativeLayout                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:background="@android:color/darker_gray"                android:paddingBottom="5dip"                android:paddingTop="5dip" >                                <LinearLayout                    android:layout_width="fill_parent"                    android:layout_height="wrap_content"                    android:orientation="horizontal" >                    <RelativeLayout                        android:id="@+id/rl_conversation"                        android:layout_width="0dip"                        android:layout_height="wrap_content"                        android:layout_weight="1" ><!-- 在水平按比例 -->                        <LinearLayout                            android: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" >                            <ImageView                                android:layout_width="wrap_content"                                android:layout_height="wrap_content"                                android:src="@drawable/tab_conversation" />                            <TextView                                android: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>                    <RelativeLayout                        android:id="@+id/rl_folder"                        android:layout_width="0dip"                        android:layout_height="wrap_content"                        android:layout_weight="1" >                        <LinearLayout                            android: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" >                            <ImageView                                android:layout_width="wrap_content"                                android:layout_height="wrap_content"                                android:src="@drawable/tab_folder" />                            <TextView                                android: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>                    <RelativeLayout                        android:id="@+id/rl_group"                        android:layout_width="0dip"                        android:layout_height="wrap_content"                        android:layout_weight="1" >                        <LinearLayout                            android: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" >                            <ImageView                                android:layout_width="wrap_content"                                android:layout_height="wrap_content"                                android:layout_marginTop="3dip"                                android:src="@drawable/tab_group" />                            <TextView                                android: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>            <FrameLayout                android: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来显示    @Override    protected 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就不给出了 ，只是自动生成的东西，相应布局也是一样。

阅读全文

0 0