安卓开发自定义按钮形状

最新推荐文章于 2022-03-17 11:50:05 发布

新时代键盘上的农民工

最新推荐文章于 2022-03-17 11:50:05 发布

阅读量895

点赞数 4

分类专栏：安卓开发学习安卓UI 文章标签：安卓 ui设计 ui android studio android

本文链接：https://blog.youkuaiyun.com/weixin_43614384/article/details/117375352

版权

安卓开发学习同时被 2 个专栏收录

1 篇文章

订阅专栏

安卓UI

1 篇文章

订阅专栏

本文详细解读了Android中如何通过XML定义圆角矩形样式、按钮选中时的颜色变化，以及不同形状的选择器用法。涵盖了<shape>元素、stroke、corners属性以及selector的选择状态控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

矩形圆角形状：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
        <solid android:color="#43CD80"/>
        <corners android:radius="5dp"/>
</shape>

实际效果：
在这里插入图片描述
矩形圆角边框：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="#1E90FF"/>
    <corners android:radius="5dp"/>

</shape>

效果如下：
在这里插入图片描述

选中按钮变换颜色：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
    <shape>
        <solid android:color="#1E90FF"/>
        <corners android:radius="5dp"/>
    </shape>
</item>
    <item android:state_pressed="false">
        <shape>
            <solid android:color="#63B8FF"/>
            <corners android:radius="5dp"/>
    </shape>>
</item>
</selector>

效果如下：
选中前：
在这里插入图片描述

选中后：在这里插入图片描述
圆形效果：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#279ddd"/>
            <size
                android:height="60dp"
                android:width="60dp"/>
        </shape>
    </item>
    <item android:state_pressed="false">
        <shape android:shape="oval">
            <solid android:color="#e6e6e6"/>
            <size
                android:height="60dp"
                android:width="60dp"/>
        </shape>>
    </item>
</selector>

实际效果：
在这里插入图片描述