android 多个标签页,Android学习指南之四十四:用户界面View之Tab标签页

Tab标签页控件在很多编程技术中都能见到,它使得窗口显示区能够重复利用。在Android中标签页涉及到TabActivity、TabHost、TabWidget等概念。使用Tab标签页控件,可以在同一个空间里放置更多内容。譬如Android自带的拨号程序及通讯录等,就使用了Tab标签功能,如下图所示:

eadec0615a839f5c17f8ecbfce74ecd2.gif

下面我们用实例的方式来学习如何制作上面类似的标签效果,其实还是很简单的。我同样是把解释写到示例的注释里了,注释是我的理解并不准确,方便你记忆而已。

1、新建一个项目 Lesson44_Tab ,Activity起名叫 MainActivity。

2、编写 main.xml 内容如下,这次的形式和普通布局文件有所区别,请注意看写法:

XML/HTML代码<?xmlversion ="1.0"encoding="utf-8"?>

3、编写 MainActivity,请注意它继承的是 TabActivity 类,解释在代码里:

Java代码packagebasic.android.lesson44;

importandroid.app.TabActivity;

importandroid.os.Bundle;

importandroid.widget.TabHost;

publicclassMainActivityextendsTabActivity {

@Override

publicvoidonCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

// tabHost是一个标签容器

TabHost tabHost =this.getTabHost();

// 每一个TabSpec对象就是个标签

// TabSpec.setIndicator()方法是设置标签显示样式

// TabSpec.setContent()方法显示标签下方的内容显示

//定义第一个标签

tabHost.addTab(tabHost.newTabSpec("OneTab")

.setIndicator("OneTab", getResources().getDrawable(android.R.drawable.star_on))

.setContent(R.id.linearLayout1));

//定义第二个标签

tabHost.addTab(tabHost.newTabSpec("TwoTab")

.setIndicator("TwoTab", getResources().getDrawable(android.R.drawable.star_off))

.setContent(R.id.linearLayout2));

}

}

4、编译程序,运行代码,查看结果:

831164d666745f2a6e56e0eb621e48b8.gif

点击 TwoTab ,标签切换:

f0d9142079a710cf8b0dee33f590402b.gif

大家最好先看一遍注释,程序运行起来后再看看理解下,加深印象。本节就讲到这里了。

2012年12月2日

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你使用了vue-router进行路由跳转,但是tab标签没有跟着跳转,可能是因为你没有为tab标签设置相应的路由。 一种解决方法是,为每个标签设置一个对应的路由,然后在路由跳转时,同时更新选中的标签。例如: ```javascript // 在路由配置中设置每个标签对应的路由 const routes = [ { path: '/home', component: Home, meta: { tab: 'home' } }, { path: '/about', component: About, meta: { tab: 'about' } }, { path: '/contact', component: Contact, meta: { tab: 'contact' } } ]; // 在面中使用<router-view>来显示当前路由对应的组件 <template> <div> <div class="tabs"> <div :class="{ active: activeTab === 'home' }" @click="selectTab('home')">Home</div> <div :class="{ active: activeTab === 'about' }" @click="selectTab('about')">About</div> <div :class="{ active: activeTab === 'contact' }" @click="selectTab('contact')">Contact</div> </div> <router-view></router-view> </div> </template> <script> export default { data() { return { activeTab: 'home' }; }, methods: { selectTab(tab) { // 更新选中的标签 this.activeTab = tab; // 跳转到对应的路由 this.$router.push({ path: '/' + tab }); } }, watch: { // 监听路由变化,更新选中的标签 $route(to) { this.activeTab = to.meta.tab; } } }; </script> ``` 这样,在跳转路由时,标签也会跟着更新。如果你使用的是其他的标签组件库,也可以根据类似的原理进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值