استفاده از View Flipper در اندروید

یکشنبه 8 اسفند 1395

در این مقاله می خواهیم در مورد View flipper صحبت نماییم که شما می توانید با دو دکمه جلو و عقب محتوای خودتان را ببینید و در آن از عکس هم استفاده نمایید، معمولا برای نمایش یک متن همراه با عکس سورسی مناسب خواهد بود.

استفاده از View Flipper  در اندروید

ابتدا در لایه Layout قطعه کد زیر را بنویسید:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/LinearLayout01"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:orientation="vertical" >

        <RelativeLayout
                android:id="@+id/RelativeLayout02"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <ViewFlipper
                        android:id="@+id/ViewFlipper01"
                        android:layout_width="fill_parent"
                        android:layout_height="400dp" >

                        <RelativeLayout
                                android:layout_width="fill_parent"
                                android:layout_height="fill_parent"
                                android:background="#4B0082" >

                                <TextView
                                        android:id="@+id/TextView01"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:textColor="#FFFFFF"
                                        android:textSize="20dp"
                                        android:layout_centerHorizontal="true"
                                        android:layout_marginTop="100dp"
                                        android:text="Flipper Content 1" >
                                </TextView>

                        </RelativeLayout>

                        <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:background="#7CFC00"
                                android:orientation="vertical" >

                                <TextView
                                        android:id="@+id/TextView02"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:textColor="#000000"
                                        android:textSize="20dp"
                                        android:layout_centerHorizontal="true"
                                        android:layout_marginTop="100dp"
                                        android:text="Flipper Content 2" >
                                </TextView>

                        </RelativeLayout>

                        <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:background="#1E90FF"
                                android:orientation="vertical" >

                                <TextView
                                        android:id="@+id/TextView03"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:textColor="#FFFFFF"
                                        android:textSize="20dp"
                                        android:layout_centerHorizontal="true"
                                        android:layout_marginTop="100dp"
                                        android:text="Flipper Content 3" >
                                </TextView>

                        </RelativeLayout>

                        <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:background="#FFFF00"
                                android:orientation="vertical" >

                                <TextView
                                        android:id="@+id/TextView04"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:textColor="#000000"
                                        android:textSize="20dp"
                                        android:layout_centerHorizontal="true"
                                        android:layout_marginTop="100dp"
                                        android:text="Flipper Content 4" >
                                </TextView>

                        </RelativeLayout>

                </ViewFlipper>
        </RelativeLayout>

        <RelativeLayout
                android:id="@+id/RelativeLayout03"
                android:layout_below="@+id/RelativeLayout02"
                android:background="#000000"
                android:layout_width="fill_parent"
                android:layout_height="match_parent">

                <Button
                        android:id="@+id/Previous"
                        android:layout_alignParentBottom="true"
                        android:layout_alignParentLeft="true"
                        android:layout_marginBottom="5dp"
                        android:layout_marginLeft="20dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Previous" >
                </Button>

                <Button
                        android:id="@+id/Next"
                        android:layout_alignParentBottom="true"
                        android:layout_alignParentRight="true"
                        android:layout_marginBottom="5dp"
                        android:layout_marginRight="20dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Next" >
                </Button>

        </RelativeLayout>

</LinearLayout>

در این لایه از دو دکمه استفاده کردیم و از 4 فلیپر که هر کدام یک متن و رنگی دارند

حالا برای کلاس جاوا قطعه کد زیر را می نویسیم:

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

public class MyActivity extends Activity {



    ViewFlipper viewFlipper;
    Button Next, Previous;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        viewFlipper = (ViewFlipper) findViewById(R.id.ViewFlipper01);

        Next = (Button) findViewById(R.id.Next);
        Previous = (Button) findViewById(R.id.Previous);

        Next.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {
                // TODO Auto-generated method stub

                viewFlipper.showNext();
            }
        });

        Previous.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {
                // TODO Auto-generated method stub

                viewFlipper.showPrevious();
            }
        });
    }
}

در کلاس جاوا دکمه ها و فیلیپر را تعریف می کنیم و از آن ها شی می سازیم و بعد از آن رویداد را برای دکمه ها تعریف می کنیم برای فلیپر ها خودشان رویداد جلو و عقب دارند که فقط کافی است آن ها را صدا بزنیم و با استفاده از متد Next, Previous فلیپر را جلو و عقب ببریم.

اگر بخواهید نام برنامه تان را هم عوض کنید از قطعه کد زیر استفاده می کنید:

<resources>

    <string name="app_name">ViewFlipper_Creation</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>

</resources>

خروجی برنامه به صورت زیر خواهد بود:

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید