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>
时间: 2024-11-09 00:35:46

Android中用shape做渐变,边框,圆角等效果的相关文章

android 使用xml为背景添加渐变,描边,圆角的效果

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" > <solid android:color="#40E0D0"/> <!-- 渐变 --> <gradient android:startColor="#E

android的ListView做表格添加圆角边框

边框,圆角,都可以实现的 在drawable目录下添加view_yuan_morelist.xml,设置控件的边框代码.如下: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <sol

android使用shape做selector按钮按下和弹起的动画

平时效果: 按下效果: selector代码: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"><shape> <solid andro

巧妙实现带圆角的渐变边框

如何实现下面这个渐变的边框效果: 这个问题本身不难,实现的方法也有一些,主要是有一些细节需要注意. border-image border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 border 的官方规范) 新增的一个属性值. 顾名思义,我们可以给 border 元素添加 image,类似于 background-image,可以是图片也可以是渐变,不再局限于纯色. 使用 bo

Android Drawable - Shape Drawable使用详解(附图)

TIPS shape图形 –简单介绍 shape图形 –如何画? shape图形 –参数详细解析 shape图形 –如何用? shape图形 –实际开发应用场景 shape图形简单介绍 用xml实现一些形状图形, 或则颜色渐变效果, 相比PNG图片, 占用空间更小; 相比自定义View, 实现起来更加简单 怎么画? 在res/drawable/目录下建一个XML资源文件 Shape图片语法相对复杂, 下面是一个总结性的注释, 涵盖了大部分的参数,属性, 建议先跳过这段, 回头再看 [java] 

Android学习—Shape

Shape Drawable  An XML file that defines a geometric shape, including colors and gradients.一个定义几何形状的XML文件,包括颜色和渐变. 简介 作用:XML中定义的几何形状 位置:res/drawable/文件的名称.xml 使用的方法: Java代码中:R.drawable.文件的名称 layout中:android:background=”@drawable/文件的名称” 属性 <shape>  a

Android中shape的基本使用

shape用于设定形状,可以在selector,layout等里面使用,点击效果神马的我们可以不需要UI的切图,自己直接使用shape搞定,比较方便快捷. 新建一个shape.xml默认为矩形,可以通过android:shape=""来设置具体的形状,有这么四种:rectangle 矩形,oval 椭圆形,line 线,ring 环形.shape有6个子标签,各属性如下: <?xml version="1.0" encoding="utf-8&quo

android 用代码画虚线边框背景

               1.虚线画效果,可以使用Android中的xml来做. 2.直接上代码: <RelativeLayout android:id="@+id/coupon_popup" android:layout_width="320dp" android:layout_height="200dp" android:layout_margin="20dp" android:gravity="cen

Android中Shape的使用

先看一下文档对Shape Drawable的描述: Shape Drawable An XML file that defines a geometric shape, including colors and gradients.一个定义几何形状的XML文件,包括颜色和渐变. 创建一个ShpeDrawable对象 用Android:background="@drawable/xxx.xml"或相应的Java代码引用,Shape Drawable说白了就是可自定义的多样化的背景. 现在