Question

你好！我需要我的布局能够响应。在这种情况下，我选择ConstraintLayout，但是我的ConstraintLayout中的图像视图无论大小都变得不规则。在平板电脑中，我的图像视图变得太小，而尺寸太小。我的XML在这里，我想我无法在此布局中设置所有真实属性。如果有人指导我，对我有很大帮助*

<Button
    android:id="@+id/shopbtn"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:background="@drawable/shop"
    android:fontFamily="casual"
    android:lineSpacingExtra="18sp"
    android:textColor="@android:color/background_light"
    android:textSize="30sp"
    android:textStyle="normal|bold"
    android:typeface="serif"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.35000002" />

<Button
    android:id="@+id/exitbtn"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:background="@drawable/prew"
    android:fontFamily="casual"
    android:lineSpacingExtra="18sp"
    android:textColor="@android:color/background_light"
    android:textSize="30sp"
    android:textStyle="normal|bold"
    android:typeface="serif"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/shopbtn"
    app:layout_constraintHorizontal_bias="0.785"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.351" />

<Button
    android:id="@+id/startbtn"

    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    android:background="@drawable/play"
    android:fontFamily="casual"
    android:lineSpacingExtra="18sp"
    android:textColor="@android:color/background_light"
    android:textSize="30sp"
    android:textStyle="normal|bold"
    android:typeface="serif"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.275"
    app:layout_constraintStart_toEndOf="@+id/shopbtn"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.35000002" />

<ImageView
    android:id="@+id/adamkhar"
    android:layout_width="94dp"
    android:layout_height="117dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.073"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.625"
    app:srcCompat="@drawable/pico" />

Answer 1

不同的手机具有不同的屏幕尺寸，在您的布局中，您使用的是固定尺寸的视图（例如，固定尺寸为50dp），结果是看起来效果不错一个屏幕（您的android studio预览屏幕）在另一屏幕（您的实际手机）上看起来效果不佳。

您可以将ConstraintLayout与guidelines和Chains配合使用以支持不同的屏幕尺寸。

以下是使用ConstraintLayout的示例：

*<?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:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context=".MainActivity">

<Button
    android:id="@+id/shopbtn"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:background="@drawable/rose"
    android:fontFamily="casual"
    android:lineSpacingExtra="18sp"
    android:textColor="@android:color/background_light"
    android:textSize="30sp"
    android:textStyle="normal|bold"
    android:typeface="serif"
    app:layout_constraintEnd_toStartOf="@+id/startbtn"
    app:layout_constraintHeight_percent="0.3"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/exitbtn"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/exitbtn"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginEnd="8dp"
    android:background="@drawable/rose"
    android:fontFamily="casual"
    android:lineSpacingExtra="18sp"
    android:textColor="@android:color/background_light"
    android:textSize="30sp"
    android:textStyle="normal|bold"
    android:typeface="serif"
    app:layout_constraintBottom_toBottomOf="@+id/shopbtn"
    app:layout_constraintEnd_toStartOf="@+id/shopbtn"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/shopbtn" />

<Button
    android:id="@+id/startbtn"

    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@drawable/rose"
    android:fontFamily="casual"
    android:lineSpacingExtra="18sp"
    android:textColor="@android:color/background_light"
    android:textSize="30sp"
    android:textStyle="normal|bold"
    android:typeface="serif"
    app:layout_constraintBottom_toBottomOf="@+id/shopbtn"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/shopbtn"
    app:layout_constraintTop_toTopOf="@+id/shopbtn" />

<ImageView
    android:id="@+id/adamkhar"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.6"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/shopbtn"
    app:srcCompat="@drawable/ic_launcher_background" />


</android.support.constraint.ConstraintLayout>*

它看起来像这样：

请注意，这只是一个示例，如果要更改视图的大小，只需更改app:layout_constraintHeight_percent和app:layout_constraintHeight_percent的值。

我对响应式布局使用ConstraintLayout有问题

1 个答案: