划田下之大稽
划田下之大稽
6月前 · 4 人阅读

基本每个项目都会遇到各种各样的按钮样式

1.xml布局代码activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp"
    tools:context=".MainActivity">

    <Button
        style="@style/AppTheme.btnStyle.Primary"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="边框按钮" />

    <Button
        style="@style/AppTheme.btnStyle.RoundPrimary"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:layout_marginTop="10dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="边框按钮" />

    <Button
        style="@style/AppTheme.btnStyle.RoundPrimaryAll"
        android:layout_marginTop="10dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="边框按钮" />

    <Button
        style="@style/AppTheme.btnStyle.Normal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rlData"
        android:layout_marginTop="10dp"
        android:text="正常按钮" />

    <Button
        style="@style/AppTheme.btnStyle.Normal.Round"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/rlData"
        android:layout_marginTop="10dp"
        android:text="背景色按钮" />

    <Button
        style="@style/AppTheme.btnStyle.Normal.RoundAll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="圆框按钮" />

    <Button
        style="@style/AppTheme.btnStyle.Normal.GreenDotted.Normal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="虚线按钮" />

    <Button
        style="@style/AppTheme.btnStyle.Normal.GreenDotted"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="虚线按钮" />

    <Button
        style="@style/AppTheme.btnStyle.Normal.GreenDottedRound"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="虚线按钮" />

</LinearLayout>

2.按钮风格styles.xml:

<resources>
    <!-- 自定义Button -->
    <style name="AppTheme.btnStyle">
        <item name="android:textAllCaps">false</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_width">120dp</item>
        <item name="android:layout_height">48dp</item>
        <item name="android:paddingTop">5dp</item>
        <item name="android:paddingRight">10dp</item>
        <item name="android:paddingBottom">5dp</item>
        <item name="android:paddingLeft">10dp</item>
    </style>

    <!-- 正常的按钮 -->
    <style name="AppTheme.btnStyle.Normal">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">45dp</item>
        <item name="android:background">@drawable/btn_normal</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">16sp</item>
    </style>

    <!-- 正常的按钮圆角 -->
    <style name="AppTheme.btnStyle.Normal.Round">
        <item name="android:background">@drawable/btn_normal_round</item>
    </style>

    <!-- 正常的按钮圆角 白底 主色边框-->
    <style name="AppTheme.btnStyle.Normal.RoundStork">
        <item name="android:background">@drawable/btn_round_green</item>
    </style>

    <!-- 正常的按钮圆角 25角度-->
    <style name="AppTheme.btnStyle.Normal.RoundAll">
        <item name="android:background">@drawable/btn_normal_round_all</item>
    </style>

    <!-- 正常白底  主色边框/字 按钮 -->
    <style name="AppTheme.btnStyle.Primary">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">30dp</item>
        <item name="android:background">@drawable/btn_normal_green</item>
        <item name="android:textColor">@color/colorPrimary</item>
        <item name="android:textSize">14sp</item>
    </style>

    <!-- 正常白底  主色边框/字 半圆角按钮 -->
    <style name="AppTheme.btnStyle.RoundPrimary">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">30dp</item>
        <item name="android:background">@drawable/btn_round_green</item>
        <item name="android:textColor">@color/colorPrimary</item>
        <item name="android:textSize">14sp</item>
    </style>

    <!-- 正常白底  主色边框/字圆角按钮 -->
    <style name="AppTheme.btnStyle.RoundPrimaryAll">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">30dp</item>
        <item name="android:background">@drawable/btn_round_green_all</item>
        <item name="android:textColor">@color/colorPrimary</item>
        <item name="android:textSize">14sp</item>
    </style>

    <!-- 主色框/字 虚线按钮 -->
    <style name="AppTheme.btnStyle.Normal.GreenDotted.Normal">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">45dp</item>
        <item name="android:background">@drawable/btn_dotted_normal</item>
        <item name="android:textColor">@color/colorPrimary</item>
        <item name="android:textSize">15sp</item>
    </style>

    <!-- 主色框/字 虚线按钮 -->
    <style name="AppTheme.btnStyle.Normal.GreenDotted">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">45dp</item>
        <item name="android:background">@drawable/btn_dotted_white</item>
        <item name="android:textColor">@color/colorPrimary</item>
        <item name="android:textSize">15sp</item>
    </style>

    <!-- 主色框/字 虚线全圆按钮 -->
    <style name="AppTheme.btnStyle.Normal.GreenDottedRound">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">45dp</item>
        <item name="android:background">@drawable/btn_dotted_round_white</item>
        <item name="android:textColor">@color/colorPrimary</item>
        <item name="android:textSize">15sp</item>
    </style>

</resources>

3.接下去是drawable文件列表:

btn_dotted_normal.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/colorwhite"></solid>

    <!-- 线的宽度,颜色灰色 -->
    <stroke
        android:width="1dp"
        android:color="@color/colorPrimary"
        android:dashGap="3dp"
        android:dashWidth="6dp"></stroke>

</shape>

