android分段控件,App设计体系之分段控件/选项卡

分段控件(Segment Controls)是iOS原生控件,选项卡(Tabs)是Android原生控件,两者都是提供界面切换,目前更多产品选择使用选项卡(Tabs)。

49c8c9ed2851ab43eb82baae0d5ebf01.png

1、分段控件(Segment Controls)

caeacaad9efb0e998a5a4a1e68565a93.png

1.2 分段数量控制在5个以内

分段越宽,越容易点击,分段控件的个数需要控制在5个以内,每个分段的文案长度也需精简,文字个数建议在2~4个。

1.3 同一个分段控件(Segment Controls)中分开使用文字和图标

每个分段需要保持统一,不能既有文字又有图标。

00dfd6437f4ebe85ecc380aaf368894a.png

1.4 交互手势

只能通过点击控件来进行切换

2、选项卡(Tabs)

2.1 个数不限制

由于选项卡(Tabs)可左右移动,因此选项卡个数不限制。

a162206794b0a1664503fa655012352c.png

2.2 选项卡(Tabs)突出区分

多个选项卡放在一起容易混乱,需要将选中的选项卡与其他区分开,可以在颜色、大小、装饰上入手。

3859766f996ccc04d438d739f0d4f800.png

2.3 选项卡(Tabs)要漏出“尾巴”

当选项卡(Tabs)过多超出了屏幕,需要漏出“尾巴”让用户知道后面还有选项卡(Tabs)。

912e947e8cf2a9bbc0401a95a015411d.png

2.4 交互手势

除了点击选项卡(Tabs)外,还可以通过左右滑动切换,当切换到选项卡的下半段,选项卡(Tabs)自动向前移动。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是在 Android Studio 中添加 BottomNavigationView 件的代码示例: 1. 在 XML 布局文件中添加 BottomNavigationView 件: ``` <com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/bottom_navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" app:menu="@menu/bottom_navigation_menu" /> ``` 2. 创建一个菜单资源文件(menu/bottom_navigation_menu.xml),用于定义 BottomNavigationView 件中的选项: ``` <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/navigation_home" android:icon="@drawable/ic_home" android:title="@string/menu_home" /> <item android:id="@+id/navigation_dashboard" android:icon="@drawable/ic_dashboard" android:title="@string/menu_dashboard" /> <item android:id="@+id/navigation_notifications" android:icon="@drawable/ic_notifications" android:title="@string/menu_notifications" /> </menu> ``` 3. 在 Activity 或 Fragment 中获取 BottomNavigationView 件并设置选项的点击事件: ``` BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation); bottomNavigationView.setOnNavigationItemSelectedListener( new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.navigation_home: // 处理点击 Home 选项的逻辑 return true; case R.id.navigation_dashboard: // 处理点击 Dashboard 选项的逻辑 return true; case R.id.navigation_notifications: // 处理点击 Notifications 选项的逻辑 return true; } return false; } }); ``` 这样就完成了 BottomNavigationView 件的添加和设置。你可以根据自己的需求来修改菜单选项的图标和文本。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值