Android Tab控件简介

　　在Android中，Tab控件是一种很常用的控件；Tab控件即标签页，可以在一页中切换显示N页内容；

　　Tab控件具有两种实现过程，一是在同一个Activity中切换显示不同的标签页，这种主要是通过修改布局文件里面的id来实现的，二是每个标签页都由独立的Activity实现；

（1）我们通过继承TabActivity来实现：

但请注意：此类已经过期，官方建议使用Fragment来替代，但仍可以使用；

New applications should use Fragments instead of this class; to continue to run on older devices, you can use the v4 support library which provides a version of the Fragment API that is compatible down to DONUT.

先看实现效果：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/FrameLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <TabHost
        android:id="@+id/TabHost"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/pic1" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/pic2" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/pic3" />

</FrameLayout>

MainActivity.java

package com.xiaozhang.dialog;

import android.app.TabActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;

@SuppressWarnings("deprecation")
public class MainActivity extends TabActivity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        TabHost tabHost = getTabHost(); // 获得TabHost对象

        // from(this)从TabActivity获取LayoutInflater
        // 通过TabHost获得存放Tab标签页内容的FrameLayout
        LayoutInflater.from(this).inflate(R.layout.activity_main,
                tabHost.getTabContentView(), true);

        // 设置Tab标签的内容和显示内容
        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("图片1")
                .setContent(R.id.TextView1));
        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("图片2")
                .setContent(R.id.TextView2));
        tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("图片3")
                .setContent(R.id.TextView3));
    }

}

另一种实现方式：

当tab页太多的时候，还可以实现TabWidget的左右滚动，通过HorizontalScrollView；

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/hometabs"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- TabHost必须包含一个 TabWidget和一个FrameLayout -->

    <TabHost
        android:id="@+id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <HorizontalScrollView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scrollbars="none" >

                <!-- TabWidget的id属性必须为 @android:id/tabs -->

                <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal" >
                </TabWidget>
            </HorizontalScrollView>

            <!-- FrameLayout的id属性必须为 @android:id/tabcontent -->

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <TextView
                    android:id="@+id/view1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/textview1" />

                <TextView
                    android:id="@+id/view2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/textview2" />

                <TextView
                    android:id="@+id/view3"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/textview3" />

                <TextView
                    android:id="@+id/view4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/textview4" />

                <TextView
                    android:id="@+id/view5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/textview5" />

                <TextView
                    android:id="@+id/view6"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/textview6" />
            </FrameLayout>
        </LinearLayout>
    </TabHost>

</LinearLayout>

MainActivity.java

package com.xiaozhang.dialog;

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

public class MainActivity extends Activity {

    TabHost.TabSpec tabSpec;

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

        // 获取TabHost对象
        TabHost tabHost = (TabHost) findViewById(R.id.tabhost);

        // 如果没有继承TabActivity时，通过该种方法加载启动tabHost
        tabHost.setup();

        // 第一个Tab
        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("第一个标签")
                .setContent(R.id.view1));

        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("第二个标签")
                .setContent(R.id.view2));

        tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("第三个标签")
                .setContent(R.id.view3));

        tabHost.addTab(tabHost.newTabSpec("tab4").setIndicator("第四个标签")
                .setContent(R.id.view4));

        tabHost.addTab(tabHost.newTabSpec("tab5").setIndicator("第五个标签")
                .setContent(R.id.view5));

        tabHost.addTab(tabHost.newTabSpec("tab6").setIndicator("第六个标签")
                .setContent(R.id.view6));
    }

}

（2）使用Fragment来使不同的Tab内容在不同的Activity中显示；

MainActivity.java

package com.example.tabhostdemo;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.view.View;
import android.widget.TextView;

import com.example.tabhost.FirstFragment;
import com.example.tabhost.ThirdFragment;
import com.example.tabhost.SecondFragment;

public class MainActivity extends FragmentActivity {

    private FragmentTabHost mTabHost = null;;
    private View indicator = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

        // 添加tab名称和图标
        indicator = getIndicatorView("我的联系人", R.layout.column1);
        mTabHost.addTab(mTabHost.newTabSpec("myContact")
                .setIndicator(indicator), FirstFragment.class, null);

        indicator = getIndicatorView("陌生人", R.layout.column2);
        mTabHost.addTab(
                mTabHost.newTabSpec("stranger").setIndicator(indicator),
                SecondFragment.class, null);

