Android實用筆記——使用ProgressBar實現進度條

時間 2019-11-10

標籤 android 實用筆記使用 progressbar 實現進度欄目 Android 简体版

原文原文鏈接

一、ProgressBar的分類java

能夠精確顯示進度（能夠顯示刻度或者精確百分比）android

不能夠精確顯示精度（一直轉，相似於一個過場動畫）app

二、關鍵屬性和方法ide

指定ProgressBar顯示風格函數

style="?android:attr/progressBarStyleLarge" 大環形進度條佈局

style="?android:attr/progressBarStyleSmall" 小環形進度條動畫

style="?android:attr/progressBarStyleHorizontal" 水平進度條this

ProgressBar的關鍵屬性code

android:max="100" 最大顯示進度xml

android:progress="50" 第一顯示進度

android:secondaryProgress="80" 第二顯示進度

android:indenterminate="true" 設置是否精確顯示（true表示不精確顯示進度，false表示精確顯示進度）

ProgressBar的關鍵方法

setProgress(int) 設置第一進度

setSecondaryProgress(int) 設置第二進度

setProgress() 獲取第一進度

getSecondaryProgress() 獲取第二進度

incrementProgressBy(int) 增長或減小第一進度

incrementSecondaryProgressBy(int) 增長或減小第二進度

getMax() 獲取最大進度

三、標題欄中的ProgressBar

package com.example.myandroidprogressbar;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.Window;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        //一、啓用窗口特徵，啓用帶進度何不帶進度的兩種進度條
        requestWindowFeature(Window.FEATURE_PROGRESS);
        requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);
        
        setContentView(R.layout.activity_main);
        
        //顯示兩種進度條
        setProgressBarVisibility(true);
        setProgressBarIndeterminateVisibility(true);
        //Max=10000
        setProgress(600);
    }
}

四、界面中四種不一樣形式的進度條

修改activity_main.xml文件以下

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />

    <ProgressBar
        android:id="@+id/progressBar2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/progressBar1"
        android:layout_toRightOf="@+id/progressBar1" />
    
    <ProgressBar
        android:id="@+id/progressBar3"
        style="?android:attr/progressBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/horiz"
        android:layout_toRightOf="@+id/progressBar2" />

    <ProgressBar
        android:id="@+id/horiz"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/progressBar1"
        android:layout_below="@+id/progressBar1"
        android:max="100"
        android:progress="50"
        android:secondaryProgress="80" />
      
</RelativeLayout>

五、經過按鈕改變進度條的數值並動態改變

修改activity_main.xml文件

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <ProgressBar
        android:id="@+id/horiz"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="50"
        android:secondaryProgress="80" />
    
    <Button
        android:id="@+id/add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/horiz"
        android:layout_below="@+id/horiz"
        android:text="@string/add" />

    <Button
        android:id="@+id/reduce"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/add"
        android:layout_below="@+id/add"
        android:text="@string/reduce" />

    <Button
        android:id="@+id/reset"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/reduce"
        android:layout_below="@+id/reduce"
        android:text="@string/reset" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/reset"
        android:layout_alignRight="@+id/horiz"
        android:layout_below="@+id/reset"
        android:layout_marginTop="16dp" />


</RelativeLayout>

修改MainActivity.java文件

package com.example.myandroidprogressbar;

import android.os.Bundle;
import android.R.integer;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;

public class MainActivity extends Activity implements OnClickListener{
	//一、聲明部分控件
	private ProgressBar progress;
	private Button add;
	private Button reduce;
	private Button reset;
	private TextView text;	
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);        
        
        setContentView(R.layout.activity_main);

        //二、初始化控件
        init();
    }

	private void init() {
		// TODO Auto-generated method stub
		//三、綁定
		progress=(ProgressBar) findViewById(R.id.horiz);
		add=(Button) findViewById(R.id.add);
		reduce=(Button) findViewById(R.id.reduce);
		reset=(Button) findViewById(R.id.reset);
		text=(TextView) findViewById(R.id.text);
		
		//四、獲取各進度條進度
		//獲取第一進度條的進度
		//int first=progress.getProgress();
		//湖區第二進度條的進度
		//int second=progress.getSecondaryProgress();
		//獲取進度條的最大進度
		//int max=progress.getMax();
		//五、將數據顯示到textView中
		//text.setText("第一進度的百分比："+(int)(first/(float)max*100)+
				//"% 第二進度的百分比："+(int)(second/(float)max*100)+"%");
		add.setOnClickListener(this);
		reduce.setOnClickListener(this);
		reset.setOnClickListener(this);
	}

	//六、設置按鈕點擊響應事件，改變進度條數據
	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		switch(v.getId()){
		case R.id.add:
			//增長第一進度和第二進度10個刻度
			progress.incrementProgressBy(10);
			progress.incrementSecondaryProgressBy(10);
			break;
			
		case R.id.reduce:
			//減小第一進度和第二進度10個刻度
			progress.incrementProgressBy(-10);
			progress.incrementSecondaryProgressBy(-10);
			break;
			
		case R.id.reset:
			//重置
			progress.setProgress(50);
			progress.setSecondaryProgress(80);		
			break;
			
		}
		//七、由於每一次點擊都會調用onClick這個函數，而且必定會執行switch這個判斷。
		//因此不必在每個分支中刷新textView的內容，只須要在switch分支外面寫就行了，
		//以前的向textView中寫入數據的應該註釋掉
		text.setText("第一進度的百分比："+(int)(progress.getProgress()/(float)progress.getMax()*100)+
				"% 第二進度的百分比："+(int)(progress.getSecondaryProgress()/(float)progress.getMax()*100)+"%");
	}
}

