برنامج SeekBar التعليمي مع مثال في Android Studio
في Android ، يعد SeekBar امتدادًا لـ ProgressBar الذي يضيف إبهامًا قابل للسحب ، ويمكن للمستخدم لمس الإبهام والسحب إلى اليسار أو اليمين لتعيين قيمة التقدم الحالي.
يعد SeekBar أحد عناصر واجهة المستخدم المفيدة جدًا في Android والذي يسمح باختيار قيم عدد صحيح باستخدام واجهة مستخدم طبيعية. مثال على SeekBar هو التحكم في سطوع جهازك والتحكم في مستوى الصوت.
ملاحظة مهمة: سمة SeekBar هي نفسها ProgressBar والفرق الوحيد هو أن المستخدم يحدد التقدم عن طريق تحريك شريط التمرير (الإبهام) في SeekBar. لإضافة شريط بحث إلى ملف تخطيط ( XML ) ، يمكنك استخدام عنصر <SeekBar>.
كود SeekBar في XML :
<SeekBar
android:id="@+id/simpleSeekBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
جدول المحتويات
كيفية إضافة مستمع لإخطار التغييرات في SeekBar :
SeekBar.OnSeekBarChangeListener هو مستمع يستخدم كإستدعاء يقوم بإعلام العميل عند تغيير مستوى تقدم شريط البحث. يمكن استخدام هذا المستمع لكل من التغييرات التي بدأها المستخدم (في ملف xml أو فئة جافا ) بالإضافة إلى التغييرات البرمجية.
seekBarInstanceVariable.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {…} –
- تُستخدم هذه الطريقة لإعلام المستخدم بالتغييرات / الإجراءات في SeekBar.
الأساليب التي يجب تنفيذها Methods Needs To Be Implemented :
في شريط البحث للحصول على التغييرات قيد التقدم ، نحتاج إلى تنفيذ ثلاث طرق مجردة. فيما يلي وصف تفصيلي لهذه الطرق الثلاث:
1. public void onProgressChanged (SeekBar lookBar، int progresValue، boolean fromUser) {…} -
سيتم استدعاء أسلوب المستمع هذا إذا تم إجراء أي تغيير في SeekBar.
2. public void onStartTrackingTouch (SeekBar SeekBar) {…} -
سيتم استدعاء أسلوب المستمع هذا في بداية حدث اللمس للمستخدم. كلما لمس المستخدم الإبهام لسحب هذه الطريقة تلقائيًا.
3. public void onStopTrackingTouch (SeekBar SeekBar) {…} -
سيتم استدعاء أسلوب المستمع هذا في نهاية حدث اللمس للمستخدم. عندما يتوقف المستخدم عن سحب الإبهام ، سيتم استدعاء هذه الطريقة تلقائيًا.
getMax ():
يمكننا الحصول على الحد الأقصى لقيمة وسيلة SeekBar برمجيًا في فئة جافا . هذه الطريقة ترجع قيمة عدد صحيح. سيحصل الرمز أدناه على أقصى قيمة من شريط البحث.
SeekBar simpleSeekBar = (SeekBar) findViewById(R.id.simpleSeekBar); // initiate the Seek bar
int maxValue=simpleSeekBar.getMax(); // get maximum value of the Seek bar
getProgress() :
يمكننا الحصول على قيمة التقدم الحالية من شريط البحث في فئة جافا باستخدام طريقة getProgress (). هذه الطريقة ترجع قيمة عدد صحيح. يتم استخدام الكود أدناه للحصول على قيمة التقدم الحالية من شريط البحث.
SeekBar simpleSeekBar=(SeekBar)findViewById(R.id.simpleSeekBar); // initiate the Seek bar
int seekBarValue= simpleSeekBar.getProgress(); // get progress value from the Seek bar
سمات وخصائص SeekBar في Android :
الآن دعنا نناقش السمات والخصائص المهمة التي تساعدنا في تكوين SeekBar في ملف xml (التخطيط).
1. معرف id : سمة معرف تحدد SeekBar بشكل فريد.
<SeekBar
android:id="@+id/simpleSeekBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content" /> <!-- id of a Seek bar used to uniquely identify it-->
2. السمة max : max في SeekBar تحدد الحد الأقصى الذي يمكن أن تستغرقه. يجب أن يكون عددًا صحيحًا مثل 10 ، 20 ، 100 ، 200 إلخ. يمكننا تعيين القيمة القصوى في ملف XML وكذلك في فئة java. بشكل افتراضي ، يأخذ SeekBar أقصى قيمة 100.
أدناه قمنا بتعيين 150 قيمة قصوى لشريط البحث.
<SeekBar
android:id="@+id/simpleSeekBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:max="150"/><!-- set 150 maximum value for the progress -->
تحديد القيمة القصوى لتقدم SeekBar في فئة Java:
/*Add in Oncreate() funtion after setContentView()*/
SeekBar simpleSeekBar=(SeekBar) findViewById(R.id.simpleSeekBar); // initiate the Seekbar
simpleSeekBar.setMax(150); // 150 maximum value for the Seek bar
3. التقدم progress : التقدم هو سمة من سمات SeekBar المستخدمة لتحديد قيمة التقدم الافتراضية ، بين 0 و max. يجب أن تكون قيمة عدد صحيح.
أدناه قمنا بتعيين القيمة القصوى 200 ثم قمنا بتعيين 50 قيمة تقدم افتراضية.
<SeekBar
android:id="@+id/simpleSeekBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:max="200"
android:progress="50"/><!-- set 150 maximum value for the progress -->
إعداد التقدم في Java Class:
SeekBar simpleSeekBar=(ProgressBar) findViewById(R.id.simpleSeekBar); // initiate the progress bar
simpleSeekBar.setMax(200); // 200 maximum value for the Seek bar
simpleSeekBar.setProgress(50); // 50 default progress value
4. progressDrawable: يتم استخدام سمة drawable التقدم في Android لتعيين xml القابل للرسم المخصص لوضع التقدم لشريط البحث. يتم استخدام التقدم القابل للرسم عندما نحتاج إلى استخدام تقدم مخصص لشريط البحث.
أدناه قمنا بتعيين التدرج المخصص القابل للرسم لوضع التقدم في شريط البحث.
الخطوة 1: أضف هذا الرمز في activity_main.xml أو main.xml
<SeekBar
android:id="@+id/simpleSeekBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:max="200"
android:progress="50"
android:progressDrawable="@drawable/custom_progress"/><!-- set custom progress drawable for the progress -->
الخطوة 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="#f00"
android:useLevel="true" />
</shape>
</item>
</layer-list>
5. غير محدد indeterminate : غير محدد هي سمة مستخدمة في android لتمكين الوضع غير المحدد لشريط البحث. في هذا الوضع يدل على seekbar لدوري الرسوم المتحركة دون مؤشرا على التقدم. يتم استخدام هذا الوضع في التطبيق عندما لا نعرف مقدار العمل الذي تم إنجازه. هنا سيتم إخفاء التقدم الفعلي عن المستخدم.
أدناه نضع غير المحدد على صحيح.
<SeekBar
android:id="@+id/simpleSeekBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:max="200"
android:indeterminate="true"/><!-- set custom progress drawable for the progress -->
6. الخلفية background : يتم استخدام سمة الخلفية لشريط البحث لتعيين الخلفية. يمكننا تعيين لون أو رسم في خلفية شريط البحث. يمكننا أيضًا ضبط لون الخلفية في فئة JAVA.
أدناه قمنا بتعيين اللون الأخضر لخلفية شريط البحث.
<SeekBar
android:id="@+id/simpleSeekBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:max="200"
android:indeterminate="true"
android:background="#0F0"/><!-- set green color in the background of seek bar-->
تعيين خلفية SeekBar في فئة Java:
SeekBar simpleSeekBar=(SeekBar)findViewById(R.id.simpleSeekBar); // initiate the seek bar
simpleSeekBar.setBackgroundColor(Color.GREEN); // green background color for the seek bar
7. المساحة المتروكة padding : يتم استخدام خاصية الحشو الخاصة بشريط البحث لتعيين المساحة المتروكة من اليسار أو اليمين أو أعلى أو أسفل.
- padding إلى اليمين: يتم استخدام خاصية padding right لتعيين المساحة المتروكة من الجانب الأيمن من شريط البحث .
- paddingLeft: يتم استخدام خاصية padding left لتعيين المساحة المتروكة من الجانب الأيسر من شريط البحث .
- paddingTop: يتم استخدام الخاصية padding top لتعيين المساحة المتروكة من الجانب العلوي من شريط البحث .
- paddingBottom: padding bottom attribute is used to set the padding from the bottom side of the Seek bar.
- Padding: padding attribute is used to set the padding from the all side’s of the Seekbar.
Below we set the 20dp padding from the top of the Seek bar.
<SeekBar
android:id="@+id/simpleSeekBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:max="200"
android:progress="150"
android:background="#34A853"
android:paddingTop="40dp"/><!-- set 20dp padding from the top of the seek bar-->
8. thumbالإبهام: تُستخدم سمة الإبهام في شريط البحث لرسم إبهام على شريط البحث. يمكننا استخدام صورة أو رسم للإبهام. يوجد أدناه مثال على رمز قمنا فيه بتعيين رمز قابل للرسم لإبهام شريط البحث. قم أولاً بتنزيل رمز الإبهام من هنا وحفظه في مجلد قابل للرسم لمشروعك. يمكنك أيضًا النقر فوق الرمز أدناه ثم تنزيله:
<SeekBar
android:id="@+id/simpleSeekBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:max="200"
android:progress="100"
android:thumb="@drawable/thumb"/><!-- set a thumb drawable icon for the seek bar-->
SeekBar مثال في Android Studio :
Example 1: In the below example of
مثال 1: في المثال أدناه لشريط البحث في Android ، نعرض شريط بحث بسيطًا باستخدام سماته المختلفة كما تمت مناقشته سابقًا في هذا المنشور. نقوم أيضًا بإجراء حدث مستمع تم تغييره على شريط البحث والذي يتم استخدامه للحصول على التغييرات في تقدم شريط البحث. بعد الحصول على التغييرات ، يتم عرض القيمة المتغيرة للتقدم باستخدام Toast. يوجد أدناه رمز التنزيل والإخراج النهائي والبرنامج التعليمي خطوة بخطوة:
ملاحظة مهمة: لا تفوت المثال الثاني من Custom SeekBar في Android والذي تمت مناقشته مباشرة بعد هذا المثال.
الخطوه 1: قم بانشاء مشروع جديد بالاسم SeekBarExample
Step 2: افتح res -> layout -> activity_main.xml (or) main.xml واضف الكود التالي :
In this step we open an xml file and add the code for displaying a seekbar by using its different attributes like max, default progress and few more.
<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">
<SeekBar
android:id="@+id/simpleSeekBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:max="200"
android:progress="60"
/>
</RelativeLayout>
Step 3: افتح src -> package -> MainActivity.java
في هذه الخطوة ، نفتح MainActivity ونضيف الكود لبدء شريط البحث ثم ننفذ حدث الاستماع الذي تم تغييره في شريط البحث للحصول على التغييرات في تقدم شريط البحث. باستخدام مستمع الحدث هذا ، قمنا بتعيين القيمة الحالية لشريط البحث وعندما يقوم المستخدم بإيقاف لمس التتبع ، يتم عرض قيمة التقدم باستخدام Toast.
package example.gb.seekbarexample;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.ButtonBarLayout;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.SeekBar;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
Button submitButton;
SeekBar simpleSeekBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initiate views
simpleSeekBar=(SeekBar)findViewById(R.id.simpleSeekBar);
// perform seek bar change listener event used for getting the progress value
simpleSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
int progressChangedValue = 0;
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
progressChangedValue = progress;
}
public void onStartTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub
}
public void onStopTrackingTouch(SeekBar seekBar) {
Toast.makeText(MainActivity.this, "Seek bar progress is :" + progressChangedValue,
Toast.LENGTH_SHORT).show();
}
});
}
}
Custom vertical SeekBar Example In Android Studio:
في المثال الثاني لشريط البحث ، قمنا بعرض شريط بحث عمودي مخصص باستخدام سماته المختلفة. على غرار المثال الأول ، نقوم بإجراء حدث مستمع متغير على شريط البحث الذي يتم استخدامه في إجراء التغييرات في التقدم ثم يتم عرض تلك القيمة المتغيرة للتقدم باستخدام Toast
. Download Code ?
Step 1: Create a new project and name it SeekBarExample
Step 2: Open res -> layout -> activity_main.xml (or) main.xml and add following code:
In this step we open xml file and add the code for displaying a vertical seekbar by using its different attributes like max, default progress etc. In this xml for displaying a vertical seekbar we used a rotational attribute and set 270 value for that.
<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">
<SeekBar
android:id="@+id/customSeekBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:max="200"
android:progress="40"
android:thumb="@drawable/thumb_icon"
android:rotation="270"
android:progressDrawable="@drawable/custom_progress"/>
</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:useLevel="true"
android:startColor="#560"
android:endColor="#454455"/>
</shape>
</item>
</layer-list>
الخطوة 4: افتح src -> package -> MainActivity. جافا
في هذه الخطوة ، نفتح MainActivity ، وهنا نضيف الكود لبدء شريط البحث العمودي ، ثم ننفذ حدث استمع شريط البحث الذي تم تغييره للحصول على التغييرات في تقدم شريط البحث. باستخدام مستمع الحدث هذا ، نحصل على قيمة التقدم الحالية لشريط البحث وعندما يوقف المستخدم لمس التتبع ، يتم عرض قيمة التقدم هذه باستخدام Toast.
package example.gb.seekbarexample;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.SeekBar;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
Button submitButton;
SeekBar customSeekBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initiate views
customSeekBar =(SeekBar)findViewById(R.id.customSeekBar);
// perform seek bar change listener event used for getting the progress value
customSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
int progressChangedValue = 0;
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
progressChangedValue = progress;
}
public void onStartTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub
}
public void onStopTrackingTouch(SeekBar seekBar) {
Toast.makeText(MainActivity.this, "Seek bar progress is :" + progressChangedValue,
Toast.LENGTH_SHORT).show();
}
});
}
}