Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone



ProgressBar (Horizontal) - Android Widgets Example

ProgressBar (Horizontal) - Android Form Widgets เป็น Widget ที่ไว้สำหรับการสร้างปุ่ม ProgressBar แบบ Horizontal (แนวนอน) โดจะแสดงสถานะการทำงาน รวมทั้งตัวเลขเปอร์เซ็นต์ กำลังทำงาน โดยข้อมูลเหล่านี้จะทำควณจากการทำงานจริงในขณะนั้น ๆ ซึ่งขึ้นอยู่กับว่า Progress ในขณะนั้นเกี่ยวกับอะไร และจะนำมาคำนวณเพื่อแสดงผลความคืบหน้าของ Process

ProgressBar (Horizontal) - Android Widgets


แสดสถานะของ ProgressBar แบบ Horizontal แสดงสถานะความคืบหน้า และ เปอร์เซ็นต์

ProgressBar (Horizontal) - Android Widgets

XML Syntax
    <ProgressBar (Horizontal)
        android:id="@+id/progressBar1"
        android:style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


การสร้าง ProgressBar แบบ Loading วงกลม



Example 1 การใช้ ProgressBar แบบ Horizontal ง่าย ๆ แสดงสถานะ 0 - 100%

ProgressBar (Horizontal) - Android Widgets

ออกแบบหน้าจอ GraphicalLayout ด้วย Widget ตามรูป

activity_main.xml (XML Layout)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|center_horizontal|center"
        android:text="Do Work!" />

 
</LinearLayout>


สร้าง XML Layout ประกอบด้วย button1 มี Text ว่า "Do Work!" โดยวัตถุประสงค์คือ เมื่อกดปุ่ม button1 จะแสดง Popup ของ ProgressBar แว้ลสถานะและเปอร์เซ็นต์ที่ทำงานอยู่ในขณะนั้น

MainActivity.java (Java Code)
package com.myapp;

import android.os.Bundle;
import android.os.Handler;
import android.app.Activity;
import android.app.ProgressDialog;
import android.view.View;
import android.widget.Button;

public class MainActivity extends Activity {
	 
		Button btnDoWork;
		ProgressDialog progressBar;
		private int progressBarStatus = 0;
		private Handler progressBarHandler = new Handler();
	 
 
		@Override
		public void onCreate(Bundle savedInstanceState) {
			super.onCreate(savedInstanceState);
			setContentView(R.layout.activity_main);
			
			// button1 Do Work
			btnDoWork = (Button) findViewById(R.id.button1);
			btnDoWork.setOnClickListener(new View.OnClickListener() {
		            public void onClick(View v) { // Start Event onClick
		
		    			progressBar = new ProgressDialog(v.getContext());
						progressBar.setCancelable(true);
						progressBar.setMessage("Working... ...");
						progressBar.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
						progressBar.setProgress(0);
						progressBar.setMax(100);
						progressBar.show();
			 

						progressBarStatus = 0;
			 
								new Thread(new Runnable() {
								  public void run() {
									while (progressBarStatus < 100) {
					 
									  // process some tasks
									  progressBarStatus = DoWork();
					 
										try {
											Thread.sleep(300);
										} catch (InterruptedException e) {
											e.printStackTrace();
										}
						 
									  // Update the progress bar
									  progressBarHandler.post(new Runnable() {
										public void run() {
										  progressBar.setProgress(progressBarStatus);
										}
									  });
									}
							
						  }
					   }).start();
									
					
		            } // End Event onClick
		            
		        });
	 
		}
	 

	 
		// DoWork & Set Status Progress Bar
		public int DoWork() {
			
			// Do some work EG: Save , Download , Insert , ..
			// **** Work
			// **** Work
			// **** Work
			// **** Work
			progressBarStatus++; // Work process and return status
			
			if( progressBarStatus < 100)
			{
				return progressBarStatus;
			}
			
			// When Finish
			try {
				Thread.sleep(1000);
			} catch (InterruptedException e) {
				e.printStackTrace();
			}
			progressBar.dismiss();

			return 100;
	 
		}
	 
	}


คำอธิบาย
จาก Loop ที่เป็น while (progressBarStatus < 100) { คือจะทำงานซ้ำ ๆ จน progressBarStatus = 100

	while (progressBarStatus < 100) {
		// process some tasks
		progressBarStatus = DoWork();
		Thread.sleep(300); // หยุดการทำงานประมาณ 0.3 วินาที
	}

จะเห็นว่าใน Loop ของ while จะมีการดึงค่า progressBarStatus มาจาก Method ของ DoWork เพาะฉะนั้นถ้า progressBarStatus = 100 ก็แสดงว่า Loop นี้ทำงานเสร็จสิ้น

อธิบายเกี่ยวกับ Method ของ DoWork()
ใน Method ของ DoWork() นั้จะเป็นตัวสำคัญที่จะเขียนเงื่อนไขในการทำงาน และการแสดงสถานะของ progressBar และการคำนวณความคืบหน้า
	public int DoWork() {
		
		// Do some work EG: Save , Download , Insert , ..
		// **** Work
		// **** Work
		// **** Work
		// **** Work
		progressBarStatus++; // Work process and return status
		
		if( progressBarStatus < 100)
		{
			return progressBarStatus;
		}
		
		// When Finish
		try {
			Thread.sleep(1000);
		} catch (InterruptedException e) {
			e.printStackTrace();
		}
		progressBar.dismiss();

		return 100;
 
	}


ในตัวอย่างนี้จะเห็นว่าเป็นแค่การ Return ค่า progressBarStatus++ คือจะ Return 1...2...3 จนถึง 100 และเมื่อครบ 100 ก็จะทำการหยุดการทำงานของ progressBar ด้วย progressBar.dismiss();

แต่ในหลัการทำงานจริง ๆ แล้ว เช่นถ้าเรามีรายการ Record ที่จะต้อง Insert ข้อมูล 1000 Record เราอาจจะเขียนเงื่อนไขในการคำนวณว่า กี่ทำไปแล้วกี่ Record และจะให้ส่งค่า progressBarStatus ไปเท่าไหร่

และการทำงานจริงไม่จำเป็นจะต้องใช้ Thread.Sleep() แต่อย่างใด เพระเราจะได้ Process จากการทำงานจริงมาแสดงการทำงานในขณะนั้นจริง ๆ

	public int DoWork() {
		
		int job = 1000;
		int process = job / 100;
		for(i=1;i<=job;i++)
		{
			Call insert data method();

			if(i % process  == 0)
			{
				progressBarStatus = progressBarStatus + 1; // Work process and return status
			}
		}
		
		
		if( progressBarStatus < 100)
		{
			return progressBarStatus;
		}
		
		// When Finish
		try {
			Thread.sleep(1000);
		} catch (InterruptedException e) {
			e.printStackTrace();
		}
		progressBar.dismiss();

		return 100;
 
	}


จากตัวอย่างเมื่อมีการเรียก Call insert data method(); ครบ 10 Record ก็จะส่ง Status ไป +1 กลับไป ซึ่งจะทำงานจนครบ 1000 Record และ Status จะเท่ากับ 100 พอดี


Screenshot

ProgressBar (Horizontal) - Android Widgets

แสดงการทำงาน ProgressBar แบบ (Horizontal)

เพิ่มเติม
progressBar.setProgressStyle(ProgressDialog.STYLE_SPINNER);

ProgressBar (Horizontal) - Android Widgets

STYLE_SPINNER สำหรับ ProgressBar แบบวงกลม โหลดดิ้ง




Example 2 ตัวอย่างการใช้ Progress เพื่อดาวน์โโหลดไฟล์จาก Server และเก็บลงใน SD Card

Android ทำการ Copy ไฟล์ไปยัง SD Card ของ Emulator การเรียกใช้งานไฟล์บน SD Card

สำหรับพื้นฐานของ SD Card สามารถอ่านได้จากบทความนี้

ProgressBar (Horizontal) - Android Widgets

ออกแบบหน้าจอ GraphicalLayout ด้วย Widget ตามรูป


เพิ่มคำสั่งนี้ลงในไฟล์ AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

AndroidManifest.xml
ProgressBar (Horizontal) - Android Widgets

เพิ่มในตำแหน่งดังรูป โดยเพิ่มทั้ง 2 บรรทัด อตัวแรกเป็นการกำหนดสิทธิ์ให้สามารถใช้ Internet ตัวที่สองสิทธิ์ในการเขียนไฟล์ลงใน SD Card


activity_main.xml (XML Layout)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Start Download" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button1"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="61dp"
        android:ems="10"
        android:textSize="12dp"
        android:gravity="center" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="37dp"
        android:gravity="center"
        android:text="Enter URL for Download" />

</RelativeLayout>


ใน XML layout ประกอบด้วย ช่องสำหรับกรอก URL และปุ่ม Button สำหรับ Download


MainActivity.java (Java Code)
package com.myapp;

import java.io.BufferedInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.URL;
import java.net.URLConnection;

import android.os.AsyncTask;
import android.os.Bundle;
import android.app.Activity;
import android.app.Dialog;
import android.app.ProgressDialog;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends Activity {

    public static final int DIALOG_DOWNLOAD_PROGRESS = 0;
    private Button startBtn;
    private ProgressDialog mProgressDialog;
    private String URLDownload;
    private EditText txtURL;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // button1
        startBtn = (Button)findViewById(R.id.button1);
        startBtn.setOnClickListener(new OnClickListener(){
            public void onClick(View v) {
                startDownload();
            }
        });
    }

    private void startDownload() {
        // editText1
        txtURL = (EditText)findViewById(R.id.editText1);
        URLDownload = txtURL.getText().toString();
        new DownloadFileAsync().execute(URLDownload);
    }
    @Override
    protected Dialog onCreateDialog(int id) {
        switch (id) {
        case DIALOG_DOWNLOAD_PROGRESS:
            mProgressDialog = new ProgressDialog(this);
            mProgressDialog.setMessage("Downloading file..");
            mProgressDialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
            mProgressDialog.setCancelable(false);
            mProgressDialog.show();
            return mProgressDialog;
        default:
            return null;
        }
    }

class DownloadFileAsync extends AsyncTask<String, String, String> {

    @Override
    protected void onPreExecute() {
        super.onPreExecute();
        showDialog(DIALOG_DOWNLOAD_PROGRESS);
    }

    @Override
    protected String doInBackground(String... aurl) {
        int count;

    try {

    URL url = new URL(aurl[0]);
    URLConnection conexion = url.openConnection();
    conexion.connect();

    int lenghtOfFile = conexion.getContentLength();
    Log.d("ANDRO_ASYNC", "Lenght of file: " + lenghtOfFile);

    InputStream input = new BufferedInputStream(url.openStream());
    
    // Get File Name from URL
    String fileName = URLDownload.substring( URLDownload.lastIndexOf('/')+1, URLDownload.length() );

    OutputStream output = new FileOutputStream("/sdcard/MyData/"+fileName);
    
    byte data[] = new byte[1024];

    long total = 0;

        while ((count = input.read(data)) != -1) {
            total += count;
            publishProgress(""+(int)((total*100)/lenghtOfFile));
            output.write(data, 0, count);
        }

        output.flush();
        output.close();
        input.close();
    } catch (Exception e) {}
    return null;

    }
    protected void onProgressUpdate(String... progress) {
         Log.d("ANDRO_ASYNC",progress[0]);
         mProgressDialog.setProgress(Integer.parseInt(progress[0]));
    }

    @Override
    protected void onPostExecute(String unused) {
        dismissDialog(DIALOG_DOWNLOAD_PROGRESS);
    }
}
}


จาก Code Java จะเห็นว่ามีการ Save ลงใน FileOutputStream("/sdcard/MyData/"+fileName); ซึ่งเป็นโฟเดอร์ที่อยู่ใน SD Card

ProgressBar (Horizontal) - Android Widgets

เมื่อไปดูใน /sdcard/ จะมีตำแหน่ง Path เป็น /mnt/sdcard/ และถถ้ากำหนดเป็น /sdcard/MyData/ ก็จะได้ Path จริง ๆ เป็น

Code
/mnt/sdcard/MyData


หรือจะเรียกใช้

Code
FileOutputStream("/mnt/sdcard/MyData/"+fileName);


ซึ่งมีค่าเหมือนกัน และการเขียนไฟล์หรือ Copy ไฟล์ลงในโฟเดอร์จะต้องดูในรื่องสิทธิ์ของการเขียนไฟล์และโฟเดอร์ด้วย

Screenshot

ProgressBar (Horizontal) - Android Widgets

เมื่อทดสอบการทำงานก็จะแสดงช่อง TextBox สำหรับกรอก URL ของไฟล์

ProgressBar (Horizontal) - Android Widgets

กรอก URL ของไฟล์ที่ต้องการดาวน์โหลด

ProgressBar (Horizontal) - Android Widgets

กำลังดาวน์โหลด และแสดง ProgressBar สถานะและเปอร์เซ็นต์ จนทำงานเสร็จสิ้น

ProgressBar (Horizontal) - Android Widgets

หลังจากทำงานเสร็จสิ้น เมื่อตรวจสอบที่ /mnt/sdcard/MyData/ ก็จะพบกับไฟล์ที่เราได้ดาวน์โหลดมา






   
Share

Property & Method (Others Related)

Android Form Widgets
TextView - Android Widgets Example
Large Text (TextView) - Android Widgets Example
Medium Text (TextView) - Android Widgets Example
Small Text (TextView) - Android Widgets Example
Button - Android Widgets Example
Small Button (Button) - Android Widgets Example
Toggle Button - Android Widgets Example
Checkbox - Android Widgets Example
RadioButton - Android Widgets Example
Spinner - Android Widgets Example
ProgressBar - Android Widgets Example
ProgressBar (Large) - Android Widgets Example
ProgressBar (Small) - Android Widgets Example
SeekBar - Android Widgets Example
RadioGroup - Android Widgets Example
RatingBar - Android Widgets Example
Switch - Android Widgets Example

ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท


ลองใช้ค้นหาข้อมูล


   


Bookmark.   
       
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2012-07-01 15:57:09 / 2012-08-02 07:29:57
  Download : No files
 Sponsored Links / Related

 
Android Custom Adapter
Rating :

 
Android People Contact List, Name, Phone No, Photo Picture, Email and Address
Rating :

 
Android Rating (Vote) and ListView Part 1
Rating :

 
Android Rating (Vote) and ListView Part 2 (Member Login and Average Rating)
Rating :

 
Android PhoneGap (jQuery Mobile) Create Convert App from Website(URL)
Rating :

 
Android Capture Image and Camera Capture Screenshot (android.view.SurfaceView)
Rating :

 
Android Pull Down to Refresh And Release to Refresh or Update (Part 1)
Rating :

 
Android Pull Down to Refresh And Release to Update (Part 2 , PHP & MySQL)
Rating :


ThaiCreate.Com Forum

Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน Struts การเขียนโปรแกรม Java Struts Framework
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน Yii  Framework การเขียนโปรแกรม ภาษา PHP กับ Yii
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว

สุดยอด Source Code V2.0
 

แจ้งชำระเงิน/โอนเงิน
 

Hit Link
   


Acc : thaicreate@hotmail.com






Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2017 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
for Contact Us : [Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 084-715-5121 อัตราราคา คลิกที่นี่