آموزش ViewFlipper در برنامه نویسی اندروید

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش ViewFlipper در برنامه نویسی اندروید می پردازیم از ViewFlipper برای ایجاد یک اسلایدر مورد استفاده قرار میگیرد یکسری مزیت  دارد و یکسری معایب که در ادامه در مورد آنها بحث خواهیم کرد در زیر می توانید پیش نماشی از آن را مشاهده کنید با ما همراه باشید.
به علت حجم بالای ویدیو از لینک زیر استفاده کنید.
لینک ویدیو
مزیت

• نیاز نداشتن به کتاب خانه
• بسیار سبک
• و قابل سفارشی سازی

معایب

• نداشتن Indicator
• خیلی زیاد نمی توان آن را سفارشی سازی کرد.

 
ابتدا در layout خود کدهای زیر را قرار دهید نام layout در اینجا برابر با  activity_main.xml است.

37
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <ViewFlipper
        android:id="@+id/viewFlipper1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center" >
        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@drawable/a" />
        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@drawable/b" />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center"
            android:textSize="18sp"
            android:text="@string/flipper_textview" />
        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@drawable/e" />
    </ViewFlipper>
</LinearLayout>

در اینجا ما یک ViewFlipper داریم که در ان چهار عکس قرار گرفته است.
سپس در پوشه res یک پوشه به نام anim درسته کرده و در آن پوشه یک فایل به نام left_out.xml ایجاد کرده و کدهای زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:toXDelta="-100%p" />
    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.1" />
</set>

در همان پوشه یک فایل دیگر به نام right_enter.xml ایجاد کرذه و کدهای زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
  <translate
     android:fromXDelta="100%" android:toXDelta="0%"
     android:fromYDelta="0%" android:toYDelta="0%"
     android:duration="300" />
</set>

و در آخر هم در بخش MainActivity.java کد های زیر را قرار دهید.

package com.view_flipper_demo;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.widget.ViewFlipper;
public class MainActivity extends Activity {
	private ViewFlipper flip;
	private float initialX;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		flip = (ViewFlipper) findViewById(R.id.viewFlipper1);
		flip.setInAnimation(this, R.anim.right_enter);
		flip.setOutAnimation(this, R.anim.left_out);
	}
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			initialX = event.getX();
			break;
		case MotionEvent.ACTION_UP:
			float finalX = event.getX();
			if (initialX > finalX) {
				if (flip.getDisplayedChild() == 4)
					break;
				flip.showNext();
			} else {
				if (flip.getDisplayedChild() == 0)
					break;
				flip.showPrevious();
			}
			break;
		}
		return false;
	}
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return super.onCreateOptionsMenu(menu);
	}
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
		case R.id.flip_by_interval:
			flip.setFlipInterval(2000);
			flip.startFlipping();
			break;
		case R.id.flip_on_click:
			if (flip.isFlipping()) {
				flip.stopFlipping();
			}
			flip.showNext();
			break;
		}
		return super.onOptionsItemSelected(item);
	}
}

در بالا کلیک بروی ViewFlipper را handle کردیم تا در صورت کشیدن به سمت چپ و راست عکس نیز تغییر کند و  در بخش OptionMenu با استفاده از دکمه می توانید ViewFlipper را بر اساس یک تایم متفاوت تغییر دهید و گزینه دوم optionmenu به عکس بعدی می رود.
 
این آموزش هم به پایان رسید.
 
موفق و پیروز باشید.

مطالعه بیشتر