آموزش ساخت اسلایدر با image switcher در اندروید

از ImageSwitcher برای ساخت slider در اپلیکیشن استفاده می شود. به طو مثال اگر شما بخواهید چند تا عکس را به صورت اسلاید نشان دهید باید از ImageSwitcher استفاده کنید؛
گاهی اوقات نمی خواهید که تصویری به طور ناگهانی روی صفحه ظاهر شود، بلکه ترجیح می دهید به مرور و به صورت  پخش اسلایدی ، تصاویر را به کار بگیرید. این عمل در اندروید توسط ImageSwitcher پشتیبانی می شود.

سویچر تصویر به شما اجازه می دهد تا روی نحوه ی ظاهر شدن تصاویر در صفحه ، تغییراتی اعمال کنید. برای استفاده از سویچر تصویر (image switcher) ، ابتدا باید مولفه xml آن را تعریف کنید که سینتکس آن را در زیر مشاهده می کنید :

<ImageSwitcher
   android:id="@+id/imageSwitcher1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerHorizontal="true"
   android:layout_centerVertical="true" >
</ImageSwitcher

اکنون ما در فایل جاوا یک نمونه ImageSwithcer ایجاد نموده و یک reference از مولفه ی XML آن به دست می آوریم. سینتکس آن را در زیر مشاهده می کنید :

private ImageSwitcher imageSwitcher;
imageSwitcher = (ImageSwitcher)findViewById(R.id.imageSwitcher1);

کار دیگری که انجام می دهید اجرای اینترفیس ViewFactory و اجرای متد اجرا نشده ای می باشد که یک imageView را گزارش می دهد.
سینتکس آن مانند زیر است :

imageSwitcher.setImageResource(R.drawable.ic_launcher);
imageSwitcher.setFactory(new ViewFactory() {
   public View makeView() {
      ImageView myView = new ImageView(getApplicationContext());
      return myView;
   }
}

و در انتها لازم است که Animation را به ImageSwithcer اضافه کنید. باید آبجکتی از کلاس Animation را از طریق کلاس AnimationUtilities و با فراخوانی متد استاتیک loadAnimation تعریف کنید،
که سینتکس آن را در زیر مشاهده می کنید :

Animation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left);
imageSwitcher.setInAnimation(in);
imageSwitcher.setOutAnimation(out); 

متد setInAnimaton شیوه ظاهرشدن آبجکت انیمیشن روی صفحه را تنظیم می کند، در حالی که setOutAnimation عمل عکس آن را انجام می دهد. متد ()loadAnimation یک آبجکت انیمیشن ایجاد می کند.

علاوه بر این متد ها، متد های  کاربردی دیگری نیز در ImageSwitcher وجود دارند که در لیست زیر مشاهده می کنید:

