android_重寫button樣式

標籤：

這樣的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樣式