Android仿QQ登錄界面示例,實現登錄、註冊功能。

首語

  • 歷經一個月的時間,自己終於搭建完成了個人網站,還在持續優化中,網站採用halo博客系統,功能非常強大!歡迎大家來我的網站逛逛。有什麼建議可以留言!

網站地址:http://www.yanghujun.com

Android開發經常用到註冊、登錄功能,於是便整理出一般通用的登錄界面,並實現其相應功能。供讀者參閱。此項目包含三個活動,即登錄,註冊界面,找回密碼。

GitHub源碼地址:LoginTest

界面

下面是對代碼的分析過程。

首先是登錄界面 activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<!--登錄界面,用LinearLayout-->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/bg"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="35dp">

        <ImageView
            android:id="@+id/symbol"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />

        <TextView
            android:layout_marginLeft="20dp"
            android:id="@+id/qq"
            android:layout_width="wrap_content"
            android:layout_marginTop="35dp"
            android:text="仿QQ"
            android:textSize="24sp"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <!--輸入框-->
    <EditText
        android:id="@+id/et_user_name"
        android:layout_width="320dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:hint="賬號"
        android:textSize="20sp" />
    <!--輸入框-->
    <EditText
        android:id="@+id/et_psw"
        android:layout_width="320dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:hint="密碼"
        android:textSize="20sp"
        android:inputType="textPassword"/>
    <!--按鈕-->
    <Button
        android:id="@+id/btn_login"
        android:text="登錄"
        android:background="#1E90FF"
        android:textSize="24sp"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:layout_width="320dp"
        android:layout_height="wrap_content"/>
 
    <RelativeLayout
        android:layout_marginTop="15dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/tv_register"
            android:layout_alignParentRight="true"
            android:layout_marginRight="20dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="新用戶註冊"/>
        <!--layout_weight="1" layout_width="0dp"實現均分效果-->
        <TextView
            android:id="@+id/tv_find_psw"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="20dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="忘記密碼?" />
   </RelativeLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <RelativeLayout
            android:layout_gravity="center"
            android:layout_marginBottom="30dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <TextView
                android:layout_alignParentBottom="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="登錄即代表閱讀並同意服務條款" />
        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

對應的就是登錄活動 MainActivity:

