Android开发学习笔记——TabHost实例
2013-03-22 16:48
267 查看
现在几乎所有信息的App都会用到tabHost这个布局。tabHost是FrameLayout的一个子类。它实现的功能就是用一个tab标签来控制全局,使用户可以在不同的tab之间跳转。
笔者的一个体会就是每次要新写这个东西总是忘东忘西,所以这次一定要把tabHost实现过程中需要注意的事项总结出来。
第一步,"tabhost"。即建立tabhost布局。如下,标红部分体现出了第一个ID。
<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"
android:fitsSystemWindows="true" >
</TabHost>
第二步,主界面
在tabHost布局中,我们要把主界面的布局加进去。这个布局主要决定了,标签在屏幕上方还是下方,标签和内容的位置关系等。比如,我们可以用一个简单的LinearLayout来表示主界面由内容、标签两部分组成,且内容在标签上方。
第三步,"tabcontent"。即在主界面中定义标签页内容的位置。标红部分体现出了第二个ID。
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:foregroundGravity="bottom|fill_horizontal" >
</FrameLayout>
这一部分有几个属性值得大家注意。我们发现大多数的tabHost都是在屏幕的上方或者是下方。这个属性就是由android:forgroundGravity控制的(蓝字部分)。在tabHost中,标签属于内容的前景,所以我们在内容里把它的前景设置为bottom,那么标签就会出现在屏幕下方,而不是默认的屏幕上方。同时,还有一个属性需要注意(绿字部分),由于我们并不会把标签页的内容真正的写在这里,所以这里只是标记了一个位置,所以我们需要将tabcontent的weight属性置为1,而layout_height属性置为0dip。否则就会出现标签没有显示在屏幕上的情况。
第四步,"tabs"。即定义标签的属性。标红部分体现出了第三个ID。
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="48dp">
</TabWidget>
有一个专门的标签为tabs服务,那就是TabWidget。
所以,理解并记住了这三个ID,以及比较重要的几个属性,我们就可以顺利的将tabhost的xml布局文件写出。
activity_main.xml完整代码:
由于安卓系统自带的标签样式是非常朴素的,所以我们大多数情况下都需要自己定义标签样式。这个样式很随意,可以定义成上面图片下面文字,可以只有图片或者只有文字。(design.android上有一句话值得大家参考,“图片总是比文字有力量”大概这个意思)。我举一个只有文字的例子,因为比较简单:
main_tab_indicator.xml
这段代码没有什么难度,只需要设计出你想要的样子就可以了。
然后我们给标签的背景颜色做一个selector,因为大多数情况下,标签在被聚焦或者没被聚焦的时候,需要有一个明确的样式上的不同。
main_tab_selector.xml
注意,这与按钮的selector不同,因为按钮的seletor通常只需要处理被按和没有被按两种情况,但我们的标签还有一些其他的情况需要考虑,如被选中或者被聚焦。
这些都做好之后,文件结构应该是这样的:
在Activity中主要要包含以下几个函数模块:
1.tabHost与xml文件关联
2.tabHost的标签与xml文件关联(在以下代码中的getTabView()函数)
3.tabHo
4000
st的标签添加(initTabHost()函数)
下面可以结合代码和注释完整的看下:
OK了,当这些都做完,一个tabHost的框架就搭建起来了,我们可以看一下效果图:
好了,这就是一个最简单的tabHost实现,当然最难也差不多这样了,各位coder可以将它设计的更加绚丽。祝大家coding愉快!
笔者的一个体会就是每次要新写这个东西总是忘东忘西,所以这次一定要把tabHost实现过程中需要注意的事项总结出来。
一、tabHost布局
首先说说tabhost在xml文件中的布局。tabHost的xml布局文件有三个需要注意的点,可以总结为"3个ID"。这3个ID分别是"@android:id/tabhost", "@android:id/tabcontent", "@android:id/tabs". 可见这三个ID实际是调用了android系统里的ID,而不是我们平常自定义的ID(对于自定义的ID我们通常这样写,@+id/consumedID)。这三个ID分别代表了三个东西,tabhost即tabhost布局,tabcontent即标签页的内容,tabs即标签。下面我们以3个ID为线索,写一个tabHost的xml文件第一步,"tabhost"。即建立tabhost布局。如下,标红部分体现出了第一个ID。
<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"
android:fitsSystemWindows="true" >
</TabHost>
第二步,主界面
在tabHost布局中,我们要把主界面的布局加进去。这个布局主要决定了,标签在屏幕上方还是下方,标签和内容的位置关系等。比如,我们可以用一个简单的LinearLayout来表示主界面由内容、标签两部分组成,且内容在标签上方。
第三步,"tabcontent"。即在主界面中定义标签页内容的位置。标红部分体现出了第二个ID。
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:foregroundGravity="bottom|fill_horizontal" >
</FrameLayout>
这一部分有几个属性值得大家注意。我们发现大多数的tabHost都是在屏幕的上方或者是下方。这个属性就是由android:forgroundGravity控制的(蓝字部分)。在tabHost中,标签属于内容的前景,所以我们在内容里把它的前景设置为bottom,那么标签就会出现在屏幕下方,而不是默认的屏幕上方。同时,还有一个属性需要注意(绿字部分),由于我们并不会把标签页的内容真正的写在这里,所以这里只是标记了一个位置,所以我们需要将tabcontent的weight属性置为1,而layout_height属性置为0dip。否则就会出现标签没有显示在屏幕上的情况。
第四步,"tabs"。即定义标签的属性。标红部分体现出了第三个ID。
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="48dp">
</TabWidget>
有一个专门的标签为tabs服务,那就是TabWidget。
所以,理解并记住了这三个ID,以及比较重要的几个属性,我们就可以顺利的将tabhost的xml布局文件写出。
activity_main.xml完整代码:
<!-- tabhost --> <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" android:fitsSystemWindows="true" > <!-- 主界面 --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <!-- tabcontent --> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="0dip" android:layout_weight="1" android:foregroundGravity="bottom|fill_horizontal" > </FrameLayout> <!-- tabs --> <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="48dp"> </TabWidget> </LinearLayout> </TabHost>
二、标签布局及一些准备工作
在我们开始在Activity使用这个布局文件之前,我们还需要做几个准备工作:1.几个需要在tabHost中切换的界面(Activity+xml)。2.每个标签的图标(如需要)以及文字(如需要),以及背景(最好写成selector)。3.标签样式的布局文件。由于安卓系统自带的标签样式是非常朴素的,所以我们大多数情况下都需要自己定义标签样式。这个样式很随意,可以定义成上面图片下面文字,可以只有图片或者只有文字。(design.android上有一句话值得大家参考,“图片总是比文字有力量”大概这个意思)。我举一个只有文字的例子,因为比较简单:
main_tab_indicator.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:clickable="true" android:focusable="true" android:gravity="center_vertical|center_horizontal" android:orientation="vertical" > <TextView android:id="@+id/main_tab_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:paddingLeft="15dp" android:paddingRight="15dp" /> </LinearLayout>
这段代码没有什么难度,只需要设计出你想要的样子就可以了。
然后我们给标签的背景颜色做一个selector,因为大多数情况下,标签在被聚焦或者没被聚焦的时候,需要有一个明确的样式上的不同。
main_tab_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@color/tab_pressed" android:state_pressed="true"/> <item android:drawable="@color/tab_pressed" android:state_checked="true"/> <item android:drawable="@color/tab_pressed" android:state_selected="true"/> <item android:drawable="@color/tab_pressed" android:state_focused="true"/> <item android:drawable="@color/tab"/> </selector>
注意,这与按钮的selector不同,因为按钮的seletor通常只需要处理被按和没有被按两种情况,但我们的标签还有一些其他的情况需要考虑,如被选中或者被聚焦。
这些都做好之后,文件结构应该是这样的:
三、在activity中加载tabhost
这些准备工作都结束之后,我们可以开始在Activity文件中使用所有的这些。注意使用tabHost的Activity需要继承TabActivity。在Activity中主要要包含以下几个函数模块:
1.tabHost与xml文件关联
2.tabHost的标签与xml文件关联(在以下代码中的getTabView()函数)
3.tabHo
4000
st的标签添加(initTabHost()函数)
下面可以结合代码和注释完整的看下:
package com.telecom.auxiliaryclass.controller; import android.app.TabActivity; import android.content.Intent; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.widget.TabHost; import android.widget.TextView; import com.telecom.auxiliaryclass.R; public class MainActivity extends TabActivity { //定义TabHost类型变量 public static TabHost tabHost = null; //为方便写循环,将tabHost的几个界面和标签文字均存成数组 public static String[] activityNames = {"LectureActivity", "BrandActivity", "CategoryActivity", "SearchActivity", "PersonalActivity"}; public static Class[] activities = {LectureActivity.class, BrandActivity.class, CategoryActivity.class, SearchActivity.class, PersonalActivity.class}; public static int[] tabStrings = {R.string.main_lecture, R.string.main_brand, R.string.main_category, R.string.main_search, R.string.main_personal}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //加载布局文件 setContentView(R.layout.activity_main); initialTabHost(); } /** * 初始化tabHost */ private void initialTabHost() { //直接关联@android:id/tabhost tabHost = getTabHost(); //tabSpec用于设置标签属性,包括标签的样式和动作 TabHost.TabSpec tabSpec; Intent intent; //对5个标签分别进行设置,并加入到tabHost中 for (int i = 0; i < 5; i++) { //新建一个tabSpec,newTabSpec的参数为标签的名称 tabSpec = tabHost.newTabSpec(activityNames[i]); //对tabSpec的样式进行设置 tabSpec.setIndicator(getTabView(i)); //对tabSpec的动作进行设置 intent = new Intent(this, activities[i]); tabSpec.setContent(intent); //添加这个tabSpec tabHost.addTab(tabSpec); } } /** * 返回一个标签的View * @param tag 标签index * @return */ private View getTabView(int tag) { View v; LayoutInflater li = getLayoutInflater(); //加载标签的xml布局文件 v = li.inflate(R.layout.main_tab_indicator, null); //设置标签布局 TextView tv = (TextView) v.findViewById(R.id.main_tab_text); tv.setText(tabStrings[tag]); v.setBackgroundResource(R.drawable.main_tab_selector); return v; } }
OK了,当这些都做完,一个tabHost的框架就搭建起来了,我们可以看一下效果图:
好了,这就是一个最简单的tabHost实现,当然最难也差不多这样了,各位coder可以将它设计的更加绚丽。祝大家coding愉快!
相关文章推荐
- Android开发学习笔记——TabHost实例
- Android开发学习笔记--计时器的应用实例
- Android开发艺术探索学习笔记2——IPC机制
- Android Map开发基础知识学习笔记
- Android开发学习笔记:浅谈WebView
- android 开发学习笔记 (一)
- Android开发学习笔记:浅谈WebView
- Android 开发实例教程 零基础学习 1小时入门 图解说明教程 化复杂为简单 配置好的android开发环境 带实例
- android 开发学习笔记
- Android TabHost学习笔记
- Android开发学习笔记:浅谈WebView
- Android:日常学习笔记(8)———探究UI开发(5)
- Android开发学习笔记:浅谈WebView
- 从零开始学习Android 开发笔记-Activity生命周期
- Android和PHP开发学习笔记3.1
- 【转】Android实例剖析笔记(二)--用实例讲解Andriod的开发过程,以NotesList为实例介绍Android的菜单机制
- Android(java)学习笔记217:开发一个多界面的应用程序之清单文件
- android 开发零起步学习笔记(十一):界面切换+几种常用界面切换效果
- android开发学习笔记(一)分别通过GET和POST请求从服务器端获取数据
- Android移动APP开发笔记——Cordova(PhoneGap)通过CordovaPlugin插件调用 Activity 实例