Android自己定义控件背景及其Drawable以实现扁平化
扁平化？
人们都说扁平化是从IOS和WindowsPhone那边吹过来的邪风，可是不可否认：扁平化是我见过的最舒服、最自然的表现方式。
从开发角度上来讲，扁平化的设计能够使得我们从很多屏幕适配和尺寸调节的工作中解放出来（尽管仅仅是那么一点点）。更加关注功能；而在在使用层面上，仅仅要文化水平不是特别地低（没有恶意），拟物化的那点提示作用也不是那么明显，当然这里不是说拟物化不好，总之：相对于其它表现方式，扁平化碉堡了。
咱们也做一个扁平化
为View（途中1处）定义一个扁平化的背景
<?
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>
我们的设计中还包含：用户点击按钮时。背景色变为蓝色。所以，上面的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定义一个扁平化背景
<?
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>
<?
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="北京市\n朝阳区\n大望路\n34号n34号n34号n34号n34号n34号" /> </LinearLayout>
ListView的扁平化处理
<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