        indicator = getIndicatorView("常联系人", R.layout.column3);
        mTabHost.addTab(
                mTabHost.newTabSpec("alwaysContact").setIndicator(indicator),
                ThirdFragment.class, null);
    }

    private View getIndicatorView(String name, int layoutId) {
        View v = getLayoutInflater().inflate(layoutId, null);
        TextView tv = (TextView) v.findViewById(R.id.tabText);
        tv.setText(name);
        return v;
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mTabHost = null;
    }
}

FirstFragment.java

package com.example.tabhost;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.LinearLayout.LayoutParams;
import android.widget.Toast;

public class FirstFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        Button button = new Button(getActivity());
        button.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
                LayoutParams.WRAP_CONTENT));
        button.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast toast = Toast.makeText(getActivity(), "点击按钮后",
                        Toast.LENGTH_LONG);
                toast.setGravity(Gravity.CENTER, toast.getXOffset() / 2,
                        toast.getYOffset() / 2);
                toast.show();
            }
        });
        button.setText("第一页");
        return button;
    }

}

SecondFragment.java

package com.example.tabhost;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;

import com.example.tabhostdemo.R;

public class SecondFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        if (container == null)
            return null;

        LinearLayout layout = new LinearLayout(getActivity());
        layout.setOrientation(LinearLayout.VERTICAL);
        TextView text = new TextView(getActivity());
        text.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.WRAP_CONTENT));

        ImageView image = new ImageView(getActivity());
        image.setImageResource(R.drawable.pic1);
        image.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.WRAP_CONTENT));

        int padding = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 4, getActivity().getResources()
                        .getDisplayMetrics());
        text.setPadding(padding, padding, padding, padding);
        text.setText("我是第二页");
        text.setGravity(Gravity.CENTER);

        layout.addView(text, 0);
        layout.addView(image, 0);
        return layout;
    }
}

ThirdFragment.java

package com.example.tabhost;

import com.example.tabhostdemo.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout.LayoutParams;

public class ThirdFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        ImageView image = new ImageView(getActivity());
        image.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
                LayoutParams.WRAP_CONTENT));
        image.setImageResource(R.drawable.pic3);
        return image;
    }
}

activity_main.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="match_parent"
    android:orientation="vertical" >

    <!-- 这个布局决定了标签在上面还是在下面显示 -->
    <!-- 如果想要标签页在上面，只需要交换FrameLayout和<TabWidget的位置，
        或 直接将FrameLayout放到FragmentTabHost后面  -->

    <FrameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" />
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

column1.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="match_parent"
    android:layout_gravity="center"
    android:gravity="center">

    <TextView
        android:id="@+id/tabText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="true"
        android:drawableTop="@drawable/column1_selector"
        android:textColor="@drawable/update_txt"/>
</LinearLayout>

column2.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="match_parent"
    android:layout_gravity="center"
    android:gravity="center">

    <TextView
        android:id="@+id/tabText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="true"
        android:drawableTop="@drawable/column2_selector"
        android:textColor="@drawable/update_txt"/>
</LinearLayout>

column3.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="match_parent"
    android:layout_gravity="center"
    android:gravity="center">

    <TextView
        android:id="@+id/tabText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusable="true"
        android:drawableTop="@drawable/column3_selector"
        android:textColor="@drawable/update_txt"/>
</LinearLayout>

update_txt.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Non focused states -->
    <item android:state_focused="false" android:state_pressed="false" android:state_selected="false" android:color="#A4A4A4"/>
    <item android:state_focused="false" android:state_pressed="false" android:state_selected="true" android:color="#00A3F5"/>
    <!-- Focused states -->
    <item android:state_focused="true" android:state_pressed="false" android:state_selected="false" android:color="#00A3F5"/>
    <item android:state_focused="true" android:state_pressed="false" android:state_selected="true" android:color="#00A3F5"/>
    <!-- Pressed -->
    <item android:state_pressed="true" android:state_selected="true" android:color="#00A3F5"/>
    <item android:state_pressed="true" android:color="#00A3F5"/>

</selector>

另有图片，还有三个xml文件没有贴出；

第二种方式参考自：

http://blog.csdn.net/deng0zhaotai/article/details/11264643

Android Tab控件简介的更多相关文章

