【Android】Android图形之shape使用

最新推荐文章于 2023-10-24 10:05:48 发布

原创最新推荐文章于 2023-10-24 10:05:48 发布 · 6.3k 阅读

4 ·

CC 4.0 BY-SA版权

Android技术专栏收录该内容

46 篇文章

订阅专栏

本文展示了如何在Android应用中通过代码和布局文件绘制填充红色矩形，并介绍了几种不同样式的形状和线条的实现方法。

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

首先用代码画出一个填充红色的矩形：

package com.msi.manning.chapter9.SimpleShape;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.RectShape;
import android.os.Bundle;
import android.view.View;

public class SimpleShape extends Activity {

    @Override
    protected void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(new SimpleView(this));
    }

    private static class SimpleView extends View {

        private ShapeDrawable mDrawable = new ShapeDrawable();

        public SimpleView(Context context) {
            super(context);
            setFocusable(true);
            this.mDrawable = new ShapeDrawable(new RectShape());
            this.mDrawable.getPaint().setColor(0xFFFF0000);
        }

        @Override
        protected void onDraw(Canvas canvas) {

            int x = 10;
            int y = 10;
            int width = 300;
            int height = 50;
            this.mDrawable.setBounds(x, y, x + width, y + height);
            this.mDrawable.draw(canvas);
            y += height + 5;

        }
    }
}

再如下图：

通过布局文件来设置：

第一副图shape_1.xml

实体solid为黑色，描边stroke为白色。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
type="oval" >
        <solid android:color="#00000000"/>
        <padding android:left="10sp" android:top="4sp" android:right="10sp" android:bottom="4sp" />
        <stroke android:width="1dp" android:color="#FFFFFFFF"/>
</shape>

第二幅图line.xml 为一条线

实体和描边都是白色，高度23dip 其中type="line"

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" type="line" >
	<solid android:color="#FFFFFFFF"/>
    <stroke android:width="1dp" android:color="#FFFFFFFF"
            android:dashWidth="1dp" android:dashGap="2dp" />
    <padding android:left="1dp" android:top="25dp"
        android:right="1dp" android:bottom="25dp" />
    
    <size android:height="23dp" />
</shape>

第三幅图shape_2.xml

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

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FF0000FF"/>
    <stroke android:width="4dp" android:color="#FFFFFFFF"
            android:dashWidth="1dp" android:dashGap="2dp" />
    <padding android:left="7dp" android:top="7dp"
            android:right="7dp" android:bottom="7dp" />
    <corners android:radius="4dp" />
</shape>

第四幅图shape_3.xml

shape类型type="oval"为椭圆

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" type="oval">
    <solid android:color="#FFE1E1E1"/>
    <stroke android:width="4dp" android:color="#99000000"
            android:dashWidth="4dp" android:dashGap="2dp" />
    <padding android:left="7dp" android:top="7dp"
            android:right="7dp" android:bottom="18dp" />
    <corners android:radius="12dp" />
</shape>

第五幅图和第二幅相同是一条高23dp的线

第六幅图shape_4.xml

渐变与圆角

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" type="rectangle">
    <gradient android:startColor="#FFE1E1E1" android:endColor="#FFFFFFFF" android:angle="270"/>
    <corners android:bottomLeftRadius="7dp"
                android:bottomRightRadius="7dp"
                android:topLeftRadius="1dp"
                android:topRightRadius="1dp"
                 />
</shape>

第七幅图shape_5.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" type="oval">
    <gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF"  android:angle="270"/>
    <padding android:left="7dp" android:top="7dp"
            android:right="7dp" android:bottom="7dp" />

</shape>

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
	android:layout_width="fill_parent"
	android:layout_height="wrap_content">
	 <LinearLayout
    	android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
	<ImageView android:layout_width="fill_parent"
		 android:layout_height="50dip"
	     android:src="@drawable/shape_1" />
	<ImageView android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:src="@drawable/line" />
	<ImageView
			android:layout_width="fill_parent"
			android:layout_height="50dip"
			android:src="@drawable/shape_2" />
<!--		<ImageView-->
<!--			android:layout_width="fill_parent"-->
<!--			android:layout_height="wrap_content"-->
<!--			android:src="@drawable/line" />-->
		<ImageView
			android:layout_width="fill_parent"
		android:layout_height="50dip"
			android:src="@drawable/shape_3" />
	<ImageView
		android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:src="@drawable/line" />
	<ImageView
			android:layout_width="fill_parent"
			android:layout_height="50dip"
			android:src="@drawable/shape_4" />
<!--		<ImageView-->
<!--			android:layout_width="fill_parent"-->
<!--			android:layout_height="wrap_content"-->
<!--			android:src="@drawable/line" />-->
    <ImageView
			android:layout_width="fill_parent"
			android:layout_height="50dip"
			android:src="@drawable/shape_5" />
	</LinearLayout>
</ScrollView>