Question

我正在为糖尿病患者和其他经常注射的人建立一个注射跟踪应用程序，我正在尝试在身体图像上对齐8个复选框，以便用户可以指定他们注射的位置。问题是现在对齐它只适用于非常特定的屏幕尺寸，并且只要尺寸不同，复选框就会移动并最终不会出现在正确的身体部位上。有什么方法可以实现这个目标吗？对边距进行硬编码似乎效果不佳。任何帮助，将不胜感激。谢谢。

这就是我希望它看起来像ideally的内容，这是specific screen size实际上看起来像是什么，它会改变一切。当然屏幕尺寸越大或越小，它就越极端。

这是我的代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.android.injectiontracker.MainActivity">

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/date_and_time_layout"
    android:src="@drawable/blank_body" />

<CheckBox
    android:id="@+id/abdomen_left"
    style="@style/InjectionCheckbox"
    android:layout_alignBaseline="@+id/abdomen_right"
    android:layout_alignBottom="@+id/abdomen_right"
    android:layout_toRightOf="@+id/abdomen_right"
    android:layout_toEndOf="@+id/abdomen_right" />

<CheckBox
    android:id="@+id/thigh_left"
    style="@style/InjectionCheckbox"
    android:layout_alignBaseline="@+id/thigh_right"
    android:layout_alignBottom="@+id/thigh_right"
    android:layout_toRightOf="@+id/thigh_right"
    android:layout_toEndOf="@+id/thigh_right" />



<ImageView
    android:id="@+id/save"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:src="@drawable/ic_save_black_48dp" />


<CheckBox
    android:id="@+id/buttocks_left"
    style="@style/InjectionCheckbox"
    android:layout_below="@+id/abdomen_left"
    android:layout_alignLeft="@+id/arm_left"
    android:layout_alignStart="@+id/arm_left"
    android:layout_marginLeft="24dp"
    android:layout_marginStart="24dp" />

<CheckBox
    android:id="@+id/arm_left"
    style="@style/InjectionCheckbox"
    android:layout_marginRight="74dp"
    android:layout_marginEnd="74dp"
    android:layout_above="@+id/abdomen_left"
    android:layout_toLeftOf="@+id/save"
    android:layout_toStartOf="@+id/save"
    android:layout_marginBottom="16dp" />

<CheckBox
    android:id="@+id/buttocks_right"
    style="@style/InjectionCheckbox"
    android:layout_width="wrap_content"
    android:layout_alignBaseline="@+id/buttocks_left"
    android:layout_alignBottom="@+id/buttocks_left"
    android:layout_toRightOf="@+id/buttocks_left"
    android:layout_toEndOf="@+id/buttocks_left" />

<CheckBox
    android:id="@+id/arm_right"
    style="@style/InjectionCheckbox"
    android:layout_alignBaseline="@+id/arm_left"
    android:layout_alignBottom="@+id/arm_left"
    android:layout_toRightOf="@+id/buttocks_right"
    android:layout_toEndOf="@+id/buttocks_right" />

<CheckBox
    android:id="@+id/abdomen_right"
    style="@style/InjectionCheckbox"
    android:layout_marginLeft="55dp"
    android:layout_marginStart="55dp"
    android:layout_centerVertical="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<CheckBox
    android:id="@+id/thigh_right"
    style="@style/InjectionCheckbox"
    android:layout_marginTop="11dp"
    android:layout_below="@+id/buttocks_left"
    android:layout_alignLeft="@+id/abdomen_right"
    android:layout_alignStart="@+id/abdomen_right" />

Answer 1

我认为最有帮助的是PercentFrameLayout。

这是一个支持库，因此您必须添加

    compile 'com.android.support:percent:24.2.1'

到您的build.gradle文件（版本会因您更新的内容而异）。

您当前的布局使用wrap_content作为ImageView的宽度和高度。如果您的屏幕宽度小于图像的宽度，那么ImageView将具有与图像本身不同的宽高比，这将使得难以获得准确的布局。

一个好方法是至少有两个布局

用于较小设备的一种布局，例如屏幕宽度可能小于图像的手机
屏幕宽度大于图片的平板电脑等大型设备的另一种布局

如果您不熟悉备用布局，请参阅How to support multiple screens。

首先，您需要确保ImageView的宽高比与图像匹配。通过指定android:adjustViewBounds="true"以及宽度match_parent和高度wrap_content来执行此操作。

然后将ImageView包裹在宽度为PercentFrameLayout且高度为match_parent的{{1}}中。

现在，您有一个使用百分比可预测的视图。我下载了您链接到的图片并用它来提出这个：

wrap_content

（抱歉，我删除了你的样式，因为我无法访问这些样式。）

对于较大的设备，您的备用布局应指定<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.percent.PercentFrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true"> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:adjustViewBounds="true" android:src="@drawable/blank_body" /> <CheckBox android:id="@+id/abdomen_left" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_marginLeftPercent="15.5%" app:layout_marginTopPercent="32%"/> <CheckBox android:id="@+id/abdomen_right" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_marginLeftPercent="25%" app:layout_marginTopPercent="32%"/> <CheckBox android:id="@+id/thigh_left" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_marginLeftPercent="15.5%" app:layout_marginTopPercent="47%"/> <CheckBox android:id="@+id/thigh_right" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_marginLeftPercent="25%" app:layout_marginTopPercent="47%"/> <CheckBox android:id="@+id/arm_left" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_marginLeftPercent="57%" app:layout_marginTopPercent="22%"/> <CheckBox android:id="@+id/arm_right" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_marginLeftPercent="82.5%" app:layout_marginTopPercent="22%"/> <CheckBox android:id="@+id/buttocks_left" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_marginLeftPercent="64%" app:layout_marginTopPercent="38.5%"/> <CheckBox android:id="@+id/buttocks_right" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_marginLeftPercent="73.5%" app:layout_marginTopPercent="38.5%"/> </android.support.percent.PercentFrameLayout> </RelativeLayout>的固定宽度：

PercentFrameLayout

然后您可以根据需要将其放置在较大的<android.support.percent.PercentFrameLayout android:layout_width="600dp" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true">中（我以中心/顶部为例）。

这应该会给你一个非常可接受的结果。

由于您在复选框的左侧和顶部进行测量，因此屏幕宽度仍然会有一些轻微的失真。对于像素完美的布局，您需要制作一个自定义布局组件，可以将复选框的中心定位在感兴趣的点上。

如何针对不同的屏幕尺寸对齐图像顶部的复选框

1 个答案: