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

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

به سادگی می توانید شکل ظاهری آن را تغییر دهید.
ابتدا در layout اصلی که در اینجا نام آن برابر با activity_main.xml است کد های زیر را قرار دهید.

<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>

<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>

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

ما یکسری عکس 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>

<?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;
    }
}

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

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) و آداپتور تنظیم می شود.

این آموزش هم به پایان رسید.

موفق و پیروز باشید.

مطالعه بیشتر

3 پاسخ به “آموزش GridView سفارشی در اندروید”

مهرداد گفت:
مرداد 29, 1398 در 12:41 ب.ظ
سلام مهندس، برای ساخت فروشگاه هم از «گرید ویو» استفاده میشه؟
منظورم لیست محصولاته! اگه اینطوریه چطور تصاویر محصول داخلش نمایش داده میشه؟
ممنون میشم بگید☺
پاسخ
1. یاشار گفت:
  مرداد 4, 1400 در 10:04 ق.ظ
  سلام این ساختاری که اینجا ایجتد شده برای دیتا های مشخض شده است شما باید یه کلاس مدل دیگه طراحی کنید که آداپتورتون دیتا ها رو از اون بگیره و وقتی شما دیتایی رو از اینترنت مگیرید درون مدل جایگزاری میکنید.
  پاسخ
ابوالفضل گفت:
اسفند 4, 1402 در 6:53 ق.ظ
سلام چجوری بجای اینکه با کلیک روی آیتم ها toast نشون بده، به اکتیویتی های جدید منتقل بشیم؟
لطفا کمکم کنید
پاسخ

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

مطالب مشابه

3 پاسخ به “آموزش GridView سفارشی در اندروید”

دیدگاهتان را بنویسید لغو پاسخ

مطالب مشابه

3 پاسخ به “آموزش GridView سفارشی در اندروید”

دیدگاهتان را بنویسید لغو پاسخ

اشتراک گذاری در شبکه های اجتماعی