Question

当我尝试为多种屏幕尺寸编程时，我仍然不明白如何使用布局。我需要插入一张图片＆＃34; Facebook＆＃34;与顶部的距离和文本框略有下降。

但是如果我使用边距，它会在更大的屏幕尺寸上弄乱我的布局。

有人可以向我解释这张照片的布局：

Facebook Login Page

Answer 1

您可以通过为不同的屏幕尺寸创建布局来解决此问题。为不同的屏幕创建单独的布局文件夹并在其中放置相应的布局。例如

用于720dp设备的layout-sw720dp / layout-sw600dp for 600dp devices

根据您的需要更改dp值。你也可以制作不同尺寸的图像

OR

你可以尝试这种布局

<LinearLayout 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/amna2"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.codeslayers.amnalocations.LoginActivity">




<ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/amna" />

<LinearLayout
    android:id="@+id/email_login_form"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="150dp">

        <EditText
            android:id="@+id/id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Van Name"
            android:inputType="textEmailAddress"
            android:maxLines="1"
            android:singleLine="true"
            android:textColor="@color/amna3"
            android:textColorHint="@color/amna3"
            android:textColorLink="@color/amna3" />

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

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Name"
            android:maxLines="1"
            android:singleLine="true"

            android:textColor="@color/amna3"
            android:textColorHint="@color/amna3"
            android:textColorLink="@color/amna3" />

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

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/district"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Destination"
            android:maxLines="1"
            android:singleLine="true"
            android:textColor="@color/amna3"
            android:textColorHint="@color/amna3"
            android:textColorLink="@color/amna3" />

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

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/dbname"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Database Name"
            android:maxLines="1"
            android:singleLine="true"
            android:textColor="@color/amna3"
            android:textColorHint="@color/amna3"
            android:textColorLink="@color/amna3" />

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


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

        style="?android:attr/buttonBarButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="@string/action_sign_in"
        android:textColor="@color/amna4" />/
    android:textStyle="bold" />

</LinearLayout>

Answer 2

您还可以使用不同的dimen.xml（values-sw600dp，values-sw720dp）执行此类操作。所以你不必复制布局文件。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <TextView
        android:textSize="32dp"
        android:layout_above="@+id/inputFields"
        android:id="@+id/facebook_logo"
        android:gravity="center"
        android:text="Facebook"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <LinearLayout
        android:layout_marginTop="45dp"
        android:layout_centerInParent="true"
        android:id="@+id/inputFields"
        android:gravity="center"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>


        <Button
            android:text="Login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <TextView
            android:gravity="center"
            android:text="Forgot password ?"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>


    </LinearLayout>


    <TextView
        android:id="@+id/signupTxt"
        android:layout_marginBottom="10dp"
        android:layout_alignParentBottom="true"
        android:text="Signup for Facebook"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <ImageView
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp"
        android:layout_alignParentRight="true"
        android:src="@drawable/rotate_refresh"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>


</RelativeLayout>

Android - 如何构建简单的布局

2 个答案: