Android之UI学习篇九:使用TabHost实现卡片选项菜单

TabHost是一个装载选项卡窗口的容器,实现分模块显示的效果。像新浪微博客户端、微信客户端都是使用tabehost组件来开发的。

TabHost的组成:

|---TabWidget:实现标签栏,可供用户选择的标签集合;

|---FrameLayout:实现显示内容的帧布局.

TabHost有两种实现方式:

一、在布局文件中定义TabHost

               1、在配置文件中使用TabHost标签定义布局;

                2、TabHost 的id 定义为:tabhost;

                3、TabWidget 的id 定义为:tabs;

                4、FrameLayout 的id 定义为:tabcontent.

        二、继承TabActivity类:

                在Activity中通过getTabHost() 方法取得TabHost.

       这两种方法实现的效果是一样的,但是后者不需要定义TabHost的布局文件,使用起来比较方便,推荐大家使用这种方式。


先来看看实现的效果吧:





下面给出源代码:

第一种方式(使用xml布局):

工程目录结构


main.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:orientation="vertical" >

    <TabHost 
        android:id="@+id/tablehost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <LinearLayout android:orientation="vertical"
                      android:layout_width="fill_parent"
                      android:layout_height="fill_parent">
            <TabWidget 
                android:id="@android:id/tabs"
                android:layout_height="wrap_content"
                android:layout_width="fill_parent"/>
                <FrameLayout 
                    android:id="@android:id/tabcontent"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent">
                </FrameLayout>
            
        </LinearLayout>
    </TabHost>
</LinearLayout>


home.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	 android:layout_width="match_parent"
	 android:layout_height="fill_parent"
	 android:background="#0000FF"
	 android:id="@+id/home"
	 android:orientation="vertical">
    
    <TextView
	     android:layout_width="fill_parent"
	     android:layout_height="wrap_content"
	     android:text="@string/home"
    />
    
</LinearLayout>

其他3个布局文件跟home.xml一样,只是TextView的内容不同,这里就不给出代码了。


TabHostActivity.java

package cn.bdqn.tabhost;

import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class TabHostActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        //取得TabHost
        TabHost tabhost = (TabHost) findViewById(R.id.tablehost);
        tabhost.setup();
        LayoutInflater inflater = LayoutInflater.from(this);
        //把配置文件转换为显示TabHost内容的FrameLayout中的层级
        inflater.inflate(R.layout.home, tabhost.getTabContentView());
        inflater.inflate(R.layout.comment, tabhost.getTabContentView());
        inflater.inflate(R.layout.save, tabhost.getTabContentView());
        inflater.inflate(R.layout.more, tabhost.getTabContentView());
        //设置HOME标签
        TabSpec spec1 = tabhost.newTabSpec("HOME").setIndicator("HOME");
        //设置HOME模块显示内容
        spec1.setContent(R.id.home);
        tabhost.addTab(spec1);
        
        TabSpec spec2 = tabhost.newTabSpec("COMMENT").setIndicator("COMMENT");
        spec2.setContent(R.id.comment);
        tabhost.addTab(spec2);
        
        TabSpec spec3 = tabhost.newTabSpec("SAVE").setIndicator("SAVE");
        spec3.setContent(R.id.save);
        tabhost.addTab(spec3);
        
        TabSpec spec4 = tabhost.newTabSpec("MORE").setIndicator("MORE");
        spec4.setContent(R.id.more);
        tabhost.addTab(spec4);
    }
}


第二种方式(继承TabActivity):

工程目录结构


home.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:orientation="vertical"
    android:background="@drawable/a">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Hello world! HomeActivty" />

</LinearLayout>
其他3个布局文件跟这个一样。


MainActivity.java

package com.tablehost.activity;

