Android studio implements a simple QQ login interface

QQ is one of the most used software in our daily life, including login interface, chat interface after entering, friend list interface and spatial dynamic interface. The production of login interface is relatively simple. It mainly tests the use of layout and is the first step to realize QQ project. Now the primary work of app development is to realize the login page, so learning the QQ login interface plays a very important role in future software development.

First, in the layout file, select relative layout as the layout of the whole page.

An ImageView control is placed at the top. The width and height are set to 70dp, and the horizontal center is set to true.

Then make the avatar down a little on the whole page, not close to the top, so layout_ Margintop is set to 40dp.

Finally, select the head file in the drawable folder as the avatar. The code is as follows:

	<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"/>

Use the linear layout as the outer layout of the account input box, and the orientation is set to be horizontal.

Placed a textview control, wrap with width and height settings_ Content, which adapts to the content size and displays the text "account".

Next, an EditText control is placed to input the account content and use layout_ The torightof property is located on the right side of the account.

	<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>

The outermost layer is still linear layout, which is placed under the previous linear layout as a whole, and the control arrangement is still horizontal.

Place a textview text display box, the text content is "password", the text color is black, and the text size is 20sp.

Another EditText text input box is placed, and the inputtype is set to textpassword. When entering, the input content will be hidden and replaced by * * *.

 	<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>

A button control is placed under the account password box. The text content is "login" and the text color is blue.

 <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"/>

The variable BTN is declared in mainactivity and bound with the login button just set.

Then click the event listener with the setonclicklistener button, declare the onclick method in the listener, and declare the dialog variable in it, that is, display the dialog box.

Settitle() sets the title of the dialog box as "account or password cannot be empty", seticon() sets the title icon of the dialog box, and setmessage() sets the prompt message of the dialog box as "please enter account and password".

Finally, the "OK" button and "Cancel" button are added. Clicking the button will call the dialog. Dismiss () method to close the dialog box.

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. Run with simulator.

This project is a relatively basic content. I hope beginners can master the interface layout and the use of controls through this project, so as to lay a solid foundation for future project development.

Students who need source learning can pay attention to my WeChat official account. Reply: QQ login interface, you can get source code, and many Android projects are waiting for you to learn. The blog is very specific, and there are detailed comments in the code. If it is helpful to you, remember to praise it.