文档章节

Android学习笔记(二):TabHost布局及新浪式TabHost布局

yolinfeng
 yolinfeng
发布于 2015/04/29 14:36
字数 1091
阅读 31
收藏 0

 

TabHost布局

  TabHost的布局可以定义在布局文件中,也可以像上一篇的例子一样不用布局文件系统会生成自带布局。

  TabHost布局必须包含两个部分,TabWidget和FrameLayout。TabWidget就是每个tab的标签,FrameLayout则是tab内容。

  两种情况:

     1.如果我们的Activity继承自TabActivity并且在onCreat()方法中调用setContentView(R.layout....),那么我们在包含此TabHost的布局文件中必须:

    ① TabHost的id必须设置为@android :id/tabhost。

    ② TabWidget的id必须设置为@android :id/tabs。

    ③ FrameLayout的id必须设置为@android :id/tabcontent。

  TabHost布局文件如下:   

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id
="@android:id/tabhost"
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_width
="fill_parent"
android:layout_height
="wrap_content" />
<FrameLayout android:id="@android:id/tabcontent"
android:layout_width
="fill_parent"
android:layout_height
="fill_parent">
<LinearLayout ..>....</LinearLayout>
<LinearLayout ..>....</LinearLayout>
<LinearLayout ..>....</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>


  2.如果我们的Activity没有继承自TabActivity则Activity应继承ActivityGroup并且在onCreat()方法中需要注意几点:

  源代码:

protectedvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tab_layout);
//步骤1:获得TabHost的对象,并进行初始化setup()
TabHost tabs = (TabHost)findViewById(R.id.th);
tabs.setup(this.getLocalActivityManager());
//步骤2:通过TabHost.TabSpec增加tab的一页,通过setContent()增加内容,通过setIndicator增加页的标签
/*(1)增加第1页*/
TabHost.TabSpec spec = tabs.newTabSpec("Tag1");
spec.setContent(R.id.c92_tab1);
spec.setIndicator("Clock");
tabs.addTab(spec);
/*(2)增加第2页*/
spec = tabs.newTabSpec("Tag2");
spec.setContent(R.id.c92_tab2);
spec.setIndicator("Button");
tabs.addTab(spec);
//步骤3:可通过setCurrentTab(index)指定显示的页,从0开始计算。
tabs.setCurrentTab(1);
}

 

 

添加动态变化标签

   其实设置动态变化标签与我们平时设置按钮点击时背景变化一个道理,在drawable文件夹定义一个tab_indicator.xml,源代码如下

 

 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 这是顺序执行的,如果状态是selected,则为android_focused图标,如果不是下一步,采用android_normal图标-->
<item android:drawable="@drawable/android_selected"
android:state_selected="true" />
<item android:drawable="@drawable/android_normal" />
</selector>


Resources res = getResources();
spec.setIndicator("Button",res.getDrawable(R.drawable.tab_indicator));

 

 新浪微博下端导航栏

  效果如图:

 布局文件:

 

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width
="fill_parent"
android:layout_height
="fill_parent"
android:id
="@android:id/tabhost"
>
<LinearLayout
android:orientation="vertical"
android:layout_width
="fill_parent"
android:layout_height
="fill_parent">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width
="fill_parent"
android:layout_height
="wrap_content"
android:layout_weight
="1.0"/>
<TabWidget
android:id="@android:id/tabs"
android:visibility
="gone"
android:layout_width
="fill_parent"
android:layout_height
="wrap_content"
/>
<RadioGroup
android:gravity="center_vertical"
android:orientation
="horizontal"
android:id
="@+id/rgTab"
android:background
="@drawable/maintab_toolbar_bg"
android:layout_width
="fill_parent"
android:layout_height
="wrap_content"
>
<RadioButton
style="@style/main_tab_rb"
android:text
="首页"
android:id
="@+id/rbHome"
android:drawableTop
="@drawable/icon_1_n"/>
<RadioButton
style="@style/main_tab_rb"
android:text
="私信"
android:id
="@+id/rbSixin"
android:drawableTop
="@drawable/icon_2_n"/>
<RadioButton
style="@style/main_tab_rb"
android:text
="评论"
android:id
="@+id/rbComment"
android:drawableTop
="@drawable/icon_3_n"/>
<RadioButton
style="@style/main_tab_rb"
android:text
="刷新"
android:id
="@+id/rbRefresh"
android:drawableTop
="@drawable/icon_4_n"/>
<RadioButton
style="@style/main_tab_rb"
android:text
="更多"
android:id
="@+id/rbMore"
android:drawableTop
="@drawable/icon_5_n"/>

</RadioGroup>
</LinearLayout>
</TabHost>

 

此处应注意三个组件的id:android:id="@android :id/tabhost",android:id="@android :id/tabcontent",android:id="@android:id/tabs",在这个布局文件中我们将TabWidget的android:visibility="gone" 这样就起到了去掉tabHost默认布局的效果,然后我们在下面添加RadioGroup控件,在RadioGroup的选项改变事件里完成Tab的切换,达到点击radioButton就像点击TabWidget的效果。RadioGroup的选项改变事件代码在下面的MainTabActivity.java中。

