笔记108--shape和selector和layer-list

<shape>和<selector>在美化控件中非常重要。

一、shape

1、<shape> Android:shape=["rectangle"|"oval"|"line"|"ring"]

rectangle表示矩形，oval表示椭圆，line表示水平直线，ring表示环形。

2、<shape>中子节点常用属性：

1）<gradient>渐变

Android:startColor、Android:endColor起始颜色-结束颜色

Android:angle：渐变角度，0从左到右，90表示从上到下，数值为45的整数倍，默认为0.

Android:type：渐变的样式liner线性渐变，radial环形渐变，sweep

2）<solid>填充

3）<stroke>描边

Android:dashWitdth：表示"-"的长度

Android:dashGap：表示"-"之间的距离

width和color不再介绍

4）<corners>圆角

5）<padding>填充

二、selector

根据不同选定状态定义不同实现效果：

android:state_selected：选中

android:state_focused：获得焦点

android:state_pressed：点击

android:state_enabled：是否响应事件

android:state_window_focused：默认时的背景图片

<?xml version="1.0" encoding="utf-8" ?>       
<selector xmlns:Android="http://schemas.android.com/apk/res/android">     
<!-- 默认时的背景图片-->      
<item Android:drawable="@drawable/pic1" />        
<!-- 没有焦点时的背景图片 -->      
<item   
   Android:state_window_focused="false"        
   android:drawable="@drawable/pic_blue"   
   />       
<!-- 非触摸模式下获得焦点并单击时的背景图片 -->      
<item   
   Android:state_focused="true"   
   android:state_pressed="true"     
   android:drawable= "@drawable/pic_red"   
   />     
<!-- 触摸模式下单击时的背景图片-->      
<item   
   Android:state_focused="false"   
   Android:state_pressed="true"     
   Android:drawable="@drawable/pic_pink"   
   />      
<!--选中时的图片背景-->      
<item   
   Android:state_selected="true"   
   android:drawable="@drawable/pic_orange"   
   />       
<!--获得焦点时的图片背景-->      
<item   
   Android:state_focused="true"   
   Android:drawable="@drawable/pic_green"   
   />       
</selector>  

三、layer-list

将多个图片或者上面两种效果按照顺序层叠起来

例子：

<?xml version="1.0" encoding="utf-8"?>  
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
    <item>  
      <bitmap android:src="@drawable/android_red"  
        android:gravity="center" />  
    </item>  
    <item android:top="10dp" android:left="10dp">  
      <bitmap android:src="@drawable/android_green"  
        android:gravity="center" />  
    </item>  
    <item android:top="20dp" android:left="20dp">  
      <bitmap android:src="@drawable/android_blue"  
        android:gravity="center" />  
    </item>  
</layer-list>  

<ImageView  
    android:layout_height="wrap_content"  
    android:layout_width="wrap_content"  
    android:src="@drawable/layers" />  

效果图：

四、大结局

将上面三个标签揉合到一起使用。

<selector xmlns:android="http://schemas.android.com/apk/res/android">  
    <item android:state_pressed="true">  
        <layer-list>  
            <item android:bottom="8.0dip">  
                <shape>  
                    <solid android:color="#ffaaaaaa" />  
                </shape>  
            </item>  
            <item>  
                <shape>  
                    <corners android:bottomLeftRadius="4.0dip" android:bottomRightRadius="4.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />  
  
                    <solid android:color="#ffaaaaaa" />  
  
                    <padding android:bottom="1.0dip" android:left="1.0dip" android:right="1.0dip" android:top="0.0dip" />  
                </shape>  
            </item>  
            <item>  
                <shape>  
                    <corners android:bottomLeftRadius="3.0dip" android:bottomRightRadius="3.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />  
  
                    <solid android:color="@color/setting_item_bgcolor_press" />  
                </shape>  
            </item>  
        </layer-list>  
    </item>  
    <item>  
        <layer-list>  
            <item android:bottom="8.0dip">  
                <shape>  
                    <solid android:color="#ffaaaaaa" />  
                </shape>  
            </item>  
            <item>  
                <shape>  
                    <corners android:bottomLeftRadius="4.0dip" android:bottomRightRadius="4.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />  
  
                    <solid android:color="#ffaaaaaa" />  
  
                    <padding android:bottom="1.0dip" android:left="1.0dip" android:right="1.0dip" android:top="0.0dip" />  
                </shape>  
            </item>  
            <item>  
                <shape>  
                    <corners android:bottomLeftRadius="3.0dip" android:bottomRightRadius="3.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />  
  
                    <solid android:color="@color/setting_item_bgcolor" />  
                </shape>  
            </item>  
        </layer-list>  
    </item>  
</selector> 

四、实现圆角

这种方法并没有实现圆角，只是点击下去圆角了，有可借鉴的地方，所以学习下：http://blog.csdn.net/wangkuifeng0118/article/details/7746175#comments

原理：重写listview，当size=1时，加载只有上边圆角的shape；当size>1时，第一项加载上边圆角的shape，中间加载无圆角的shape，最好一项加载下边圆角的shape。

知识点补充：onInterceptEvent()

public class CornerListView extends ListView {  
    public CornerListView(Context context) {  
        super(context);  
    }  
  
    public CornerListView(Context context, AttributeSet attrs, int defStyle) {  
        super(context, attrs, defStyle);  
    }  
  
    public CornerListView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
    }  
  
    @Override  
    public boolean onInterceptTouchEvent(MotionEvent ev) {  
        switch (ev.getAction()) {  
        case MotionEvent.ACTION_DOWN:  
            int x = (int) ev.getX();  
            int y = (int) ev.getY();  
            int itemnum = pointToPosition(x, y);  
            if (itemnum == AdapterView.INVALID_POSITION)  
                break;  
            else {  
                if (itemnum == 0) {  
                    if (itemnum == (getAdapter().getCount() - 1)) {  
                        //只有一项  
                        setSelector(R.drawable.app_list_corner_round);  
                    } else {  
                        //第一项  
                        setSelector(R.drawable.app_list_corner_round_top);  
                    }  
                } else if (itemnum == (getAdapter().getCount() - 1))  
                    //最后一项  
                    setSelector(R.drawable.app_list_corner_round_bottom);  
                else {  
                    //中间项  
                    setSelector(R.drawable.app_list_corner_round_center);  
                }  
            }  
            break;  
        case MotionEvent.ACTION_UP:  
            break;  
        }  
        return super.onInterceptTouchEvent(ev);  
    }  
}