public class MainActivity extends AppCompatActivity {
    private String userName,psw,spPsw;//獲取的用戶名,密碼,加密密碼
    private EditText et_user_name,et_psw;//編輯框
    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //設置此界面爲豎屏
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
        init();
    }
    //獲取界面控件
    private void init() {
        //從main_title_bar中獲取的id
        //從activity_login.xml中獲取的
        TextView tv_register = (TextView) findViewById(R.id.tv_register);
        TextView tv_find_psw = (TextView) findViewById(R.id.tv_find_psw);
        Button btn_login = (Button) findViewById(R.id.btn_login);
        et_user_name= (EditText) findViewById(R.id.et_user_name);
        et_psw= (EditText) findViewById(R.id.et_psw);
        //立即註冊控件的點擊事件
        tv_register.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //爲了跳轉到註冊界面,並實現註冊功能
                Intent intent=new Intent(MainActivity.this,RegisterActivity.class);
                startActivityForResult(intent, 1);
            }
        });
        //找回密碼控件的點擊事件
        tv_find_psw.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
               startActivity(new Intent(MainActivity.this,LostFindActivity.class));
            }
        });
        //登錄按鈕的點擊事件
        btn_login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //開始登錄,獲取用戶名和密碼 getText().toString().trim();
                userName = et_user_name.getText().toString().trim();
                psw = et_psw.getText().toString().trim();
                //對當前用戶輸入的密碼進行MD5加密再進行比對判斷, MD5Utils.md5( ); psw 進行加密判斷是否一致
                String md5Psw = MD5Utils.md5(psw);
                // md5Psw ; spPsw 爲 根據從SharedPreferences中用戶名讀取密碼
                // 定義方法 readPsw爲了讀取用戶名,得到密碼
                spPsw = readPsw(userName);
                // TextUtils.isEmpty
                if (TextUtils.isEmpty(userName)) {
                    Toast.makeText(MainActivity.this, "請輸入用戶名", Toast.LENGTH_SHORT).show();
                } else if (TextUtils.isEmpty(psw)) {
                    Toast.makeText(MainActivity.this, "請輸入密碼", Toast.LENGTH_SHORT).show();
                    // md5Psw.equals(); 判斷,輸入的密碼加密後,是否與保存在SharedPreferences中一致
                } else if (md5Psw.equals(spPsw)) {
                    //一致登錄成功
                    Toast.makeText(MainActivity.this, "登錄成功", Toast.LENGTH_SHORT).show();
         //保存登錄狀態,在界面保存登錄的用戶名 定義個方法 saveLoginStatus boolean 狀態 , userName 用戶名;
                    saveLoginStatus(true, userName);
                    //登錄成功後關閉此頁面進入主頁
                    Intent data = new Intent();
                    //datad.putExtra( ); name , value ;
                    data.putExtra("isLogin", true);
                    //RESULT_OK爲Activity系統常量,狀態碼爲-1
       // 表示此頁面下的內容操作成功將data返回到上一頁面,如果是用back返回過去的則不存在用setResult傳遞data值
                    setResult(RESULT_OK, data);
                    //銷燬登錄界面
                    MainActivity.this.finish();
                    //跳轉到主界面,登錄成功的狀態傳遞到 MainActivity 中
                    startActivity(new Intent(MainActivity.this, ItemActivity.class));
                } else if ((spPsw != null && !TextUtils.isEmpty(spPsw) && !md5Psw.equals(spPsw))) {
                    Toast.makeText(MainActivity.this, "輸入的用戶名和密碼不一致", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(MainActivity.this, "此用戶名不存在", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
    /**
     *從SharedPreferences中根據用戶名讀取密碼
     */
    private String readPsw(String userName){
        //getSharedPreferences("loginInfo",MODE_PRIVATE);
        //"loginInfo",mode_private; MODE_PRIVATE表示可以繼續寫入
        SharedPreferences sp=getSharedPreferences("loginInfo", MODE_PRIVATE);
        //sp.getString() userName, "";
        return sp.getString(userName , "");
    }
    /**
     *保存登錄狀態和登錄用戶名到SharedPreferences中
     */
    private void saveLoginStatus(boolean status,String userName){
              //loginInfo表示文件名  SharedPreferences sp=getSharedPreferences("loginInfo", MODE_PRIVATE);
        SharedPreferences sp=getSharedPreferences("loginInfo", MODE_PRIVATE);
        //獲取編輯器
        SharedPreferences.Editor editor=sp.edit();
        //存入boolean類型的登錄狀態
        editor.putBoolean("isLogin", status);
        //存入登錄狀態時的用戶名
        editor.putString("loginUserName", userName);
        //提交修改
        editor.apply();
    }
    /**
     * 註冊成功的數據返回至此
     * @param requestCode 請求碼
     * @param resultCode 結果碼
     * @param data 數據
     */
    @Override
    //顯示數據, onActivityResult
    //startActivityForResult(intent, 1); 從註冊界面中獲取數據
    //int requestCode , int resultCode , Intent data
    // LoginActivity -> startActivityForResult -> onActivityResult();
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        //super.onActivityResult(requestCode, resultCode, data);
        super.onActivityResult(requestCode, resultCode, data);
        if(data!=null){
            //是獲取註冊界面回傳過來的用戶名
            // getExtra().getString("***");
            String userName=data.getStringExtra("userName");
            if(!TextUtils.isEmpty(userName)){
                //設置用戶名到 et_user_name 控件
                et_user_name.setText(userName);
                //et_user_name控件的setSelection()方法來設置光標位置
                et_user_name.setSelection(userName.length());
            }
        }
    }
}

接下來是註冊界面 activity_register.xml

<?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:orientation="vertical" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="註冊"
            android:textSize="30sp"/>

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="@drawable/shap"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >
            <EditText
                android:id="@+id/et_user_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:paddingTop="2dp"
                android:paddingBottom="2dp"
                android:paddingLeft="6dp"
                android:hint="賬號"
                android:singleLine="true"
                android:maxLength="15"
                android:background="#ffffff"
                android:textSize="18sp" />
        </LinearLayout>


        <LinearLayout
            android:background="@drawable/shap"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:paddingTop="2dp"
                android:paddingBottom="2dp"
                android:paddingLeft="6dp"
                android:singleLine="true"
                android:hint="請輸入密碼"
                android:inputType="textPassword"
                android:maxLength="15"
                android:background="#ffffff"
                android:id="@+id/et_psw"
                android:textSize="18sp" />
        </LinearLayout>

        <LinearLayout
            android:background="@drawable/shap"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:paddingTop="2dp"
                android:paddingBottom="2dp"
                android:paddingLeft="6dp"
                android:singleLine="true"
                android:hint="請再次輸入密碼"
                android:inputType="textPassword"
                android:maxLength="15"
                android:background="#ffffff"
                android:id="@+id/et_psw_again"
                android:textSize="18sp" />
        </LinearLayout>

        <LinearLayout
            android:background="@drawable/shap"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >
            <TextView
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginLeft="10dp"
                android:paddingLeft="6dp"
                android:gravity="left"
                android:text="性別"
                android:textSize="18sp" />
            <RadioGroup
                android:layout_width="0px"
                android:layout_height="wrap_content"
                android:layout_weight="2.6"
                android:id="@+id/SexRadio"
                android:paddingLeft="5dp">
                <RadioButton
                    android:id="@+id/mainRegisterRdBtnFemale"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="女生"/>
                <RadioButton
                    android:id="@+id/mainRegisterRdBtnMale"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="男生"/>
            </RadioGroup>
        </LinearLayout>
        
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center_vertical"
            android:orientation="horizontal" >
            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:paddingTop="2dp"
                android:paddingBottom="2dp"
                android:paddingLeft="6dp"
                android:hint="學校"
                android:singleLine="true"
                android:maxLength="15"
                android:background="#ffffff"
                android:textSize="18sp" />
        </LinearLayout>

    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp" >
        <Button
            android:id="@+id/btn_register"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="40dp"
            android:text="註冊"
            android:textSize="24sp"
            android:background="@color/colorPrimary" />
     </RelativeLayout>

</LinearLayout>

對應註冊活動 RegisterActivity:

public class RegisterActivity extends AppCompatActivity {

    //用戶名,密碼,再次輸入的密碼的控件
    private EditText et_user_name,et_psw,et_psw_again;
    //用戶名,密碼,再次輸入的密碼的控件的獲取值
    private String userName,psw,pswAgain;
    private RadioGroup Sex;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //設置頁面佈局 ,註冊界面
        setContentView(R.layout.activity_register);
        //設置此界面爲豎屏
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
        init();
    }

    private void init() {

        //從activity_register.xml 頁面中獲取對應的UI控件
        Button btn_register = (Button) findViewById(R.id.btn_register);
        et_user_name= (EditText) findViewById(R.id.et_user_name);
        et_psw= (EditText) findViewById(R.id.et_psw);
        et_psw_again= (EditText) findViewById(R.id.et_psw_again);
        Sex= (RadioGroup) findViewById(R.id.SexRadio);
        //註冊按鈕
        btn_register.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {

                //獲取輸入在相應控件中的字符串
                getEditString();
                //判斷輸入框內容
                int sex;
                int sexChoseId = Sex.getCheckedRadioButtonId();
                switch (sexChoseId) {
                    case R.id.mainRegisterRdBtnFemale:
                        sex = 0;
                        break;
                    case R.id.mainRegisterRdBtnMale:
                        sex = 1;
                        break;
                    default:
                        sex = -1;
                        break;
                }

                if(TextUtils.isEmpty(userName)){
                    Toast.makeText(RegisterActivity.this, "請輸入用戶名", Toast.LENGTH_SHORT).show();
                }else if(TextUtils.isEmpty(psw)){
                    Toast.makeText(RegisterActivity.this, "請輸入密碼", Toast.LENGTH_SHORT).show();
                }else if(TextUtils.isEmpty(pswAgain)) {
                    Toast.makeText(RegisterActivity.this, "請再次輸入密碼", Toast.LENGTH_SHORT).show();
                } else if (sex<0){
                    Toast.makeText(RegisterActivity.this, "請選擇性別", Toast.LENGTH_SHORT).show();
                }else if(!psw.equals(pswAgain)){
                    Toast.makeText(RegisterActivity.this, "輸入兩次的密碼不一樣", Toast.LENGTH_SHORT).show();

                    /**
                     *從SharedPreferences中讀取輸入的用戶名,判斷SharedPreferences中是否有此用戶名
                     */
                }else if(isExistUserName(userName)){
                    Toast.makeText(RegisterActivity.this, "此賬戶名已經存在", Toast.LENGTH_SHORT).show();

                }else{
                    Toast.makeText(RegisterActivity.this, "註冊成功", Toast.LENGTH_SHORT).show();
                    //把賬號、密碼和賬號標識保存到sp裏面
                    /**
                     * 保存賬號和密碼到SharedPreferences中
                     */
                    saveRegisterInfo(userName, psw);
                    //註冊成功後把賬號傳遞到LoginActivity.java中
                    // 返回值到loginActivity顯示
                    Intent data = new Intent();
                    data.putExtra("userName", userName);
                    setResult(RESULT_OK, data);
                    //RESULT_OK爲Activity系統常量,狀態碼爲-1,
                    // 表示此頁面下的內容操作成功將data返回到上一頁面,如果是用back返回過去的則不存在用setResult傳遞data值
                    RegisterActivity.this.finish();
                }
            }
        });
    }
    /**
     * 獲取控件中的字符串
     */
    private void getEditString(){
        userName=et_user_name.getText().toString().trim();
        psw=et_psw.getText().toString().trim();
        pswAgain=et_psw_again.getText().toString().trim();
    }
    /**
     * 從SharedPreferences中讀取輸入的用戶名,判斷SharedPreferences中是否有此用戶名
     */
    private boolean isExistUserName(String userName){
        boolean has_userName=false;
        //mode_private SharedPreferences sp = getSharedPreferences( );
        // "loginInfo", MODE_PRIVATE
        SharedPreferences sp=getSharedPreferences("loginInfo", MODE_PRIVATE);
        //獲取密碼
        String spPsw=sp.getString(userName, "");//傳入用戶名獲取密碼
        //如果密碼不爲空則確實保存過這個用戶名
        if(!TextUtils.isEmpty(spPsw)) {
            has_userName=true;
        }
        return has_userName;
    }
    /**
     * 保存賬號和密碼到SharedPreferences中SharedPreferences
     */
    private void saveRegisterInfo(String userName,String psw){
        String md5Psw = MD5Utils.md5(psw);//把密碼用MD5加密
        //loginInfo表示文件名, mode_private SharedPreferences sp = getSharedPreferences( );
        SharedPreferences sp=getSharedPreferences("loginInfo", MODE_PRIVATE);

        //獲取編輯器, SharedPreferences.Editor  editor -> sp.edit();
        SharedPreferences.Editor editor=sp.edit();
        //以用戶名爲key,密碼爲value保存在SharedPreferences中
        //key,value,如鍵值對,editor.putString(用戶名,密碼);
        editor.putString(userName, md5Psw);
        //提交修改 editor.commit();
        editor.apply();
    }
}

最後是找回密碼界面 activity_lost_find.xml:

<?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:orientation="vertical">

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/colorPrimary"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="忘記密碼"
        android:textSize="30sp"/>
        
  </LinearLayout>
    
  <LinearLayout
    android:layout_marginTop="15dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:paddingTop="2dp"
        android:paddingBottom="2dp"
        android:paddingLeft="6dp"
        android:hint="請輸入忘記密碼的賬號"
        android:singleLine="true"
        android:maxLength="15"
        android:background="#ffffff"
        android:textSize="24sp" />
  </LinearLayout>

</LinearLayout>

找回密碼功能只是新建了一個活動,並未實現功能。

小結:功能未使用內置數據庫SQLite,運用MD5加密算法完成。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章