一、專案概述

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("取消",int which) {
                dialog.dismiss();               //關閉對話方塊
              }
            });
        dialog = builder.create();
        dialog.show();
      }
    });
  }
}

四、專案效果

1、用模擬器執行。

2、輸入賬號不輸入密碼，點選登入按鈕會顯示提醒對話方塊。

3、輸入賬號和密碼。

五、專案總結

本次專案屬於比較基礎的內容，希望初學者通過這次專案熟練掌握介面佈局和控制元件的使用，為以後的專案開發打下堅實的基礎。

本次專案檔案的原始碼連結如下：QQ_jb51.rar

到此這篇關於Android Studio實現簡單的QQ登入介面的示例程式碼的文章就介紹到這了,更多相關Android Studio QQ登入介面內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！