ActionBar中OptionMenu弹出菜单的位置和overflow右边距的调整

ActionBar中OptionMenu的显示以前是显示在overflow的下面,5.0以后显示的位置直接覆盖了overflow图标

在这里是通过修改样式的方式来解决显示问题


解决方案

1. 在values-v21 styles.xml文件中添加

   

2. 在主题中添加

@style/OverflowMenuStyle

效果图



针对overflow的icon距离右边框太近的问题

解决方案

1. 在values-v21 styles.xml文件中添加

   

2. 在主题中添加

@style/OverflowButtonStyle


Button自定义样式

 1.通过XML文件设置属性

       定义后和未定义的对比

     

         给button添加自定义的显示也非常简单,在button属性里加上android:background="@drawable/bt_style_bg" 其中最主要的是在drawable文件夹下的bt_style_bg.xml文件

[html]  view plain  copy
 print ?
  1. xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  3.   
  4.       
  5.     <item android:state_pressed="true"><shape>  
  6.   
  7.               
  8.             <gradient android:angle="270" android:endColor="#ADFF2F" android:startColor="#ADFF2F"/>  
  9.               
  10.             <stroke android:width="1dip" android:color="#f403c9" />  
  11.               
  12.             <corners android:radius="2dp" />  
  13.               
  14.             <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />  
  15.         shape>item>  
  16.   
  17.       
  18.     <item android:state_focused="true"><shape>  
  19.             <gradient android:angle="270" android:endColor="#00ff00" android:startColor="#00ffff" />  
  20.   
  21.             <stroke android:width="1dip" android:color="#f403c9" />  
  22.   
  23.             <corners android:radius="2dp" />  
  24.   
  25.             <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />  
  26.         shape>item>  
  27.   
  28.       
  29.     <item><shape>  
  30.             <gradient android:angle="180" android:endColor="#ffffff" android:startColor="#000000" />  
  31.   
  32.             <stroke android:width="1dip" android:color="#f403c9" />  
  33.   
  34.             <corners android:radius="5dip" />  
  35.   
  36.             <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />  
  37.         shape>item>  
  38.   
  39. selector>  
        shape属性的使用

圆角背景

[html]  view plain  copy
 print ?
  1. xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:shape="rectangle">  
  4.   
  5.       
  6.     <solid android:color="#E2F5F9"/>  
  7.       
  8.     <stroke  
  9.         android:width="2dp"  
  10.         android:color="#125579" />  
  11.       
  12.     <corners  
  13.         android:topLeftRadius="180dp"  
  14.         android:bottomLeftRadius="180dp"  
  15.         android:topRightRadius="180dp"  
  16.         android:bottomRightRadius="180dp"/>  
  17.     <padding  
  18.         android:left="10dp"  
  19.          android:bottom="5dp"  
  20.         android:top="5dp"  
  21.         android:right="10dp"  
  22.         />  
  23. shape>  

圆形背景

[html]  view plain  copy
 print ?
  1. xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:shape="oval">  
  4.     <padding  
  5.         android:bottom="2dp"  
  6.         android:left="2dp"  
  7.         android:right="2dp"  
  8.         android:top="2dp">padding>  
  9.     <size android:height="15dp"  
  10.         android:width="15dp">size>  
  11.     <solid android:color="#DD0000">solid>  
  12. shape>  

    2. 自定义形状、颜色、图样的按钮的实现

    步骤如下。

    (a) 设计一张自定义形状风格背景的图片,如下图。

        

   (b) 未点击和按下后的状态各做一张,形成一套图片,如下图。

        like_normal.png      like_pressed.png

   (c) 创建和编写按钮不同状态的图片使用描述文件drawable/bt_like.xml

[html]  view plain  copy
 print ?
  1. xml version="1.0" encoding="UTF-8"?>    
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">    
  3.     <item android:state_pressed="true"    
  4.         android:drawable="@drawable/like_normal" />    
  5.     <item android:state_focused="true"    
  6.         android:drawable="@drawable/like_pressed" />    
  7.     <item android:drawable="@drawable/like_normal" />    
  8. selector>  

     3.9-patch图片背景方式(注意前面有个.)

  9-patch格式,是在Android中特有的一种PNG图片格式,以"***.9.png"结尾。此种格式的图片定义了可以伸缩拉伸的区域和文字显示区域,这样,就可以在Android开发中对非矢量图进行拉伸而仍然保持美观。如果使用位图而没有经过9-patch处理的话,效果就会将图片任意的拉伸,影响效果。Android中大量用了这种技术,默认的按钮的背景就是用了类似的方法实现的。我们看一下google官方的描述:

    

    在Android sdk目录下有一个tools文件夹,在这个文件夹中找到draw9patch.bat文件,我们就是使用它来制作Nine-Patch图片的。双击打开之后,在导航栏点击File→Open 9-patch将xxx.png加载进来。
          我们可以在图片的四个边框绘制一个个的小黑点,在上边框和左边框绘制的部分就表示当图片需要拉伸时就拉伸黑点标记的区域,在下边框和右边框绘制的部分则表示内容会被放置的区域。

         如下图所示:

          完成后,最后保存为"xxx.9.png",这样就完成了,然后将其放入到button的background中或者xml自定义的属性中。

注意:.9图只能通过背景设置拉伸,如果用src方式设置只会当作普通图片处理


在android5.0新增了ripple(水波纹)的效果,他可以运用到Button,ImageButton,TextView,以及一些布局容器。


首先,我们看Android:Theme.Material.Light主题中设置的各种ripple效果属性的默认值:
1. @drawable/item_background_material  
2. @drawable/item_background_borderless_material  
3. @style/Widget.Material.Light.Button.Borderless  
4. @style/Widget.Material.Light.Button.ButtonBar.AlertDialog  

1. selectableItemBackground在drawable文件中文件内容为:有边界的效果
    android:color="?attr/colorControlHighlight">  
     
         
   
 
 


2. selectableItemBackgroundBorderless在drawable文件中文件内容为:无边界的效果(需要api21以上)
    android:color="?attr/colorControlHighlight" />  


3. borderlessButtonStyle最后引用的style就是如下:
 
     
他实际上就是设置了background的属性:
        android:color="?attr/colorControlHighlight">  
              android:drawable="@drawable/btn_default_mtrl_shape" />  
 
4. buttonBarButtonStyle实际上也是调用了borderlessButtonStyle的style,就是也是调用了相同的background:
 
     
  
     
     


前两种在xml中设置background即可,如:
android:background="?android:selectableItemBackground"  


后两种在xml中设置style即可,如:
style="?android:buttonBarButtonStyle"  

"buttonBarButtonStyle" > @style /Widget.Material.Light.Button.ButtonBar.AlertDialog  

你可能感兴趣的:(android-UI)