btn_dotted_round_white.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/colorwhite"></solid>

    <!-- 线的宽度,颜色灰色 -->
    <stroke
        android:width="1dp"
        android:color="@color/colorPrimary"
        android:dashGap="3dp"
        android:dashWidth="6dp"></stroke>

    <!-- 矩形的圆角半径 -->
    <corners android:radius="50dp" />

</shape>

btn_dotted_white.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/colorwhite"></solid>

    <!-- 线的宽度,颜色灰色 -->
    <stroke
        android:width="1dp"
        android:color="@color/colorPrimary"
        android:dashGap="3dp"
        android:dashWidth="6dp"></stroke>

    <!-- 矩形的圆角半径 -->
    <corners android:radius="5dp" />

</shape>

btn_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="false">
        <shape>
            <solid android:color="@color/colorEnableMore" />
        </shape>
    </item>

    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/colorPrimaryDark" />
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>

</selector>

btn_normal_green.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="false">
        <shape>
            <solid android:color="@color/colorwhite" />
        </shape>
    </item>

    <item>
        <shape>
            <stroke android:color="@color/colorPrimary" android:width="1px"/>
        </shape>
    </item>

</selector>

btn_normal_round.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="false">
        <shape>
            <corners android:radius="6dp"/>
            <solid android:color="@color/colorEnable" />
        </shape>
    </item>

    <item android:state_pressed="true">
        <shape>
            <corners android:radius="6dp"/>
            <solid android:color="@color/colorPrimaryDark" />
        </shape>
    </item>

    <item>
        <shape>
            <corners android:radius="6dp"/>
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>

</selector>

btn_normal_round_all.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="false">
        <shape>
            <corners android:radius="25dp"/>
            <solid android:color="@color/colorEnable" />
        </shape>
    </item>

    <item android:state_pressed="true">
        <shape>
            <corners android:radius="25dp"/>
            <solid android:color="@color/colorPrimaryDark" />
        </shape>
    </item>

    <item>
        <shape>
            <corners android:radius="25dp"/>
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>

</selector>

btn_round_blue.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="false">
        <shape>
            <corners android:radius="3dp"/>
            <solid android:color="@color/colorwhite" />
        </shape>
    </item>

    <item>
        <shape>
            <corners android:radius="3dp"/>
            <stroke android:color="@color/colorBlue" android:width="1px"/>
        </shape>
    </item>

</selector>

btn_round_green.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="false">
        <shape>
            <corners android:radius="3dp"/>
            <solid android:color="@color/colorwhite" />
        </shape>
    </item>

    <item>
        <shape>
            <corners android:radius="3dp"/>
            <stroke android:color="@color/colorPrimary" android:width="1px"/>
        </shape>
    </item>

</selector>

btn_round_green_all.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="false">
        <shape>
            <corners android:radius="25dp"/>
            <solid android:color="@color/colorwhite" />
        </shape>
    </item>

    <item>
        <shape>
            <corners android:radius="25dp"/>
            <stroke android:color="@color/colorPrimary" android:width="1px"/>
        </shape>
    </item>

</selector>

btn_round_red_all.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="false">
        <shape>
            <corners android:radius="25dp"/>
            <solid android:color="@color/colorwhite" />
        </shape>
    </item>

    <item>
        <shape>
            <corners android:radius="25dp"/>
            <stroke android:color="@color/colorRed" android:width="1px"/>
        </shape>
    </item>

</selector>

4.colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- 按钮颜色 白色系 -->
    <color name="btn_color_white_normal">#FFFFFF</color>
    <color name="btn_color_white_pressed">#e5e5e5</color>
    <color name="btn_color_white_disable">#CCCCCC</color>

    <color name="colorPrimary">#39a9ff</color>
    <color name="colorPrimaryDark">#3998ff</color>

    <!-- 透明背景颜色 -->
    <color name="translucent">#00000000</color>
    <!-- 窗口颜色-->
    <color name="colorwindowBackground">#f2f5f7</color>
    <color name="colorTextPrimary">#18202a</color>
    <color name="colorTextBlue">#39b8ff</color>
    <color name="colorTextPrimarySec">#18202a</color>
    <color name="colorTextPrimaryLight">#707b89</color>
    <color name="colorText777">#777777</color>
    <!-- 更浅色字体-->
    <color name="colorTextPrimaryMoreLight">#979797</color>
    <color name="colorLine">#e9eaeb</color>
    <color name="colorLineSec">#eaeaea</color>
    <!-- 内容区域颜色 -->
    <color name="colorItemBg">#FFF</color>
    <color name="colorEnableMore">#18202a</color>
    <color name="colorwhite">#ffffff</color>
    <color name="colorblack">#000000</color>
    <color name="colorEnable">#E5E4E4</color>

    <color name="colorRed">#ff4b38</color>
    <color name="colorOrange">#ff7c25</color>
    <color name="colorBlue">#13de64</color>
</resources>

源码传送门:

https://github.com/LXLYHM/ButtonStylesDemo
https://gitee.com/dawnling/ButtonStylesDemo

收藏 0
android item color name shape
评论 ( 0 )