Android Studio實現簡單的QQ登錄界面

一、項目概述

QQ是我們日常生活使用最多的軟件之一，包含登錄界面和進入後的聊天界面、好友列表界面和空間動態界面等。登錄界面的製作比較簡單，主要考驗佈局的使用，是實現QQ項目的第一步。現在APP開發的首要工作都是實現登錄頁面，所以學會了QQ登錄界面對以後的軟件開發有着很重要的作用。

二、開發環境

三、詳細設計

1、頭像設計

首先在layout文件裏面選擇了RelativeLayout（相對佈局）作爲整個頁面的佈局。

在頂端放置了一個ImageView控件，寬度和高度設置的都是70dp，水平居中設置爲true。

然後使頭像在整個頁面下調一點，不要緊貼着頂端，所以layout_marginTop設置爲40dp。

最後選擇drawable文件夾中的head文件作爲頭像。代碼如下：

	<ImageView
        android:id='@+id/iv'
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:background="@drawable/head"/>

2、賬號輸入框

利用LinearLayout（線性佈局）作爲賬號輸入框的外層佈局，orientation設置的爲水平排列。

放置了一個TextView控件，寬度和高度設置的wrap_content，即適應內容大小，顯示文本“賬號”。

緊接着放置一個EditText控件，用於輸入賬號內容，使用layout_toRightOf屬性定位於賬號的右側。

	<LinearLayout
        android:id="@+id/number_11"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/iv"
        android:layout_centerVertical="true"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="15dp"
        android:background="#ffffff"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_number"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="賬號:"
            android:textColor="#000"
            android:textSize="20sp" />

        <EditText
            android:id="@+id/et_number"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/tv_number"
            android:layout_marginLeft="5dp"
            android:background="@null"
            android:inputType="text"
            android:padding="10dp" />
    </LinearLayout>

3、密碼輸入框

最外層依舊是LinearLayout（線性佈局），整體放置在上一個LinearLayout的下面，控件排列依然爲horizontal（水平）。

放置一個TextView文本顯示框，文本內容是“密碼”，文本顏色爲黑色，文本大小爲20sp。

再放置一個EditText文本輸入框，inputType設置爲textPassword，輸入時候會隱藏輸入內容，使用*** 代替。

 	<LinearLayout
        android:id="@+id/password_11"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/number_11"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="#ffffff"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv_password"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="密碼:"
            android:textColor="#000"
            android:textSize="20sp" />
        <EditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_toRightOf="@id/tv_password"
            android:background="@null"
            android:inputType="textPassword"
            android:padding="10dp"/>
    </LinearLayout>

4、登錄按鈕

在賬號密碼框下方放置一個Button控件，文本內容爲“登錄”，文本顏色爲藍色。

 <Button
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="38dp"
        android:background="#3C8DC4"
        android:text="登錄"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:layout_below="@+id/password_11"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"/>

5、按鈕點擊事件

在MainActivity裏面先聲明瞭btn這個變量，並與剛剛設置的登錄按鈕進行綁定。

然後使用了setOnClickListener按鈕點擊事件監聽器，在監聽器裏面聲明瞭onClick方法，在裏面聲明瞭dialog變量，即顯示對話框。

setTitle（ ）設置了對話框的標題爲“賬號或密碼不能爲空”，setIcon（ ）設置了對話框標題圖標，setMessage( )設置對話框的提示信息爲"請輸入賬號和密碼" 。

最後添加了"確定"按鈕和“取消”按鈕，點擊按鈕都會調用dialog.dismiss()方法關閉對話框。

public class MainActivity extends AppCompatActivity {
    public Button btn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn = (Button) findViewById(R.id.btn_login);//綁定登錄按鈕
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                android.app.AlertDialog dialog;
                android.app.AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this)
                        .setTitle("賬號或密碼不能爲空")                 //設置對話框的標題
                        .setIcon(R.mipmap.ic_launcher)               //設置對話框標題圖標
                        .setMessage("請輸入賬號和密碼")                //設置對話框的提示信息
                        //添加"確定"按鈕
                        .setPositiveButton("確定", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                dialog.dismiss();                             //關閉對話框
                                MainActivity.this.finish();                   //關閉MainActivity
                            }
                        })
                        //添加“取消”按鈕
                        .setNegativeButton("取消", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                dialog.dismiss();                             //關閉對話框
                            }
                        });
                dialog = builder.create();
                dialog.show();
            }
        });
    }
}

四、項目效果

1、用模擬器運行。

2、輸入賬號不輸入密碼，點擊登錄按鈕會顯示提醒對話框。

3、輸入賬號和密碼。

五、項目總結

本次項目屬於比較基礎的內容，希望初學者通過這次項目熟練掌握界面佈局和控件的使用，爲以後的項目開發打下堅實的基礎。本次項目文件的百度網盤鏈接如下：百度網盤鏈接 提取碼：x3mp

拋棄時間的人，時間也拋棄他。————莎士比亞