美文网首页安卓开发
drawable下的非图片资源之shape用法详解

drawable下的非图片资源之shape用法详解

作者: 手指乐 | 来源:发表于2019-08-27 11:04 被阅读0次

绘制各种形状

  • shape节点属性支持的形状:
<shape>  Android:shape=["rectangle" | "oval" | "line" | "ring"]

其中rectangle矩形,oval椭圆,line水平直线,ring环形,默认为rectangle

  • 画一条直的虚线:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke android:color="#000000" android:width="1dp"
        android:dashWidth="1dp" android:dashGap="2dp"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.zhouyi.sharptest.MainActivity">

    <View
        android:layout_width="match_parent"
        android:background="@drawable/sharp_rectangle"
        android:layout_height="2dp"/>
</RelativeLayout>
  • 画一个圆,SIZE属性配置宽高一样,则椭圆就是一个圆形了:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorAccent"/>
    <size android:width="50dp" android:height="50dp"/>
</shape>
  • 画一个环:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="3"
    android:shape="ring"
    android:thicknessRatio="8"
    android:useLevel="false" >

    <gradient
        android:centerColor="#4c737373"
        android:centerY="0.5"
        android:endColor="#ffffd300"
        android:startColor="#4c737373"
        android:type="sweep"
        />
</shape>

android:thicknessRatio:它用圆环宽度的比率来表示圆环的厚度。例如,如果android:thicknessRatio=”2”,那么厚度就等于圆环的宽度除以2,默认值是3。(圆环宽度是根据shape作为背景所在view的宽度决定的),这个值越大,环(内环和外环之间的部分)就越薄

android:innerRadius:以dp为单位设置内环的具体半径值,这个值越大,内环越大

android:innerRadiusRatio:它用圆环宽度的比率来表示内部圆环的半径。例如,如果android:innerRadiusRatio=”5”,那么内部半径就等于圆环的宽度除以5。这个值会被android:innerRadius的值覆盖。默认是9。这个值越大,内环越小

android:useLevel:标示是否LeveListDrawable(imgeview设置不同level显示不同图片),要置为false

<shape>中的子节点及其属性

  • <gradient> 渐变
    Android:startColor :起始颜色
    Android:endColor : 结束颜色
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
 <gradient android:startColor="#ffffff"
  android:endColor="#000000"
  /> 
</shape>

android:angle:渐变角度,逆时针旋转。45的倍数,0度表示从左到右,90度表示从下到上,180表示从右到左,270表示从上到下:

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
 <gradient android:startColor="#ffffff"
  android:endColor="#000000"
  android:angle="90"
  /> </shape>

Android:type : 渐变类型linear,radial,sweep
Linear——线性渐变,默认的渐变类型,从startColor开始渐变到endColor结束,angle定义了渐变的角度
Radial——从startColor开始到endColor,对应由图形边缘到中心的圆形渐变,必须配合gradientradius一起使用,gradientradius代表渐变半径,值越大,则中间的白色到黑色的过渡区域越大

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
 <gradient android:startColor="#ffffff"
  android:endColor="#000000"
  android:type="radial"
  android:gradientRadius="150dp"
  /> 
</shape>
image

Sweep——扫描渐变

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
 <gradient android:startColor="#ffffff"
  android:endColor="#000000"
  android:type="sweep"
  android:angle="45"
  /> 
</shape>

指定渐变中心:

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
 <gradient android:startColor="#ffffff"
  android:endColor="#000000"
  android:type="sweep"
  android:angle="45"
  android:centerY="0.3"
  android:centerX="0.7"
  /> 
</shape>

渐变中心为浮点数0到1,代表相对自己偏移的百分比,默认中点开始扫描(0.5,0.5)

  • <solid > 填充

Android:color
填充的颜色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@color/colorAccent"/>
    <gradient android:startColor="#ffffff"
        android:endColor="#000000" />
</shape>

如果同时配置了solid和gradient,后配置的会覆盖前面的

  • <stroke >描边
    Android:width
    描边的宽度
    Android:color
    描边的颜色
    Android:dashWidth
    不是0时,表示描边为虚线,代表'-'横线的宽度,为0时为实线
    Android:dashGap
    描边为虚线时,表示'-'横线之间的距离
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@color/colorAccent"/>

    <stroke android:color="#000000"
        android:width="1dp"
        android:dashWidth="1dp"
        android:dashGap="2dp"/>
</shape>
  • <corners >圆角

Android:radius

圆角的半径 值越大角越圆
Android:topRightRadius
右上圆角半径
Android:bottomLeftRadius
右下圆角角半径
Android:topLeftRadius
左上圆角半径
Android:bottomRightRadius
左下圆角半径

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    >

    <solid android:color="@color/colorAccent"/>

    <corners android:topLeftRadius="20dp"
        android:topRightRadius="10dp"/>
</shape>
  • <padding >内部留白

android:bottom="1.0dip"
底部留白
android:left="1.0dip"
左边留白
android:right="1.0dip"
右边留白
android:top="0.0dip"
上面留白

把以下shape设置给textview的话,textview里面的内容要在顶部留白30dp

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <solid android:color="@color/colorAccent"/>

    <padding android:top="30dp"/>
</shape>

相关文章

网友评论

    本文标题:drawable下的非图片资源之shape用法详解

    本文链接:https://www.haomeiwen.com/subject/tzvsectx.html