点击每颗牙齿的 JAW 设计

Question

我想为我的一个应用程序创建和查看如图所示的图像，以存储每个牙齿运行时间的信息。那么是否有任何库可用于实现这一目标或任何技巧来实现这一目标。请帮助我提出宝贵的建议或想法，以实现这种观点。

提前致谢。

Answer 1

您可以使用 ConstraintLayout 和 Circular Positioning 来布局该视图。

例如，要布局以下内容：

你可以写如下xml：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black">

    <TextView
        android:id="@+id/tooth1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="?"
        android:textColor="@android:color/white"
        android:textSize="40sp"
        app:layout_constraintCircle="@+id/center"
        app:layout_constraintCircleAngle="270"
        app:layout_constraintCircleRadius="100dp" />

    <TextView
        android:id="@+id/tooth2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="?"
        android:textColor="@android:color/white"
        android:textSize="40sp"
        app:layout_constraintCircle="@+id/center"
        app:layout_constraintCircleAngle="315"
        app:layout_constraintCircleRadius="100dp" />

    <TextView
        android:id="@+id/tooth3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="?"
        android:textColor="@android:color/white"
        android:textSize="40sp"
        app:layout_constraintCircle="@+id/center"
        app:layout_constraintCircleAngle="0"
        app:layout_constraintCircleRadius="100dp" />

    <TextView
        android:id="@+id/tooth4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="?"
        android:textColor="@android:color/white"
        android:textSize="40sp"
        app:layout_constraintCircle="@+id/center"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="100dp" />

    <TextView
        android:id="@+id/tooth5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="?"
        android:textColor="@android:color/white"
        android:textSize="40sp"
        app:layout_constraintCircle="@+id/center"
        app:layout_constraintCircleAngle="90"
        app:layout_constraintCircleRadius="100dp" />

    <TextView
        android:id="@+id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Center"
        android:textColor="@android:color/white"
        android:textSize="25sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

您可以使用 ImageViews 并自定义每个牙齿图像，而不是使用 TextViews。

您还应该更改每颗牙齿的以下属性：

• app:layout_constraintCircleAngle 提供与中心的角度。
• app:layout_constraintCircleRadius 提供距离中心的 dps 距离。