创建用于登录的片段

时间:2014-12-30 14:56:35

标签: android android-fragments

我正在开发一个具有片段的登录屏幕,如下图所示,但我不知道如何在活动中做到这一点,我看过很少像vogella这样的教程,但我仍然无法实现所需的输出。 enter image description here

我开发的屏幕就像 enter image description here

活动xml是

<RelativeLayout 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: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=".MainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="18dp"
        android:text="@string/hello_world"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="50dp"
        android:text="@string/username"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/textView2"
        android:layout_marginLeft="32dp"
        android:layout_toRightOf="@+id/textView2"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView2"
        android:layout_below="@+id/textView2"
        android:layout_marginTop="38dp"
        android:text="@string/password"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/textView3"
        android:layout_alignLeft="@+id/editText1"
        android:ems="10"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editText2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="94dp"
        android:onClick="login"
        android:text="@string/Login" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView3"
        android:layout_below="@+id/textView3"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="48dp"
        android:text="@string/attempts"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/textView1"
        android:layout_alignTop="@+id/textView4"
        android:text="TextView" />

</RelativeLayout>

让我知道如何获得类似的屏幕,我可以添加图像没有问题,但片段尚不可能,我是完全新的andriod,请帮助。

谢谢,

2 个答案:

答案 0 :(得分:1)

试试这个

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:orientation="vertical" >

     <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/ic_launcher" />
</LinearLayout>

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#ff9872"
        android:gravity="center"
        android:orientation="vertical"
        android:weightSum="1" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <EditText
                android:id="@+id/editText1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="15dp"
                android:layout_weight="1"
                android:drawableLeft="@android:drawable/ic_menu_day"
                android:ems="10"
                android:hint="username" >

                <requestFocus />
            </EditText>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <EditText
                android:id="@+id/editText2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_margin="15dp"
                android:drawableLeft="@android:drawable/ic_menu_day"
                android:ems="10"
                android:hint="password"
                android:inputType="textPassword" />
        </LinearLayout>

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:onClick="login"
            android:text="Login" />
    </LinearLayout>
</LinearLayout>

答案 1 :(得分:0)

要实现此目的,您可以使用各自的布局创建两个片段(已注销和已登录的片段)。这两个片段都将在MainActivity中,在OnCreate中,您必须隐藏已登录的片段并使用片段事务显示已注销的片段。

这是主要布局:

<RelativeLayout 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"
    tools:context=".MainActivity">

    <fragment
        android:name="com.example.LoggedOutFragment"
        android:id="@+id/loggedOutFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout="@layout/fragment_logged_out"/>

    <fragment
        android:name="com.example.LoggedInFragment"
        android:id="@+id/loggedInFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout="@layout/fragment_logged_in"/>

</RelativeLayout>

每个片段都将具有相应的布局。这是MainActivity中的OnCreate方法

FragmentManager fm = getSupportFragmentManager();
loggedInFragment = fm.findFragmentById(R.id.loggedOutFragment);
loggedOutFragment = fm.findFragmentById(R.id.loggedInFragment);

FragmentTransaction transaction = fm.beginTransaction();
transaction.hide(loggedInFragment);
transaction.show(loggedOutFragment);        
transaction.commit();

(你可以在这里看到更多这个http://developer.android.com/guide/components/fragments.html

隐藏登录的片段后,为登录按钮创建一个OnClick侦听器,并将用户和密码值与您存储的某些值或硬编码字符串进行比较,如果它们匹配,则隐藏已注销的片段并显示登录片段(oposite进程比以前)。当你注销时,你必须做对面。希望这有所帮助,正是你所要求的。