时间戳

首页 > 解决方案 > 点击每颗牙齿的 JAW 设计

android - 点击每颗牙齿的 JAW 设计

问题描述

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

在此处输入图像描述

提前致谢。

标签： androidxmlandroid-design-library

解决方案

您可以使用 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 为单位）。

推荐阅读