Android Shape设置背景

设置背景时,经常这样 android:background=“@drawable/xxx” 。如果是纯色图片,可以考虑用 shape 替代。

shape 相比图片,减少资源占用,缩减APK体积。

开始使用。



    
    
    
    
    
    

概览

使用 shape ,可以实现 矩形、椭圆、直线、圆环。

  • corners :设置圆角,android:radius 设置统一的圆角。也可以单独设置四个角的圆角。
  • gradient :渐变,有线性渐变(默认)、放射渐变(类似中心往外扩散的效果)、扫描式渐变(转一圈的效果)。
  • padding :内边距。和 View 的 padding 使用一样。可以不设置,由 View 来决定。
  • size :大小。设置宽高,和 View 的 padding 使用一样。可以不设置,由 View 来决定。
  • solid :填充颜色。
  • stroke :描边。可以设置边界的颜色,设置边界边缘为虚线。

使用方法:

  • 1.在 res/drawable/ 目录创建 shape_demo.xml 。
  • 2.在布局文件中 android:background=“@drawable/shape_demo”

矩形

默认直角矩形



    
    

圆角

用 corners 设置圆角,圆角的幅度由 android:radius 控制。




    
    

    
    

描边

用 stroke 描边,默认边缘时曲线,添加了 android:dashWidth 、android:dashGap 就是虚线。

  • android:width 指定宽度,
  • android:color 是边缘颜色,
  • android:dashWidth 是虚线线段的宽度,
  • android:dashGap 是虚线之间的间隔



    
    

    
    

    
    

渐变色

用 gradient 设置渐变色,

  • android:type :渐变色类型,线性渐变(默认)、放射渐变(类似中心往外扩散的效果)、扫描式渐变(转一圈的效果)。
  • android:angle :渐变开始角度。线性渐变下有效。
    Angle of the gradient, used only with linear gradient. Must be a multiple of 45 in the range [0, 315].
  • android:startColor :渐变开始的颜色
  • android:centerColor :渐变中间的颜色
  • android:endColor :渐变结束的颜色



    
    

    


几种矩形效果对比,
Android Shape设置背景_第1张图片

学会了矩形,其他的也就会了。

椭圆

线性渐变,




    
    

    
    

    


放射渐变,在 线性渐变 基础上把 android:type 改为 radial ,同时设置 android:gradientRadius ,它决定内圆的大小。




    
    

    
    

    

扫描式渐变,在 线性渐变 基础上把 android:type 改为 sweep 。

linear 、radial 、sweep ,三种渐变色的对比,
Android Shape设置背景_第2张图片

直线/虚线

直线




    

    
    


虚线,虚线就是直线加上描边效果。




    

    
    


对比,
Android Shape设置背景_第3张图片

圆环

android:shape=“ring” ,

  • android:innerRadius :内圆半径,直接设置 dp 值。
  • android:thickness :圆环厚度,直接设置 dp 值。
  • android:useLevel :设为 false ,否则不显示。
  • android:innerRadiusRatio :内圆半径,圆环宽度占比的形式,如 设为 4 ,意思是 内圆半径 = 圆环宽度 / 4 。
  • android:thicknessRatio :圆环厚度,圆环宽度占比的形式,如 设为 4 ,意思是 内圆半径 = 圆环宽度 / 4 。

本例 View 限定宽高都为 100 dp ,这两种写法,圆环大小是一样的。
写法1 ,




    
    

写法2 ,




    
    

	
    

写法 2 , gradient 中设置 android:angle=“90” ,看下和 0 的对比




    
    

	
    

三种效果对比,
Android Shape设置背景_第4张图片

  • android:angle 为 0 是中间的效果,左边是开始渐变的颜色,右边是结束渐变的颜色。
  • android:angle 为 90 是右边的效果,下面是开始渐变的颜色,上面是结束渐变的颜色。

你可能感兴趣的:(Android,View,android)