آموزش GridView سفارشی در اندروید

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش GridView سفارشی در اندروید می پردازیم از Gridview برای ساماندهی نمایش آیتم ها استفاده می شود در ادامه می توانید پیش  نمایشی از GridView را مشاهده کنید این GridView شامل عکس و متن است با ما همراه باشید.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#ffb74d">
    <GridView
        android:id="@+id/customgrid"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/os_texts"
        android:numColumns="2" />
    <TextView
        android:id="@+id/os_texts"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Programchi.ir"
        android:textSize="25dp"
        android:textAlignment="center"
        android:layout_marginTop="2dp"/>
</RelativeLayout>

ما یکسری عکس sample در برنامه قرار داده ایم شما می توانید از لینک زیر آنها را دانلود و در برنامه (پوشه mimap) قرار دهید.
لینک دانلود
یک فایل به نام sample_gridlayout.xml ایجاد کرده و کدهای زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="3dp">
    <ImageView
        android:id="@+id/os_images"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />
    <TextView
        android:layout_below="@+id/os_images"
        android:id="@+id/os_texts"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="This is Just Dummy Text"
        android:textAlignment="center"
        android:textSize="18dp"
        android:textStyle="bold"/>
</RelativeLayout>

کد بالا شکل آیتم ها را تنظیم می کند.
چون یک فایل برای نمایش سفارشی در GridView استفاده کردیم نیاز است تا آداپتور برای آن درست کنیم.
یک فایل جاوا به نام CustomAdapter.java ایجاد کرده و کدهای زیر را در آن قرار دهید .

package ir.programchi;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
public class CustomAdapter extends BaseAdapter{
    String [] result;
    Context context;
    int [] imageId;
    private static LayoutInflater inflater=null;
    public CustomAdapter(MainActivity mainActivity, String[] osNameList, int[] osImages) {
        result=osNameList;
        context=mainActivity;
        imageId=osImages;
        inflater = ( LayoutInflater )context.
                getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }
    @Override
    public int getCount() {
        return result.length;
    }
    @Override
    public Object getItem(int position) {
        return position;
    }
    @Override
    public long getItemId(int position) {
        return position;
    }
    public class Holder
    {
        TextView os_text;
        ImageView os_img;
    }
    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        Holder holder=new Holder();
        View rowView;
        rowView = inflater.inflate(R.layout.sample_gridlayout, null);
        holder.os_text =(TextView) rowView.findViewById(R.id.os_texts);
        holder.os_img =(ImageView) rowView.findViewById(R.id.os_images);
        holder.os_text.setText(result[position]);
        holder.os_img.setImageResource(imageId[position]);
        rowView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(context, "You Clicked "+result[position], Toast.LENGTH_SHORT).show();
            }
        });
        return rowView;
    }
}

کد بالا یک void دارد که تعداد عکس ها را به دست می آورد یک void دیگر view های ما در فایل sample_gridlayout پیدا می کند و در آن ما کلیک را نیز تعریف کردیم که در صورتی که کلیک شد یک Toast نمایش  داده شود.
حالا باید کد آخر که نام آن برابر MainActivity.java است را قرار دهید (اکتیویتی اصلی)

package ir.programchi;
import android.app.Activity;
import android.os.Bundle;
import android.widget.GridView;
public class MainActivity extends Activity {
    GridView gridview;
    public static String[] osNameList = {
            "Android",
            "iOS",
            "Linux",
            "MacOS",
            "MS DOS",
            "Symbian",
            "Windows 10",
            "Windows XP",
    };
    public static int[] osImages = {
            R.mipmap.android,
            R.mipmap.ios,
            R.mipmap.linux,
            R.mipmap.macos,
            R.mipmap.msdos,
            R.mipmap.symbian,
            R.mipmap.windows10,
            R.mipmap.winxp,};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gridview = (GridView) findViewById(R.id.customgrid);
        gridview.setAdapter(new CustomAdapter(this, osNameList, osImages));
    }
}

در بالا ابتدا لیستی از هر آیتم (عکس و متن) sample تهیه شده سپس view مربوط به GridView پیدا شده (findViewById) و آداپتور تنظیم  می شود.
 
این آموزش هم به پایان رسید.
 
موفق و پیروز باشید.

مطالعه بیشتر