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文件夹，如Darawable-mdpi，Drawable-hdpi，Drawable-xhdpi，Drawable-xxhdpi等，并且您需要将图像放在具有相同名称但具有不同大小的所有文件夹中。同样，您也需要创建布局文件，但您的xml必须根据您的要求设计适当的属性。

关注此Link

Answer 3

除非您另行指定，否则/ res / layout中的布局将应用于纵向和横向。假设您有/res/layout/login.xml，并希望它在2种布局类型中看起来不同。

创建文件夹/ res / layout-land（这里您将保留横向调整的布局）。复制login.xml，对其进行必要的更改。在模拟器中运行应用程序并使用Ctrl + F11组合

进行测试

Answer 4

// 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>

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

4 个答案: