1.最后在手機中運行的效果：

?

2.布局原理

利用相對布局RelativeLayout的各種基礎特征

3.元素組件實現原理

3.1頂層標題：yellow_flowers

res\values\style.xml可以修改標題的背景色，默認是綠色。也可修改同級目錄下的color.xml的默認配置顏色。

res\values\string.xml中修改標題名

3.2雪花logo實現

雪花圖標：

利用<TextView>實現.

<TextView>對應代碼為：

<TextViewandroid:layout_marginTop="40dp"android:layout_marginBottom="40dp"android:id="@+id/tv02"android:layout_width="match_parent"android:layout_height="40dp"android:text="Logo"android:textSize="28dp"android:drawableLeft="@drawable/ic_ac_unit_black_48dp"/>

3.3賬號密碼輸入框的實現

賬號與密碼圖標：

利用<EditText>實現

對應代碼：

<EditTextandroid:layout_below="@id/tv02"android:paddingTop="10dp"android:id="@+id/et01"android:layout_width="match_parent"android:layout_height="50dp"android:textSize="20dp"android:textColor="#c6ff00"android:hint="用戶名"android:background="@drawable/bg_btn03"android:paddingLeft="20dp"android:drawableLeft="@drawable/ic_account_box_black_48dp"android:drawablePadding="5dp"android:maxLines="1"/><EditTextandroid:id="@+id/et02"android:layout_below="@+id/et01"android:layout_width="match_parent"android:layout_height="50dp"android:textSize="20dp"android:textColor="#c6ff00"android:hint="密碼"android:inputType="textPassword"android:background="@drawable/bg_btn03"android:layout_marginTop="10dp"android:paddingLeft="20dp"android:drawableLeft="@drawable/ic_vpn_key_black_48dp"android:drawablePadding="5dp"android:maxLines="1"/>

其中background使用了自定義的原型框，對應的bg_btn03.xml代碼如下：

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><!--<solid--><!--android:color="#ffff00"--><!--/>--><strokeandroid:width="2dp"android:color="#4caf50"/><cornersandroid:radius="5dp"/></shape>

3.3登陸按鈕的實現

利用<Button>元素實現：

<Button>對應代碼如下：

<Buttonandroid:id="@+id/btn_login"android:layout_width="match_parent"android:layout_height="40dp"android:layout_below="@+id/et02"android:layout_marginTop="40dp"android:background="@drawable/bg_btn05"android:text="登陸"android:gravity="center"android:textSize="25dp"android:textColor="#e8eaf6"/>

其中background使用了自定義的點擊效果，按下按鈕之后會變成深藍色，放開之后恢復天藍色。對應的bg_btn5.xml代碼如下：

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" ><itemandroid:state_pressed="true"><shape><solid android:color="#1a237e"/><corners android:radius="5dp"/></shape></item><itemandroid:state_pressed="false"><shape><solid android:color="#80d8ff"/><corners android:radius="5dp"/></shape></item></selector>

另外，按鈕在main函數中設置了點擊事件，代碼在后面的java代碼中。

3.4忘記密碼，注冊新用戶

這里是兩個簡單的<TextView>,需要注意的是注冊新用戶的<TextView>需要相對父類視圖向右對其。

對應代碼如下：

<TextViewandroid:layout_margin="20dp"android:id="@+id/tv03"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="忘記密碼？"android:layout_below="@id/btn_login"android:textColor="#80d8ff"/><TextViewandroid:layout_margin="20dp"android:id="@+id/tv04"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="新用戶注冊"android:textColor="#80d8ff"android:layout_below="@id/btn_login"android:layout_alignParentRight="true"/>

4.提示登陸成功消息以及輸入日志的實現

給<Button>設置點擊事件，彈出登陸成功消息。

給<EditView>設置Change事件中的OnChange方法，在日志中打出輸入內容。

具體代碼如下：

package com.example.asus.buttonproject;import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.text.Editable; import android.text.TextWatcher; import android.util.Log; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.Toast;public class MainActivity extends AppCompatActivity {Button mBtn01;EditText mEdt01;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mBtn01 = findViewById(R.id.btn_login);mBtn01.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this,"登陸成功",Toast.LENGTH_SHORT).show();}});mEdt01 = findViewById(R.id.et01);mEdt01.addTextChangedListener(new TextWatcher() {@Overridepublic void beforeTextChanged(CharSequence s, int start, int count, int after) {}@Overridepublic void onTextChanged(CharSequence s, int start, int before, int count) {Log.d("edittext",s.toString());}@Overridepublic void afterTextChanged(Editable s) {}});} }

5.開發者視圖效果

代碼下載地址：點此下載

后續還會不斷完善該軟件的功能，表單信息檢驗，各項元素功能的實現，數據庫數據的連接，如果剛興趣的可以保持關注。

?

?

?

總結

以上是生活随笔為你收集整理的安卓-利用android studio制作简单的QQ登陆login界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。