1. (setImageDrawable(Drawable drawable : یک تصویر را با سوییچر تصویر (image switcher) تنظیم می کند. تصویر به فرم bitmap منتقل می شود.
2. (setImageResource(int resid : یک تصویر را با سویچر تصویر (image switcher) تنظیم می کند. تصویر به فرم یک id عددی منتقل می شود.
3. (setImageURI(Uri uri : یک تصویر را با سویچر تصویر (image switcher) تنظیم می کند. تصویر به فرم URI منتقل می شود.
4. (ImageSwitcher(Context context, AttributeSet attrs  : یک آبجکت image switcher را با تنظیم چند ویژگی تصویب شده در متد ، باز می گرداند (Return می کند) .
5. (onInitializeAccessibilityEvent (AccessibilityEvent event : یک AccessibilityEvent را با اطلاعاتی در مورد این ویو که منبع رویداد (event source) می باشد، مقدار دهی اولیه می کند.
6. (onInitializeAccessibilityNodeInfo (AccessibilityNodeInfo info  : یک AccessibilityNodeInfo را با اطلاعاتی در مورد این ویو مقدار دهی اولیه می کند.

مثال :

مثال: مثال زیر تاثیرات image switcher را روی bitmap به نمایش می گذارد . این مثال basic application ایجاد می کند که به ما اجازه می دهد تا تاثیرات انیمیشن را روی تصاویر ببینیم.

برای انجام این مثال به یک دستگاه واقعی نیاز است .

1. برای ایجاد یک برنامه ی اندروید از Android studio IDE  تحت پکیج com.example.imageswitcher. استفاده می کنیم .
2. فایل src/MainActivity.java را برای افزودن کد لازم تغییر می دهیم.
3. res/layout/activity_main رابرای افزودن مولفه های XML مربوطه تغییر می دهیم.
4. اکنون برنامه را اجرا کنید، یک دستگاه اجرایی اندروید انتخاب کنید و برنامه را روی آن نصب کرده و نتایج را بررسی کنید.

محتوای تغییر یافته ی src/MainActivity.java :

package com.example.sairamkrishna.myapplication;

import android.app.Activity;
import android.app.ActionBar.LayoutParams;
import android.os.Bundle;
import android.view.View;

import android.widget.Button;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.ViewSwitcher.ViewFactory;

public class MainActivity extends Activity {
   private ImageSwitcher sw;
   private Button b1,b2;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

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

      sw = (ImageSwitcher) findViewById(R.id.imageSwitcher);
      sw.setFactory(new ViewFactory() {
         @Override
         public View makeView() {
            ImageView myView = new ImageView(getApplicationContext());
            myView.setScaleType(ImageView.ScaleType.FIT_CENTER);
            myView.setLayoutParams(new 
               ImageSwitcher.LayoutParams(LayoutParams.WRAP_CONTENT,
                  LayoutParams.WRAP_CONTENT));
            return myView;
         }
      });

      b1.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
            Toast.makeText(getApplicationContext(), "previous Image",
               Toast.LENGTH_LONG).show();
            sw.setImageResource(R.drawable.abc);
         }
      });

      b2.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
            Toast.makeText(getApplicationContext(), "Next Image",
               Toast.LENGTH_LONG).show();
            sw.setImageResource(R.drawable.tp);
         }
      });
   }
}

محتوای تغییر یافته ی 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="Gestures  Example" 
      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" />
      
   <ImageSwitcher
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/imageSwitcher"
      android:layout_below="@+id/textView"
      android:layout_centerHorizontal="true"
      android:layout_marginTop="168dp" />
      
   <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/left"
        android:id="@+id/button"
        android:layout_below="@+id/textView"
        android:layout_centerHorizontal="true" />

   <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/right"
        android:id="@+id/button2"
        android:layout_alignParentBottom="true"
        android:layout_alignLeft="@+id/button"
        android:layout_alignStart="@+id/button" />
      
</RelativeLayout>

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

<resources>
    <string name="app_name">My Application</string>
    <string name="left"><![CDATA[<]]></string>
    <string name="right"><![CDATA[>]]></string>
</resources>

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

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

   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      <activity
         android:name="com.example.sairamkrishna.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>

حالا می خواهیم اپلیکیشن را اجرا کنیم. فرض می کنیم که در هنگام انجام تنظیمات محیط، AVD خود را ایجاد کرده اید. برای اجرای برنامه از Android studio ، یکی از فایل های اکتیویتی پروژه را باز کنید و روی آیکون Run از نوار ابزار کلیک کنید. Android studio برنامه را روی AVD شما نصب و آغاز می کند و اگر همه چیز در مورد برنامه و تنظیمات درست باشد، پنجره ی Emulator زیر نمایش داده خواهد شد.

اگر به صفحه ی دستگاه خود نگاه کنید، دو دکمه خواهید دید.

اکنون دکمه ی بالایی با فلش به سمت راست انتخاب می کنیم . یک تصویر از سمت راست ظاهر می شود که به سمت چپ حرکت می کند، که در تصویر زیر مشاهده می کنید.