如何正确设计登录界面?

时间:2017-04-05 11:32:07

标签: android android-studio firebase firebase-authentication

我是Android开发的新手,我开发了一个应用程序,其中将在firebase的帮助下登录(使用google,facebook,twitter,gitHub和匿名登录)。但我不知道如何通过登录screesn为我的应用程序正确设计逻辑和架构。

现在,我创建了auth_activity.xml,其中包含:

    <LinearLayout
    android:id="@+id/btn_group_social"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_centerInParent="true"
    android:gravity="center_horizontal"
    android:orientation="horizontal"
    android:layout_margin="15dp"
    android:layout_above="@+id/mail_pass">

    <ImageButton
        android:id="@+id/btn_google"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/ic_google_256dp"
        android:scaleType="centerInside"
        android:background="@null"/>

    <ImageButton
        android:id="@+id/btn_facebook"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/ic_facebook_256dp"
        android:scaleType="centerInside"
        android:background="@null"/>

    <ImageButton
        android:id="@+id/btn_twitter"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/ic_twitter_256dp"
        android:scaleType="centerInside"
        android:background="@null"/>


    <ImageButton
        android:id="@+id/btn_gitHub"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/ic_git_hub_256dp"
        android:scaleType="centerInside"
        android:background="@null"/>

</LinearLayout>



<LinearLayout
    android:id="@+id/mail_pass"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:paddingTop="50dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="25dp"
        android:paddingBottom="15dp"
        android:text="or"/>

<EditText
    android:id="@+id/editText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:inputType="textEmailAddress"
    android:hint="@string/email"/>

<EditText
    android:id="@+id/editText2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:inputType="textPassword"
    android:hint="@string/password"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btn_access"
        android:text="@string/access"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/forgot_your_password"
        android:textColor="@color/bg_screen1"
        android:paddingTop="15dp"/>

</LinearLayout>

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Skip"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:background="?android:selectableItemBackground"
    android:layout_margin="5dp"/>

此外,我尝试创建一个我实施谷歌登录的活动,但我不认为在一个活动中创建所有登录方式(谷歌,脸书等)都是如此。 我不太明白如何正确组织它。

可能你有一个完成的项目,其中有一个登录。

感谢。

2 个答案:

答案 0 :(得分:0)

Like this 如评论中所述,您可以添加如下所示的活动

答案 1 :(得分:0)

https://sourcey.com/beautiful-android-login-and-signup-screens-with-material-design/

这可能对你有帮助!!!

为了使一切正常,我们需要在app目录中的build.gradle文件中添加几个依赖项。 ButterKnife是可选的,但我们喜欢用它来清理我们的Java代码。

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:design:22.2.0'
    compile 'com.jakewharton:butterknife:6.1.0'
}