Android 中利用多个Button组合实现选项切换效果

叁歲伎倆 2023-10-13 16:21 21阅读 0赞

#### 效果图： ####

![43597688a14940b9bd011c094f07e6b5.png][]

![ec5b6a290708496fa7a4dd7222df51d7.png][]

![0966e584412d45d6a9aef6ea1061c615.png][]

#### xml布局: ####

<LinearLayout
                     android:orientation="horizontal"
                     android:layout_width="match_parent"
                     android:layout_height="50dp"
                     android:gravity="center"
                     android:background="@color/White">
     
                 <LinearLayout
                         android:orientation="horizontal"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:padding="3dp"
                         android:background="@drawable/rect_gray_bg">
     
                     <Button
                             android:id="@+id/btnPay"
                             android:layout_width="80dp"
                             android:layout_height="30dp"
                             android:background="@drawable/gray_button"
                             android:text="支出"
                             android:textColor="@color/DarkGray"/>
     
                     <Button
                             android:id="@+id/btnIncome"
                             android:layout_width="80dp"
                             android:layout_height="30dp"
                             android:background="@drawable/rect_white_button"
                             android:textColor="@color/White"
                             android:text="收入"/>
     
                     <Button
                             android:id="@+id/btnAsset"
                             android:layout_width="80dp"
                             android:layout_height="30dp"
                             android:text="资产"
                             android:background="@drawable/gray_button"
                             android:textColor="@color/DarkGray"/>
                 </LinearLayout>
     
             </LinearLayout>

#### gray\_button.xml ####

<?xml version="1.0" encoding="utf-8"?>
     <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
         <solid android:color="@android:color/transparent" />
         <corners android:radius="15dp"/>
         
     </shape>

#### rect\_white\_button.xml ####

<?xml version="1.0" encoding="utf-8"?>
     <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
         <solid android:color="@color/SkyBlue" />
         <corners android:radius="15dp"/>
         
     </shape>

#### rect\_gray\_bg.xml ####

<?xml version="1.0" encoding="utf-8"?>
     <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
         <solid android:color="@color/White" />
         <corners android:radius="16.5dp"/>
         <stroke  android:width="1dp" android:color="@color/LightGray" />
     </shape>

#### 自己再实现3个按钮的点击事件即可 ####

[43597688a14940b9bd011c094f07e6b5.png]: https://img-blog.csdnimg.cn/43597688a14940b9bd011c094f07e6b5.png
[ec5b6a290708496fa7a4dd7222df51d7.png]: https://img-blog.csdnimg.cn/ec5b6a290708496fa7a4dd7222df51d7.png
[0966e584412d45d6a9aef6ea1061c615.png]: https://img-blog.csdnimg.cn/0966e584412d45d6a9aef6ea1061c615.png

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript编程实现tab选项卡切换的效果

在编写“圳品”信息系统中，需要显示的内容较多，从上到下列出来的话看起来比较累，所以我们要将显示的内容分成若干类别并分别显示，这样就需要tab选项卡。用JavaScript编

r囧r小猫/ 2024年03月24日 15:34/ 0 赞/ 93 阅读

相关 JavaScript编程实现tab选项卡切换的效果+1

之前在“圳品”信息系统使用了tab选项卡来显示信息，详见： [JavaScript编程实现tab选项卡切换的效果][JavaScript_tab] 在tab选项卡中使用其它

ゞ浴缸里的玫瑰/ 2024年03月23日 10:02/ 0 赞/ 126 阅读

相关 Android ToggleButton：状态切换的Button

Android ToggleButton：状态切换的Button Android ToggleButton和Android Button类似，但是ToggleButt

小咪咪/ 2023年10月17日 02:51/ 0 赞/ 30 阅读

相关 Android选项切换条SHSegmentControl

Android选项切换条SHSegmentControl SHSegmentControl是github上一个开源的选项切换条，其样式如图所示： ![Center]

àì夳堔傛蜴生んèń/ 2023年10月16日 22:35/ 0 赞/ 31 阅读

相关 Android 中利用多个Button组合实现选项切换效果

效果图： ![43597688a14940b9bd011c094f07e6b5.png][] ![ec5b6a290708496fa7a4dd7222df51d7.pn

叁歲伎倆/ 2023年10月13日 16:21/ 0 赞/ 22 阅读

相关 Android中利用RecyclerView实现瀑布流效果

RecyclerView相比于传统的ListView,功能更加强大，使用也比较方便，因此Android官方更加推荐使用RecycleView,未来也会有更多的程序逐渐从List

朱雀/ 2022年09月28日 11:44/ 0 赞/ 468 阅读

相关使用ViewPager+Fragment实现选项卡切换效果

原文 [http://blog.csdn.net/chdjj/article/details/21564503][http_blog.csdn.net_chdjj_

以你之姓@/ 2022年07月26日 11:22/ 0 赞/ 213 阅读

相关纯JS实现tab选项卡切换效果

今天学到的用js写选项卡，有高亮效果，废话不多说，直接上代码吧！！！注意事项：css代码中有一个隐藏其他div的属性， display: none;这个一定要注意，要不

秒速五厘米/ 2022年04月08日 13:53/ 0 赞/ 397 阅读

相关选项卡切换效果，点击切换图片

今天分享一篇前端开发实战当中经常使用到的选项卡切换效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构布局： <div id="box">

太过爱你忘了你带给我的痛/ 2022年04月06日 05:41/ 0 赞/ 391 阅读

相关 tab页选项卡切换效果

效果图 ![20190625151915714.png][] html页面结构 <div class="tabbox" id="clicktab">

た入场券/ 2022年01月07日 06:43/ 0 赞/ 476 阅读