برنامج ProgressBar التعليمي مع مثال في Android Studio
في Android ، يتم استخدام ProgressBar لعرض حالة العمل الذي يتم إجراؤه مثل تحليل حالة العمل أو تنزيل ملف وما إلى ذلك. في Android ، بشكل افتراضي ، سيتم عرض شريط التقدم كعجلة دوارة ولكن إذا أردنا عرضه على أنه ثم نحتاج إلى استخدام سمة النمط على أنها أفقية. وهي تستخدم أساسًا فئة "android.widget.ProgressBar" .

لإضافة شريط تقدم إلى ملف تخطيط ( xml ) ، يمكنك استخدام عنصر < ProgressBar >. بشكل افتراضي ، يكون شريط التقدم عبارة عن عجلة دوارة (مؤشر غير محدد). للتغيير إلى شريط تقدم أفقي ، قم بتطبيق النمط الأفقي لشريط التقدم.
كود ProgressBar:
<ProgressBar android:id="@+id/simpleProgressBar" android:layout_width="wrap_content" android:layout_height="wrap_content" />
كود التقدم الأفقي Horizontal ProgressBar :
<ProgressBar android:id="@+id/simpleProgressBar" android:layout_width="fill_parent" android:layout_height="wrap_content" style="@style/Widget.AppCompat.ProgressBar.Horizontal"/>
جدول المحتويات
الطرق والدوال الهامة المستخدمة في شريط التقدم ProgressBar :
1. getMax () - تُرجع القيمة القصوى لشريط التقدم
يمكننا الحصول على الحد الأقصى لقيمة شريط التقدم في فئة جافا . هذه الطريقة ترجع قيمة عدد صحيح. يوجد أدناه الرمز للحصول على أقصى قيمة من شريط التقدم.
ProgressBar simpleProgressBar=(ProgressBar) findViewById(R.id.simpleProgressBar); // initiate the progress bar int maxValue=simpleProgressBar.getMax(); // get maximum value of the progress bar
2. getProgress () - إرجاع قيمة التقدم الحالية
يمكننا الحصول على قيمة التقدم الحالية من شريط التقدم في فئة جافا . ترجع هذه الطريقة أيضًا قيمة عدد صحيح. يوجد أدناه رمز للحصول على قيمة التقدم الحالية من شريط التقدم.
ProgressBar simpleProgressBar=(ProgressBar)findViewById(R.id.simpleProgressBar); // initiate the progress bar int progressValue=simpleProgressBar.getProgress(); // get progress value from the progress bar
سمات وخصائص ProgressBar في Android:
الآن دعنا نناقش السمات المهمة التي تساعدنا في تكوين شريط التقدم في ملف xml (التخطيط).
1. id: id هي سمة تُستخدم لتعريف شريط التقدم بشكل فريد.
<ProgressBar android:id="@+id/simpleProgressBar" android:layout_width="fill_parent" android:layout_height="wrap_content" style="@style/Widget.AppCompat.ProgressBar.Horizontal"/>
2. max: max هي سمة مستخدمة في android لتحديد القيمة القصوى التي يمكن أن يستغرقها التقدم. يجب أن تكون قيمة عددية مثل 100 ، 200 وما إلى ذلك.
أدناه قمنا بتعيين 100 قيمة قصوى لشريط التقدم.
<ProgressBar android:id="@+id/simpleProgressBar" android:layout_width="fill_parent" android:layout_height="wrap_content" style="@style/Widget.AppCompat.ProgressBar.Horizontal" android:max="100" /><!--set 100 maximum value for the progress bar-->
قم بتعيين الحد الأقصى لقيمة ProgressBar في فئة Java:
ProgressBar simpleProgressBar=(ProgressBar) findViewById(R.id.simpleProgressBar); // initiate the progress bar simpleProgressBar.setMax(100); // 100 maximum value for the progress bar

أدناه قمنا بتعيين القيمة القصوى 100 ثم قمنا بتعيين 50 تقدمًا افتراضيًا.
<ProgressBar android:id="@+id/simpleProgressBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:max="100" style="@style/Widget.AppCompat.ProgressBar.Horizontal" android:progress="50"/><!--// 50 default progress value-->

