如何定位以应用程序启动为中心的登录框?

时间:2013-09-24 15:25:50

标签: android android-layout layout relativelayout

我是Android新手并尝试构建登录框,并遇到一些麻烦。我创建了两个文本(用户名,密码)和旁边的两个文本框,以设置登录框区域的样式。

但不幸的是,元素与上下条相关地上下跳动,当用户触摸屏幕时会显示这些条。

如何实现居中的登录框?

Username and Password field jump around 链接:maximize image

以下是一些代码:

<FrameLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <LinearLayout android:id="@+id/fullscreen_content_controls"
        style="?buttonBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:background="@color/black_overlay"
        android:orientation="horizontal"
        tools:ignore="UselessParent">



        <Button android:id="@+id/dummy_button"
            style="?buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/login_button" />

    </LinearLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center_vertical|center_horizontal">

        <TableLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:baselineAligned="false"
            android:layout_alignParentTop="false"
            android:layout_alignParentLeft="false"
            android:layout_alignParentBottom="false"
            android:layout_centerInParent="true">

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/login_username"
                    android:id="@+id/textView" />

                <EditText
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/editText"
                    android:layout_column="1" />
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/login_password"
                    android:id="@+id/textView2"
                    android:layout_column="0" />

                <EditText
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/editText2"
                    android:layout_column="1" />
            </TableRow>

        </TableLayout>
    </RelativeLayout>

</FrameLayout>

3 个答案:

答案 0 :(得分:0)

不需要表格布局它只需要使用相对和线性布局。 http://www.androidhive.info/2011/10/android-login-and-registration-screen-design/

答案 1 :(得分:0)

使用此 -

<FrameLayout android:layout_width="match_parent"
android:layout_height="match_parent">

 <RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/login_username"
                android:id="@+id/textView" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/editText"
                android:layout_column="1" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/login_password"
                android:id="@+id/textView2"
                android:layout_column="0" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/editText2"
                android:layout_column="1" />
        </TableRow>
    </TableLayout>
</RelativeLayout>

      <Button 
        android:id="@+id/dummy_button"
        style="?buttonBarButtonStyle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="bottom"
        android:text="@string/login_button" />
 </FrameLayout>

答案 2 :(得分:0)

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

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="vertical"
            android:padding="10dp"
            android:gravity="center">

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center">

            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/login_username"
                    android:id="@+id/textView" />

            <EditText
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginLeft="5dp"
                    android:id="@+id/editText"/>
        </LinearLayout>

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center">

            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/login_password"
                    android:id="@+id/textView2"/>

            <EditText
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:inputType="textPassword"
                    android:ems="10"
                    android:layout_marginLeft="5dp"
                    android:id="@+id/editText3"/>
        </LinearLayout>


    </LinearLayout>
    <LinearLayout android:id="@+id/fullscreen_content_controls"
                  style="?buttonBarStyle"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:gravity="center"
                  android:background="@color/black_overlay">

        <Button android:id="@+id/dummy_button"
                style="?buttonBarButtonStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/login_button" />

    </LinearLayout>

</LinearLayout>