UI Interface Design

1. Basic Components

1. Text class components

1.1 TextView

Reference Document docs

1.2 EditText (a subclass of the textview component)

Reference Document docs

2. Button class components

2.1 Button, a common button component (a subclass of the textview component)

Reference Document docs

2.1.1 Button Events - Common Listeners

Two ways to add event listeners in AS

2.1.1.1 Event Listener Steps:

1. Setting component ID in XML

2. Create component objects and findViewById (R.id. [string]) initialize

3. Component object calls setOnClickListener(new View.OnClickListener(){

   @override

   ......

   })

4. For example, add the message prompt box Toast.makeText(this, "single button"), Toast.LENGTH_SHORT).show();

2.1.1.2onClick attribute steps:

1. Write a method in Activity that contains parameters of type View
2. android:onClick="Method name of step 1"

2.2 Picture Button ImageButton Component

2.3 RadioButton Component

Reference Document docs

Use nested with tags

2.3.1 Add Selection Change Event

setOnCheckedChangeListener(new RadioGroup)

1. Get RadioGroup Object Call
2. Object calls setOnCheckedChangeListener method
3. Newa RadioGroup.OnCheckedChangeListener listener
4. Override Abstract methods, remark here on anonymous internal classes Detailed Connection
5. Toast Tip Box

2.4 Checkbox CheckBox Component

Reference Document docs

3. Date Time Class Components

Date Picker: Reference Documents

Time Picker - Reference Document

Timer Chronometer - Reference Document

2. Advanced Components

1. Progress Bar Class Component

1.1 ProgressBar

Reference Document docs

Threads - Flowcharts
 Step 1: Determine whether it is completed or not, step 2 or step 3;
Step 2: Call the setProgress() method to update the progress and return to step 1
 Step 3: Call the setVisibility() method to set the progress bar to not show, end

Layout file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/bg"
    tools:context=".MainActivity">
    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:ignore="MissingConstraints"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:max="100"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="30dp" />

</RelativeLayout>

MainActivity.java

package com.ws.progressbardemo;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.view.WindowManager;
import android.widget.ProgressBar;
import android.widget.Toast;

public class MainActivity extends Activity {
    private ProgressBar progressBar;
    private int mProgress=0;
    private Handler mhandler;
    @SuppressLint("HandlerLeak")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);//Set full screen display, cancel status fields such as signal at the top of the phone
        progressBar = findViewById(R.id.progressBar);
        mhandler = new Handler(){
            @Override
            public void handleMessage(@NonNull Message msg) {
                //Processing message operations
                if(msg.what == 0x111){
                    progressBar.setProgress(mProgress);
                }else{
                    Toast.makeText(MainActivity.this, "Time-consuming operation completed", Toast.LENGTH_SHORT).show();
                    progressBar.setVisibility(View.GONE);
                }
            }
        };
        //Create a trip simulation time-consuming operation
        new Thread(new Runnable() {
            @Override
            public void run() {
                while (true){
                    mProgress = doWork();
                    Message m = new Message();
                    if(mProgress<100){
                        m.what = 0x111;//Custom Message Code, //Time-consuming Operation Not Completed
                        mhandler.sendMessage(m);
                    }else{
                        m.what = 0x110;//Time-consuming operation completed
                        mhandler.sendMessage(m);
                        break;
                    }
                }
            }
            private int doWork(){
                mProgress += Math.random()*10;
                try {
                    Thread.sleep(200);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                return mProgress;
            }
        }).start();
    }
}

1.2 SeekBar Drag Bar

Reference Document docs - Yes ProgressBar Subclasses

1.3 RatingBar Rating Comment Bar

Reference Document docs - Yes ProgressBar Subclasses

2. Image Class Components

2.1 ImageView

Reference Document docs

2.2 Image Switcher ImageSwitcher

Reference Document docs

`setInAnimation(Animation inAnimation)`

2.3 Grid View GridView

Reference Document docs

Four adapters:

• ArrayAdapter
• SimpleAdapter
• SimpleCursorAdapter: Database content is presented as a list
• BaseAdapter: Customizable

Note: Creating an adapter is complex

3. List Class Components

3.1 Dropdown List Spinner

Reference Docs

1. Drop-down options can be specified through the android:entries property and XML array resources
2. Specify the adapter setAdapter () method

3.2 List View ListView

1. Add ListView Component
2. Create a LinearLayout layout file and set ImageView and TextView tag parameters
3. Create an adapter under Avtivity to pass parameters
4. Set up the adapter and output the status bar

Main_Activity.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/imageView"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:paddingStart="10dp"
        android:paddingEnd="10dp"
        android:maxWidth="80dp"
        android:maxHeight="80dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:layout_gravity="center"/>

</LinearLayout>

MainActivity.java

package com.ws.listview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.ListIterator;
import java.util.Map;
import java.util.SimpleTimeZone;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        int[] imageid = new int[]{R.drawable.img01,R.drawable.img02,R.drawable.img03,R.drawable.img04,
                R.drawable.img05,R.drawable.img06,R.drawable.img07,R.drawable.img08,
                R.drawable.img09,R.drawable.img10,R.drawable.img11,R.drawable.img12};
        String[] titleid = new String[]{"Wang Yi","Wang Er","Wang San","Wong 4","Wong 5","Wong 6","Wong 7","Wong 8","Wong 9","Wong 10","Wong 11","Wong 12"};
        List<Map<String,Object>> listitem = new ArrayList<>();
        for (int i =0;i<imageid.length;i++){
            Map<String,Object> map = new HashMap<>();
            map.put("image",imageid[i]);
            map.put("title",titleid[i]);
            listitem.add(map);
        }
        SimpleAdapter simpleAdapter = new SimpleAdapter(this,listitem,R.layout.main,
                new String[]{"image","title"},new int[]{R.id.imageView,R.id.textView});
        ListView listView = findViewById(R.id.listView);
        listView.setAdapter(simpleAdapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Map<String,Object> map = (Map<String, Object>) parent.getItemAtPosition(position);
                Toast.makeText(MainActivity.this,  map.get("title").toString(), Toast.LENGTH_LONG).show();
            }
        });

    }
}

3.3 ScrollView/HorizontalScrollView - very common

Vertical reference document docs，Horizontal reference document docs , two ways to add a scrolling view: in XML and in Java code

1. Components are added normally, but be aware that you cannot have multiple subcomponents, so you can use them nested in the Layout Manager
2. In Java code:
   • Create a scroll view object using the construction method ScrollView
   • Applying the addview method to add components to the scrolling view
   • Add Scroll View to Layout Manager

4. Common Components

4.1 Tab

Reference Document docs

1. Add TabHost, TabWidget, and TabContent components to the layout file
2. Write a tab XML layout file
3. Get and initialize the TabHost component
4. weiTabHost Object Add Tab