import android.app.Activity;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.speech.SpeechRecognizer;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class MainActivity extends TabActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //获取TabHost组件
        TabHost tabHost = getTabHost();
        //新建一个标签页
        TabSpec tabSpec1 = (TabSpec)tabHost.newTabSpec("HOME").setIndicator("HOME");
        //给标签页设置内容
        tabSpec1.setContent(new Intent(MainActivity.this,HomeActivity.class));
        //把标签页添加到TabHost当中去
        tabHost.addTab(tabSpec1);
        
        TabSpec tabSpec2 = (TabSpec)tabHost.newTabSpec("COMMENT").setIndicator("COMMENT");
        tabSpec2.setContent(new Intent(MainActivity.this,CommentActivity.class));
        tabHost.addTab(tabSpec2);
        
        TabSpec tabSpec3 = (TabSpec)tabHost.newTabSpec("SAVE").setIndicator("SAVE");
        tabSpec3.setContent(new Intent(MainActivity.this,SaveActivity.class));
        tabHost.addTab(tabSpec3);
        
        TabSpec tabSpec4 = (TabSpec)tabHost.newTabSpec("MORE").setIndicator("MORE");
        tabSpec4.setContent(new Intent(MainActivity.this,MoreActivity.class));
        tabHost.addTab(tabSpec4);
    }
}

HomeActivity.java

package com.tablehost.activity;

import android.app.Activity;
import android.os.Bundle;

public class HomeActivity extends Activity{

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.home);
	}
	
}

其他三个CommentActivity.java ,SaveActivity.java,MoreActivity.java 跟 HomeActivity.java 差不多,这里不给出代码了。

最后在AndroidManifest.xml对Activity进行声明:

<activity android:name=".HomeActivity" />
        <activity android:name=".CommentActivity" />
        <activity android:name=".SaveActivity" />
        <activity android:name=".MoreActivity" />

好了,这篇先暂时介绍到这里,后面我会讲一篇模拟新浪微博客户端的案例,跟大家分享一下。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
TabHostAndroid 中常用的一个布局控件,可以用于实现选项卡的效果。要实现左侧选项卡,可以通过以下步骤: 1. 在布局文件中,使用 TabHost 控件,并设置其高度和宽度为 match_parent。 2. 在 TabHost 中添加一个 TabWidget 控件,用于显示选项卡标签。 3. 在 TabHost 中添加一个 FrameLayout 控件,用于显示选项卡内容。 4. 在代码中,使用 TabHost.newTabSpec() 方法创建一个新的选项卡,设置其标签和内容,并将其添加到 TabHost 中。 5. 在 TabWidget 中设置选项卡标签的样式,例如设置背景颜色、文字颜色等等。 6. 在 TabHost 中设置选项卡的切换方式,例如设置为点击切换或滑动切换。 以下是一个简单的示例代码,演示如何实现左侧选项卡: ``` <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent"> </FrameLayout> <TabWidget android:id="@android:id/tabs" android:layout_width="wrap_content" android:layout_height="match_parent" android:background="#f0f0f0" android:orientation="vertical" android:layout_alignLeft="@android:id/tabcontent" android:layout_alignStart="@android:id/tabcontent"> </TabWidget> ``` Java 代码: ``` TabHost tabHost = findViewById(android.R.id.tabhost); tabHost.setup(); // 创建一个新的选项卡 TabHost.TabSpec spec1 = tabHost.newTabSpec("tab1"); spec1.setIndicator("选项卡1"); spec1.setContent(R.id.tab1); tabHost.addTab(spec1); // 创建另一个选项卡 TabHost.TabSpec spec2 = tabHost.newTabSpec("tab2"); spec2.setIndicator("选项卡2"); spec2.setContent(R.id.tab2); tabHost.addTab(spec2); // 设置选项卡的切换方式 tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() { @Override public void onTabChanged(String tabId) { // 处理选项卡切换事件 } }); // 设置选项卡标签的样式 TabWidget tabWidget = tabHost.getTabWidget(); for (int i = 0; i < tabWidget.getChildCount(); i++) { View view = tabWidget.getChildAt(i); view.setBackgroundColor(Color.parseColor("#ffffff")); TextView textView = view.findViewById(android.R.id.title); textView.setTextColor(Color.parseColor("#000000")); } ``` 以上代码中,通过添加两个选项卡实现左侧选项卡的效果。您可以根据需要添加更多的选项卡,并自定义选项卡标签的样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值