styles.xml

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="main_tab_rb">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">fill_parent</item>
<item name="android:layout_weight">1.0</item>
<item name="android:background">@drawable/rb_menu_bg</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:button">@null</item>
<item name="android:textColor">#ffffffff</item>
<item name="android:ellipsize">marquee</item>
<item name="android:singleLine">true</item>
<item name="android:textSize">12sp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:layout_marginTop">2dp</item>
</style>
</resources>


rb_menu_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="@drawable/home_btn_bg_s"/>
<item android:state_pressed="true" android:drawable="@drawable/home_btn_bg_s"/>
<item android:state_checked="true" android:drawable="@drawable/home_btn_bg_d"/>
</selector>

MainTabActivity.java

public class MainTabActivity extends TabActivity {

private RadioGroup rgTab;
private TabHost th;

@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
this.setContentView(R.layout.main);
rgTab = (RadioGroup) this.findViewById(R.id.rgTab);
th = this.getTabHost();
th.addTab(th.newTabSpec("TS_HOME").setIndicator("TS_HOME").setContent(new Intent(MainTabActivity.this,HomeActivity.class)));
th.addTab(th.newTabSpec("TS_SIXIN").setIndicator("TS_SIXIN").setContent(new Intent(MainTabActivity.this,SixinActivity.class)));
th.addTab(th.newTabSpec("TS_COMMENT").setIndicator("TS_COMMENT").setContent(new Intent(MainTabActivity.this,CommentActivity.class)));
th.addTab(th.newTabSpec("TS_REFRESH").setIndicator("TS_REFRESH").setContent(new Intent(MainTabActivity.this,RefreshActivity.class)));
th.addTab(th.newTabSpec("TS_MORE").setIndicator("TS_MORE").setContent(new Intent(MainTabActivity.this,MoreActivity.class)));
rgTab.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
// TODO Auto-generated method stub
switch (checkedId) {

case R.id.rbHome:
th.setCurrentTabByTag("TS_HOME");
break;

case R.id.rbSixin:
th.setCurrentTabByTag("TS_SIXIN");
break;

case R.id.rbComment:
th.setCurrentTabByTag("TS_COMMENT");
break;

case R.id.rbRefresh:
th.setCurrentTabByTag("TS_REFRESH");
break;

case R.id.rbMore:
th.setCurrentTabByTag("TS_MORE");
break;

default:
break;
}
}
});
}

}


 如果对TabHost存放多Activity不了解可以参看上篇简单例子。

 

 

 

 

 

 

 

 

  

本文转载自:http://www.cnblogs.com/sank615/archive/2011/12/20/2286636.html

yolinfeng
粉丝 12
博文 196
码字总数 11946
作品 0
珠海
架构师
私信 提问
Android TabHost 详细讲解

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

长平狐
2012/09/03
2.6K
1
【Android进阶】嵌套TabHost (TabHost中放TabHost,类似二级目录、二级树)

今天讲一下,如何在TabHost中,再放TabHost。 先来看一下效果。 一层TabHost 两层Tabhost (内部TabHots在上面) 两层TabHost (内层TabHots在下面) 下面说一下代码,一共3个 java类,3个xml布局...

晨曦之光
2012/03/01
5.1K
2
我学习android有个疑问,android这么多布局,学习来有必然要吗?

我学习android有个疑问,android这么多布局,学习来有必然要吗? 像这种TabHost布局,常用吗?

天池番薯
2015/04/16
117
1
Android ——TabHost使用

在Android中,通常可以使用切换卡(选项卡)实现切换显示不同页面内容的功能。这一功能可以通过TabHost控件来实现。   下面我们就通过一个简单的实例演示如何使用TabHost控件完成切换卡功能...

的书法上的
2014/08/05
0
0
TabActivity的学习笔记

首先声明我只是一个刚学习了一个月android的超级菜鸟,博文技术含量不足挂齿,让各位见笑了。 android系统是一种单窗口系统,这表明它只能加载一个Activity,如果要加载多个activity,那就要...

ctozhong
2014/05/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Tedis:基于 TiKV 构建的 NoSQL 数据库

作者介绍: 陈东明,饿了么北京技术中心架构组负责人,负责饿了么的产品线架构设计以及饿了么基础架构研发工作。曾任百度架构师,负责百度即时通讯产品的架构设计。具有丰富的大规模系统构 ...

TiDB
25分钟前
0
0
linux命令

ls命令是linux下最常用的命令。ls命令就是list的缩写,缺省下ls用来打印出当前目录的清单。如果ls指定其他目录,那么就会显示指定目录里的文件及文件夹清单。 通过ls 命令不仅可以查看linux文件...

WinkJie
33分钟前
0
0
你需要的物流运输类报表,这里都有

你需要的物流运输类报表,都在这里 葡萄城报表模板库是一款免费的报表制作、学习和参考工具,包含了超过 200 张高质量报表模板,涵盖了 16 大行业和 50 多种报表类型,为 30 余万报表开发者提...

葡萄城技术团队
40分钟前
2
0
像Java SE一样编写Java EE(ddd探索)

今天主要改写昨天的组合模式成Web系统。 容器接口为 public interface TreeProduct { /** * 展示所有产品 * @return */ List<TreeProduct> allProducts();...

算法之名
41分钟前
0
0
Django Model 模型建立

Django Model 模型 Django Model层是Django的数据模型层,每一个Model类就是数据库中的一张表; 我们需要注意下面几点: model一般都是定义在不同的APP的models.py模块文件中,可以是一个,也...

彩色泡泡糖
49分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部