Android UI设计技巧

1.使用include标签实现包含共享UI设计

（1）创建新的布局文件 title_layout.xml，里面包含共享内容的布局

（2）layout属性：其对应抽取出来的共享的布局内容

  
  

   
   <
   
   LinearLayout xmlns:android
   
   =
   
   "
   
   http://schemas.android.com/apk/res/android
   
   "
   
   
   android:orientation
   
   =
   
   "
   
   vertical
   
   "
   
   
   android:background
   
   =
   
   "
   
   @drawable/share_background
   
   "
   
   
   android:layout_width
   
   =
   
   "
   
   fill_parent
   
   "
   
   
   android:layout_height
   
   =
   
   "
   
   fill_parent
   
   "
   
   >
   
   
   
   
   <include layout="@layout/title_layout"></include>
   
   

   
   </
   
   LinearLayout
   
   >
  
  

2.使用shapes实现渐变效果

（1）创建新的drawable的xml文件

  
  

   
   <
   
   shape xmlns:android
   
   =
   
   "
   
   http://schemas.android.com/apk/res/android
   
   "
   
    android:shape
   
   ="rectangle"
   
   >
   
    
   
   
   <
   
   gradient android:startColor
   
   =
   
   "
   
   #FFFF0000
   
   "
   
    android:endColor
   
   =
   
   "
   
   #80FF00FF
   
   "
   
    
            android:angle
   
   =
   
   "
   
   270
   
   "
   
   />
   
    
   
   
   <
   
   padding android:left
   
   =
   
   "
   
   50dp
   
   "
   
    android:top
   
   =
   
   "
   
   20dp
   
   "
   
    
            android:right
   
   =
   
   "
   
   7dp
   
   "
   
    android:bottom
   
   =
   
   "
   
   7dp
   
   "
   
    
   
   />
   
    
   
   
   <
   
   corners android:radius
   
   =
   
   "
   
   8dp
   
   "
   
    
   
   />
   
    

   
   </
   
   shape
   
   >
  
  

gradient 产生颜色渐变 android:angle 从哪个角度开始变 貌似只有90的整数倍可以

android:shape="rectangle" 默认的也是长方形

corners表示是有半径

（还有很多其它参数）

（2）设置android:background属性

  
  

   
   android:background
   
   =
   
   "
   
   @drawable/share_background
   
   "
  
  

3.灵活使用styles.xml

（1）在res/values目录下新建一个style.xml，增加<resource>根节点

  
  

   
   <?
   
   xml version
   
   =
   
   "
   
   1.0
   
   "
   
    encoding
   
   =
   
   "
   
   utf-8
   
   "
   
   ?>
   
   

   
   <
   
   resources
   
   >
   
   
 
   
   <
   
   style name="SpecialText"
   
    parent
   
   =
   
   "
   
   @style/Text
   
   "
   
   >
   
   
   
   
   <
   
   item name
   
   =
   
   "
   
   android:textSize
   
   "
   
   >
   
   18sp
   
   </
   
   item
   
   >
   
   
   
   
   <
   
   item name
   
   =
   
   "
   
   android:textColor
   
   "
   
   >
   
   #
   
   008
   
   </
   
   item
   
   >
   
   
 
   
   </
   
   style
   
   >
   
   

 
   
   <
   
   style name="button_style"
   
   >
   
   
    
   
   <
   
   item name
   
   =
   
   "
   
   android:textStyle
   
   "
   
   >
   
   bold
   
   </
   
   item
   
   >
   
   
    
   
   <
   
   item name
   
   =
   
   "
   
   android:textColor
   
   "
   
   >
   
   #FFFFFFFF
   
   </
   
   item
   
   >
   
   
    
   
   <
   
   item name
   
   =
   
   "
   
   android:layout_width
   
   "
   
   >
   
   100
   
   .0dip
   
   </
   
   item
   
   >
  
  
  
  

   
    </style>

   
   </
   
   resources
   
   >
  
  

（2）设置style属性

  
  

   
   <
   
   EditText id
   
   =
   
   "
   
   @+id/text1
   
   "
   
   
 style
   
   =
   
   "
   
   @style/SpecialText
   
   "
   
   
 android:layout_width
   
   =
   
   "
   
   fill_parent
   
   "
   
   
 android:layout_height
   
   =
   
   "
   
   wrap_content
   
   "
   
   
 android:text
   
   =
   
   "
   
   Hello, World!
   
   "
   
    
   
   />
  
  

现在这个EditText组件的所表现出来的风格就为我们在上边的XML文件中所定义的那样。

（补充：主题（theme)和style一样，也是在style.xml内申明，也是同样方式引用，不同的是通过在AndroidManifest.xml中定义的<application>和<activity>元素中使用到整个程序或者某个activity，但是主题不能用到某一个单独的view里。）

4.自定义按钮显示效果

（1）在drawable中创建新的xml文件--mybutton.xml文件。

  
  

   
   <
   
   item android:state_window_focused
   
   =
   
   "
   
   false
   
   "
   
    android:drawable
   
   =
   
   "
   
   @color/transparent
   
   "
   
    
   
   />
   
    

    
   
   <!--
   
    Even though these two point to the same resource, have two states so the drawable will invalidate itself when coming out of pressed state. 注意这句话
   
   -->
   
    

    
   
   <
   
   item android:state_focused
   
   =
   
   "
   
   true
   
   "
   
    android:state_enabled
   
   =
   
   "
   
   false
   
   "
   
    
        android:state_pressed
   
   =
   
   "
   
   true
   
   "
   
    
        android:drawable
   
   =
   
   "
   
   @drawable/selector_background_disabled
   
   "
   
    
   
   />
   
    
    
   
   <
   
   item android:state_focused
   
   =
   
   "
   
   true
   
   "
   
    android:state_enabled
   
   =
   
   "
   
   false
   
   "
   
    
        android:drawable
   
   =
   
   "
   
   @drawable/lselector_background_disabled
   
   "
   
    
   
   />
   
    

    
   
   <
   
   item android:state_focused
   
   =
   
   "
   
   true
   
   "
   
    android:state_pressed
   
   =
   
   "
   
   true
   
   "
   
    
        android:drawable
   
   =
   
   "
   
   @drawable/selector_background_transition
   
   "
   
    
   
   />
   
    
    
   
   <
   
   item android:state_focused
   
   =
   
   "
   
   false
   
   "
   
    android:state_pressed
   
   =
   
   "
   
   true
   
   "
   
    
        android:drawable
   
   =
   
   "
   
   @drawable/selector_background_transition
   
   "
   
    
   
   />
   
    

    
   
   <
   
   item android:state_focused
   
   =
   
   "
   
   true
   
   "
   
    
        android:drawable
   
   =
   
   "
   
   @drawable/selector_background_focus
   
   "
   
    
   
   />
   
    


   
   </
   
   selector
   
   >
   
    
  
  

（2）在构造的layout中引用这个xml

  
  

   
   <
   
   ImageButton 
android:id
   
   =
   
   "
   
   @+id/ImageButton01
   
   "
   
    
android:layout_width
   
   =
   
   "
   
   wrap_content
   
   "
   
    
android:layout_height
   
   =
   
   "
   
   wrap_content
   
   "
   
    
android:background
   
   ="@drawable/mybutton"
   
   >
   
    

   
   </
   
   ImageButton
   
   >
   
    
  
  

5.实现无失真图片拉伸（NinePatch图片处理）

使用draw9patch.bat工具创建  .9.png图片