ProgressBar simpleProgressBar=(ProgressBar)findViewById(R.id.simpleProgressBar); // initiate the progress bar simpleProgressBar.setMax(100); // 100 maximum value for the progress value simpleProgressBar.setProgress(50); // 50 default progress value for the progress bar
4. ProgressDrawable : يُعد التقدم القابل للرسم سمة مستخدمة في Android لتعيين الرسم المخصص لوضع التقدم.
أدناه قمنا بتعيين تدرج مخصص قابل للرسم لوضع التقدم لشريط التقدم. قبل أن تجرب الرمز أدناه ، تأكد من تنزيل رمز تقدم من الويب وإضافته في مجلدك القابل للرسم.
الخطوة 1: أضف هذا الرمز في activity_main. xml أو main.xml داخل التخطيط.
<ProgressBar android:id="@+id/simpleProgressBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:max="100" android:progress="60" android:layout_marginTop="100dp" style="@style/Widget.AppCompat.ProgressBar.Horizontal" android:progressDrawable="@drawable/custom_progress"/><!--custom progress drawable for progress mode-->
الخطوة 2: قم بإنشاء مورد قابل للرسم xml جديد في مجلد قابل للرسم وقم بتسميته custom_progress. أضف هنا الكود أدناه الذي ينشئ تأثير التدرج في شريط التقدم .
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape> <gradient android:endColor="#fff" android:startColor="#1f1" android:useLevel="true" /> </shape> </item> </layer-list>

أدناه قمنا بتعيين اللون الأسود لخلفية شريط التقدم.
<ProgressBar android:id="@+id/simpleProgressBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:max="100" android:progress="50" style="@style/Widget.AppCompat.ProgressBar.Horizontal" android:background="#000"/><!-- black background color for progress bar-->

في الكود أدناه قمنا بتعيين غير المحدد على صحيح.
<ProgressBar android:id="@+id/simpleProgressBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:max="100" android:progress="50" android:background="#000" android:padding="20dp" style="@style/Widget.AppCompat.ProgressBar.Horizontal" android:indeterminate="true"/><!--true value for indeterminate-->

ProgressBar simpleProgressBar=(ProgressBar)findViewById(R.id.simpleProgressBar); // initiate the progress bar simpleProgressBar.setBackgroundColor(Color.BLACK); // black background color for the progress bar
7. padding : يتم استخدام خاصية padding لتعيين المساحة المتروكة من اليسار أو اليمين أو أعلى أو أسفل شريط التقدم.
- padding إلى اليمين : اضبط المساحة المتروكة من الجانب الأيمن من شريط التقدم .
- المساحة المتروكة إلى اليسار : اضبط المساحة المتروكة من الجانب الأيسر لشريط التقدم .
- paddingTop: اضبط المساحة المتروكة من الجانب العلوي لشريط التقدم .
- paddingBottom: اضبط المساحة المتروكة من الجانب السفلي لشريط التقدم .
- الحشوة : اضبط المساحة المتروكة من جميع جوانب شريط التقدم .
أدناه قمنا بتعيين حشوة 20dp من جميع جوانب شريط التقدم.
<ProgressBar android:id="@+id/simpleProgressBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:max="100" android:progress="50" android:background="#000" style="@style/Widget.AppCompat.ProgressBar.Horizontal" android:padding="20dp"/><!--// 20dp padding from all the sides of the progress bar-->

مثال على ProgressBar في Android Studio:
في المثال الأول من ProgressBar ، قمنا بعرض شريط تقدم افتراضي للعجلة الدوارة وزر بدء عندما ينقر المستخدم على الزر ، يتم عرض شريط التقدم. فيما يلي الإخراج النهائي ، تنزيل الكود والشرح خطوة بخطوة:

حدد ملف -> جديد -> مشروع جديد ... ثم املأ النماذج وانقر فوق الزر "إنهاء".
الخطوة 2: افتح res -> layout -> activity_main.xml (أو) main.xml وأضف الكود التالي:
في هذه الخطوة ، نفتح ملف 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/simpleProgressBar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:visibility="invisible" android:layout_centerHorizontal="true"/> <Button android:id="@+id/startButton" android:layout_width="200dp" android:layout_height="wrap_content" android:text="Start" android:textSize="20sp" android:textStyle="bold" android:layout_centerHorizontal="true" android:layout_marginTop="100dp" android:padding="10dp" android:background="#0f0" android:textColor="#fff"/> </RelativeLayout>
الخطوة 3: الآن افتح src -> package -> MainActivity.java
في هذه الخطوة ، نفتح MainActivity حيث نضيف الرمز لبدء شريط التقدم والزر ثم ننفذ حدث النقر فوق الزر الذي يعرض شريط التقدم.
package example.gb.progressbarexample; import android.graphics.Color; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.ProgressBar; import android.widget.Button; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // initiate progress bar and start button final ProgressBar simpleProgressBar = (ProgressBar) findViewById(R.id.simpleProgressBar); Button startButton = (Button) findViewById(R.id.startButton); // perform click event on button startButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // visible the progress bar simpleProgressBar.setVisibility(View.VISIBLE); } }); } }
المخرجات :
الآن ابدأ تشغيل AVD في Emulator وقم بتشغيل التطبيق. انقر فوق زر البدء وسيتم عرض شريط التقدم على الشاشة.

مثال على شريط التقدم الأفقي في Android Studio:
في المثال الثاني نعرض شريط تقدم أفقي بخلفية قابلة للرسم وزر بدء. هنا عندما ينقر المستخدم على زر ، يتم استخدام موضوع لبدء التقدم. فيما يلي الإخراج النهائي ، تنزيل الكود والشرح خطوة بخطوة:

حدد ملف -> جديد -> مشروع جديد ... ثم املأ النماذج وانقر فوق الزر "إنهاء".
الخطوة 2: افتح res -> layout -> activity_main.xml (أو) main.xml وأضف الكود التالي:
في هذه الخطوة ، نفتح ملف xml ونضيف الكود لعرض شريط تقدم أفقي باستخدام خاصية النمط والتقدم القابل للرسم 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:background="#000" 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/simpleProgressBar" style="@style/Widget.AppCompat.ProgressBar.Horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="70dp" android:max="100" android:progress="0" android:progressDrawable="@drawable/custom_progress" /> <Button android:id="@+id/startButton" android:layout_width="200dp" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="120dp" android:background="#0f0" android:padding="10dp" android:text="Start" android:textColor="#fff" android:textSize="20sp" android:textStyle="bold" /> </RelativeLayout>
الخطوة 3: قم بإنشاء ملف xml في drawable -> custom_progress.xml
في هذه الخطوة ، نقوم بإنشاء ملف xml قابل للرسم مخصص لشريط التقدم. في xml هذا ، نقوم بإنشاء قائمة طبقات نقوم فيها بإنشاء عنصر ثم تعيين ألوان التدرج لشريط التقدم المخصص الخاص بنا.
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape> <gradient android:endColor="#fff" android:startColor="#1f1" android:useLevel="true" /> </shape> </item> </layer-list>
الخطوة 4: افتح التطبيق -> الحزمة -> MainActivity.java
في هذه الخطوة ، نفتح MainActivity ونضيف الكود لبدء شريط التقدم والزر ثم تنفيذ حدث النقر على الزر. بعد ذلك نبدأ التقدم في شريط التقدم باستخدام مؤشر ترابط.
package example.gb.progressbarexample; import android.app.Dialog; import android.content.DialogInterface; import android.content.Intent; import android.graphics.Color; import android.provider.Settings; import android.support.v7.app.AlertDialog; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.ProgressBar; import android.widget.Button; import android.widget.Toast; public class MainActivity extends AppCompatActivity { int progress = 0; ProgressBar simpleProgressBar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // initiate progress bar and start button simpleProgressBar = (ProgressBar) findViewById(R.id.simpleProgressBar); Button startButton = (Button) findViewById(R.id.startButton); // perform click event on button startButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // call a function setProgressValue(progress); } }); } private void setProgressValue(final int progress) { // set the progress simpleProgressBar.setProgress(progress); // thread is used to change the progress value Thread thread = new Thread(new Runnable() { @Override public void run() { try { Thread.sleep(1000); } catch (InterruptedException e) { e.printStackTrace(); } setProgressValue(progress + 10); } }); thread.start(); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } }
انتاج:
الآن قم بتشغيل التطبيق في AVD ، انقر فوق زر البدء وسترى شريط تقدم أفقي.

موضوع ذو صلة - ProgressDialog في Android
Android Progress Dialog هو واجهة مستخدم تعرض تقدم مهمة كما تريد أن ينتظر المستخدم حتى تكتمل المهمة السابقة المخططة ولهذا الغرض يمكنك استخدام مربع حوار التقدم . اقرأ برنامج Progressdialog التعليمي الخاص بنا مع مثال .