Question

我正在尝试以imageview为背景，顶部为按钮和editText之类的组件来制作android布局。这在约束布局下效果很好，但是当我更改设备尺寸时，组件放错了位置。是否有任何方法可以将组件与imageView对齐，以使它们始终位于正确的位置，而与方向和尺寸无关？

我的xml文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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/layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="fitCenter"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0"
    app:srcCompat="@drawable/character_sheet" />

<TextView
    android:id="@+id/textView"
    android:layout_width="111dp"
    android:layout_height="43dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:text="TextView"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.945"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/imageView"
    app:layout_constraintVertical_bias="0.272" />

</android.support.constraint.ConstraintLayout>

Answer 1

好的，我现在找到了一种方法。首先，您需要一个ConstraintLayout，然后在其中放置另一个ConstraintLayout（我们称其为“第二层”），其所有边距均为0，并将布局的宽度和高度设置为wrap_content。现在，将ImageView放入第二层，并打开adjustViewBounds和cropToPadding。您还可以将imageView的边距设置为0，并将布局的宽度和高度设置为wrap_content。如果现在要添加组件并使其与图像中的对象对齐，则可以在该对象周围以矩形方式放置辅助线。之后，您可以添加您的组件，并告诉它遵循准则。现在，无论屏幕大小或方向如何，该组件都将捕捉到该对象。

这是我的xml代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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/layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal">

<android.support.constraint.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:cropToPadding="true"
        android:scaleType="fitCenter"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/character_sheet" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.94" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.42" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.13" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.05" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="Button"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="@+id/guideline1"
        app:layout_constraintTop_toTopOf="@+id/guideline3" />

    </android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

Answer 2

许多设备具有不同的屏幕尺寸和像素密度。因此，当您更换设备且仅具有一种布局设计时，如果该设备的屏幕尺寸/像素密度与最初为其创建布局时所用的屏幕尺寸/像素密度不同，则其外观将有所不同。

签出此文档：http://www.androiddocs.com/guide/practices/screens_support.html

但是，通过在Google中搜索“针对不同屏幕尺寸的Android Studio布局设计”来深入研究，并开始消化所有信息。给自己一些时间，不要太担心学习速度，但会在学习上有所进步。

将组件与图像对齐

2 个答案: