۱۹
آبان

جلسه ۴۶ : نوار پیشرفت Spinner در اندروید

دسته‌بندی‌ها :

جزئیات
نوع محتوا آموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش برنامه نویسی اندروید را دنبال می کنند. شما می توانید از طریق بارگذاری progress bar (نوار پیشرفت)، پیشرفت یک کار را دراپلیکیشن آندروید خود به کاربر نشان دهید. نوار پیشرفت در دو نوع Loading bar و Loading Spinner ارائه می شود. که هر کدام به نحوی پیشرفت انجام یک فرآیند را در اپلیکیشن اندرویدی مربوطه به کاربران نشان می دهد. که ما در این بخش به آموزش کار با نوار پیشرفت Spinner در اندروید می پردازیم. Spinner برای نمایش پیشرفت آن کارهایی که زمان کل تکمیل ، پیشرفت آن ناشناخته است استفاده می شود. در ادامه ی این آموزش با آموزش چگونگی طرز کار با نوار پیشرفت Spinner در اندروید با ما همراه باشید.

نوار پیشرفت Spinner در اندروید

همانند مباحث قبلی ابتدا ساختار کلی کار با نوار پیشرفت Spinner در اندروید و متدهای مربوطه را ارائه می دهیم.

در ادامه ی آموزش به یک مثال ساده از پیاده سازی Spinner در اپلیکیشن های اندروید می پردازیم.

ساختار کلی پیاده سازی

برای شروع استفاده از Spinner ابتدا باید آن را در xml به صورت زیر پیاده سازی کنید:

مثال :

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

<ProgressBar

android:id="@+id/progressBar1"

style="?android:attr/progressBarStyleLarge"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true" />

بعد از تعریف xml باید در کد جاوا یک مرجع به طرح مرتبط در xml به صورت زیر ایجاد کنید:

مثال :

private ProgressBar spinner;
spinner = (ProgressBar)findViewById(R.id.progressBar1);

1 2	private ProgressBar spinner; spinner = (ProgressBar)findViewById(R.id.progressBar1);

سپس این ابزار ناپدید می شود و شما می توانید در زمان نیاز آن را توسط متد setVisibility ظاهر کنید.

که ساختار ظاهر سازی آن به صورت زیر استک

مثال :

spinner.setVisibility(View.GONE);
spinner.setVisibility(View.VISIBLE);

1 2	spinner.setVisibility(View.GONE); spinner.setVisibility(View.VISIBLE);

علاوه بر متدهای فوق متدهای دیگری نیز در کلاس ProgressBar برای مدیریت spinner ارائه شده که به شرح زیر است:

ردیف	متد و توضیحات مربوطه
۱	isIndeterminate() تشخیص می دهد که نوار پیشرفت در حالت indeterminate هست یا خیر.
۲	postInvalidate() این متد به دلیل عدم موفقیت یک حلقه بعد از اتمام آن رخ می دهد.
۳	setIndeterminate(boolean indeterminate) حالت indeterminate نوار پیشرفت را تغییر می دهد.
۴	invalidateDrawable(Drawable dr) Drawable مشخص را غیرفعال می کند.
۵	incrementSecondaryProgressBy(int diff) پیشرفت ثانوی نوار پیشرفت را با مقدار مشخص شده افزایش می دهد.
۶	getProgressDrawable() drawable را برای رسم نوار پیشرفت در حالت پیشرفت استفاده می کند.

مثال

در ادامه یک مثال برای نشان دادن طرزر استفاده از ProgressBar برای اداره کردن spinner ارائه کرده ایم.

سناریو به این صورت است که کاربر با کلیک روی یک button نوار پیشرفت spinner را فعال می کند.

شما می توانید این برنامه را روی یک دستگاه اندروید واقعی یا شبیه ساز اندروید پیاده سازی کنید.

مراحل انجام کار:

مراحل	توضیحات
۱	مراحل ایجاد برنامه در اندروید استدیو را طبق بخش های قبلی دنبال کنید.
۲	کدهای مورد نیاز را در فایل src/MainActivity.java قرار دهید.
۳	طراحی متناسب با برنامه را به فایل res/layout/activity_main اضافه کنید.
۴	نیاز به ایجاد یک فایل xml در فولدر dragable.it که شامل شکل و چرخاندن اطلاعات در مورد نوار پیشرفت باشد دارید.
۵	برنامه را اجرا کنید تا شبیه ساز اندروید نتیجه را نمایش دهد.

محتوای فایل main activity که در src/MainActivity.java قرار دارد:

مثال :

package com.example.Pvlearn.myapplication;

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


public class MainActivity extends Activity {
   Button b1;

   private ProgressBar spinner;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
        
      b1=(Button)findViewById(R.id.button);
      spinner=(ProgressBar)findViewById(R.id.progressBar);
      spinner.setVisibility(View.GONE);

      b1.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
            spinner.setVisibility(View.VISIBLE);
         }
      });
   }
}

package com.example.Pvlearn.myapplication;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.ProgressBar;

public class MainActivity extends Activity {

Button b1;

private ProgressBar spinner;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

b1=(Button)findViewById(R.id.button);

spinner=(ProgressBar)findViewById(R.id.progressBar);

spinner.setVisibility(View.GONE);

b1.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

spinner.setVisibility(View.VISIBLE);

}

});

}

محتوای فایل res/layout/activity_main.xml:

مثال :

<?xml version="1.0" encoding="utf-8"?>
<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:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
   
   <TextView android:text="Progress Dialog" android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/textview"
      android:textSize="35dp"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true" />
      
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Tutorials point"
      android:id="@+id/textView"
      android:layout_below="@+id/textview"
      android:layout_centerHorizontal="true"
      android:textColor="#ff7aff24"
      android:textSize="35dp" />
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="download"
      android:id="@+id/button"
      android:layout_below="@+id/imageView"
      android:layout_centerHorizontal="true" />
      
   <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/imageView"
      android:src="@drawable/abc"
      android:layout_below="@+id/textView"
      android:layout_centerHorizontal="true" />
      
   <ProgressBar
      style="?android:attr/progressBarStyleLarge"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/progressBar"
      android:progressDrawable="@drawable/circular_progress_bar"
      android:layout_below="@+id/button"
      android:layout_alignRight="@+id/textView"
      android:layout_alignEnd="@+id/textView"
      android:layout_alignLeft="@+id/textview"
      android:layout_alignStart="@+id/textview"
      android:layout_alignParentBottom="true" />

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<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:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<TextView android:text="Progress Dialog" android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/textview"

android:textSize="35dp"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Tutorials point"

android:id="@+id/textView"

android:layout_below="@+id/textview"

android:layout_centerHorizontal="true"

android:textColor="#ff7aff24"

android:textSize="35dp" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="download"

android:id="@+id/button"

android:layout_below="@+id/imageView"

android:layout_centerHorizontal="true" />

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/imageView"

android:src="@drawable/abc"

android:layout_below="@+id/textView"

android:layout_centerHorizontal="true" />

<ProgressBar

style="?android:attr/progressBarStyleLarge"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/progressBar"

android:progressDrawable="@drawable/circular_progress_bar"

android:layout_below="@+id/button"

android:layout_alignRight="@+id/textView"

android:layout_alignEnd="@+id/textView"

android:layout_alignLeft="@+id/textview"

android:layout_alignStart="@+id/textview"

android:layout_alignParentBottom="true" />

</RelativeLayout>

محتوای فایل res/drawable/circular_progress_bar.xml:

مثال :

<?xml version="1.0" encoding="utf-8"?>
<rotate
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:fromDegrees="90"
   android:pivotX="50%"
   android:pivotY="50%"
   android:toDegrees="360">
   
   <shape
      android:innerRadiusRatio="3"
      android:shape="ring"
      android:thicknessRatio="7.0">
      
      <gradient
         android:centerColor="#007DD6"
         android:endColor="#007DD6"
         android:startColor="#007DD6"
         android:angle="0"
         android:type="sweep"
         android:useLevel="false" />
   </shape>
   
</rotate>

<?xml version="1.0" encoding="utf-8"?>

<rotate

xmlns:android="http://schemas.android.com/apk/res/android"

android:fromDegrees="90"

android:pivotX="50%"

android:pivotY="50%"

android:toDegrees="360">

<shape

android:innerRadiusRatio="3"

android:shape="ring"

android:thicknessRatio="7.0">

<gradient

android:centerColor="#007DD6"

android:endColor="#007DD6"

android:startColor="#007DD6"

android:angle="0"

android:type="sweep"

android:useLevel="false" />

</shape>

</rotate>

محتوای فایل AndroidManifest.xml :

مثال :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.Pvlearn.myapplication" >

   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      <activity
         android:name="com.example.Pvlearn.myapplication.MainActivity"
         android:label="@string/app_name" >
         
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
         
      </activity>
      
   </application>
</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.example.Pvlearn.myapplication" >

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

<activity

android:name="com.example.Pvlearn.myapplication.MainActivity"

android:label="@string/app_name" >

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

اجرای برنامه

برای اجرای برنامه ی اندرویدی خود یکی از فایل های activity در برنامه ی خود کلیک کنید.

سپس روی نماد (Run) از نوار ابزار برای شروع اجرای برنامه کلیک کنید.

سپس نتیجه اجرای برنامه را در دستگاه اندروید خود مشابه زیر مشاهده خواهید کرد:

نوار پیشرفت Spinner در اندروید

حالا روی button زیر لوگو کلیک کنید تا بارگذاری spinner فعال شود، که آن را به صورت زیر نشان خواهد داد:

نوار پیشرفت Spinner در اندروید -نتیجه

کلام آخر

گاهی ممکن است شما بخواهید برای بعضی از فرایندهای اپلیکیشن خود که معمولا زمان می برد مانند دانلود یا بارگذاری فایل ها، یک نوار پیشرفت به کاربر نشان دهید که برای این منظور می توانید از نوار پیشرفت Spinner در اندروید استفاده کنید.

در بخش بعدی به مباحث بومی سازی در اندروید می پردازیم.

به اشتراک بگذارید

Spinner در اندروید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۴۶ : نوار پیشرفت Spinner در اندروید

مقدمه

نوار پیشرفت Spinner در اندروید

ساختار کلی پیاده سازی

مثال

اجرای برنامه

کلام آخر

لیست مطالب دوره

آموزش اندروید

رابط کاربری در اندروید

مفاهیم پیشرفته در اندروید

مثال های مفید

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