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