zoukankan      html  css  js  c++  java
  • 【Android进阶学习】shape和selector的结合使用

    shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector。可以这样说,shape和selector在美化控件中的作用是至关重要的。

    1.Shape

    简介

    作用:XML中定义的几何形状

    位置:res/drawable/文件的名称.xml

    使用的方法:

    Java代码中:R.drawable.文件的名称

    XML中:android:background="@drawable/文件的名称"

    属性:

    <shape>  android:shape=["rectangle" | "oval" | "line" | "ring"]

    其中rectagle矩形,oval椭圆,line水平直线,ring环形

    <shape>中子节点的常用属性:

    <gradient>  渐变

    android:startColor  起始颜色

    android:endColor  结束颜色             

    android:angle  渐变角度,0从上到下,90表示从左到右,数值为45的整数倍默认为0;

    android:type  渐变的样式 liner线性渐变 radial环形渐变 sweep

    <solid >  填充

    android:color  填充的颜色

    <stroke > 描边

    android:width 描边的宽度

    android:color 描边的颜色

    android:dashWidth 表示'-'横线的宽度

    android:dashGap 表示'-'横线之间的距离

    <corners > 圆角

    android:radius  圆角的半径 值越大角越圆

    android:topRightRadius  右上圆角半径
      
    android:bottomLeftRadius 右下圆角角半径
     
    android:topLeftRadius 左上圆角半径

    android:bottomRightRadius 左下圆角半径
     

     2.Selector

     简介

    位置:res/drawable/文件的名称.xml

    使用的方法:

    Java代码中:R.drawable.文件的名称

    XML中:android:background="@drawable/文件的名称"

    1. <?xml version="1.0" encoding="utf-8" ?>     
    2. <selector xmlns:android="http://schemas.android.com/apk/res/android">   
    3. <!-- 默认时的背景图片-->    
    4. <item android:drawable="@drawable/pic1" />      
    5.  
    6. <!-- 没有焦点时的背景图片 -->    
    7. <item 
    8. android:state_window_focused="false"
    9. android:drawable="@drawable/pic_blue" 
    10. />     
    11.  
    12. <!-- 非触摸模式下获得焦点并单击时的背景图片 -->    
    13. <item 
    14. android:state_focused="true" 
    15. android:state_pressed="true"   
    16. android:drawable"@drawable/pic_red" 
    17. />   
    18.  
    19. <!-- 触摸模式下单击时的背景图片-->    
    20. <item 
    21. android:state_focused="false" 
    22. android:state_pressed="true"   
    23. android:drawable="@drawable/pic_pink" 
    24. />    
    25.  
    26. <!--选中时的图片背景-->    
    27. <item 
    28. android:state_selected="true" 
    29. android:drawable="@drawable/pic_orange" 
    30. />     
    31.  
    32. <!--获得焦点时的图片背景-->    
    33. <item 
    34. android:state_focused="true" 
    35. android:drawable="@drawable/pic_green" 
    36. />     
    37. </selector> 

     第一个例子:圆角的Button

    http://liangruijun.blog.51cto.com/3061169/630051

    第二个例子:shape+selector综合使用的例子 漂亮的ListView

    先看看这个例子的结构:

    selector.xml

    1. <?xml version="1.0" encoding="utf-8"?> 
    2. <selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    3.  
    4.     <item android:state_selected="true"> 
    5.         <shape> 
    6.             <gradient android:angle="270" android:endColor="#99BD4C" 
    7.                 android:startColor="#A5D245" /> 
    8.             <size android:height="60dp" android:width="320dp" /> 
    9.             <corners android:radius="8dp" /> 
    10.         </shape> 
    11.     </item> 
    12.     <item android:state_pressed="true"> 
    13.         <shape> 
    14.             <gradient android:angle="270" android:endColor="#99BD4C" 
    15.                 android:startColor="#A5D245"/> 
    16.             <size android:height="60dp" android:width="320dp" /> 
    17.             <corners android:radius="8dp" /> 
    18.         </shape> 
    19.     </item> 
    20.     <item> 
    21.         <shape> 
    22.             <gradient android:angle="270" android:endColor="#A8C3B0" 
    23.                 android:startColor="#C6CFCE"  /> 
    24.             <size android:height="60dp" android:width="320dp" /> 
    25.             <corners android:radius="8dp" /> 
    26.         </shape> 
    27.     </item> 
    28. </selector> 

     

    list_item.xml

    1. <?xml version="1.0" encoding="utf-8"?> 
    2.    <LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android" 
    3.     android:orientation="horizontal"   
    4.     android:layout_width="fill_parent"    
    5.     android:layout_height="wrap_content" 
    6.     android:background="@drawable/selector" 
    7.     >                     
    8.     <ImageView   
    9.         android:id="@+id/img"    
    10.         android:layout_width="wrap_content"   
    11.         android:layout_height="wrap_content"              
    12.         android:layout_gravity="center_vertical" 
    13.         android:layout_marginLeft="20dp"          
    14.         />                            
    15.         <TextView   
    16.             android:text="data"   
    17.             android:id="@+id/title" 
    18.             android:layout_width="fill_parent"   
    19.             android:layout_height="wrap_content"   
    20.             android:gravity="center_vertical"    
    21.             android:layout_marginLeft="20dp"   
    22.             android:layout_marginTop="20dp"   
    23.             android:textSize="14sp"                           
    24.             android:textStyle="bold" 
    25.             android:textColor="@color/black"                          
    26.             > 
    27.         </TextView>           
    28.  </LinearLayout> 

    main.xml

     

    1. <?xml version="1.0" encoding="utf-8"?> 
    2.     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    3.         android:orientation="vertical"   
    4.         android:layout_width="fill_parent"    
    5.         android:layout_height="wrap_content" 
    6.         android:background="#253853" 
    7.         >                                 
    8.         <ListView   
    9.           android:id="@+id/list"   
    10.           android:layout_width="match_parent"   
    11.           android:layout_height="match_parent" 
    12.           android:cacheColorHint="#00000000" 
    13.           android:divider="#2A4562" 
    14.           android:dividerHeight="3px" 
    15.           android:listSelector="#264365" 
    16.           android:drawSelectorOnTop="false"  
    17.           > 
    18.         </ListView>   
    19. </LinearLayout> 

    colors.xml

    1. <?xml version="1.0" encoding="utf-8"?> 
    2. <resources> 
    3.     <color name="white">#FFFFFFFF</color> 
    4.     <color name="transparency">#00000000</color> 
    5.     <color name="title_bg">#1C86EE</color> 
    6.     <color name="end_color">#A0cfef83</color> 
    7.     <color name="black">#464646</color> 
    8. </resources> 

    MainActivity.xml

    1. package com.lingdududu.customlist;  
    2.  
    3. import java.util.ArrayList;  
    4. import java.util.HashMap;  
    5.  
    6. import xb.customlist.R;  
    7.  
    8. import android.R.array;  
    9. import android.app.Activity;  
    10. import android.os.Bundle;  
    11. import android.widget.ArrayAdapter;  
    12. import android.widget.ListView;  
    13. import android.widget.SimpleAdapter;  
    14.  
    15. public class MainActivity extends Activity {  
    16.     ListView list;  
    17.       
    18.     String data[] = new String[]{  
    19.             "China","UK","USA","Japan","German","Canada","ET","Narotu"    
    20.     };  
    21.       
    22.       
    23.     /** Called when the activity is first created. */ 
    24.     @Override 
    25.     public void onCreate(Bundle savedInstanceState) {  
    26.         super.onCreate(savedInstanceState);  
    27.         setContentView(R.layout.main);  
    28.           
    29.           
    30.         list =(ListView) findViewById(R.id.list);          
    31.           
    32.         SimpleAdapter adapter = new SimpleAdapter(this, getData(), R.layout.list_item,   
    33.                 new String[]{"title","img"}, new int[]{R.id.title,R.id.img});  
    34.           
    35.         list.setAdapter(adapter);          
    36.     }  
    37.       
    38.     private ArrayList<HashMap<String, Object>> getData() {        
    39.         ArrayList<HashMap<String, Object>> dlist = new ArrayList<HashMap<String,Object>>();  
    40.           
    41.         for(int i =0;i<data.length;i++){  
    42.             HashMap<String, Object>map = new HashMap<String, Object>();           
    43.             map.put("title", data[i]);  
    44.             map.put("img", R.drawable.item_left2);  
    45.             dlist.add(map);   
    46.         }  
    47.         return dlist;  
    48.     }  

    效果图:

     上面的例子中用到很多关于颜色RGB的参数,对RGB不熟悉的,可以参照我博客的一篇文章

    http://liangruijun.blog.51cto.com/3061169/629276

  • 相关阅读:
    BZOJ3884 上帝与集合的正确用法 【欧拉定理】
    BZOJ4872 [六省联考2017]分手是祝愿 【期望dp】
    BZOJ4650 [NOI2016]优秀的拆分 【后缀数组】
    BZOJ1562 [NOI2009]变换序列 【KM算法】
    BZOJ2657 [Zjoi2012]旅游(journey) 【树的直径】
    BZOJ3999 [TJOI2015]旅游 【树剖 + 线段树】
    BZOJ3997 [TJOI2015]组合数学 【Dilworth定理】
    BZOJ4823 [Cqoi2017]老C的方块 【最小割】
    坐标系统
    利用键盘左右键使图像左右移动,上下键使图像的两个纹理可见度比例上下调整
  • 原文地址:https://www.cnblogs.com/fx2008/p/3140878.html
Copyright © 2011-2022 走看看