失眠网 > 【Android Studio】简单的QQ登录界面

【Android Studio】简单的QQ登录界面

时间：2022-12-11 16:14:42

文章目录

1、头像设计2、账号输入框4、复选框5、登录按钮6、设置点击事件7、总体效果：源码：github源码地址：

注：实验环境 Android studio .2.1

1、头像设计

首先在layout文件里面选择了RelativeLayout（相对布局）作为整个页面的布局。用下面的属性设置布局中子元素的排列方式为垂直排列；

android:orientation="vertical"

在顶端放置了一个ImageView控件，id设为“iv”，宽度和高度设置的都是70dp。设置为水平居中；

android:layout_centerHorizontal="true"

然后使头像在整个页面下调一点，不要紧贴着顶端，所以layout_marginTop设置为40dp。

最后选择drawable文件夹中的head文件作为头像。

2、账号输入框

利用LinearLayout（线性布局）作为账号输入框的外层布局，orientation设置的为水平排列。放置了一个TextView控件，宽度和高度设置的wrap_content，即适应内容大小，显示文本“账号”。紧接着放置一个EditText控件，用于输入账号内容，使用layout_toRightOf属性定位于账号的右侧。使用android:layout_marginLeft="5dp"和android:padding="10dp"进行微调，margin是外边距，padding是内边距。

3、密码输入框最外层依旧是LinearLayout（线性布局），整体放置在上一个LinearLayout的下面，控件排列依然为horizontal（水平）。放置一个TextView文本显示框，文本内容是“密码”，文本颜色为黑色，文本大小为20sp。

android:background="@null"去除了输入框的背景横线。再放置一个EditText文本输入框，inputType设置为textPassword，输入时候会隐藏输入内容，使用*** 代替。

4、复选框

在文本框和输入框下面，放置两个复选框，用来显示“自动登录”和"记住密码"这两个选项。另外还有TextView文本显示框，内容为找回密码。

5、登录按钮

最下面放置一个Button控件，文本内容为“登录”，文本颜色为蓝色，就是用来登录的。

6、设置点击事件

对登录按钮设置了setOnClickListener，即点击事件监听器。在监听器里面重写了onClick方法，首先获取到输入框中的账号和密码AlertDialog dialog;声明一个对话框对象。

AlertDialog.Builder builder=new AlertDialog.Builder(MainActivity.this)初始化该对象。

.setTitle("账号或密码错误")设置了对话框的标题为。

.setIcon(R.mipmap.ic_launcher)设置了对话框图标.

.setMessage("请输入正确的账号和密码")设置了对话框的提示信息。

（由于这里没有设置登录之后的页面，所以这里将做输入的信息都视作账号或密码错误）

7、总体效果：

源码：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/bg"android:orientation="vertical"><ImageViewandroid:id='@+id/iv'android:layout_width="70dp"android:layout_height="70dp"android:layout_centerHorizontal="true"android:layout_marginTop="40dp"android:background="@drawable/head" /><LinearLayoutandroid: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"><TextViewandroid: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" /><EditTextandroid: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:textCursorDrawable="@drawable/cursor"android:padding="10dp" /></LinearLayout><LinearLayoutandroid: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"><TextViewandroid: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" /><EditTextandroid: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:textCursorDrawable="@drawable/cursor"android:padding="10dp"/></LinearLayout><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="230dp"><CheckBoxandroid:id="@+id/checkBox2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="@color/colorAccent"android:buttonTint="@color/colorAccent"android:text="自动登录" /><CheckBoxandroid:id="@+id/checkBox3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="150dp"android:textColor="@color/colorAccent"android:buttonTint="@color/colorAccent"android:text="记住密码" /><TextViewandroid:id="@+id/tv_register"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:layout_marginRight="20dp"android:layout_marginTop="5dp"android:text="找回密码"android:textColor="#FFFFFFFF" /></RelativeLayout><Buttonandroid:id="@+id/btn_login"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@+id/password_11"android:layout_alignParentStart="true"android:layout_alignParentLeft="true"android:layout_marginTop="38dp"android:background="#3C8DC4"android:text="登录"android:textColor="#ffffff"android:textSize="20sp" /><TextViewandroid:id="@+id/textView7"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="360dp"android:layout_marginLeft="15dp"android:text="注册账号"android:textColor="#ffffff"/><CheckBoxandroid:id="@+id/checkBox4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="600dp"android:layout_marginLeft="100dp"android:buttonTint="@color/colorAccent"android:text="我已阅读并同意《隐私政策》"android:textColor="@color/colorAccent" /></RelativeLayout>

MainActivity.java

package zj.dzh.qq;import androidx.appcompat.app.AppCompatActivity;import android.app.AlertDialog;import android.content.DialogInterface;import android.os.Bundle;import android.view.View;import android.widget.Button;public class MainActivity extends AppCompatActivity {public Button btn;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);btn = (Button) findViewById(R.id.btn_login);//绑定登录按钮btn.setOnClickListener(new View.OnClickListener() {@Overridepublic 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() {@Overridepublic void onClick(DialogInterface dialog, int which) {dialog.dismiss(); //关闭对话框MainActivity.this.finish(); //关闭MainActivity}})//添加“取消”按钮.setNegativeButton("取消", new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, int which) {dialog.dismiss(); //关闭对话框}});dialog = builder.create();dialog.show();}});}}