如何正确限制这些图像？答案

【问题标题】：How do I keep these images constrained properly?如何正确限制这些图像？
【发布时间】：2020-06-03 02:57:12
【问题描述】：

我需要在布局中以特定方式设置许多不同的图像。到目前为止，似乎最好的方法是使用 ConstraintLayout。然而，似乎没有什么想留在它应该呆的地方。

这是 ImageView 当前在 XML 中的外观的图像，但它们没有任何约束，并且每当我尝试约束它们时它们都会改变位置。图像视图

这是我编写的 XML 代码。我已经消除了限制以尝试帮助使其更易于理解。

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context=".MapFragment">

    <!-- TODO: Update blank fragment layout -->

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/imgClare"
        android:layout_width="163dp"
        android:layout_height="261dp"
        android:src="@drawable/constituency_clare"
        tools:layout_editor_absoluteX="43dp"
        tools:layout_editor_absoluteY="350dp" />

    <ImageView
        android:id="@+id/imgGalwayWest"
        android:layout_width="199dp"
        android:layout_height="348dp"
        android:src="@drawable/constituency_galway_west"
        tools:layout_editor_absoluteX="-13dp"
        tools:layout_editor_absoluteY="279dp" />

    <ImageView
        android:id="@+id/imgGalwayEast"
        android:layout_width="135dp"
        android:layout_height="302dp"
        android:src="@drawable/constituency_galway_east"
        tools:layout_editor_absoluteX="96dp"
        tools:layout_editor_absoluteY="253dp" />

    <ImageView
        android:id="@+id/imgMayo"
        android:layout_width="156dp"
        android:layout_height="322dp"
        android:src="@drawable/constituency_mayo"
        tools:layout_editor_absoluteX="-21dp"
        tools:layout_editor_absoluteY="216dp" />

    <ImageView
        android:id="@+id/imgCorkSouthWest"
        android:layout_width="195dp"
        android:layout_height="149dp"
        android:src="@drawable/constituency_cork_south_west"
        tools:layout_editor_absoluteX="11dp"
        tools:layout_editor_absoluteY="600dp" />

    <ImageView
        android:id="@+id/imgKerry"
        android:layout_width="160dp"
        android:layout_height="165dp"
        android:src="@drawable/constituency_kerry_cut"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="513dp" />

    <ImageView
        android:id="@+id/imgWicklow"
        android:layout_width="84dp"
        android:layout_height="180dp"
        android:src="@drawable/constituency_wicklow"
        tools:layout_editor_absoluteX="308dp"
        tools:layout_editor_absoluteY="439dp" />

    <ImageView
        android:id="@+id/imgWexford"
        android:layout_width="135dp"
        android:layout_height="285dp"
        android:layout_marginEnd="12dp"
        android:src="@drawable/constituency_wexford"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <ImageView
        android:id="@+id/imgWaterford"
        android:layout_width="108dp"
        android:layout_height="113dp"
        android:src="@drawable/constituency_waterford"
        tools:layout_editor_absoluteX="195dp"
        tools:layout_editor_absoluteY="594dp" />

    <ImageView
        android:id="@+id/imgDonegal"
        android:layout_width="205dp"
        android:layout_height="560dp"
        android:src="@drawable/constituency_donegal"
        tools:layout_editor_absoluteX="96dp"
        tools:layout_editor_absoluteY="-88dp"
        app:layout_constraintTop_toTopOf="0dp"
        />

    <ImageView
        android:id="@+id/imgLimerickCity"
        android:layout_width="37dp"
        android:layout_height="48dp"
        android:src="@drawable/constituency_limerick_city"
        tools:layout_editor_absoluteX="277dp"
        tools:layout_editor_absoluteY="263dp" />

    <ImageView
        android:id="@+id/imgLimerickCounty"
        android:layout_width="70dp"
        android:layout_height="42dp"
        android:src="@drawable/constituency_limerick_county"
        tools:layout_editor_absoluteX="112dp"
        tools:layout_editor_absoluteY="513dp" />

    <ImageView
        android:id="@+id/imgCorkNorthWest"
        android:layout_width="83dp"
        android:layout_height="130dp"
        android:src="@drawable/constituency_cork_north_west"
        tools:layout_editor_absoluteX="112dp"
        tools:layout_editor_absoluteY="548dp" />

    <ImageView
        android:id="@+id/imgCorkEast"
        android:layout_width="117dp"
        android:layout_height="80dp"
        android:src="@drawable/constituency_cork_east"
        tools:layout_editor_absoluteX="163dp"
        tools:layout_editor_absoluteY="590dp" />

    <ImageView
        android:id="@+id/imgCorkNorthCentral"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:src="@drawable/constituency_cork_north_central"
        tools:layout_editor_absoluteX="171dp"
        tools:layout_editor_absoluteY="611dp" />

    <ImageView
        android:id="@+id/imgCorkSouthCentral"
        android:layout_width="39dp"
        android:layout_height="43dp"
        android:src="@drawable/constituency_cork_south_central"
        tools:layout_editor_absoluteX="186dp"
        tools:layout_editor_absoluteY="627dp" />

    <ImageView
        android:id="@+id/imgCarlowKilkenny"
        android:layout_width="92dp"
        android:layout_height="207dp"
        android:src="@drawable/constituency_carlow_kilkenny"
        tools:layout_editor_absoluteX="236dp"
        tools:layout_editor_absoluteY="487dp"
        app:layout_constraintRight_toLeftOf="@id/imgWexford"/>

    <ImageView
        android:id="@+id/imgTipperary"
        android:layout_width="101dp"
        android:layout_height="225dp"
        android:src="@drawable/constituency_tipperary"
        tools:layout_editor_absoluteX="163dp"
        tools:layout_editor_absoluteY="394dp" />

    <ImageView
        android:id="@+id/imgKildareSouth"
        android:layout_width="74dp"
        android:layout_height="247dp"
        android:src="@drawable/constituency_kildare_south"
        tools:layout_editor_absoluteX="264dp"
        tools:layout_editor_absoluteY="372dp" />

    <ImageView
        android:id="@+id/imgLaoisOffaly"
        android:layout_width="110dp"
        android:layout_height="102dp"
        android:layout_marginEnd="11dp"
        android:layout_marginBottom="9dp"
        android:src="@drawable/constituency_laois_offaly"
        app:layout_constraintBottom_toTopOf="@+id/imgCorkNorthWest"
        app:layout_constraintEnd_toStartOf="@+id/imgWexford"
        app:layout_constraintStart_toEndOf="@+id/imgGalwayEast"
        app:layout_constraintTop_toBottomOf="@+id/imgLongfordWestmeath" />

    <ImageView
        android:id="@+id/imgKildareNorth"
        android:layout_width="61dp"
        android:layout_height="77dp"
        android:src="@drawable/constituency_kildare_north"
        tools:layout_editor_absoluteX="293dp"
        tools:layout_editor_absoluteY="428dp" />

    <ImageView
        android:id="@+id/imgMeathWest"
        android:layout_width="110dp"
        android:layout_height="67dp"
        android:src="@drawable/constituency_meath_west"
        tools:layout_editor_absoluteX="231dp"
        tools:layout_editor_absoluteY="394dp" />

    <ImageView
        android:id="@+id/imgLongfordWestmeath"
        android:layout_width="101dp"
        android:layout_height="100dp"
        android:src="@drawable/constituency_longford_westmeath"
        tools:layout_editor_absoluteX="186dp"
        tools:layout_editor_absoluteY="372dp" />

    <ImageView
        android:id="@+id/imgCavanMonoghan"
        android:layout_width="140dp"
        android:layout_height="230dp"
        android:src="@drawable/constituency_cavan_monoghan"
        tools:layout_editor_absoluteX="188dp"
        tools:layout_editor_absoluteY="234dp" />

    <ImageView
        android:id="@+id/imgMeathEast"
        android:layout_width="66dp"
        android:layout_height="98dp"
        android:src="@drawable/constituency_meath_east"
        tools:layout_editor_absoluteX="288dp"
        tools:layout_editor_absoluteY="366dp" />

    <ImageView
        android:id="@+id/imgLouth"
        android:layout_width="55dp"
        android:layout_height="90dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="48dp"
        android:layout_marginBottom="3dp"
        android:src="@drawable/constituency_louth"
        app:layout_constraintBottom_toTopOf="@+id/imgKildareNorth"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imgDonegal" />

    <ImageView
        android:id="@+id/imgSligoLeitrim"
        android:layout_width="117dp"
        android:layout_height="126dp"
        android:src="@drawable/constituency_sligo_leitirim"
        tools:layout_editor_absoluteX="89dp"
        tools:layout_editor_absoluteY="269dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

【问题讨论】：

标签： android imageview android-constraintlayout

【解决方案1】：

xml属性tools:layout_editor_absoluteX和tools:layout_editor_absoluteY仅用于Android Studio中的布局编辑器，对视图定位没有影响。 ConstraintLayout 的本质是描述连接和定位视图之间的关系。即你定义视图A，将它的位置设置为父视图，设置它的边距 - 然后描述它的兄弟视图B的位置，使用视图A作为基础，等等。有很多关于使用约束布局的文章，比如https://medium.com/@loutry/guide-to-constraintlayout-407cd87bc013 并且不要打扰可视化编辑器，它充其量只是误导。

【讨论】：