这样的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>