如何创建可绘制的圆形？

Question

我是Android的初学者。为了学习目的，我正在使用Android Studio开发以下UI界面。

屏幕上的矩形是一个TextView，圆圈是一个可以用手绘制的区域。

TextView和圆圈的数量是动态的。

我刚开始接触Android，看过几个例子，但都没有很好地解释：

1）如何创建一个圆并允许用户在其中绘图？

2）如何创建动态UI？我想这意味着添加视图到视图组并动态创建多个视图组等。

非常感谢任何帮助。

- wantro

---

我不太明白你想要什么，但如果有帮助的话，你可以使用Canvas类（查看一些教程）来绘制圆形内部，或者也可以尝试使用SignaturePad SignaturePad on Github。 - Luis Aguilar

好的，这正是我要找的教程。我需要做的是创建一个圆形，并允许用户在其中绘制。 - wantro

Answer 1

将以下内容保存到名为round_bg.xml的文件中，放在drawable文件夹中：

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

然后在您的布局文件中，您可以像这样引用此文件：

<View
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:background="@drawable/round_bg"/>

所以你可以得到一个圆形。

关于你的第二个问题。你需要研究Recyclerview和适配器等内容。

- Tahir Ferli

Answer 2

创建一个名为rounded_circle.xml的可绘制资源文件。

  <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:innerRadius="0dp"
        android:shape="ring"
        android:thicknessRatio="2"
        android:useLevel="false">
        <solid android:color="@color/colorPrimary" />

        <stroke
            android:width="1.5dp"
            android:color="@color/colorPrimary" />
    </shape>

在您的布局XML中使用它：

<View 
      android:layout_width="@dimen/dimen_20"
      android:layout_height="@dimen/dimen_20"
      android:background="@drawable/rounded_circle"/>

- kashyap

Answer 3

如果你想要像这样：

使用此代码

将其放入名为round_bg.xml的文件中，位于drawable文件夹中

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#ddd"/>
    <corners android:radius="90dp"/>
</shape>

以及您的布局代码：

  <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_margin="8dp">
        <TextView
            android:layout_width="275dp"
            android:layout_height="match_parent"
            android:text="TextView"
            android:gravity="center"
            android:background="#ddd"
            android:layout_marginRight="18dp"
            android:layout_marginEnd="18dp" />

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/circle"/>
    </LinearLayout>

如果您想创建动态用户界面，可以创建自定义视图或使用诸如RecyclerView或ListView之类的小部件。

- ali sarkhosh

Answer 4

    Create this file in drawable folder like bg_rounded.xml
    <?xml version="1.0" encoding="utf-8"?>
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
    
        <solid
            android:color="yourcolor"/>

        <stroke
            android:width="2dp"
            android:color="stroke color" />
    
        <size
            android:width="100dp"
            android:height="100dp"/>
    </shape>

- Devesh Kumawat

Answer 5

1）如何创建一个圆形并允许用户在其中绘制？

要在视图内绘制，您需要创建自定义视图并实现相应的逻辑，您可以在此答案中了解更多关于此主题的信息。

2）如何创建动态UI？我想这意味着将视图添加到视图组中并动态创建多个视图组等。

我想您需要一些列表，可以看看RecyclerView。

- Bracadabra

Answer 6

你可以使用自定义视图来绘制一个圆形，然后在画布上绘制任何东西。例如：

package com.example.customcircle;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import androidx.annotation.Nullable;

public class CustomCircle extends View {

    private Paint paint = null;

    public CustomCircle(Context context) {
        super(context);
        init();
    }

    public CustomCircle(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomCircle(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public CustomCircle(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setStyle( Paint.Style.FILL );
        paint.setColor( Color.BLACK );
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int radius = 300;
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, paint );
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);
        // handle touch
    }
}

使用方法：

<LinearLayout
    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"
    android:gravity="center"
    tools:context=".MainActivity">

    <com.example.custumcircle.CustomCircle
        android:id="@+id/custumCircle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

- RonTLV

Answer 7

我写了一个最简单的画板实现。它是用 Kotlin 编写的。但是当线条数量增加时，它会出现性能问题，并且可以通过许多方式进行优化。

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Path
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View

class PathDrawView(context: Context, attributeSet: AttributeSet) : View(context, attributeSet) {
    // Path is used to describe how the line is drawn by canvas
    private val paths = mutableListOf<Path>()

    // The path which the user is drawing
    private lateinit var current: Path

    // init a paint for drawing the lines
    private val paint = Paint().apply { 
        color = Color.BLACK
        strokeWidth = 2f
        strokeJoin = Paint.Join.ROUND
        isDither = true
        isAntiAlias = true
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        val x = event.x
        val y = event.y
        when (event.action) {
            MotionEvent.ACTION_DOWN -> { // When use touch down, start the line drawing
                current = Path()
                paths.add(current)
                current.moveTo(x, y)
            }
            MotionEvent.ACTION_MOVE -> { // Every time user moves, update the path's data
                current.lineTo(x, y)
                invalidate() // request the view hierarchy to re-draw
            }
            MotionEvent.ACTION_UP -> {
            }
        }
        return true
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // draw all paths
        paths.forEach { 
            canvas.drawPath(it, paint)
        }
    }
}

- bbsimon