如何创建一个可绘制的圆圈？

Question

我是安卓初学者。出于学习目的，我正在使用 android studio 开发以下 UI。

屏幕的矩形是文本视图，圆形是我可以用手绘制的区域。

textview 和 circle 的数量是动态的。

我从 Android 开始，我看了几个例子，但没有一个真正解释：

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

2) 如何创建动态用户界面？我想这意味着将视图添加到视图组并动态创建多个视图组等。

非常感谢任何帮助。

Answer 1

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

<?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 和适配器等等。

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"/>

Answer 3

如果你想要这样：

使用此代码

把它放在drawable文件夹中一个名为round_bg.xml的文件中

<?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 或列表视图这样的小部件

Answer 4

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

要在视图内绘制，您可以创建自定义视图并实现相应的逻辑，您可以在answer 中找到有关此主题的更多信息。

2) 如何创建动态用户界面？我想这意味着添加视图 视图组和动态创建多个视图组等。

我想你在这里需要一些列表，请看一下RecyclerView。

Answer 5

您可以使用自定义视图绘制一个圆圈，然后您可以在画布上绘制任何内容。示例：

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>

Answer 6

我编写了一个最简单的绘图板实现。它是由 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)
        }
    }
}