zoukankan      html  css  js  c++  java
  • Material Design风格登录注册

    本文实现了以下功能

    • 完整的代码和样例托管在Github
    • 当接口锁定时,防止后退按钮显示在登录Activity 上。
    • 自定义 ProgressDialog来显示加载的状态。
    • 符合材料设计规范。
    • 悬浮标签(floating labels)(来自设计支持库)
    • 用户表单输入校验
    • 自定义状态栏样式
    • 在每一个Activity 测试模仿验证的方法。

    剩下的就是实现自己的身份验证逻辑。

    源码

    获取源码地址

    登录Activity

    如果你想要添加社交登录按钮,请继续,但是当前在这个文章范围内,只给你基本的代码,让你有一个坚固的起点去构建你的验证流程。
    需要注意的是 onBackPressed 方法将会被重写,这样将会防止用户关闭登录Activity。

     @Override
        public void onBackPressed() {
            // Disable going back to the MainActivity
            moveTaskToBack(true);
        }

    moveTaskToBack用户在按返回键的时候你并不希望退出(默认就finish了),而是只希望置后台,就可以调这个方法

    参考链接

    moveTaskToback退后台 - Android探索之路 - 博客频道 - CSDN.NET

    LoginActivity

    package com.sourcey.materiallogindemo;
    
    import android.app.ProgressDialog;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.util.Log;
    
    import android.content.Intent;
    import android.view.View;
    import android.widget.Button;
    import android.widget.EditText;
    import android.widget.TextView;
    import android.widget.Toast;
    
    import butterknife.ButterKnife;
    import butterknife.Bind;
    
    public class LoginActivity extends AppCompatActivity {
        private static final String TAG = "LoginActivity";
        private static final int REQUEST_SIGNUP = 0;
    
        @Bind(R.id.input_email) EditText _emailText;
        @Bind(R.id.input_password) EditText _passwordText;
        @Bind(R.id.btn_login) Button _loginButton;
        @Bind(R.id.link_signup) TextView _signupLink;
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_login);
            ButterKnife.bind(this);
    
            _loginButton.setOnClickListener(new View.OnClickListener() {
    
                @Override
                public void onClick(View v) {
                    login();
                }
            });
    
            _signupLink.setOnClickListener(new View.OnClickListener() {
    
                @Override
                public void onClick(View v) {
                    // Start the Signup activity
                    Intent intent = new Intent(getApplicationContext(), SignupActivity.class);
                    startActivityForResult(intent, REQUEST_SIGNUP);
                }
            });
        }
    
        public void login() {
            Log.d(TAG, "Login");
    
            if (!validate()) {
                onLoginFailed();
                return;
            }
    
            _loginButton.setEnabled(false);
    
            final ProgressDialog progressDialog = new ProgressDialog(LoginActivity.this,
                    R.style.AppTheme_Dark_Dialog);
            progressDialog.setIndeterminate(true);
            progressDialog.setMessage("Authenticating...");
            progressDialog.show();
    
            String email = _emailText.getText().toString();
            String password = _passwordText.getText().toString();
    
            // TODO: Implement your own authentication logic here.
    
            new android.os.Handler().postDelayed(
                    new Runnable() {
                        public void run() {
                            // On complete call either onLoginSuccess or onLoginFailed
                            onLoginSuccess();
                            // onLoginFailed();
                            progressDialog.dismiss();
                        }
                    }, 3000);
        }
    
    
        @Override
        protected void onActivityResult(int requestCode, int resultCode, Intent data) {
            if (requestCode == REQUEST_SIGNUP) {
                if (resultCode == RESULT_OK) {
    
                    // TODO: Implement successful signup logic here
                    // By default we just finish the Activity and log them in automatically
                    this.finish();
                }
            }
        }
    
        @Override
        public void onBackPressed() {
            // Disable going back to the MainActivity
            moveTaskToBack(true);
        }
    
        public void onLoginSuccess() {
            _loginButton.setEnabled(true);
            finish();
        }
    
        public void onLoginFailed() {
            Toast.makeText(getBaseContext(), "Login failed", Toast.LENGTH_LONG).show();
    
            _loginButton.setEnabled(true);
        }
    
        public boolean validate() {
            boolean valid = true;
    
            String email = _emailText.getText().toString();
            String password = _passwordText.getText().toString();
    
            if (email.isEmpty() || !android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
                _emailText.setError("enter a valid email address");
                valid = false;
            } else {
                _emailText.setError(null);
            }
    
            if (password.isEmpty() || password.length() < 4 || password.length() > 10) {
                _passwordText.setError("between 4 and 10 alphanumeric characters");
                valid = false;
            } else {
                _passwordText.setError(null);
            }
    
            return valid;
        }
    }
    

    res/layout/activity_login.xml

    <?xml version="1.0" encoding="utf-8"?>
    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:fitsSystemWindows="true">
    
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="56dp"
            android:paddingLeft="24dp"
            android:paddingRight="24dp">
    
            <ImageView android:src="@drawable/logo"
                android:layout_width="wrap_content"
                android:layout_height="72dp"
                android:layout_marginBottom="24dp"
                android:layout_gravity="center_horizontal" />
    
            <!--  Email Label -->
            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="8dp">
                <EditText android:id="@+id/input_email"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textEmailAddress"
                    android:hint="Email" />
            </android.support.design.widget.TextInputLayout>
    
            <!--  Password Label -->
            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="8dp">
                <EditText android:id="@+id/input_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textPassword"
                    android:hint="Password"/>
            </android.support.design.widget.TextInputLayout>
    
            <android.support.v7.widget.AppCompatButton
                android:id="@+id/btn_login"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="24dp"
                android:layout_marginBottom="24dp"
                android:padding="12dp"
                android:text="Login"/>
    
            <TextView android:id="@+id/link_signup"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="24dp"
                android:text="No account yet? Create one"
                android:gravity="center"
                android:textSize="16dip"/>
    
        </LinearLayout>
    </ScrollView>

    注册Activity

    注册Activity 可以让你在App 中创建一个用户,通常会在登录Activity 中显示(注册的)链接。

    需要注意的是当用户注册成功时我们会设置一个RESULT_OK 的结果值,这个结果将会在登录Activity 中的 onActivityResult 方法中调用,并且确定注册成功是如何处理的。当前逻辑是很简单的,当用户注册成功时我们会马上做一个记录。当然你想要实现邮箱验证,你需要自己来实现。

    SignupActivity.java

    package com.sourcey.materiallogindemo;
    
    import android.app.ProgressDialog;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.util.Log;
    import android.view.View;
    import android.widget.Button;
    import android.widget.EditText;
    import android.widget.TextView;
    import android.widget.Toast;
    
    import butterknife.ButterKnife;
    import butterknife.Bind;
    
    public class SignupActivity extends AppCompatActivity {
        private static final String TAG = "SignupActivity";
    
        @Bind(R.id.input_name) EditText _nameText;
        @Bind(R.id.input_email) EditText _emailText;
        @Bind(R.id.input_password) EditText _passwordText;
        @Bind(R.id.btn_signup) Button _signupButton;
        @Bind(R.id.link_login) TextView _loginLink;
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_signup);
            ButterKnife.bind(this);
    
            _signupButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    signup();
                }
            });
    
            _loginLink.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    // Finish the registration screen and return to the Login activity
                    finish();
                }
            });
        }
    
        public void signup() {
            Log.d(TAG, "Signup");
    
            if (!validate()) {
                onSignupFailed();
                return;
            }
    
            _signupButton.setEnabled(false);
    
            final ProgressDialog progressDialog = new ProgressDialog(SignupActivity.this,
                    R.style.AppTheme_Dark_Dialog);
            progressDialog.setIndeterminate(true);
            progressDialog.setMessage("Creating Account...");
            progressDialog.show();
    
            String name = _nameText.getText().toString();
            String email = _emailText.getText().toString();
            String password = _passwordText.getText().toString();
    
            // TODO: Implement your own signup logic here.
    
            new android.os.Handler().postDelayed(
                    new Runnable() {
                        public void run() {
                            // On complete call either onSignupSuccess or onSignupFailed
                            // depending on success
                            onSignupSuccess();
                            // onSignupFailed();
                            progressDialog.dismiss();
                        }
                    }, 3000);
        }
    
    
        public void onSignupSuccess() {
            _signupButton.setEnabled(true);
            setResult(RESULT_OK, null);
            finish();
        }
    
        public void onSignupFailed() {
            Toast.makeText(getBaseContext(), "Login failed", Toast.LENGTH_LONG).show();
    
            _signupButton.setEnabled(true);
        }
    
        public boolean validate() {
            boolean valid = true;
    
            String name = _nameText.getText().toString();
            String email = _emailText.getText().toString();
            String password = _passwordText.getText().toString();
    
            if (name.isEmpty() || name.length() < 3) {
                _nameText.setError("at least 3 characters");
                valid = false;
            } else {
                _nameText.setError(null);
            }
    
            if (email.isEmpty() || !android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
                _emailText.setError("enter a valid email address");
                valid = false;
            } else {
                _emailText.setError(null);
            }
    
            if (password.isEmpty() || password.length() < 4 || password.length() > 10) {
                _passwordText.setError("between 4 and 10 alphanumeric characters");
                valid = false;
            } else {
                _passwordText.setError(null);
            }
    
            return valid;
        }
    }

    res/layout/activity_signup.xml

    <?xml version="1.0" encoding="utf-8"?>
    <ScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:fitsSystemWindows="true">
    
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="56dp"
            android:paddingLeft="24dp"
            android:paddingRight="24dp">
    
            <ImageView android:src="@drawable/logo"
                android:layout_width="wrap_content"
                android:layout_height="72dp"
                android:layout_marginBottom="24dp"
                android:layout_gravity="center_horizontal" />
    
            <!-- Name Label -->
            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="8dp">
                <EditText android:id="@+id/input_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textCapWords"
                    android:hint="Name" />
            </android.support.design.widget.TextInputLayout>
    
            <!--  Email Label -->
            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="8dp">
                <EditText android:id="@+id/input_email"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textEmailAddress"
                    android:hint="Email" />
            </android.support.design.widget.TextInputLayout>
    
            <!-- Password Label -->
            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="8dp">
                <EditText android:id="@+id/input_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textPassword"
                    android:hint="Password"/>
            </android.support.design.widget.TextInputLayout>
    
            <!-- Signup Button -->
            <android.support.v7.widget.AppCompatButton
                android:id="@+id/btn_signup"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="24dp"
                android:layout_marginBottom="24dp"
                android:padding="12dp"
                android:text="Create Account"/>
    
            <TextView android:id="@+id/link_login"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="24dp"
                android:text="Already a member? Login"
                android:gravity="center"
                android:textSize="16dip"/>
    
        </LinearLayout>
    </ScrollView>

    配置

    为了让程序一切正常工作,我们在需要在 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:7.0.1'
    }

    本文中使用了ButterKnife

    也就是 findViewById(),一直以来的做法都是一个个定义,然后在 setContentView() 或 inflate() 之后一一来findViewById()进行实例化,而使用 ButterKnife,你只需要在代码中 使用注解方式进行对象申明,然后在 setContentView() 或 inflate() 之后调用一句话,那么申明的所有对象自动创建出来。

     @Bind(R.id.input_email) EditText _emailText;
        @Bind(R.id.input_password) EditText _passwordText;
        @Bind(R.id.btn_login) Button _loginButton;
        @Bind(R.id.link_signup) TextView _signupLink;
    
     ButterKnife.bind(this);

    参考链接

    推荐一个Android开发懒人库 – ButterKnife - balenofly - 博客园

    原文链接

    教你写一个炫酷的Material Design 风格的登录和注册页面

  • 相关阅读:
    使用gunicorn部署flask项目
    加密算法详解
    elasticsearch安装
    elk下载链接
    mysql允许远程连接
    工作流源代码分析
    查看账户的访问token
    Kube-proxy组件
    创建服务账户/查询访问token
    K8s概念2
  • 原文地址:https://www.cnblogs.com/jjx2013/p/6223654.html
Copyright © 2011-2022 走看看