آموزش اندروید فصل سوم قسمت هجدهم – ابزار نمایش Gallery و ImageView
در قسمت سی و ششم آموزش اندروید مبحث ایجاد رابط کاربری با استفاده از ابزارهای نمایش تصویر را شروع کرده ایم. در این آموزش دو ابزار Gallery و ImageView را آموزش داده ایم و در آموزش های آتی ابزارهای نمایشی دیگر را آموزش خواهیم داد.
آموزش اندروید فصل سوم قسمت هجدهم – ابزار نمایش تصویر
توجه : برای مشاهده تصاویر در سایز اصلی برروی آنها کلیک کنید.
استفاده از ابزار نمایش تصویر
تا کنون ابزارهای نمایشی که کار کردن با آن را تجربه کردیم تنها قابلیت نمایش و کار با متن را داشتند.برای نمایش تصویر و عکس ها از ابزارهای نمایش ImageView , Gallery , ImageSwicher و GridView بهره خواهیم برد.در ادامه هر ابزار را به صورت جداگانه بررسی خواهیم کرد.
ابزار نمایش Gallery و ImageView
ابزار نمایش Gallery برای نمایش یکسری آیتم به صورت افقی و با قابلیت پیمایش استفاده میشود.برای درک بیشتر به تمرین زیر دقت کنید.
پروژه جدیدی با نام GalleryExample ایجاد کرده و در فایل activity_main.xml ابزارهای ImageView , Gallery , TextView را چنین ایجاد میکنیم
۰۱ ۰۲ ۰۳ ۰۴ ۰۵ ۰۶ ۰۷ ۰۸ ۰۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ | <?xml version="1.0" encoding="utf-8"?> android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" ><TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="There are some picture" /> <Gallery android:id="@+id/gallery1" android:layout_width="fill_parent" android:layout_height="wrap_content" /><ImageView android:id="@+id/image1" android:layout_width="320dp" android:layout_height="250dp" android:scaleType="fitXY" /></LinearLayout> |
سپس برروی res/values کلیک راست کرده و یک فایل xml ایجاد میکنیم سپس نام فایل را attrs تعیین میکنیم سپس درونش چنین کدنویسی میکنیم
۰۱ ۰۲ ۰۳ ۰۴ ۰۵ ۰۶ ۰۷ ۰۸ ۰۹ ۱۰ ۱۱ | <?xml version="1.0" encoding="utf-8"?><resources> <declare-styleable name="Gallery1"> <attr name="android:galleryItemBackground" /> </declare-styleable></resources> |
حال یکسری عکس را کپی کرده و در مسیر res/drawble-mdpi کپی کنید بدین صورت
.
حال فایل MainActivity.java چنین کدنویسی میکنیم
۰۰۱ ۰۰۲ ۰۰۳ ۰۰۴ ۰۰۵ ۰۰۶ ۰۰۷ ۰۰۸ ۰۰۹ ۰۱۰ ۰۱۱ ۰۱۲ ۰۱۳ ۰۱۴ ۰۱۵ ۰۱۶ ۰۱۷ ۰۱۸ ۰۱۹ ۰۲۰ ۰۲۱ ۰۲۲ ۰۲۳ ۰۲۴ ۰۲۵ ۰۲۶ ۰۲۷ ۰۲۸ ۰۲۹ ۰۳۰ ۰۳۱ ۰۳۲ ۰۳۳ ۰۳۴ ۰۳۵ ۰۳۶ ۰۳۷ ۰۳۸ ۰۳۹ ۰۴۰ ۰۴۱ ۰۴۲ ۰۴۳ ۰۴۴ ۰۴۵ ۰۴۶ ۰۴۷ ۰۴۸ ۰۴۹ ۰۵۰ ۰۵۱ ۰۵۲ ۰۵۳ ۰۵۴ ۰۵۵ ۰۵۶ ۰۵۷ ۰۵۸ ۰۵۹ ۰۶۰ ۰۶۱ ۰۶۲ ۰۶۳ ۰۶۴ ۰۶۵ ۰۶۶ ۰۶۷ ۰۶۸ ۰۶۹ ۰۷۰ ۰۷۱ ۰۷۲ ۰۷۳ ۰۷۴ ۰۷۵ ۰۷۶ ۰۷۷ ۰۷۸ ۰۷۹ ۰۸۰ ۰۸۱ ۰۸۲ ۰۸۳ ۰۸۴ ۰۸۵ ۰۸۶ ۰۸۷ ۰۸۸ ۰۸۹ ۰۹۰ ۰۹۱ ۰۹۲ ۰۹۳ ۰۹۴ ۰۹۵ ۰۹۶ ۰۹۷ ۰۹۸ ۰۹۹ ۱۰۰ ۱۰۱ ۱۰۲ ۱۰۳ ۱۰۴ ۱۰۵ ۱۰۶ ۱۰۷ ۱۰۸ ۱۰۹ ۱۱۰ ۱۱۱ ۱۱۲ ۱۱۳ ۱۱۴ ۱۱۵ ۱۱۶ ۱۱۷ ۱۱۸ ۱۱۹ ۱۲۰ ۱۲۱ ۱۲۲ ۱۲۳ ۱۲۴ ۱۲۵ ۱۲۶ ۱۲۷ ۱۲۸ ۱۲۹ ۱۳۰ ۱۳۱ ۱۳۲ ۱۳۳ ۱۳۴ ۱۳۵ ۱۳۶ ۱۳۷ ۱۳۸ ۱۳۹ ۱۴۰ ۱۴۱ ۱۴۲ ۱۴۳ ۱۴۴ ۱۴۵ ۱۴۶ ۱۴۷ ۱۴۸ ۱۴۹ ۱۵۰ ۱۵۱ ۱۵۲ ۱۵۳ ۱۵۴ ۱۵۵ ۱۵۶ ۱۵۷ ۱۵۸ ۱۵۹ ۱۶۰ ۱۶۱ ۱۶۲ ۱۶۳ ۱۶۴ ۱۶۵ ۱۶۶ ۱۶۷ ۱۶۸ ۱۶۹ ۱۷۰ ۱۷۱ ۱۷۲ ۱۷۳ ۱۷۴ ۱۷۵ ۱۷۶ ۱۷۷ ۱۷۸ ۱۷۹ ۱۸۰ ۱۸۱ ۱۸۲ ۱۸۳ ۱۸۴ ۱۸۵ ۱۸۶ ۱۸۷ | package com.example.galleryexample;import android.app.Activity;import android.os.Bundle;import android.content.Context;import android.content.res.TypedArray;import android.view.View;import android.view.ViewGroup;import android.widget.ArrayAdapter;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.BaseAdapter;import android.widget.Gallery;import android.widget.Gallery;import android.widget.ImageView;import android.widget.Toast;public class MainActivity extends Activity { Integer[] imageID={ R.drawable.pic2, R.drawable.pic3, R.drawable.pic1, R.drawable.pic4, R.drawable.pic5 }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Gallery gallery = (Gallery)findViewById(R.id.gallery1); gallery.setAdapter(new ImageAdapter(this)); gallery.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView parent, View v, int position, long id) { Toast.makeText(getBaseContext(), "pic" + (position + 1) + " selected", Toast.LENGTH_SHORT).show(); } }); } public class ImageAdapter extends BaseAdapter { Context context; int itembackground; public ImageAdapter(Context c) { context =c; //--setting the style-- TypedArray a= obtainStyledAttributes(R.styleable.Gallery1); itembackground = a.getResourceId(R.styleable.Gallery1_android_galleryItemBackground, 0); a.recycle(); } //--returns the number of images-- public int getCount(){ return imageID.length; } //--return the item-- public Object getItem(int position){ return position; } //--return the ID of an image-- public long getItemId(int position){ return position; } //--return an ImageView view-- public View getView(int position , View convertview ,ViewGroup parent){ ImageView imageview; if (convertview == null){ imageview = new ImageView(context); imageview.setImageResource(imageID[position]); imageview.setScaleType(ImageView.ScaleType.FIT_XY); imageview.setLayoutParams(new Gallery.LayoutParams(150, 120)); } else{ imageview=(ImageView)convertview; } imageview.setBackgroundResource(itembackground); return imageview; } }} |
حال برنامه را اجرا کرده و یک گالری را خواهید دید که میتوان برروی هرکدام از تصاویر کلیک کنید و توجه کنید که با کلیک برروی هر کدام از انها پیغام Toast را خواهید دید
حال برای نمایش عکس انتخاب شده در ابزار ImageView تنها کافیست قسمت های پررنگ شده زیر را به فایل MainActivity.java اضافه کنید
۰۱ ۰۲ ۰۳ ۰۴ ۰۵ ۰۶ ۰۷ ۰۸ ۰۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ | @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Gallery gallery = (Gallery)findViewById(R.id.gallery1); gallery.setAdapter(new ImageAdapter(this)); gallery.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView parent, View v, int position, long id) { Toast.makeText(getBaseContext(), "pic" + (position + 1) + " selected", Toast.LENGTH_SHORT).show(); //--display the images in ImageView-- ImageView imageview=(ImageView)findViewById(R.id.image1); imageview.setImageResource(imageID[position]); } }); } |
حال برنامه را دوباره اجرا کرده نتیجه را ببینید که با انتخاب هر تصویر آن تصویر در ImageView نمایش داده میشود.
روش کار
ابتدا Gallery و ImageView را چنین به برنامه اضافه میکنیم
۰۱ ۰۲ ۰۳ ۰۴ ۰۵ ۰۶ ۰۷ ۰۸ ۰۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ | <Gallery android:id="@+id/gallery1" android:layout_width="fill_parent" android:layout_height="wrap_content" /><ImageView android:id="@+id/image1" android:layout_width="320dp" android:layout_height="250dp" android:scaleType="fitXY" /> |
ابزار ImageView حاوی تصویری خواهد بود که توسط کاربر هنگام اجرای برنامه اجرا خواهد شد.
برای اضافه کردن یک View داخلی برای رابط کاربری باید آنرا در عنصر xml مشخص کنید و ظاهر و باطن(عملیاتی که انجام میدهد) آنرا با خواص عنصر مشخص کرد.
Viewهای سفارشی را میتوان درون فایل های XML اضافه کرده و style دهید البته برای فعال کردن این رفتار باید به نکات زیر توجه کنید
- خواص سفارشی ابزار را باید درون <declare-styleable> در resource قرار داد.
- مشخص کردن خواص یا attrs های ابزار درون layout.
- بازیابی مقادیر atrributes در زمان اجرا.
- اعمال مقادیر خواص بازایابی شده به ابزار.
۰۱ ۰۲ ۰۳ ۰۴ ۰۵ ۰۶ ۰۷ ۰۸ ۰۹ ۱۰ ۱۱ | <?xml version="1.0" encoding="utf-8"?><resources> <declare-styleable name="Gallery1"> <attr name="android:galleryItemBackground" /> </declare-styleable></resources> |
.
لیستی از تصویر که باید نمایش داده شود در آرایه ای قرار خواهد گرفت
۰۱ ۰۲ ۰۳ ۰۴ ۰۵ ۰۶ ۰۷ ۰۸ ۰۹ ۱۰ ۱۱ ۱۲ ۱۳ | Integer[] imageID={ R.drawable.pic2, R.drawable.pic3, R.drawable.pic1, R.drawable.pic4, R.drawable.pic5 }; |
کلاس ImageAdapter که کلاس BaseAdapter را بسط میدهد را با یکسری تصویر که ایجاد کردیم تا به ابزار گالری متصل شود. کلاس BaseAdapter نقش یک پل را بین AdapterView و منبع داده که اطلاعات را تغذیه میکند, ایفا مینماید. نمونه هایی از AdapterView به عبارت زیر خواهد بود
- ListView
- GridView
- Spinner
- Gallery
برای کلاس ImageAdapter متدهای زیر را ایجاد کرده ایم
۰۱ ۰۲ ۰۳ ۰۴ ۰۵ ۰۶ ۰۷ ۰۸ ۰۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ | public class ImageAdapter extends BaseAdapter { Context context; int itembackground; public ImageAdapter(Context c) {…… } //--returns the number of images-- public int getCount(){… } //--return the item-- public Object getItem(int position){… } //--return the ID of an image-- public long getItemId(int position){… } //--return an ImageView view-- public View getView(int position , View convertview ,ViewGroup parent){ …. } |
یک BaseAdapter واقعی درواقع آن است که توسط آرایه ای از اشیا دلخواه برگشت داده میشود.به طور پیش فرض این کلاس انتظار دارد که resource id ارائه شده تنها ه یک شی مثلا TextView aاشاره کند درحالیکه اگر میخواهید از layoutهای بیشتر و پیچیده تر استفاده کنید باید از سازنده که id فیلد هارا میگیرد استفاده کنید.این field ID اشاره به شیی مثلا TextView در یک layout پیچیده تر دارد.
حال برای نمایش چیزی غیر از TextView برای نمایش آرایه مثلا آرایه از ImageViewها یا برخی داده ها علاوه بر متد()toString برای پر کردن viewها میتوان با Override کردن متد (getView(int, View, ViewGroup اقدام به return کردن نوع ابزاری که میخواهید کنید.
وقتی یک عکس درابزار نمایش Gallery انتخاب شود. محل عکس انتخاب شده(۰ برای عکس اول و ۱ برای عکس دوم و…. دلیل اضافه کردن یک واحد به position نیز همین است چون تصاویر از شماره ۰ شروع میشوند)نمایش داده میشود و همچنین آن عکس نیز در ImageView قرار میگیرد
۰۱ ۰۲ ۰۳ ۰۴ ۰۵ ۰۶ ۰۷ ۰۸ ۰۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ | Gallery gallery = (Gallery)findViewById(R.id.gallery1); gallery.setAdapter(new ImageAdapter(this)); gallery.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView parent, View v, int position, long id) { Toast.makeText(getBaseContext(), "pic" + (position + 1) + " selected", Toast.LENGTH_SHORT).show(); //--display the images in ImageView-- ImageView imageview=(ImageView)findViewById(R.id.image1); imageview.setImageResource(imageID[position]); |
