واکنون ایزی گرام 3 | ایزی گرام 3 با کلی امکانات جدید منتشر شد | کلیک کنید

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

دسته‌بندی: آموزش
شهریور ۲۳, ۱۳۹۷

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

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

Gridview چیست ؟

Gridview یک ViewGroup بوده که آیتم‌ های یک منبع را به شکل دو بعدی نشان می‌دهد. شما می توانید از طریق آداپتورها آیتم های منبع را به صورت خود به خودی دریافت نمایید و آن‌ها را به Gridview اضافه کنید.

روش کار با آداپتور به این شکل است که بعد از به دست آوردن اطلاعات از منبع ، یک view برای آن ها درست می شود و نتیجه ها را درون آن قرار داده، سپس به کاربر نمایش میدهد.

 

ویژگی‌های GridView :

 

android:id : آیدی منحصر به فردی را برای view شما به وجود می آورد.

android: columnWidth : فاصله بین  ستون ها را تنظیم نموده و می تواند px, dp, sp, in, یا mm  نیز باشد.

android: gravity : جاذبه هر view که در GridView است را تنظیم نموده و در کل پنج شکل مختلف دارد top, bottom, left, right, center می باشد.

android: horizontalSpacing : تنظیم کننده ی فاصله افقی بین هر ستون است.

android: numColumns : تعداد ستون را مشخص کرده و قادر است به تعداد مشخص و یا auto_fit یعنی تا جای ممکن ستون نمایش دهد.

android: stretchMode : به این شکل است که مشخص می کند تا چقدر هر ستون کشیده شود تا فاصله های خالی را پر کند.

 

strechMode به چهار نوع تقسیم می شود

none : یعنی حالت غیرفعال شود.

 

حالت های مختلف آن شامل :
spacingWidth :  کشیده شدن فاصله بین هر ستون .

columnWidth : تقسیم هر ستون به اندازه مساوی .

spacingWidthUniform : تقسیم هر ستون به اندازه های مختلف .

android:verticalSpacing : تنظیم فاصله بین هر ردیف .

 

برای ساخت یک GridView لازم است که لایه ای ایجاد کنیم تا محتوای نمایشی در ان قرار گیرد.

 

محتوای مورد نظر شامل تصویر و عکس می باشد ، منظور همان نام ایتم GridView و تصویر آیتم GridView است.

 

GridView

 

در ابتدا پروژه ی جدیدی ایجاد کرده و نام آن را   Custom GridView   می گذاریم. همچنین برای لایه اصلی پروژه activity_main.xml  از grid استفاده می کنیم.

این لایه فقط نمایش دهنده ی گرید خواهد بود.

 

" RelativeLayout xmlns:android="http://schemas. android.com/apk/res/ android >
 xmlns:tools="http://schemas.android.com/tools"
android: layout_width ="match_parent"
android: layout_height ="match_parent"
tools: context =".MainActivity" >

GridView
android: numColumns ="auto_fit"
android: gravity ="center"
android: columnWidth ="100dp"
android: stretchMode ="columnWidth"
android: layout_width ="fill_parent"
android: layout_height ="fill_parent"
android: id ="@+id/grid"

</RelativeLayout 

 

لایه ی اصلی را که تکمیل نمودیم باید یک لایه ی Row ایجاد نماییم و محتوای اصلی GridView خود را درون لایه ی Row قرار دهیم. بنابراین لایه ای را ساخته و نام آن را grid_single.xml می گذاریم.

 

همچنین ببینید :   چطور ASO را برای برنامه‌های اندرویدی در فروشگاه گوگل‌پلی اجرایی کنیم؟

این لایه ی حاوی یک نمایش دهنده ی تصویر (ImageView) و نمایش دهنده ی متن (TextView) است.

 

RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android: layout_width ="wrap_content"
android: layout_height ="wrap_content"
android:padding ="5dp"
ImageView
android: id ="@+id/grid_image"
android: layout_width ="wrap_content"
android: layout_height ="wrap_content"
android: layout_alignParentTop ="true"
android: layout_centerHorizontal ="true"
TextView
android:id ="@+id/grid_text"
android: layout_width ="wrap_content"
android: layout_height ="wrap_content"
android: layout_below ="@+id/grid_image"

android: textSize ="15sp"

/RelativeLayout

 

بعد از تمام شدن ایجاد لایه های برنامه حال باید کلاس های جاوا را بسازیم. حال یک کلاس جدید می سازیم و اسمش را Custom Grid می گذاریم.

درون این کلاس اطلاعات لازم برای گرید را می نویسیم. منظور از این اطلاعات تصاویر و عکس هایی است که در grid_single.xml هستند.

کلاس MainActivity.java محتویات این کلاس را تامین می کند.

 

 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 CustomGrid extends BaseAdapter{

//نمایش دهنده ی قسمت های مختلف مانند نمایش متن، تصاویر و اخذ اطلاعات آن ها از  اکتیوتی اصلی

private Context mContext;
private final String[] web;
private final int[] Imageid;

public CustomGrid(Context c,String[] web,int[] Imageid ) {
mContext = c;
this.Imageid = Imageid;
this.web = web;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return web.length;
}
@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return null;
}
@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
View grid;
LayoutInflater inflater = (LayoutInflater) mContext
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
grid = new View(mContext);
grid = inflater.inflate(R.layout.grid_single, null);
TextView textView = (TextView) grid.findViewById(R.id.grid_text);
ImageView imageView = (ImageView)grid.findViewById(R.id.grid_image);
textView.setText(web[position]);
imageView.setImageResource(Imageid[position]);
} else {
grid = (View) convertView;
}
return grid;
}
}

 

در مرحله ی نهایی به MainActivity.java و یا همان کلاس اصلی برنامه ی خود می رسیم. در کلاس MainActivity.java در ابتدا متن های لازم را به صورت String وارد می کنیم و پس از آن به وسیله ی Int تصاویر را ایجاد می کنیم.

از یک adapter استفاده کرده و اطلاعات را گرید می کنیم. بعد از این مرحله با کمک گرفتن از دستور setOnItemClickListener قابلیت کلیک را برای هر یک به وجود می اوریم.

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

 

 import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;
public class MainActivity extends Activity {

//نام های قابل نمایش
GridView grid;
String[] web = {
"Appinapps",
"Google",
"Apple",
"Dell",
"Asus",
"Samsung",
"Sony",
"Nokia",
"Microsoft",
"Android",
} ;
//تصاویر قابل نمایش
int[] imageId = {
R.drawable.ic_launcher,
R.drawable.ic_launcher,
R.drawable.ic_launcher,
R.drawable.ic_launcher,
R.drawable.ic_launcher,
R.drawable.ic_launcher,
R.drawable.ic_launcher,
R.drawable.ic_launcher,
R.drawable.ic_launcher,
R.drawable.ic_launcher,
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

//معرفی یک اداپتر 
CustomGrid adapter = new CustomGrid(MainActivity.this, web, imageId);
grid=(GridView)findViewById(R.id.grid);
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 " +web[+ position],  Toast.LENGTH_SHORT).show();
}
});
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}

 

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

پیام بگذارید


تومان