如何设计响应式布局UI视图

Question

我想设计一个类似于facebook的登录页面。

我已经尝试了下面的布局视图，如果我改变屏幕的方向，底部没有空间，也没有我已经完全改变的字段。请建议如何解决这个问题?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/RelativeLayout1"
    android:layout_width="fill_parent"
  android:layout_height="fill_parent" >
   <ScrollView
       android:id="@+id/ScrollView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true" >
    <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:background="#7CACF5"
        android:orientation="vertical"
        android:padding="10dp"
        android:paddingBottom="30dp" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="70dp"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:paddingBottom="5dp"
        android:text="Welcome"
        android:textAppearance="?android:attr/textAppearanceLarge" />
    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="email or phone"
        android:inputType="textEmailAddress"
        android:paddingBottom="5dp" />
    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="password"
        android:inputType="numberPassword"
        android:paddingBottom="5dp" >
        <requestFocus />
    </EditText>
    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Log In" />
</LinearLayout>
</ScrollView>
</RelativeLayout>

Answer 1

试试这个

    <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical|center_horizontal"
        android:orientation="vertical"
        android:padding="10dp"
        android:paddingBottom="30dp" >
        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_marginTop="50dp"
            android:gravity="center"
            android:paddingBottom="5dp"
            android:text="Welcome"
            android:textAppearance="?android:attr/textAppearanceLarge" />
        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:hint="email or phone"
            android:inputType="textEmailAddress"
            android:paddingBottom="5dp" />
        <EditText
            android:id="@+id/editText2"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:ems="10"
            android:hint="password"
            android:inputType="numberPassword"
            android:paddingBottom="5dp" >
            <requestFocus />
        </EditText>
        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
             android:layout_height="0dp"
            android:layout_weight="1"
            android:text="Log In" />
    </LinearLayout>

Answer 2

为此，您需要创建响应式布局，您必须需要通过android开发博客，谁教我们如何创建响应式布局。基本上，你需要实现不同的Drawables文件夹，如drawable -mdpi, Drawable-hdpi, Drawable-xhdpi, Drawable-xxhdpi等，你需要把你的图像放在所有具有相同名称的文件夹中，但大小不同。同样，你也需要创建布局文件，但是你的xml必须按照你的要求设计适当的属性。

点击此链接

Answer 3

// Try this way,hope this will help you to solve your problem...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     android:background="#7CACF5"
    android:gravity="center" >
    <ScrollView
        android:id="@+id/ScrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <LinearLayout
            android:id="@+id/LinearLayout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="10dp" >
            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:gravity="center"
                android:text="Welcome"
                android:textAppearance="?android:attr/textAppearanceLarge" />
            <EditText
                android:id="@+id/editText1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:hint="email or phone"
                android:inputType="textEmailAddress" />
            <EditText
                android:id="@+id/editText2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:ems="10"
                android:hint="password"
                android:inputType="numberPassword" >
            </EditText>
            <Button
                android:id="@+id/button1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Log In" />
        </LinearLayout>
    </ScrollView>
</LinearLayout>