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

【问题标题】：How to align checkboxes on top of an image for different screen sizes如何为不同的屏幕尺寸对齐图像顶部的复选框
【发布时间】：2017-01-11 00:46:45
【问题描述】：

我正在为糖尿病患者和其他定期注射的人构建一个注射跟踪应用程序，并且我正在尝试在身体图像上对齐 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" />

【问题讨论】：

尝试约束布局
试试这个库 [link] (github.com/Lukle/ClickableAreasImages) 您可以在其中选中和取消选中用户单击的部分上的复选框。希望它也能保留在更大的屏幕尺寸上。未选中。希望它会有所帮助。
使用 Framelayout 解决这个问题
你可以试试这个答案link
非常感谢大家的建议。现在 PercentFrameLayout 如下所示适用于纵向，所以我计划尝试链接的库 Rv Lalwani 看看我是否可以让它也适用于横向。我会让你知道这是怎么回事:-) 如果这不起作用，我会更多地研究约束布局。我之前尝试过，但由于我对 android 很陌生，所以我不太清楚如何让它工作。

标签： android android-layout checkbox

【解决方案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 中，该PercentFrameLayout 的宽度也为match_parent，高度为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">

然后您可以根据需要将其放置在较大的RelativeLayout 中（我以中心/顶部为例）。

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

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

【讨论】：

非常感谢。这非常接近我想要的。我已经禁用了横向模式，因为当我使用它时一切都会变得不稳定，但是如果你有关于如何使它也适用于横向的想法，那就太好了。我尝试将所有内容放在滚动视图中，然后设置相对布局和百分比框架布局以包装内容而不是匹配父项，但这不起作用。现在发生的情况是 6 个复选框移到屏幕顶部，两个消失在其他复选框后面。
我建议使用具有固定宽度的备用布局应该对此有所帮助。你应该能够让它在滚动视图中工作。如果你不能让它工作，请将景观 XML 添加到你的问题中，我会看看。