六、對話框形式的進度條（ProgressDialog）

修改activity_main.xml文件

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="86dp"
        android:text="顯示進度條對話框" />

</RelativeLayout>

修改MainActivity.java文件

package com.example.myandroidprogressdialog;

import android.os.Bundle;
import android.app.Activity;
import android.app.Dialog;
import android.app.ProgressDialog;
import android.content.DialogInterface;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener{
	//一、聲明progressDialog的對象以及按鈕
	private ProgressDialog prodialog;
	private Button show;
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        init();
    }

	private void init() {
		// TODO Auto-generated method stub
		//二、綁定
		show=(Button) findViewById(R.id.show);
		//三、設置監聽器
		show.setOnClickListener(this);
	}

	@Override
	public void onClick(View arg0) {
		// TODO Auto-generated method stub
		//四、設置頁面顯示風格
		//新建progressDialog對象
		prodialog=new ProgressDialog(MainActivity.this);
		//給對話框設置顯示風格
		prodialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
		//設置標題
		prodialog.setTitle("哈哈哈");
		//設置對話框裏的而文字信息
		prodialog.setMessage("我好聰明啊");
		//設置圖標
		prodialog.setIcon(R.drawable.ic_launcher);
		
		//五、設定關於progressBar的一些屬性
		//設定最大進度
		prodialog.setMax(100);
		//設定初始化進度
		prodialog.incrementProgressBy(50);
		//進度條是明確顯示進度的
		prodialog.setIndeterminate(false);
		
		//六、設定一個肯定按鈕
		prodialog.setButton(DialogInterface.BUTTON_POSITIVE, "肯定", new DialogInterface.OnClickListener() {
			
			@Override
			public void onClick(DialogInterface dialog, int which) {
				// TODO Auto-generated method stub
				Toast.makeText(MainActivity.this,"快點愛上我", Toast.LENGTH_SHORT);
			}
		});
		
		//七、是否能夠經過返回按鈕退出對話框
		prodialog.setCancelable(true);
		
		//八、顯示progressDialog
		prodialog.show();
	}
    
}

、

七、自定義ProgressBar的樣式

首先咱們須要知道系統預約義的水平進度條的樣式是如何加載的。這樣咱們須要回到activity_main.xml文件中來。

咱們注意到下面一行代碼：

style="?android:attr/progressBarStyleHorizontal"

事實上，他真正的加載文件位於

style="@android:style/Widget.ProgressBar.Horizontal"

咱們經過ctrl+鼠標左鍵點擊引號中的位置，就能夠看到系統自帶的橫向進度條的樣式

<style name="Widget.ProgressBar.Horizontal">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
        <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
        <item name="android:minHeight">20dip</item>
        <item name="android:maxHeight">20dip</item>
        <item name="android:mirrorForRtl">true</item>
    </style>

其中的android:progressDrawable能夠去加載一個本身自定義的佈局樣式的一個文件。咱們一樣用ctrl+鼠標左鍵打開這裏的樣式文件，看看系統是如何設定的

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--背景  -->
    <item android:id="@android:id/background">
        <shape>
            <!--圓角  -->
            <corners android:radius="5dip" />
            <!--漸變色  -->
            <gradient
                    <!--起始顏色  -->
                    android:startColor="#ff9d9e9d"
                    <!--中間顏色  -->
                    android:centerColor="#ff5a5d5a"
                    android:centerY="0.75"
                    <!--終止顏色  -->
                    android:endColor="#ff747674"
                    android:angle="270"
            />
        </shape>
    </item>
    
    <!--第二進度條  -->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#80ffd300"
                        android:centerColor="#80ffb600"
                        android:centerY="0.75"
                        android:endColor="#a0ffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    
    <!--第一進度條  -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#ffffd300"
                        android:centerColor="#ffffb600"
                        android:centerY="0.75"
                        android:endColor="#ffffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    
</layer-list>

不難發現，咱們能夠本身對他的顏色進行修改，以達到自定義的目的。這裏我簡單把顏色修改了一下

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--背景  -->
    <item android:id="@android:id/background">
        <shape>
            <!--圓角  -->
            <corners android:radius="5dip" />
            <!--漸變色  -->
            <gradient
                    <!--起始顏色  -->
                    android:startColor="#B9A4FF"
                    <!--中間顏色  -->
                    android:centerColor="#C6B7FF"
                    android:centerY="0.75"
                    <!--終止顏色  -->
                    android:endColor="#C3B2FF"
                    android:angle="270"
            />
        </shape>
    </item>
    
    <!--第二進度條  -->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#57E8FF"
                        android:centerColor="#74EBFF"
                        android:centerY="0.75"
                        android:endColor="#8EEFFF"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    
    <!--第一進度條  -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#ffffd300"
                        android:centerColor="#ffffb600"
                        android:centerY="0.75"
                        android:endColor="#ffffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>
    
</layer-list>

運行便可獲得自定義進度條的結果，可自行與本文以前的截圖對比，能夠看到很明顯的差異，儘管顏色醜了點。

但願你們能以小見大，作一些更有意思的嘗試。