Android自己定义控件背景及其Drawable以实现扁平化

扁平化？

人们都说扁平化是从IOS和WindowsPhone那边吹过来的邪风，可是不可否认：扁平化是我见过的最舒服、最自然的表现方式。

从开发角度上来讲，扁平化的设计能够使得我们从很多屏幕适配和尺寸调节的工作中解放出来（尽管仅仅是那么一点点）。更加关注功能；而在在使用层面上，仅仅要文化水平不是特别地低（没有恶意），拟物化的那点提示作用也不是那么明显，当然这里不是说拟物化不好，总之：相对于其它表现方式，扁平化碉堡了。

咱们也做一个扁平化

上面说了，扁平化的控件事实上在开发中是很easy的。这里让我们一起动手，实现以下这个效果（红色部分为本文解说部分，蓝色的你能够自行练习完毕）：

上图中全部的元素都很简单，其本质都是一个带有黑色边框。无填充背景的View（Button（图中1处）。ViewGroup（图种2处））。

为View（途中1处）定义一个扁平化的背景

从上面的分析可知，我们仅仅须要给组件定义一个扁平化了的背景。并且在布局上尽量追求简洁就可以实现扁平化效果。以下是一个粗0.5dp、填充色为白色的背景：

bordered_black_blue_bg.xml

<?
xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <corners android:radius="5dp" />

    <solid android:color="@android:color/white" />

    <stroke
        android:width="0.5dp"
        android:color="@android:color/black" />

</shape>

假设有对Android中shape的使用不熟的朋友，能够參考下这位同学的总结或參考官方api文档。

我们的设计中还包含：用户点击按钮时。背景色变为蓝色。所以，上面的drawable资源也仅仅是默认状态下的显示，以下我们再创建一个扁平化Button按下时的效果：

bordered_black_blue_bg_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <corners android:radius="5dp" />
    
    <!-- 自己定义的浅蓝色 -->
    <solid android:color="@color/blue" />

    <stroke
        android:width="0.5dp"
        android:color="@android:color/black" />

</shape>

接下来我们依据上面两个drawable文件为Button建立一个selector对象。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/bordered_black_blue_bg_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/bordered_black_blue_bg"/>

</selector>

为ViewGroup定义一个扁平化背景

观察上图2处可知，ViewGroup的背景和View在正常状态下的背景是一致的。所以他们的drawable文件内容是一致的。

bordered_black_bg.xml

<?
xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <corners android:radius="5dp" />

    <solid android:color="@android:color/white" />

    <stroke
        android:width="0.5dp"
        android:color="@android:color/black" />

</shape>

2处的那些小条目的布局文件：

view_info_item.xml

<?
xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bordered_black_bg"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:padding="@dimen/default_padding" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="marquee"
        android:marqueeRepeatLimit="marquee_forever"
        android:maxWidth="@dimen/info_item_max_text_width"
        android:text="chinese address" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/margin_large"
        android:text="北京市
朝阳区
大望路
34号n34号n34号n34号n34号n34号" />

</LinearLayout>

ListView的扁平化处理

依据上面的介绍，我们已经能够做出一个很“带感”的扁平化的按钮了（或TextView、等等）。为了使的图种2处的这些小条目能够滚动并易于管理，我们把它放到ListView中。以下是上图的布局文件：

fragment_department_detail.xml

<LinearLayout 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:orientation="vertical"
    android:padding="@dimen/default_padding" >
	<!-- 这是我自己定义的View，相应于上图中的蓝色部分，可作为你的练习作业 -->
    <org.xiaom.butler.view.TopNav
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/margin_large" />
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/margin_large"
        android:text="Baby Home Care Center"
        android:textSize="@dimen/text_size_larger"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="宝贝家早教中心"
        android:textSize="@dimen/text_size_large" />

 	<!-- 此Button使用了之前定义的扁平化背景@drawable/selector/selector_button_normal_bg -->
    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/margin_large"
        android:background="@drawable/selector_button_normal_bg"
        android:text="Show Taxi Card"
        android:textColor="@android:color/black"
        android:textSize="@dimen/text_size_large"
        android:textStyle="bold" />
	<!-- 注意divider及dividerHeight这两个属性 -->
    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@null"
        android:divider="@null"
        android:dividerHeight="@dimen/list_dirver_height"
        android:paddingBottom="@dimen/list_view_padding_v"
        android:paddingTop="@dimen/list_view_padding_v" >
    </ListView>

</LinearLayout>

我们知道，ListView在默认情况下丑的一逼，并且还item之间还没有间隔，简直不忍直视~~~~~为了使得ListView也能赶上扁平化这股春风，我们须要对其进行配置。

• android:divider="@null"，配置ListView内Item的间隔为@null，即——没有间隔。
  
• android:dividerHeight="@dimen/list_dirver_height"，配置切割的高度即——item之间的间隔“距离”。上面的xml中，间隔为5dp
  

为ListView填充自己定义的数据，这里就不说了，继承一个BaseAdapter就可以。启动Activity也不说了。这里是本次博文的源代码。

不论什么须要积分的下载都是耍（da）流（nao）氓（can）。