首页 > 代码库 > android_重写button样式

android_重写button样式

2024-07-19 08:16:11   223人阅读

这种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>




android_重写button样式






























        

            
                
                  
                
                

                    联系

                    我们