آموزش اندروید فصل سوم قسمت هجدهم – ابزار نمایش 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"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   

    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]);

مدرس : خانم مهندس داودی نژاد

آموزش اندروید فصل سوم قسمت هفدهم

آموزش اندروید فصل سوم قسمت نوزدهم