• Uncategorized
  • 0

[Android] Interface layout design & event monitoring processing

Hits: 0

*Experiment 2 Basic interface design*

*1. The purpose of the experiment*

  1. Master the basic design principles of Activity interface;

  2. Proficient in using various common controls and layouts;

  3. Master the event handling mechanism of the control.

*2. Experimental tasks*

  1. Design the interface according to the prototype diagram;

  2. Realize the processing of various events.

*3. Experiment content and requirements*

*3.1 Interface Design*

(1) Use linear layout or relative layout to achieve the basic layout effect of the login interface;

(2) Use the edit box to design the user name and password boxes;

(3) Use button components to design login and cancel buttons

*3.2 Event Handling*

(1) Monitor the click event of the login button;

(2) Obtain the user name and password entered by the user, and compare whether the user name and password are correct

Fourth, the experimental process and code

activity_main.xml layout

Change the original layout style to RelativeLayout relative layout style

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="myapplication_test.MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</RelativeLayout>

All image resources are placed in the drawable folder under the res(resource) directory and add the main background for the application interface

<RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="myapplication_test.MainActivity"
>

Add the components required for the login interface (the text box can realize the text input function on the application, the button component can realize the click trigger event, and then realize the page jump and other functions. You can directly drag it from the component bar on the upper left to the display window on the right Release in the middle to complete the addition of components , and then make detailed adjustments through code

Run the app and make code adjustments (using model: Nexus 5X API 26)

The final modified code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="myapplication_test.MainActivity"
    android:background="@drawable/main_page">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="157dp"
        android:layout_marginLeft="157dp"
        android:layout_marginTop="100dp"
        android:textColor="@android:color/white"
        android:textSize="24dp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <TextView
        android:id="@+id/textview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="50dp"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="180dp"
        android:textColor="@android:color/white"
        android:textSize="20dp"/>
    <TextView
        android:id="@+id/textview2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="50dp"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="220dp"
        android:textColor="@android:color/white"
        android:textSize="20dp" />
    <EditText
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginTop="172dp"
        android:layout_marginEnd="62dp"
        android:layout_marginRight="62dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text=""
        android:textColorHint="@android:color/white"/>
    <EditText
        android:id="@+id/pwd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginTop="212dp"
        android:layout_marginEnd="62dp"
        android:layout_marginRight="62dp"
        android:ems="10"
        android:inputType="textPassword"
        android:text=""
        android:textColorHint="@android:color/white"/>
    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="101dp"
        android:layout_marginLeft="101dp"
        android:layout_marginBottom="290dp"
        android:text =android:textColor"Register"
        ="@android:color/white"
        android:textSize="18dp" />
    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="96dp"
        android:layout_marginRight="96dp"
        android:layout_marginBottom="290dp"
        android:textColor="@android:color/white"
        android:textSize="18dp" />
    <Button
        android:id="@+id/login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="65dp"
        android:layout_marginLeft="65dp"
        android:layout_marginBottom="86dp"
        android:backgroundTint="@android:color/holo_green_light"/>
    <Button
        android:id="@+id/back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="65dp"
        android:layout_marginRight="65dp"
        android:layout_marginBottom="86dp"
        android:backgroundTint="@android:color/holo_red_light"/>
</RelativeLayout>

Log in, log out, jump and other functions run display

Relevant Java code rendering

package com.example.myapplication;
import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import com.example.myapplication_test.R;

public class MainActivity extends AppCompatActivity {


    // Get the component EditText username,pwd in xml ; // Get the object of the text editing component 
    Button login,back;      // Get the object of the button component 
    // Click the return button twice within 2 seconds to exit 
    long exittime; // Setting Exit time interval 
    public  boolean  onKeyDown ( int keyCode, KeyEvent event) { //Parameters: key pressed; key event 
        // Judging event trigger 
        if (keyCode == KeyEvent.KEYCODE_BACK){
             // Judging the interval between two clicks 
            if (( System.currentTimeMillis()-exittime)> 2000 ){
                Toast.makeText(MainActivity.this , "Return to program exit again!" , Toast.LENGTH_SHORT ).show();
                exittime = System.currentTimeMillis(); // set the first click time 
            } else {
                 //finish(); 
                System.exit( 0 );
            }
            return true;
        }
        return super.onKeyDown(keyCode,event);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // create component object by component id
        username = findViewById(R.id.username);
        pwd = findViewById(R.id.pwd);
        login = findViewById(R.id.login);
        back = findViewById(R.id.back);
        // Add a listener event for the login button to achieve login 
        login.setOnClickListener( new View.OnClickListener() {
             @Override 
            public  void  onClick (View v)  {
                 // Assume the username is admin and the password is 123 
                if (username.getText(). toString().equals( "admin" )&&pwd.getText().toString().equals( "123456" )){
                     // Username and password are correct, successful login 
                    Toast.makeText(MainActivity. this , "Login successful! " ,Toast.LENGTH_SHORT).show();
                     // Implement page jump 
                    Intent intent = new Intent();
                    intent.setClass(MainActivity. this ,MyToolActivity.class);
                     // Store the current user name for tool interface display information 
                    intent.putExtra( "username" ,username.getText().toString());
                    startActivity(intent);
                } else  if (username.getText().toString().equals( "" )||pwd.getText().toString().equals( "" )){
                     // username and password cannot be empty 
                    Toast.makeText (MainActivity. this , "Username/password cannot be empty!" ,Toast.LENGTH_SHORT).show();
                } else {
                     // Incorrect username and password 
                    Toast.makeText(MainActivity.this , "Login failed, wrong password or username!" , Toast.LENGTH_SHORT ).show();
                }
            }
        });

        // Add a listener event for the exit button to achieve exit---use the pop-up prompt to confirm the exit 
        back.setOnClickListener( new View.OnClickListener() {
             @Override 
            public  void  onClick (View v)  {
                 // 1. Create a pop-up object, Display on the current page 
                AlertDialog.Builder ab = new AlertDialog.Builder(MainActivity. this );
                 // 2. Edit the popup style 
                // 2.1 Create the title 
                ab.setTitle( "Alert" );
                 // 2.3 Set the icon
                ab.setIcon(R.mipmap.ic_launcher_round);
                // 2.4 Set the content 
                ab.setMessage( "Are you sure you want to exit?" );
                 // 2.5 Set the button 
                ab.setPositiveButton( "Cancel" , null );
                ab.setNeutralButton( "OK" , new DialogInterface.OnClickListener() {
                     @Override 
                    public  void  onClick (DialogInterface dialog, int which)  {
                         // Implement the program exit and end the current 
                        MainActivity. this .finish();
                    }
                });
                // 3. Create a popup
                ab.create();
                // 4. Display the popup
                ab.show();
            }
        });
    }
}

5. Experimental experience

Through this experiment, I have a deeper understanding of linear layout and relative layout, and I can make a simple user account password login interface, and then improve the interface by fine-tuning the code. In addition, I also have a practical experience of monitoring the single event of the button.

You may also like...

Leave a Reply

Your email address will not be published.