android_重写button样式

Posted 2020-06-08

这样的button样式应该源自ios。假设安卓上实现，则须要使用android上面的layer-list来实现。

事实上layer-list有点像framlayout，作用就是覆盖。

先说一下实现原理：先画一个矩形。就是我们所示红色边框。

然后再画一个矩形将白色背景覆盖上面，设置android：left | right | top |bottom值。能够实现边框的大小。

然后在button里面设置background属性就好了，以下附上源代码。

由于三个button形状都不一样，所以要设置三个layer—list。

他们当中的差别也仅仅是Radius的差别。

假设须要设置比方三选一，而且有按下效果的话。最好使用RadioButton来实现。然后在drawable里面再实现<Selector>就能够了。

<div style="text-align: left;"><pre name="code" class="html"><?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 连框颜色值 -->
    <item>
        <shape>
            <solid android:color="#ff0000" />   //背景填充红色

            <corners
                android:bottomRightRadius="4dp"  //设置圆角
                android:topRightRadius="4dp" />
        </shape>
    </item>
    <!-- 主体背景颜色值 -->
    <item
        android:bottom="1dp"    //边框的宽度
        android:right="1dp"
        android:top="1dp">
        <shape>
            <solid android:color="#ffffff" />

            <corners
                android:bottomRightRadius="4dp"
                android:topRightRadius="4dp" />

            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape>
    </item>

</layer-list>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button2"
        android:layout_alignBottom="@+id/button2"
        android:layout_centerHorizontal="true"
        android:background="@drawable/button_mid"      <span style="font-family: Arial, Helvetica, sans-serif;">//设置button的形状</span>

        android:text="Button3" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button1"
        android:layout_alignBottom="@+id/button1"
        android:layout_toRightOf="@+id/button3"
        android:background="@drawable/button_right"    //设置button的形状
        android:text="Button2" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="110dp"
        android:layout_toLeftOf="@+id/button3"
        android:background="@drawable/button_left"      <span style="font-family: Arial, Helvetica, sans-serif;">//设置button的形状</span>
        android:text="Button1" />

</RelativeLayout>