در قسمت سی و هفتم آموزش اندروید در رابطه با ابزار نمایش GridView که قابلیت دو بعدی کردن نمایش را به ما میدهد صحبت میکنیم.

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

توجه : برای مشاهده تصاویر در سایز اصلی برروی آنها کلیک کنید.

ابزار نمایش GridView

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

پروژه جدیدی به نام GridView ایجاد کرده و در فایل activity_main.xml یک ابزار GridView به صورت زیر ایجاد میکنیم

   <GridView

        android:id="@+id/grdview1"

        android:layout_width="wrap_content"

        android:layout_height="fill_parent"

        android:clickable="true"

        android:gravity="center"

        android:numColumns="auto_fit"

        android:stretchMode="columnWidth" >

</GridView>

.

همانگونه که مشاهده میکنید در ویژگی هایی که برای این ابزار تعیین شده ویژگی های جدیدی وجود دارد که به شرح زیر میباشد

• Clickable : دارای قابلیت کلیک کردن.
• Gravity :گرانش در داخل هر سلول را مشخص میکند.
• numColumns : برای تعیین کردن تعداد ستون درون GravityView همچنین میتوانید مقدار این مشخصه را یک عدد بدهید تا به همان مقدار ستون ایجاد شود.اما پیشنهاد میشود از مقدار auto_fit استفاده شود.
• stretchMode : مشخص میکند که چگونه ستونها باید کشش به پر کردن فضای خالی موجود داشته باشند.

حال فایل xml دیگری با نام grid_item.xml ایجاد کرده و درون آن یک شی ImageView برای پر کردن سلول های GridView ایجاد میکنیم

<?xml version="1.0" encoding="utf-8"?>

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >



    <ImageView

        android:id="@+id/img1"

        android:layout_width="50dp"

        android:layout_height="100dp"

        />

</LinearLayout>

هنگام ایجاد شی ImageView به این نکته توجه کنید که حتما مقادیر width و height را به صورت دقیق مشخص کنید تا تمامی تصاویر در یک سایز معین نمایش داده شود.

حال یک فایل جاوا با نام GridAdapter.java ایجاد کرده که از کلاس BaseAdapter پشتیبانی میکند و درون آن چنین کدنویسی میکنیم

package com.example.gridview;



import android.app.Activity;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;



public class GridAdapter extends BaseAdapter {

         Context context;

      int[] imageid;



      public GridAdapter(Context c, int[] Imageid ) {

          context = c;

          this.imageid = Imageid;

      }



      @Override

      public int getCount() {

          return imageid.length;

      }



      @Override

      public Object getItem(int position) {

          return null;

      }



      @Override

      public long getItemId(int position) {

          return position;

      }



      @Override

      public View getView(int position, View convertView, ViewGroup parent) {

          View grid;

          LayoutInflater inflater = (LayoutInflater) context

              .getSystemService(Context.LAYOUT_INFLATER_SERVICE);



          if (convertView == null) {



              grid = new View(context);

              grid = inflater.inflate(R.layout.grid_item, null);

              ImageView imageView = (ImageView)grid.findViewById(R.id.img1);



              imageView.setImageResource(imageid[position]);

          } else {

              grid = (View) convertView;

          }



          return grid;

      }



}

.

همانگونه که مشاهده میکنید این کلاس جاوا از کلاس BaseAdapter پشتیبانی میکند پس باید متدهایی getCount() و getItemId() و getView() و getItem() درونش Override شوند پس این متدهارا تعریف و دستورات مناسب را درونشان مینویسیم برای مثال متد getItemId() برای مشخص کردن ای دی تصویر انتخاب شده است که در ادامه در یک پیغام Toast نمایش داده میشود.

حال فایل عکس هایی را انتخاب و کپی میکنیم و در مسیر res/drawble-mdpi قرار میدهیم

حال درون فایل MainActivity.java نیز چنین کدنویسی میکنیم

package com.example.gridview;



import android.os.Bundle;

import android.app.Activity;

import android.view.View;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.GridView;

import android.widget.Toast;



public class MainActivity extends Activity {



    GridView grid;



    int[] imageId = {

            R.drawable.pic1,

            R.drawable.pic2,

            R.drawable.pic3,

            R.drawable.pic4,

            R.drawable.pic5,

            R.drawable.pic6,

            R.drawable.pic7,

            R.drawable.pic8,

            R.drawable.pic9,

            R.drawable.pic10,



    };



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);



        final GridAdapter adapter = new GridAdapter(MainActivity.this, imageId);

        grid=(GridView)findViewById(R.id.grdview1);

                grid.setAdapter(adapter);

                grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {



                    @Override

                    public void onItemClick(AdapterView<?> parent, View view,

                                            int position, long id) {

                        Toast.makeText(MainActivity.this, "You Clicked at Item "
 +adapter.getItemId(position+1), Toast.LENGTH_SHORT).show();



                    }

                });



    }

}

همانگونه که قبلا هم گفته شده کلاس adapter در واقع حکم یک پل بین بانک داده و adapterView را دارد پس ما نیز یک شی با نام adapter از جنس کلاس GridAdapter ایجاد کرده و مشخصه setAdapter مربوط به GridView  را با این شی مقداردهی کرده ایم و در انتها نیز برای رویداد onClick هر آیتم یا تصویر یک دستور Toast قرار داده ایم که پیغام مناسب به همراه position که در کلاس GridAdapter بوجود می آید را نمایش دهد(چون ایندکس آیتم ها یا همان تصاویر موجود از ۰ شروع میشود پس در پیغام Toast این مقدار را +۱ میکنیم تا از ۱ نمایش داده شود)

حال برنامه را اجرا کرده و نتیجه را بدین صورت مشاهده کنید

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

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

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