如何为每种屏幕尺寸设计响应式布局

时间:2019-05-24 19:17:11

标签: android android-layout

我已经为像素设计了布局,但是我无法以相同的尺寸在4 inc到6.3英寸中运行,我正面临着图像对齐的底部碎石的问题,我为每一个hdpi,xhdpi从android的adobe xd格式中提取资产,但是我不能进行响应式布局,有时图像在对齐

时会出现在屏幕底部
<?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"
    tools:context=".LoginActivity"
    tools:ignore="MissingDefaultResource">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="@dimen/login_rectangle_width"
        android:layout_height="@dimen/login_rectangle_height"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:scaleType="fitXY"
        android:src="@drawable/rectangle_background"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.238"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="@dimen/login_circle_width"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="80dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:scaleType="fitCenter"
        android:src="@drawable/circle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="@dimen/login_logo_width"
        android:layout_height="@dimen/login_logo_height"
        android:layout_alignTop="@+id/imageView"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:src="@drawable/logo"
        app:layout_constraintBottom_toBottomOf="@+id/imageView2"
        app:layout_constraintEnd_toEndOf="@+id/imageView2"
        app:layout_constraintHorizontal_bias="0.444"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="@+id/imageView2" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="@dimen/login_card_width"
        android:layout_height="@dimen/login_card_height"
        android:layout_alignTop="@+id/imageView"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="2dp"
        android:layout_marginRight="2dp"
        android:layout_marginBottom="36dp"
        android:scaleType="fitXY"
        android:src="@drawable/card_view"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.444"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2"
        app:layout_constraintVertical_bias="0.0" />

    <EditText
        android:id="@+id/editText_username"
        android:layout_width="@dimen/login_edittext_width"
        android:layout_height="@dimen/login_edittext_height"
        android:layout_alignTop="@+id/imageView"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginTop="28dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:background="@drawable/textview_background"
        android:hint="Username"
        android:paddingLeft="30dp"
        app:layout_constraintEnd_toEndOf="@+id/imageView4"
        app:layout_constraintHorizontal_bias="0.62"
        app:layout_constraintStart_toStartOf="@+id/imageView4"
        app:layout_constraintTop_toTopOf="@+id/imageView4" />

    <EditText
        android:id="@+id/editText_password"
        android:layout_width="@dimen/login_edittext_width"
        android:layout_height="@dimen/login_edittext_height"
        android:layout_alignTop="@+id/imageView"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginTop="76dp"
        android:background="@drawable/textview_background"
        android:hint="Password"
        android:inputType="textPassword"
        android:paddingLeft="30dp"
        app:layout_constraintEnd_toEndOf="@+id/imageView4"
        app:layout_constraintStart_toStartOf="@+id/imageView4"
        app:layout_constraintTop_toTopOf="@+id/editText_username" />

    <Button
        android:id="@+id/button_login"
        android:layout_width="@dimen/login_button_width"
        android:layout_height="@dimen/login_edittext_height"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:background="@drawable/button_background"
        android:text="Login"
        android:textColor="#FFFFFF"
        app:layout_constraintEnd_toEndOf="@+id/imageView4"
        app:layout_constraintHorizontal_bias="0.556"
        app:layout_constraintStart_toStartOf="@+id/imageView4"
        app:layout_constraintTop_toBottomOf="@+id/editText_password" />

</android.support.constraint.ConstraintLayout>

1 个答案:

答案 0 :(得分:0)

尽量避免为视图使用固定的宽度和高度。 首选android:layout_height="wrap_content"和/或android:layout_height="match_parent"

自适应布局的基本思想是使用任何固定尺寸。祝你好运