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-- ...
随机推荐
- POJ-1488(字符串应用)
Description TEX is a typesetting language developed by Donald Knuth. It takes source text together w ...
- Tomcat 改变localhost主页,映射到应用地址
<Host appBase="webapps" autoDeploy="true" name="localhost" unpackWA ...
- lesson6:java线程中断
正常的情况下,业务系统都不会去中断它的线程,但是由于一些特殊情况的发生,线程已经不能正常结束了,并且此类线程已经影响到业务系统提供服务的能力,如果系统设计的健壮,便会通过监控线程去主动的中断此类线程. ...
- Baidu与Google地图API初探
前天周六,有个好友过来玩,他说想在他的站点中加入地图导航模块,但不知道选择哪个第三方Map API 在网上查了下Baidu.Google.QQ和MapBar等4种Map API(都是採用JS开放API ...
- ASP.NET获取用户端的真实IP
ASP.NET获取用户端的真实IP在各种场景都能用到,但是用户网端变幻莫测情况众多,获取真实IP还真是不容易啊.下面分享个比较好一点的方法: 获取IP初始版本 /// <summary> ...
- python模块基础之OS模块
OS模块简单的来说它是一个Python的系统编程的操作模块,可以处理文件和目录这些我们日常手动需要做的操作. 可以查看OS模块的帮助文档: >>> import os #导入os模块 ...
- 黑马程序员——HTML语言
------<a href="http://www.itheima.com" target="blank">Java培训.Android培训.iOS ...
- Hadoop map reduce 任务数量优化
mapred.tasktracker.map.tasks.maximum 官方解释:The maximum number of map tasks that will be run simultan ...
- java新版中唤醒指定线层对象
import java.util.concurrent.locks.*; class Do9 { public static void main(String[] args) { Resource r ...
- 截取字符串 substring substr slice
截取字符串 substring 方法用于提取字符串中介于两个指定下标之间的字符 substring(start,end) 开始和结束的位置,从零开始的索引 参数 描述 start ...