استفاده از ViewFlipper و ViewSwitcher در اندروید
استفاده از ViewFlipper و ViewSwitcher در اندروید
یکی از ابزار های بسیار پرکاربرد برای برنامه نویسان اندروید, ViewFlipper است. در این مقاله قصد داریم تا در قالب یک پروژه, نحوه استفاده از آن را بررسی کنیم.
ViewFlipper برای مدیریت چند جزء طراحی در کنار هم است. برای مثال فرض کنید می‌خواهیم یک لیست از اطلاعات را نمایش دهیم. ولی وقتی این لیست داده‌ای ندارد, یک پیام مبنی بر اینکه این لیست خالی است نمایش دهیم. در دید اول, ممکن است این فکر به ذهن برنامه نویس خطور کند که از متد SetVisibilty استفاده کند. اما با استفاده از این کلاس, می‌توانیم چنین مواردی را بهتر مدیریت کنیم.
ViewSwitcher نیز مانند ViewFlipper است با این تفاوت که ViewSwitcher تنها می‌تواند دو عضو را نگهداری کند اما برای ViewFlipper محدودیتی وجود ندارد.
ViewSwitcher
ابتدا ViewSwitcher را مورد بررسی قرار می‌دهیم تا درک بهتری از نحوه عملکرد این کلاس ها ایجاد شود. فرض کنید دو Button در یک صفحه نگهداری کرده‌ایم و قصد داریم تا با کلیک بر روی هریک از Button ها, Button بعدی را نمایش دهیم:
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
|
<ViewSwitcher
android:id=“@+id/view_switcher”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
app:layout_constraintBottom_toBottomOf=“parent”
app:layout_constraintEnd_toEndOf=“parent”
app:layout_constraintHorizontal_bias=“0.5”
app:layout_constraintStart_toStartOf=“parent”
app:layout_constraintTop_toTopOf=“parent”>
<Button
android:id=“@+id/bye”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
android:text=“Bye” />
<Button
android:id=“@+id/hello”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
android:text=“Hello” />
</ViewSwitcher>
|
سپس اجزاء ظاهری را با استفاده از ButterKnife به پروژه اضافه می‌کنیم و کد لازم را برای OnClick Annotations می‌نویسیم:
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
|
@BindView(R.id.view_switcher)
ViewSwitcher flipper;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
}
@OnClick({R.id.hello,R.id.bye})
public void hello() {
flipper.showNext();
}
|
همانطور که در کد فوق مشاهده می‌کنید, به راحتی می‌توانیم میان این دو Button جابجا شویم. اگر بخواهیم یک Two State Button ایجاد کنیم می‌توانیم از ViewSwticher استفاده کنیم. در واقع این دو کلاس, می‌توانند برای ایجاد Custom View ها بسیار مفید باشند.
ViewFlipper
اکنون با استفاده از ViewFlipper, مثالی که در ابتدای مقاله ذکر کردیم را پیاده سازی می‌کنیم.
در گام اول, ظاهر برنامه را طراحی می‌کنیم:
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
|
<android.support.constraint.ConstraintLayout xmlns:android=“http://schemas.android.com/apk/res/android”
xmlns:app=“http://schemas.android.com/apk/res-auto”
xmlns:tools=“http://schemas.android.com/tools”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
tools:context=“vhdrjb.zerotohero.viewflippertesting.MainActivity”>
<ViewFlipper
android:id=“@+id/view_flipper”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
app:layout_constraintBottom_toBottomOf=“parent”
app:layout_constraintEnd_toEndOf=“parent”
app:layout_constraintHorizontal_bias=“0.5”
app:layout_constraintStart_toStartOf=“parent”
app:layout_constraintTop_toTopOf=“parent”>
<TextView
android:id=“@+id/no_data”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:gravity=“center”
android:text=“There is no Data to Show in List” />
<android.support.v7.widget.RecyclerView
android:id=“@+id/data_list”
android:layout_width=“match_parent”
android:layout_height=“match_parent” />
</ViewFlipper>
</android.support.constraint.ConstraintLayout>
|
همانطور که در کد فوق مشاهده می‌کنید, یک ViewFlipper دو عضو TextView و RecyclerView را در خود نگهداری می‌کند. index گذاری در ViewFlipper ها از صفر شروع می‌شود. بنابراین TextView با index=0 و RecyclerView با index=1 نگهداری می‌شود.
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
|
@BindView(R.id.data_list)
RecyclerView dataList;
@BindView(R.id.no_data)
TextView noData;
@BindView(R.id.view_flipper)
ViewFlipper flipper;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
// request List
// result return on initList
}
|
اکنون برنامه می‌تواند به یک Server و یا یک پایگاه داده درون برنامه ای درخواستی را ارسال کند. نتیجه درخواست به صورت یک لیست از داده ها است. تعداد اعضای این لیست مشخص می‌کند که کدام یک از اعضای ViewFlipper نمایش داده شود:
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
|
private void initList(List<UserModel> users) {
if (users.size() > 0) {
flipper.setDisplayedChild(1);
dataList.setLayoutManager(new LinearLayoutManager(this));
dataAdapter = new RecyclerAdapter(this, users);
dataList.setAdapter(dataAdapter);
} else {
flipper.setDisplayedChild(0);
}
}
|
با استفاده از متد SetDisplayChild می‌توانیم index مورد نظر را انتخاب کنیم. به این ترتیب مشخص می‌کنیم که قصد داریم کدام یک از اجزا نمایش داده شود.
این کلاس ها در پیاده سازی نرم افزار هایی که کاملا با اینترنت کار می‌کنند, بسیار مفید است. به این صورت که صفحه اصلی را به عنوان یک عضو و عضو بعدی را یک پیام مبنی بر عدم دسترسی به اینترنت در ViewSwitcher و یا ViewFlipper قرار می‌دهیم. به این ترتیب متناسب با وضعیت دسترسی به اینترنت, عضوی که باید نمایش داده شود را مشخص و وضعیت برنامه را مدیریت می‌کنیم.
در این مقاله سعی بر این شد تا با چگونگی عملکرد ViewFlipper و ViewSwitcher آشنا شویم. چگونگی استفاده از این کلاس ها, متناسب با هر پروژه ای می‌تواند متغیر باشد. بعضی برنامه نویسان برای ایجاد Custom View و برخی دیگر برای مدیریت وضعیت های گوناگون برنامه از این کلاس ها استفاده می‌کنند.
با ما همراه باشید.
سورس شبکه اجتماعی اندروید
سورس کتاب اندروید
سورس فروشگاه اینترنتی اندروید Codecanyon Nulled
MaterialX – Android Material Design UI Components
دیدگاه ها