一个Demo让你掌握Android所有控件
原文:一个Demo让你掌握Android所有控件本文是转载收藏,侵删,出处:"安卓巴士" 下面给出实现各个组件的源代码: 1.下拉框实现--Spinner packag ...
Android 开源控件与常用开发框架开发工具类
Android的加载动画AVLoadingIndicatorView 项目地址: https://github.com/81813780/AVLoadingIndicatorView 首先,在 bui ...
Android基础控件ListView基础操作
1.简介基于Android基础控件ListView和自定义BaseAdapter适配器情况下,对ListView的数据删除和添加操作: public boolean add(E e) {//添加数据 ...
Appium Android Toast控件
Android Toast控件是Android系统级别的控件,不是App的控件,getPageSource是⽆法找到的. Toast介绍 1.背景在安卓设备里面,使用各种手机应用程序的时候,需要先进 ...
扩展easyUI tab控件，添加加载遮罩效果
项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一 ...
NVelocity+Bootstrap tab控件异常之
异常信息:Encountered "tings" at line 54, column 55.Was expecting one of: "(" ... ...
android 基础控件（EditView、SeekBar等）的属性及使用方法
android提供了大量的UI控件,本文将介绍TextView.ImageView.Button.EditView.ProgressBar.SeekBar.ScrollView.WebView ...
Android基本控件之Menus
在我们的手机中有很多样式的菜单,比如:我们的短信界面,每条短信,我们长按都会出现一个菜单,还有很多的种类.那么现在,我们就来详细的讨论一下安卓中的菜单 Android的控件中就有这么一个,叫做Menu ...
Android：控件布局（相对布局）RelativeLayout
RelativeLayout是相对布局控件:以控件之间相对位置或相对父容器位置进行排列. 相对布局常用属性: 子类控件相对子类控件:值是另外一个控件的id android:layout_above-- ...

随机推荐

NOI2014 D2T3 购票简单粗暴解法（凸包维护）
之前说过这题能用点分治(详见 http://www.cnblogs.com/jasonyu/p/noi2014.html),但其实还有更粗暴的解法. 要求出一个点的答案,我们需要知道树上一段路径的点形 ...
Java多线程中变量的可见性
之所以写这篇博客, 是因为在csdn上看到一个帖子问的就是这个问题. 废话不多说, 我们先看看他的代码(为了减少代码量, 我将创建线程并启动的部分修改为使用方法引用). 1 2 3 4 5 6 7 8 ...
Java[2] 分布式服务架构之java远程调用技术浅析（转http://www.uml.org.cn/zjjs/201208011.asp）
转自:http://www.uml.org.cn/zjjs/201208011.asp 在分布式服务框架中,一个最基础的问题就是远程服务是怎么通讯的,在Java领域中有很多可实现远程通讯的技术,例如: ...
mysql中的unique
distinct可以把重复的行去掉,查询时候用select distinct * from ...; unique在MySQL中是完整性约束里的一种,如果某列的值需要是唯一的那么就添加UNIQUE约束 ...
javascript中的变量作用域
在网上看了一道js面试题 <script type="text/javascript"> var tt = 'aa'; function test() { alert( ...
Javascript:splice()方法实现对数组元素的插入、删除、替换及去重
定义和用法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组. 语法: Array.prototype.splice(index,count[,el ...
大学生程序猿IT情书“2014爱的告白挑战赛”获奖名单及优秀情书展示系列之 - 【IT术语】情书+【搞笑另类】情书
经过专家评委们的层层精心评选和认真讨论,恭喜下面同学终于入选CSDN高校俱乐部"大学生程序猿IT情书2014爱的告白挑战赛活动"优胜者名单.获奖者将在本周内收到邮件通知.请依照邮件 ...
[Angular 2] Refactoring mutations to enforce immutable data in Angular 2
When a Todo property updates, you still must create a new Array of Todos and assign a new reference. ...
Head First HTML与CSS — 为你的页面加图像
HTML中我们用img标签插入图像,在Web中常用的有三种:JPEG, PNG,GIF. 简单来讲,JPEG适合照片和复杂图像使用,而PNG或GIF适合单色图像.logo.和几何图形使用. JPEG: ...
查看 SELinux状态及关闭SELinux
查看SELinux状态: 1./usr/sbin/sestatus -v ##如果SELinux status参数为enabled即为开启状态 SELinux status: ...

Android Tab控件简介

Android Tab控件简介的更多相关文章

随机推荐

热门专题