عنوان دانش: چگونه می توان یک Layout دینامیک از تصاویر متعدد و عناوین مربوطه ایجاد کرد؟

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

قرار است که با استفاده از BaseAdapter یک customGridView ایجاد کنیم. این GridView از ImageView و TextView استفاده خواهد کرد تا آیتم های لیست ما را نمایش دهد.

لیست مورد نظر ما در این مثال، آیکون های زبان های رایج برنامه نویسی به همراه عنوان هر یک می باشد.

خوب، بیاید آستین ها را بالا بزنیم و کار رو شروع کنیم. ابتدا یک پروژه به نام GridView ایجاد کنید. 

اول از همه بیاید که layout اصلی برنامه را ایجاد کنیم.

این layout را activity_main.xml بنامید.

سپس کد زیر را در آن کپی نمایید.

<RelativeLayoutxmlns: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"

android:orientation="vertical"

tools:context=".MainActivity">

<GridView

android:id="@+id/gridView1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_below="@+id/textView1"

android:numColumns="3">

</GridView>

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="25dp"

android:textStyle="bold"

android:text=" Computer Languages..."/>

</RelativeLayout>

حالا باید یک Layout جدید ایجاد نماییم که در آن چیدمان نمایش هر یک از آیتم های لیست خود را در آن نمایش دهیم.

برای این منظور یک Layout جدید به نام program_list.xml ایجاد می کنیم و کد زیر را در آن کپی می کنیم.

در این layout یک ImageView جهت نمایش آیکون / لوگو ایجاد می کنیم و از یک TextView جهت نمایش عنوان تصویر استفاده شده اضافه می کنیم.

<?xmlversion="1.0"encoding="utf-8"?>

<LinearLayoutxmlns: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/imageView1"

android:layout_gravity="center"

android:layout_width="88dp"

android:layout_height="88dp"

android:layout_marginTop="5dp"

android:layout_marginBottom="5dp"

android:src="@drawable/ic_launcher"/>

<TextView

android:id="@+id/textView1"

android:layout_gravity="center"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="15dp"

android:layout_marginTop="5dp"

android:layout_marginBottom="5dp"

android:text="TextView"/>

</LinearLayout>

حالا می ریم سراغ فایل MainActivity.java

packagecom.leader.simplegridview;

importjava.util.ArrayList;

importandroid.os.Bundle;

importandroid.app.Activity;

importandroid.content.Context;

importandroid.view.Menu;

importandroid.widget.AdapterView;

importandroid.widget.GridView;

publicclassMainActivityextendsActivity{

GridViewgv;

Contextcontext;

ArrayListprgmName;

publicstaticString[]prgmNameList={"Let Us C","c++","JAVA","Jsp","Microsoft .Net","Android","PHP","Jquery","JavaScript"};

publicstaticint[]prgmImages={R.drawable.images,R.drawable.images1,R.drawable.images2,R.drawable.images3,R.drawable.images4,R.drawable.images5,R.drawable.images6,R.drawable.images7,R.drawable.images8};

@Override

protectedvoidonCreate(BundlesavedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

gv=(GridView)findViewById(R.id.gridView1);

gv.setAdapter(newCustomAdapter(this,prgmNameList,prgmImages));

}

@Override

publicbooleanonCreateOptionsMenu(Menumenu){

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main,menu);

returntrue;

}

}

یک فولدر زیر فولدار res ایجاد نمائید و آن را drawable بنامید.

9 تصویر مربوط به آیکون / لوگوهای مورد استفاده را به نام های images و images1 الی images8 در این فولدر کپی کنید.

سپس یک کلاس جدید به نام CustomAdapter ایجاد کنید و کد زیر را در ان کپی نمائید.

packagecom.leader.simplegridview;

importandroid.content.Context;

importandroid.view.LayoutInflater;

importandroid.view.View;

importandroid.view.View.OnClickListener;

importandroid.view.ViewGroup;

importandroid.widget.BaseAdapter;

importandroid.widget.ImageView;

importandroid.widget.TextView;

importandroid.widget.Toast;

publicclassCustomAdapterextendsBaseAdapter{

String[]result;

Contextcontext;

int[]imageId;

privatestaticLayoutInflaterinflater=null;

publicCustomAdapter(MainActivitymainActivity,String[]prgmNameList,int[]prgmImages){

// TODO Auto-generated constructor stub

result=prgmNameList;

context=mainActivity;

imageId=prgmImages;

inflater=(LayoutInflater)context.

getSystemService(Context.LAYOUT_INFLATER_SERVICE);

}

@Override

publicintgetCount(){

// TODO Auto-generated method stub

returnresult.length;

}

@Override

publicObjectgetItem(intposition){

// TODO Auto-generated method stub

returnposition;

}

@Override

publiclonggetItemId(intposition){

// TODO Auto-generated method stub

returnposition;

}

publicclassHolder

{

TextViewtv;

ImageViewimg;

}

@Override

publicViewgetView(finalintposition,ViewconvertView,ViewGroupparent){

// TODO Auto-generated method stub

Holderholder=newHolder();

ViewrowView;

rowView=inflater.inflate(R.layout.program_list,null);

holder.tv=(TextView)rowView.findViewById(R.id.textView1);

holder.img=(ImageView)rowView.findViewById(R.id.imageView1);

holder.tv.setText(result[position]);

holder.img.setImageResource(imageId[position]);

rowView.setOnClickListener(newOnClickListener(){

@Override

publicvoidonClick(Viewv){

// TODO Auto-generated method stub

Toast.makeText(context,"You Clicked "+result[position],Toast.LENGTH_LONG).show();

}

});

returnrowView;

}

}