码迷,mamicode.com
首页 > 移动开发 > 详细

Android中用shape做渐变,边框,圆角等效果

时间:2015-01-20 13:51:09      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:android   shape   渐变   边框   

以前没接触到shape的时候,做圆角,渐变等效果都是依赖图片效果;如果对PS不熟悉,光是做图就要花去大把时间。

废话不讲了,把总结的内容记录下来,俺们不是在写博客,算是做个云笔记吧。

shape用法与selector类似:

1.在res-drawable文件夹新建一个.xml文件;(如btn_style.xml)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <gradient
        android:startColor="#1E90FF"
        android:endColor="#EE82EE"
        android:angle="90"/>
    
    <stroke 
        android:width="2dp"
        android:color="#FF8C00"  
        android:dashWidth="5dp" 
        android:dashGap="3dp"
        /> 
    
</shape>

效果图:

技术分享

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#1E90FF"
        android:endColor="#EE82EE"
        android:angle="45"
        android:centerColor="#ffffff"
        />
    
    <stroke 
        android:width="2dp"
        android:color="#FF8C00"  
        android:dashWidth="5dp" 
        android:dashGap="0dp"
        /> 
        
    <corners  
        android:radius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"  
        />
    
  <!--   <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="8dp" />
    
    <solid android:color="#80065e8d" />
  <stroke
    android:dashGap="0dp"
    android:width="4dp"
    android:color="@android:color/white" /> -->
</shape>

效果图:

技术分享

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="40dp" 
    android:thickness="1dp"		
    >
    <gradient
        android:startColor="#1E90FF"
        android:endColor="#EE82EE"
        android:angle="135"
         android:centerColor="#ffffff"
         android:type="linear"
        />
    
    <stroke 
        android:width="1dp"
        android:color="#FF8C00"  
        /> 
    
  <!--   <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="8dp" />
    
    <solid android:color="#80065e8d" />
  <stroke
    android:dashGap="0dp"
    android:width="4dp"
    android:color="@android:color/white" /> -->
</shape>


效果图:

 技术分享

 

shape与selector组合使用:

<?xml version="1.0" encoding="utf-8"?>
 <selector
     xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true" >
         <shape>
             <!-- 渐变 -->
	        <gradient
	        android:startColor="#1E90FF"
	        android:endColor="#EE82EE"
	        android:angle="45"
	        android:centerColor="#ffffff"
	        />
             <!-- 描边 -->
	        <stroke 
	        android:width="2dp"
	        android:color="#FF8C00"  
	        android:dashWidth="5dp" 
	        android:dashGap="0dp"
	        /> 
         	<!-- 圆角 -->
		    <corners  
		        android:radius="5dp"
		        android:topLeftRadius="5dp"
		        android:topRightRadius="5dp"
		        android:bottomLeftRadius="5dp"
		        android:bottomRightRadius="5dp"  
		        />
             
         </shape>
     </item>
 
    <item android:state_focused="true" >
         <shape>
             <!-- 渐变 -->
	        <gradient
	        android:startColor="#1E90FF"
	        android:endColor="#EE82EE"
	        android:angle="45"
	        android:centerColor="#ffffff"
	        />
             <!-- 描边 -->
	        <stroke 
	        android:width="2dp"
	        android:color="#FF8C00"  
	        android:dashWidth="5dp" 
	        android:dashGap="0dp"
	        /> 
         	<!-- 圆角 -->
		    <corners  
		        android:radius="5dp"
		        android:topLeftRadius="5dp"
		        android:topRightRadius="5dp"
		        android:bottomLeftRadius="5dp"
		        android:bottomRightRadius="5dp"  
		        />
            
         </shape>
     </item>
 
    <item>       
        <shape>
            <!-- 填充 -->
            <solid android:color="#1e90ff"/>
            <!-- 描边 -->
	        <stroke 
	        android:width="2dp"
	        android:color="#FF8C00"  
	        android:dashWidth="5dp" 
	        android:dashGap="2dp"
	        /> 
             
         </shape>
     </item>
 </selector>

效果:
 技术分享

 

2.在控件中使用shape效果;

android:background="@drawable/btn_style"

 

3.shape常用功能介绍;

<shape
    xmlns:android="<a target=_blank href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a>"
    android:shape="rectangle"
    >
     
     <!--
      渐变色
        android:startColor  颜色值    起始颜色
        android:endColor    颜色值    结束颜色
        android:centerColor 整型      渐变中间颜色,即开始颜色与结束颜色之间的颜色
        android:angle       整型      渐变角度(PS:当angle=0时,渐变色是从左向右。 然后逆时针方向转,当angle=90时为从下往上。angle必须为45的整数倍)
        android:type        ["linear" | "radial" | "sweep"] 渐变类型(取值:linear、radial、sweep)
                            linear 线性渐变,这是默认设置
                            radial 放射性渐变,以开始色为中心。
                            sweep 扫描线式的渐变。
       android:useLevel   ["true" | "false"] 如果要使用LevelListDrawable对象,就要设置为true。设置为true无渐变。false有渐变色
       android:gradientRadius 整型     渐变色半径.当 android:type="radial" 时才使用。单独使用 android:type="radial"会报错。
       android:centerX     整型       渐变中心X点坐标的相对位置
       android:centerY    整型       渐变中心Y点坐标的相对位置
    -->
   <gradient
        android:startColor="#1E90FF"
        android:endColor="#EE82EE"
        android:angle="45"
        android:centerColor="#ffffff"
        />
        
    <!--
      圆角
      android:radius     整型 半径
      android:topLeftRadius    整型 左上角半径
      android:topRightRadius   整型 右上角半径
      android:bottomLeftRadius  整型 左下角半径
      android:bottomRightRadius  整型 右下角半径
     -->
     <corners  
        android:radius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"  
        />
        
    <!--
      内边距,即内容与边的距离 
      android:left   整型 左内边距
      android:top    整型 上内边距
      android:right   整型 右内边距
      android:bottom  整型 下内边距
      -->
     <padding 
         android:left="10dp"
         android:top="10dp"
         android:right="10dp"
         android:bottom="10dp"
         />
     
    <!-- 
     size 大小
     android:width  整型 宽度
     android:height  整型 高度
    -->
    <size
        android:width="200dp"
        android:height="50dp"
        />
    
    <!--
     内部填充
     android:color  颜色值 填充颜色
    -->
    <solid 
        android:color="#1e90ff"
        />
    
     <!--
      描边
      android:width   整型  描边的宽度
      android:color   颜色值  描边的颜色
      android:dashWidth  整型  表示描边的样式是虚线的宽度, 值为0时,表示为实线。值大于0则为虚线
      android:dashGap   整型  表示描边为虚线时,虚线之间的间隔.
     -->
    <stroke 
        android:width="2dp"
        android:color="#FF8C00"  
        android:dashWidth="5dp" 
        android:dashGap="0dp"
        /> 
        
</shape>

 

Android中用shape做渐变,边框,圆角等效果

标签:android   shape   渐变   边框   

原文地址:http://blog.csdn.net/only_tan/article/details/42874447

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!