shape 填充 圆角矩形 圆形 环形

 

 

属性

使用中可能出现的问题：

如果在某些手机中使用 shape 出现黑色填充背景，设置<solid android:color="@color/transparent"/>即可。

---

Android中shape用于设定形状，可以在selector，layout等里面使用

最常用属性

• shape 形状，取值有：rectangle矩形（默认），oval椭圆、圆
• corners  圆角
• solid 内部填充
• stroke 边框

 

---

形状类型 shape

• 定义shape的形状，默认为矩形，可以设置为矩形（rectangle）、椭圆形(oval)、线性形状(line)、环形(ring)

---

圆角半径 corners

• android:radius  整型 半径
• android:topLeftRadius  整型 左上角半径
• android:topRightRadius  整型 右上角半径
• android:bottomLeftRadius 整型 左下角半径
• android:bottomRightRadius 整型 右下角半径

---

填充颜色 solid，不能与gradient一起使用，他代表固定的颜色

• android:color 颜色值 填充颜色

---

描边、边框 stroke

• android:width 整型 描边的宽度；实线的宽度
• android:color 颜色值 描边的颜色；实线的颜色
• android:dashWidth  整型 表示描边的样式是虚线的宽度， 值为0时，表示为实线。值大于0则为虚线；实线的长度
• android:dashGap  整型 表示描边为虚线时，虚线之间的间隔 即“ - - - - ”；实线与实线之间间隙宽度

---

渐变色 gradient

• android:startColor  颜色值 起始颜色
• android:endColor    颜色值 结束颜色
• android:centerColor  整型   渐变中间颜色，即开始颜色与结束颜色之间的颜色
• android:angle   整型  渐变角度  值为45的整数倍。当=0时，渐变色是从左向右，然后逆时针方向转；当=90时，从下往上。默认是 0。该属性只有在type=linear情况下起作用，默认的type为linear。
• android:type   渐变类型，取值有三个： linear 线性渐变，默认；  radial 放射性渐变，以开始色为中心； sweep 扫描线式的渐变。
• android:useLevel   ["true" | "false"] 如果要使用LevelListDrawable对象，就要设置为true。设置为true无渐变。false有渐变色
• android:gradientRadius 整型 渐变色半径。当 android:type="radial" 时【必须】使用，否则会报错。
• android:centerX    整型   渐变中心X点坐标的相对位置
• android:centerY   整型   渐变中心Y点坐标的相对位置

---

内边距大小 padding

• android:left  整型 左内边距
• android:top   整型 上内边距
• android:right  整型 右内边距
• android:bottom 整型 下内边距

---

图形大小 size ，指定图形的宽高，只有控件指定的是wrap_content时，这个属性才会起作用

• android:width 整型 宽度
• android:height 整型 高度

---

下面的属性只有在android:shape="ring时可用：

• android:innerRadius 尺寸，内环的半径。
• android:innerRadiusRatio浮点型，以环的宽度比率来表示内环的半径
• android:thickness尺寸，环的厚度
• android:thicknessRatio浮点型，以环的宽度比率来表示环的厚度，不完整的圆环
• android:useLevelboolean值，如果当做是LevelListDrawable使用时值为true，否则为false

 

实例--圆形与矩形

---

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="oval" >

 

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

 

    <stroke

        android:width="1dip"

        android:color="@color/red" />

 

    <padding

        android:bottom="5dp"

        android:left="10dp"

        android:right="10dp"

        android:top="5dp" />

 

</shape>

---

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

<!-- 默认为rectangle，矩形 -->

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

 

    <corners android:radius="0dp" />

 

    <padding

        android:bottom="2dp"

        android:left="2dp"

        android:right="2dp"

        android:top="2dp" />

 

</shape>

---

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

 

    <!-- 默认为rectangle，矩形 -->

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

 

    <corners android:radius="5dp" />

 

    <stroke

        android:width="1dp"

        android:color="@color/red" />

 

    <padding

        android:bottom="2dp"

        android:left="5dp"

        android:right="5dp"

        android:top="2dp" />

 

</shape>

 

实例--圆形描边

思路：

• 设置shape形状为圆形oval，边框大小为1dp，填充颜色为透明
• 为保证整体大小不变，需将图片宽高-2，并设置padding为1；为保证居中，设置margin值为1；
• 将上述的shape作为背景，在代码中将src裁剪成圆形。

---

        <ImageView

            android:id="@+id/iv_52"

            android:layout_width="40dp"

            android:layout_height="40dp"

            android:layout_centerHorizontal="true"

            android:layout_marginLeft="1dp"

            android:layout_marginTop="1dp"

            android:background="@drawable/bg_selector"

            android:clickable="true"

            android:padding="1dp"

            android:scaleType="centerCrop"

android:src="@drawable/img_user_icon" />

---

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

 

    <item android:state_pressed="true"><shape android:shape="oval">

            <stroke android:width="1dp" android:color="@color/yellow" />

 

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

        </shape></item>

    <item><shape android:shape="oval">

            <stroke android:width="1dp" android:color="@color/red" />

 

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

        </shape></item>

 

</selector>

 

实例--环形

---

        <RelativeLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_margin="2dp" >

 

            <TextView

                android:id="@+id/tv_43"

                android:layout_width="40dp"

                android:layout_height="40dp"

                android:layout_centerInParent="true"

                android:layout_centerVertical="true"

                android:background="@drawable/shape_ring3"

                android:gravity="center"

                android:text="圆环" />

 

            <ImageView

                android:id="@+id/iv_44"

                android:layout_width="30dp"

                android:layout_height="30dp"

                android:layout_centerInParent="true"

                android:background="@drawable/shape_oval3"

                android:src="#0000" />

</RelativeLayout>

---

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:innerRadius="5dp"

    android:shape="ring"

    android:thickness="12dp"

    android:useLevel="false" >

 

    <!-- android:innerRadius 内环的半径。android:thickness环的厚度 -->

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

    <!-- 【内环半径+环的厚度】*2+【描边的宽度】=【12+5】*2+【6】=40，因为40=android:layout_width="40dp" ，所以边缘不会被切割 -->

    <stroke

        android:width="6dp"

        android:color="@color/red" />

 

</shape>

---

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:innerRadius="15dp"

    android:shape="ring"

    android:thickness="4.5dp"

    android:useLevel="false" >

 

    <!-- android:innerRadius 内环的半径。android:thickness环的厚度 -->

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

    <!-- 【内环半径+环的厚度】*2+【描边的宽度】=【15+5】*2+【1】=41，因为41>android:layout_width="40dp" ，所以边缘会被切割 -->

    <stroke

        android:width="1dp"

        android:color="@color/red" />

 

</shape>

---

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:innerRadius="15dp"

    android:shape="ring"

    android:thickness="4.5dp"

    android:useLevel="false" >

 

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

 

    <stroke

        android:width="1dp"

        android:color="@color/red" />

 

</shape>

 

来自为知笔记(Wiz)

附件列表