ConstraintLayout没有响应

时间：2019-07-01 13:32:37

标签： android android-layout android-constraintlayout

我已经为我的android应用程序使用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:background="@color/colorPrimary"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="75dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:fontFamily="@font/billabong"
        android:gravity="center"
        android:text="Applikáció"
        android:textColor="@color/white"
        android:textSize="65sp"
        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.054" />

    <android.support.design.widget.TextInputLayout
        android:id="@+id/inputLayoutEmail"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:textColorHint="@color/inputText"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.505"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintVertical_bias="0.255">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/login_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/inputText"
            android:hint="E-mail cim"
            android:inputType="text"
            android:textColor="@color/colorAccent"
            android:textColorHint="@color/colorPrimaryLight"
            tools:layout_editor_absoluteX="16dp"
            tools:layout_editor_absoluteY="214dp" />

    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/inputLayoutPassword"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:textColorHint="@color/inputText"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/inputLayoutEmail"
        app:layout_constraintVertical_bias="0.0">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/login_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/inputText"
            android:textColor="@color/colorAccent"
            android:hint="Jelszó"
            android:inputType="textPassword"
            android:textColorHint="@color/colorPrimaryLight" />

    </android.support.design.widget.TextInputLayout>

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="21dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:buttonTint="@color/colorAccent"
        android:hint="Maradjak bejelentkezve"
        android:textColorHint="@color/inputText"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/inputLayoutPassword"
        app:layout_constraintVertical_bias="0.0" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="28dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:background="@drawable/button_style_1"
        android:onClick="onClickButtonMain"
        android:text="Bejelentkezés"
        android:textColor="@color/white"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/checkBox"
        app:layout_constraintVertical_bias="0.0" />

    <Button
        android:id="@+id/registration_button"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="18dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:background="@drawable/button_style_blue"
        android:onClick="onClickButtonMain"
        android:text="Regisztráció"
        android:textColor="@color/white"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.494"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_button"
        app:layout_constraintVertical_bias="0.0" />

    <Button
        android:id="@+id/information_button"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:background="@drawable/button_style_2"
        android:onClick="onClickButtonMain"
        android:text="Lépések"
        android:textColor="@color/colorAccent"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.505"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/registration_button"
        app:layout_constraintVertical_bias="0.612" />

</android.support.constraint.ConstraintLayout>

此布局在Pixel上看起来不错，但例如在Nexus S上，按钮和边距实际上并不关心我如何定义它们。我真的很想知道我在做什么错。我希望能够构建响应式布局。

enter image description here

1 个答案:

答案 0 :(得分：2)

在Android中，开发Android应用程序时需要考虑不同屏幕尺寸的数量。

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

对于您的情况，我建议使用Chains和Guildelines，这将使您的布局具有响应性。

以下是您要使用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">


<TextView
    android:id="@+id/textView"
    android:layout_width="match_parent"
    android:layout_height="75dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:gravity="center"
    android:text="Applikáció"
    android:textSize="65sp"
    app:layout_constraintBottom_toTopOf="@+id/guideline6"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_editor_absoluteX="0dp" />

<android.support.design.widget.TextInputLayout
    android:id="@+id/inputLayoutEmail"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:textColorHint="@color/inputText"
    app:layout_constraintBottom_toTopOf="@+id/inputLayoutPassword"
    app:layout_constraintEnd_toStartOf="@+id/guideline7"
    app:layout_constraintStart_toStartOf="@+id/guideline8"
    app:layout_constraintTop_toTopOf="@+id/guideline6">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/login_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/inputText"
        android:hint="E-mail cim"
        android:inputType="text"
        android:textColor="@color/colorAccent"
        android:textColorHint="@color/colorPrimaryLight" />

</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/inputLayoutPassword"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:textColorHint="@color/inputText"
    app:layout_constraintBottom_toTopOf="@+id/checkBox"
    app:layout_constraintEnd_toEndOf="@+id/inputLayoutEmail"
    app:layout_constraintStart_toStartOf="@+id/inputLayoutEmail"
    app:layout_constraintTop_toBottomOf="@+id/inputLayoutEmail">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/login_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/inputText"
        android:hint="Jelszó"
        android:inputType="textPassword"
        android:textColor="@color/colorAccent"
        android:textColorHint="@color/colorPrimaryLight" />

</android.support.design.widget.TextInputLayout>

<CheckBox
    android:id="@+id/checkBox"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    android:buttonTint="@color/colorAccent"
    android:hint="Maradjak bejelentkezve"
    android:textSize="14sp"
    app:layout_constraintBottom_toTopOf="@+id/login_button"
    app:layout_constraintEnd_toEndOf="@+id/inputLayoutEmail"
    app:layout_constraintStart_toStartOf="@+id/inputLayoutEmail"
    app:layout_constraintTop_toBottomOf="@+id/inputLayoutPassword" />

<Button
    android:id="@+id/login_button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:onClick="onClickButtonMain"
    android:text="Bejelentkezés"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/registration_button"
    app:layout_constraintEnd_toStartOf="@+id/guideline7"
    app:layout_constraintStart_toStartOf="@+id/inputLayoutEmail"
    app:layout_constraintTop_toBottomOf="@+id/checkBox" />

<Button
    android:id="@+id/registration_button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:onClick="onClickButtonMain"
    android:text="Regisztráció"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/information_button"
    app:layout_constraintEnd_toStartOf="@+id/guideline7"
    app:layout_constraintStart_toStartOf="@+id/inputLayoutEmail"
    app:layout_constraintTop_toBottomOf="@+id/login_button" />

<Button
    android:id="@+id/information_button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:onClick="onClickButtonMain"
    android:text="Lépések"
    android:textColor="@color/colorAccent"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="@+id/inputLayoutEmail"
    app:layout_constraintStart_toStartOf="@+id/inputLayoutEmail"
    app:layout_constraintTop_toBottomOf="@+id/registration_button" />

<android.support.constraint.Guideline
    android:id="@+id/guideline6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="20dp"
    app:layout_constraintGuide_percent="0.25" />

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

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

</android.support.constraint.ConstraintLayout>

它看起来像这样（我正在从布局编辑器添加图片，以便您可以看到指南）：

enter image description here

现在剩下要做的就是设置视图样式并准备好布局。

相关问题
最新问题