Android learning notes: Advanced UI component - progress bar class component (progress bar and drag bar SeekBar)

Progress bar class components (progress bar and SeekBar)

  1. Advanced UI components can be divided into four categories:
    (1) . progress bar type components: including progress bar, drag bar and star rating bar.
    (2) . image components: including image view, image switcher and grid view.
    (3) . list class component: including drop-down list box and list view.
    (4) . common components: includes scrolling views and tabs.
  2. Progress bar class component (progress bar)
  • Progress bar: when an application is running, the user cannot see the background effect through the display interface, and does not know whether or not the program is executing and the progress of the program execution. You can use the progress bar to display the progress of the program execution. There are two display forms of progress bar in Android. If you want to display the real-time progress, select the horizontal progress bar; if you only want to display the loading progress, select the circular progress bar.

    In the activity main.xml file, use the ProgressBar tag to define the progress bar.

    You can see that the default is a circular progress bar.
  • Properties:
    • Android: layout [width]: the value is match [content], that is, the same width as the parent container.

    • Android: Layout & height: the value is wrap & content, that is, the height is the content of the package itself.

    • style: set the display form of progress bar. The property value of this property can be set in two ways:

      • Set through theme properties: some theme related properties are provided in the Android SDK. You can change the style of progress bar by referencing these properties. The theme may change with the Android version, and the style of the progress bar may change. The following are the related properties and corresponding progress bar styles of Android 6.0 theme:
      • **Set through the style resources defined by Android: * * here are some common style resources:

        Example:

    • android:max: set the maximum progress system of the progress bar.

    • android:progress: sets the current progress of the progress bar.

  • How to make the progress bar display the real-time progress of the time-consuming program:
    Create a thread in which to cycle through the progress of time-consuming operations and update the progress of the progress bar according to the progress.

    Example:
    First define an id for the progress bar component:

    Then perform the following operations in the Java code:
package com.example.progressbardemo;

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

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    //Step one:
    //Define a progress bar object
    private ProgressBar progressBar;
    //Define an integer variable to record the completion progress
    private int progress=0;
    //Define a handle object for processing messages (Android does not support updating components in the main thread, so it provides a message processing object android.os.Handle)
    private Handler handler;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //Step 2: get the progress bar component
        progressBar=findViewById(R.id.progress);
        //Step 3: use an anonymous inner class to instantiate the handle object to pass messages with the sub thread, and update the progress bar of the UI component
        handler=new Handler(){
          //Override handleMessage()
            @Override
            public void handleMessage(@NonNull Message msg) {
                //Start with step 4: new a thread to simulate a time-consuming program
                //Step 8: judge whether the progress is completed and carry out corresponding operations
                if(msg.what==0x111){
                    //Update progress bar to current completed progress
                    progressBar.setProgress(progress);
                }else{
                    //A message prompt box will pop up to remind the user that the time-consuming operation has been completed
                    Toast.makeText(MainActivity.this,"Time consuming operation completed",Toast.LENGTH_LONG).show();
                    //Use the GONE constant in the View class to set the progress bar component not to be displayed (the progress bar is completed and no longer needed to be displayed)
                    progressBar.setVisibility(View.GONE);
                }
            }
        };
        //Step 4: new a thread to simulate a time-consuming program (basically the same as Java thread creation method)
        new Thread(new Runnable() {
            @Override
            public void run() {
                //Use a dead cycle to continuously get the progress of time-consuming operations
                while(true){
                    //Update the completion progress with the return value of the time-consuming operation doWork(), which is created in step 5
                    progress=doWork();
                    //Step 6: create and instantiate a message object to pass messages with the main thread
                    Message m=new Message();
                    //Step 7: judge whether the current progress is completed and respond accordingly
                    if(progress<100){
                        //Define a message code that represents progress not completed (similar to the status code in HTTP)
                        m.what=0x111;
                        //Send progress incomplete to handle object
                        handler.sendMessage(m);
                    }else{
                        //Define a message code that represents progress is complete
                        m.what=0x110;
                        //Send progress incomplete to handle object
                        handler.sendMessage(m);
                        //If the progress has been completed, there is no need to judge and exit the dead cycle
                        break;
                    }
                }
            }
            //Step 5: create a doWork() to simulate time-consuming operations
            private int doWork(){
               //Change the completion progress, and simulate to add a random number after 200ms progress
               progress+=Math.random()*10;
               //Let the thread sleep for 200ms to simulate the time-consuming operation for 200ms
                try {
                    Thread.sleep(200);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                //Return to the current completed progress
                return progress;
            }
        }).start();//Remember to call start() to start the thread
    }
}

Operation result:
Time consuming operation not completed:

Time consuming operation completed:

3. Progress bar class component (drag bar SeekBar)

  • Drag bar: a subclass of progress bar, which allows users to adjust a certain value by dragging.

    In the activity main.xml file, use the SeekBar label to define the drag bar.
  • attribute
    • Android: layout [width]: the value match [parent], that is, the same as the parent container.
    • Android: Layout & height: the value Wrap & content, that is, wrap its own content.
    • android:max and android:progress: set the maximum and current progress. SeekBar is a subclass of ProgressBar, so properties in the progressbar tag can also be used in the SeekBar tag.
    • android:thumb: change the icon of the drag bar.
      Example:
      Prepare a penguin picture in advance and put it in the mipmap Directory:


      Add android:thumb attribute and assign:
  • Get the changed value when the user drags the drag bar:
    First define an id for the drag bar:

    In the Java file, do the following:
package com.example.seekbardemo;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //Get drag bar
        SeekBar seekBar=findViewById(R.id.seekbar);
        //Set progress change monitor for drag bar
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            //Using this anonymous inner class as a parameter, the following three methods are automatically overridden
            @Override//Method of execution when schedule changes
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                Toast.makeText(MainActivity.this,"Schedule change:"+progress,Toast.LENGTH_SHORT).show();
            }

            @Override//How to start touching
            public void onStartTrackingTouch(SeekBar seekBar) {
                Toast.makeText(MainActivity.this,"Start touching",Toast.LENGTH_SHORT).show();
            }

            @Override//How to stop touching
            public void onStopTrackingTouch(SeekBar seekBar) {
                Toast.makeText(MainActivity.this,"Stop touching",Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Operation result:
At the beginning of running, the button of drag bar stays at the place with the current progress value of 5:

Touch Icon:

Drag Icon:

Stop touch:

Published 27 original articles, won praise 9, visited 5193
Private letter follow

Tags: Android Java xml Attribute

Posted on Wed, 12 Feb 2020 01:33:56 -0500 by scrap0346