android 横向选项卡,Android TabLayout(选项卡布局)简单用法实例分析

本文实例讲述了Android TabLayout(选项卡布局)简单用法。分享给大家供大家参考,具体如下:

我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合。达到很漂亮的效果。但是TabPageIndicator是第三方的,而且比较老了,当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求,在2015年的google大会上,google发布了新的Android Support Design库,里面包含了几个新的控件,其中就有一个TabLayout,它就可以完成TabPageIndicator的效果,而且还是官方的,最好的是它可以兼容到2.2以上版本,包括2.2。下面我就举一个简单的例子来使用它。

这里使用的 android studio进行开发的,所以引用TabLayout很简单,只要在build.gradle中加入compile 'com.android.support:design:22.2.0'即可。

这个使用是我在仿 知乎 的时候使用。所以页面就和知乎很像了

fragment_find.xml

android:layout_width="match_parent"

android:layout_height="match_parent"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:orientation="vertical">

android:id="@+id/tab_FindFragment_title"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/titleBlue"

app:tabIndicatorColor="@color/white"

app:tabSelectedTextColor="@color/gray"

app:tabTextColor="@color/white"

/>

android:id="@&

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是uniapp实现横向选项卡的代码示例: ```vue <template> <view class="tab-control"> <view class="tab-control-top"> <view class="tab-control-item" :class="{ 'active': currentIndex === index }" v-for="(item, index) in titles" :key="index" @click="handleItemClick(index)" > {{ item }} </view> </view> <view class="tab-control-content"> <swiper :current="currentIndex" @change="handleSwiperChange"> <swiper-item v-for="(item, index) in titles" :key="index"> <view class="tab-control-panel">{{ item }} 内容区域</view> </swiper-item> </swiper> </view> </view> </template> <script> export default { data() { return { currentIndex: 0, titles: ['选项卡1', '选项卡2', '选项卡3'] }; }, methods: { handleItemClick(index) { this.currentIndex = index; }, handleSwiperChange(event) { this.currentIndex = event.detail.current; } } }; </script> <style> .tab-control { height: 100%; display: flex; flex-direction: column; } .tab-control-top { display: flex; height: 80rpx; background-color: #fff; box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1); } .tab-control-item { flex: 1; display: flex; justify-content: center; align-items: center; font-size: 32rpx; color: #666; } .tab-control-item.active { color: #f00; } .tab-control-content { flex: 1; } .tab-control-panel { height: 100%; display: flex; justify-content: center; align-items: center; font-size: 32rpx; color: #666; } </style> ``` 以上代码实现了一个简单横向选项卡,包括选项卡标题和内容区域。选项卡标题使用flex布局实现,点击标题可以切换内容区域。内容区域使用swiper组件实现,可以左右滑动切换选项卡

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值