文档章节

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

yolinfeng
 yolinfeng
发布于 2015/02/16 00:16
字数 825
阅读 60
收藏 1

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" />

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

本文转载自:http://blog.csdn.net/wulianghuan/article/details/8588947

共有 人打赏支持
yolinfeng
粉丝 12
博文 196
码字总数 11946
作品 0
珠海
架构师
私信 提问
仿安智市场UI框架布局之fragment+tabhost底部菜单

第一部分就是你们现在看的这个贴,主要功能:实现fragment_+tabhost来搭建整个app的大体UI框架,底部是一个可切换的选项卡(安智市场中的底部选项卡的切换动画效果略过,没写,太困了,码完字...

chengche
2013/12/06
0
5
Android 底部菜单栏实现

虽然网上有很多底部菜单栏的实现方式,但是实现方式各种各样,很多也不符合自己的口味,所以还是总结下底部菜单栏的实现方式,以便以后方便查询使用 实现方式一:通过TabWidget实现 这种方式...

yumingxinli
2013/01/28
0
0
Android TabHost 详细讲解

一、什么是TabHost。 Android 里面的TabHost就是选项卡,看下图(新浪微博界面): 至于选项卡有什么好处或者用途,我想代码哥们都知道吧,我就不多说了。 二、在Android里面如何实现TabHost 有...

长平狐
2012/09/03
2.6K
1
Android选项卡实现之TabHost/TabSpec/TabWidget

Tab是什么就不用再用我来描述了。android的ui开发中,承载Tab的容器就是TabHost,每一个Tab对应一个Activity,每个Activity均会有自己的布局。 1.继承TabActivity 2.布局文件中使用tabHost,t...

古沐风
2013/11/27
0
2
【android基础学习之八】——页面布局

声明:学习的书籍《Android应用开发揭秘》,这里记录学习该书籍的日志,引用的相关代码与总结描述,没有商业的用途,完全是自我学习的一个记录,刚刚学习不可避免会出现很多问题,若是有错误...

晨曦之光
2012/03/08
851
0

没有更多内容

加载失败,请刷新页面

加载更多

《货币商人》读后感作文选登3800字

《货币商人》读后感作文选登3800字: 领导之法、管理之术的大智慧与小技巧(宝安支行纪委书记葛希) 非常感谢夏书记向我们推荐了这本《货币商人》。这本书我读第一遍时惊现它像一个宝藏,蕴藏...

原创小博客
11分钟前
0
0
面试之ssm粗略简答

说实在的,spring源码对我来说可能就是报错的时候会一个个点进去找错误源头,其他都是为了让自己学习大神们优秀的编程思想和理念(顺便面试的时候吹吹牛皮~) 这次zhjj就直接抛了一个范围很...

无极之岚
12分钟前
0
0
史上最强Dubbo面试25题含答案详解:核心组件+架构设计+服务治理等

1.Dubbo是什么? Dubbo 是一个分布式、高性能、透明化的 RPC 服务框架,提供服务自动注册、自动发现等高效服务治理方案, 可以和 Spring 框架无缝集成。 RPC 指的是远程调用协议,也就是说两...

mikechen优知
36分钟前
0
0
如何正确的选择云数据库?

本文由云+社区发表 作者:数据库 江湖传说在选择和使用云数据库过程中 10个人有9个会遇到以下问题: 数据库正常使用过程中莫名卡顿 经常遭遇主从延迟和主从不一致 不知如何实现无损跨云跨数据...

腾讯云加社区
37分钟前
0
0
虚拟机下centos7.x简易命令大全与试玩体验

OS: liunx version: centos7.x date: 2019-01-18 1. cd / : 进入服务器根目录 2. cd .. : 进入当前目录的上一级 3. ls : 显示当前目录下的所有文件夹或文件(list的缩写) 4. ip addr : 展示服...

皇冠小丑
48分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部