Android4.0以来,其UI设计风格渐趋扁平化,当然各公司也都竞相追逐潮流,改版自己App的设计风格,今天在论坛上看到一个帖子,想咨询如下图所示的按钮的最好的实现方法是什么?
看到下边的跟帖有的建议自定义Button或者使用ToggleButton,应该都是可以实现的,因为我平时主要做Android框架方面的,对于UI不是行家,只是前一段时间研究Drawable,知道这种效果可以使用普通Button加Drawable和Shape来实现,刚好手头没什么任务,就来试一下。
创建Android项目就不细说了,首先定义布局文件,只是为了演示效果,水平放置的两个按钮的尺寸我写死了,大家可以根据自己的布局需求修改,整体的布局文件activity_main如下:
<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" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_centerHorizontal="true"> <Button android:id="@+id/education" android:layout_width="100dp" android:layout_height="35dp" android:text="教育" android:textColor="#FFFFFF" android:background="@drawable/left_state_drawable" /> <Button android:id="@+id/digital" android:layout_width="100dp" android:layout_height="35dp" android:text="数码" android:textColor="#FFFFFF" android:background="@drawable/right_state_drawable"/> </LinearLayout> </RelativeLayout>
大家看到左侧按钮的一个属性:android:background="@drawable/left_state_drawable",右侧按钮也有一个同样的属性,不过是引用的另一个drawable罢了。
首先说明,android:background所引用的xml文件是放在drawable文件夹中的,目的就是用来实现button的圆角、颜色及点击效果。
先来看left_state_drawable.xml文件:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <shape android:shape="rectangle"> <corners android:topLeftRadius="8dp" android:topRightRadius="0dp" android:bottomRightRadius="0dp" android:bottomLeftRadius="8dp"/> <solid android:color="#FF00FF"/> </shape> </item> <item android:state_focused="true"> <shape android:shape="rectangle"> <corners android:topLeftRadius="8dp" android:topRightRadius="0dp" android:bottomRightRadius="0dp" android:bottomLeftRadius="8dp"/> <solid android:color="#5E5E5E"/> </shape> </item> <item> <shape android:shape="rectangle"> <corners android:topLeftRadius="8dp" android:topRightRadius="0dp" android:bottomRightRadius="0dp" android:bottomLeftRadius="8dp"/> <solid android:color="#5E5E5E"/> </shape> </item> </selector>
<selector></selector>大家很熟悉了,以前我们使用的时候其item里是不同的图片,以响应按钮按下、点击及初始的效果。现在我们看到,item里没有再使用图片,而是使用了Shape,Shape可以定义很多属性,如圆角、颜色、size、padding等等,这里只是简单的使用了圆角和颜色。圆角可以自定义四个角中哪个需要设置为圆角,对于左侧按钮,我们设置左上角和左下角为圆角,对于右侧按钮,则是右上角和右下角为圆角,其实left_state_drawable.xml和right_state_drawable.xml的区别也只是左右按钮的圆角位置不同而已。
最终效果如下图:
个人很喜欢这种实现方式,以往我们实现这种效果,需要多张背景图片以响应按钮的点击效果,现在我们只需给一个color即可搞定,既符合Android UI的潮流,又减小了APK包的大小及资源开销,而且维护起来非常简单,就是一个xml文件而已。
是不是一种很简洁快速的实现方式,Simple is Beautiful!