Android用xml文件画图

最新推荐文章于 2021-05-26 20:53:00 发布

yzjgogo

最新推荐文章于 2021-05-26 20:53:00 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： android drawable 文章标签： android

本文链接：https://blog.youkuaiyun.com/yinzhijiezhan/article/details/47377905

android 同时被 2 个专栏收录

135 篇文章

订阅专栏

drawable

5 篇文章

订阅专栏

本文详细介绍了在Android中如何使用XML定义矩形、半圆形、虚线、圆、半圆、三角形等图形，并提供了实例代码。此外，还展示了如何在层列表中指定图形的位置，以及如何通过旋转矩形生成三角形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：画矩形

在drawable目录下新建一个xml资源文件：

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

    <corners android:radius="5dip" />
    <!--
    渐变 
    <gradient android:startColor="#ff0000"  android:endColor="#00ffff"/>
    -->


    <!-- 固定色：填充的颜色
		渐变色和固定色是互斥的，固定色会覆盖渐变色-->
    <solid android:color="#ffffff" />
	
	<!--边界：这里的线段型的-->
   <!--  <stroke
        android:dashWidth="3dip"
        android:width="2dip"
        android:color="#000000"
        android:dashGap="15dip" /> -->

</shape>

之后可在布局文件中的某个控件的background属性引用该图形资源

二：画两边是半圆的矩形

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomLeftRadius="25dp"
        android:bottomRightRadius="25dp"
        android:radius="25dp"
        android:topLeftRadius="25dp"
        android:topRightRadius="25dp" />
    <!--填充色-->
    <solid android:color="@color/white" />
    <!--描边-->
    <stroke android:color="@color/red"
        android:width="1dp"/>
</shape>

三：画虚线

1、水平的虚线

虚线文件broken_line.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line" >
    <!--dashGap是断开的宽度-->
    <!--dashWidth是线段的宽度-->
    <!--width是整条虚线的宽度-->
    <!--color是虚线的颜色-->
    <stroke
        android:dashGap="3dp"
        android:dashWidth="6dp"
        android:width="1dp"
        android:color="@color/red" />
    <size android:height="1dp"/>
</shape>

引用虚线：

    <!--如果在<stroke>标签中设置了android:width，
    则在<View>标签中android:layout_height的值必须大于
    android:width的值，否则虚线不会显示。如果不设置，
    默认android:width为0。
    避免在4.0以上设备虚线变实线的问题：
    a:在java代码中可设置：view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    b:xml中可设置android:layerType="software"  -->
    <View
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:layerType="software"
        android:background="@drawable/borken_line"/>

2、竖直的虚线

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--竖直虚线-->
    <item
        android:left="-300dp"
        android:right="-300dp">
        <rotate
            android:fromDegrees="90"
            android:visible="true">
            <shape android:shape="line">
                <stroke
                    android:width="1dp"
                    android:color="#EEEEEE"
                    android:dashGap="2dp"
                    android:dashWidth="2dp"/>
            </shape>
        </rotate>
    </item>
</layer-list>

四：画圆

<?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" />
    <!--边界颜色-->
    <!--<stroke-->
        <!--android:width="1dp"-->
        <!--android:color="@color/white" />-->
    <!--<size-->
        <!--android:width="20dp"-->
        <!--android:height="20dp" />-->
</shape>

五：画半圆

1：图片资源

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/orange" />
    <corners
        android:bottomLeftRadius = "0dp"
        android:bottomRightRadius = "10dp"
        android:topLeftRadius = "0dp"
        android:topRightRadius = "10dp"/>
</shape>

2：使用图片资源

<imageview

   android:layout_width = "10dp" //这边的宽高要和shape当中的corners配合使用，也许吧

   android:layout_height = "20dp"

   android:background = "@drawable/shape"/> //上面的shape

六：用layer-list画shape图形时指定位置

执行上层的半圆在下层的矩形的左下角显示

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 底层图片 -->

    <item>
        <shape>
            <solid android:color="@color/white" />  <!-- 红色 -->
            <corners android:radius="2dp" />
        </shape>
    </item>
    <!-- 上层图片 -->
    <item
        android:width="10dp"
        android:height="20dp"
        android:gravity="bottom|left">

        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent" />  <!-- 绿色 -->

            <corners
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="10dp"
                android:topLeftRadius="0dp"
                android:topRightRadius="10dp" />
        </shape>
    </item>
</layer-list>

七：画三角

下面的实例是通过旋转矩形得到三角形，这个三角形是右下角是90度的等边三角形。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/shape_id">
        <rotate
            android:fromDegrees="-45"
            android:pivotX="135%"
            android:pivotY="15%"
            android:toDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="@color/colorAccent" />
            </shape>
        </rotate>
    </item>
</layer-list>

使用该三角形

<ImageView
                android:id="@+id/iv_can_click"
                android:layout_width="10dp"
                android:layout_height="10dp"
                android:layout_gravity="right|bottom"
                android:src="@drawable/open_elec_icon"
                android:visibility="gone"
                tools:visibility="visible"/>