เวลาเราเข้า Play Store แล้วเลือกโหลด App รายชื่อ App ที่เราเห็น จะแสดงผลด้วย GridView
การเขียน Code เพื่อดึงข้อมูลมาแสดงใน GridView ค่อนข้างซับซ้อนพอสมควร
ผมได้หาใน google แล้วรวบรวมตัวอย่าง Code จากเว็บต่างๆมาเรียบเรียงเป็นหน้านี้
เพื่อให้ง่ายในการเรียน เราจะเริ่มใหม่ตั้งแต่ต้น
1. เลือกเมนู Files > New > Android Project
2. พิมพ์ว่า My App แล้วกด Next ไปเรื่อยๆ แล้วกด Finish
3. ไฟล์ activity_main.xml ให้ใส่ Code นี้
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="auto_fit"
android:columnWidth="200dp"
android:horizontalSpacing="8dp"
android:verticalSpacing="7dp"
android:padding="8dp"
android:gravity="center"
android:background="#eeeeee"
android:stretchMode="columnWidth" >
</GridView>
4. ไฟล์ MainActivity.java ให้ใส่ Code นี้
package com.example.myapp;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
public class MainActivity extends Activity {
static Integer[] arrImg = {
R.drawable.pic_1, R.drawable.pic_2, R.drawable.pic_3,
R.drawable.pic_4, R.drawable.pic_5, R.drawable.pic_6,
R.drawable.pic_7, R.drawable.pic_8, R.drawable.pic_9
};
static final String[] titles = new String[] { "พันธ์ทิพย์", "อยากเห็นหน้าคุณ",
"หมาเห่าเครื่องบิน", "ใจสั่งมา", "อะไรก็ยอม", "ฝนตกที่หน้าต่าง", "แทบขาดใจ", "คุณรู้ไหมครับ", "รักรู้ไหม" };
static final String[] details = new String[] { "ก็ว่าจะชวนเธอไปดูหนัง และว่าจะชวน เธอไปกินข้าว "
+ "อยากจะคุย เรื่องของ สองเรา เรื่องเก่าๆ ที่ยังค้างคา", "test",
"test", "test", "test", "test", "test", "test", "test" };
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final GridView gView1 = (GridView)findViewById(R.id.gridView1);
gView1.setAdapter(new ImageAdapter(this, titles, details));
gView1.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v,
int position, long id) {
Intent i = new Intent(getApplicationContext(), FullImageActivity.class);
i.putExtra("id", arrImg[position]);
startActivity(i);
}
});
}
public class ImageAdapter extends BaseAdapter {
private Context context;
private final String[] titles;
private final String[] details;
public ImageAdapter(Context context, String[] titles, String[] details) {
this.context = context;
this.titles = titles;
this.details = details;
}
public int getCount() {
return arrImg.length;
}
public Object getItem(int position) {
return position;
}
public long getItemId(int position) {
return position;
}
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
int i1=position+1;
View gridView = new View(context);
gridView = inflater.inflate(R.layout.showimage, null);
ImageView imageView = (ImageView) gridView.findViewById(R.id.imageView1);
TextView title = (TextView) gridView.findViewById(R.id.textView1);
TextView detail = (TextView) gridView.findViewById(R.id.textView2);
imageView.setImageResource(arrImg[position]);
title.setText(i1+ ". "+titles[position]);
detail.setText(details[position]);
return gridView;
}
}
}
5. ใน
Project Explorer คลิกขวาบน
My App > res > layout แล้วเลือก
New > Android XML File
ตั้งชื่อไฟล์ว่า
showimage.xml แล้วกด Finish แล้วแก้ไข code ตามนี้
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/round_corner"
android:padding="0dp" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="74dp"
android:layout_height="74dp"
android:layout_margin="5dp"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp" >
</TextView>
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="5dp"
android:textColor="#999999"
android:textSize="12sp" >
</TextView>
</LinearLayout>
</LinearLayout>
6. ใน
Project Explorer คลิกขวาบน
My App > res > layout แล้วเลือก
New > Android XML File
ตั้งชื่อไฟล์ว่า
full_image.xml แล้วกด Finish แล้วแก้ไข code ตามนี้
<?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/full_image_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
7. ใน
Project Explorer คลิกขวาบน
My App > res > drawable-hdpi แล้วเลือก
New > Android XML File
ตั้งชื่อไฟล์ว่า
round_corner.xml แล้วกด Finish แล้วแก้ไข code ตามนี้
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- view background color -->
<solid
android:color="#ffffff" >
</solid>
<!-- view border color and width -->
<stroke
android:width="0dp"
android:color="#a9c5ac" >
</stroke>
<!-- If you want to add some padding -->
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" >
</padding>
<!-- Here is the corner radius -->
<corners
android:radius="3dp" >
</corners>
</shape>
8. ใน
Project Explorer คลิกขวาบน
My App > src > com.example.myapp แล้วเลือก
New > File
ตั้งชื่อไฟล์ว่า
FullImageActivity.java แล้วกด Finish แล้วแก้ไข code ตามนี้
package com.example.myapp;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;
public class FullImageActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.full_image);
Intent i = getIntent();
int id = i.getExtras().getInt("id");
ImageView imageView = (ImageView) findViewById(R.id.full_image_view);
imageView.setImageResource(id);
}
}
9. ใน
Project Explorer ในส่วนของ
My App > res > drawable-hdpi
ให้หาไฟล์ชื่อ pic_1.jpg ถึง pic_9.jpg มาใส่ไว้ใน folder นี้
อย่างของผมเก็บ Project ไว้ที่
C:\android\workspace\MyApp\
ดังนั้นจึง copy รูปมาใส่ไว้ที่
C:\android\workspace\MyApp\res\drawable-hdpi\
10. แก้ไฟล์ AndroidManifest.xml ตามนี้
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.myapp"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="19" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.myapp.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".FullImageActivity" >
</activity>
</application>
</manifest>
หรือดาวโหลด Code
ได้ที่นี่
วิธีเปิดไฟล์ที่ดาวโหลด
1. แตกไฟล์ไว้ที่
C:\android\workspace\
จะเห็น 2 โฟลเดอร์เกิดขึ้น คือ
C:\android\workspace\appcompat_v7
C:\android\workspace\MyApp
2. ใน eclipse เลือกเมนู File > Import
เลือก general > Existing projects into workspace
3. คลิก Browse แล้วเลือก
C:\android\workspace\
4. คลิกตามรูป แล้วกด Finish
หลังจากเขียน Code สำเร็จ App จะมีหน้าตาประมาณนี้
30 พ.ค. 57