มาทำ Gridview แนวนอนกัน

สวัสดีครับ หลังจากหายไป วันนี้ผมกลับมาพร้อมกับ GridView แนวนอน หรือ Horizontal Gridview แต่แบบธรรมดาก็เดี๋ยวจะง่ายไป เอาไปใช้กันไม่ถูก ผมเลยทำเป็น Custom View ให้ดูเลย โดยใน Gridview จะประกอบด้วย ImageView และ Textview เรามาดูตัวอย่างกันเลยดีกว่า

Screenshot_2015-03-10-23-07-09

เริ่มจากสร้าง Project กันขึ้นมาก่อน (ขอข้ามไปเลยนะครับ) จากนั้นก็ไปโหลดตัว Library TwoWayGridView จาก Link นี้นะครับ กดที่ Download Zip ด้านขวา

10-3-2558 0-02-06

จากนั้นแตก Zip แล้วเข้าไปใน Folder ครับ เปลี่ยนชื่อ Folder lib เป็น twowaygridview (อันนี้ผมตั้งเอง อาจจะเอาชื่ออื่นก็ได้แต่จำให้ได้ก็พอ)

กลับมาที่ Android Studio ครับ เลือก File>Import Module.. แล้ว Browse ไปยัง twowaygridview ที่เราแตกไฟล์ไว้ครับ จะเห็นว่ามีช่องเขียนว่า Module Name: twowaygridview จะ Copy ไว้ก็ได้นะครับ เพราะเราจะเอาไปวางใน build.gradle เพื่อ Import เข้า Project

10-3-2558 0-27-57

เปิดไฟล์ build.gradle ของ Module:app ครับ แล้ว เพิ่ม Code ตามด้านล่างเพื่อ Import Library

[xml]
dependencies {
compile fileTree(dir: ‘libs’, include: [‘*.jar’])
compile ‘com.android.support:appcompat-v7:21.0.3’
compile project(":twowaygridview")
}
[/xml]

แล้วกด Sync now เลยครับ

พัง!!!

ผลก็คือเราจะ Sync now ไม่สำเร็จครับ จะแจ้ง Error มา ไม่ต้องตกใจไป เรามีวิธีแก้ครับ ให้เราเข้าไปที่ twowaygridview>manifests>AndroidManifest.xml ครับ ทำการลบ Code ตรง android:icon=”@mimap/ic_launcher” ทิ้งไปครับ แล้วกลับไปที่ไฟล์ build.gradle กด Enter สักทีให้มันขึ้น Sync now แล้วกด Sync now ใหม่ครับ รอบนี้น่าจะได้กันแล้ว

10-3-2558 0-38-34

ต่อไปเรามาทำตัว Gridview กันครับ โดยผมจะเริ่มทำ Layout ของตัว Item ใน Gridview ก่อนนะครับ โดยในตัว Item จะประกอบด้วย ImageView และ Textview แบบนี้ (สร้างไฟล์ใน app>res>layout นะครับ เผื่อยังไม่รู้กัน)

[xml title=”grid_single.xml”]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<RelativeLayout
android:layout_margin="6dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<ImageView
android:id="@+id/grid_image"
android:src="@drawable/kamonway"
android:layout_centerHorizontal="true"
android:layout_width="40dp"
android:layout_height="40dp">
</ImageView>

<TextView
android:layout_below="@+id/grid_image"
android:id="@+id/grid_text"
android:layout_centerInParent="true"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textColor="#000000"
android:text="xxxxx"
android:gravity="center"
android:textSize="10sp" >
</TextView>

</RelativeLayout>

</LinearLayout>
[/xml]

ตัว Item ใช้ ImageView กับ Textview ธรรมดาครับ ไม่ได้พิสดารอะไร แต่อย่าลืมกำหนด ID ให้มันนะครับ เดี๋ยวจะเรียกกันไม่ได้

ต่อมาเรามาทำตัว Adapter กันครับ (ถ้าใครไม่เข้าใจว่า Adapter คืออะไรลองอ่าน บทความนี้ที่ Sleeping Forless ก่อนนะครับ Listview กับ Gridview คล้ายๆกัน )

[java title=”GridvewAdapter.java”]
public class GridviewAdapter extends BaseAdapter {
private Context mContext;
private final String[] name;
private final int[] Imageid;
public GridviewAdapter(Context c,String[] name,int[] Imageid) {
mContext = c;
this.Imageid = Imageid;
this.name = name;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return name.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 v = convertView;
SubHeadMenuViewHolder viewHolder;

if (convertView == null) {
LayoutInflater inflater = (LayoutInflater) mContext
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = inflater.inflate(R.layout.grid_single, null);
viewHolder = new SubHeadMenuViewHolder(v);
v.setTag(viewHolder);
} else {
viewHolder = (SubHeadMenuViewHolder) v.getTag();
}

viewHolder.mTxt.setText(name[position]);
viewHolder.mImg.setImageResource(Imageid[position]);

return v;
}

class SubHeadMenuViewHolder {
public TextView mTxt;
public ImageView mImg;

public SubHeadMenuViewHolder(View base) {
mTxt = (TextView) base.findViewById(R.id.grid_text);
mImg = (ImageView) base.findViewById(R.id.grid_image);
}
}

}
[/java]

บรรทัด 2-3 จะเป็น Array ที่จะเอามาเก็บ String กับ ID ของรูป
บรรทัด 5 จะเป็นการ initial ค่าตอนเรียกครั้งแรก เอาค่ามาเก็บในตัวแปรใน Class
บรรทัด 27 จะเป็นการสร้าง view สำหรับใส่ใน Gridview
บรรทัด 42-43 จะเป็นการกำหนด String ที่จะแสดงและ Id ของรูปที่แสดงครับ
บรรทัด 48 เป็น ViewHolder ของ Layout ที่ประกาศไว้ก่อน โดย ID จะต้องเหมือนกับใน grid_single.xml

จากนั้นเรามาที่ activity_main.xml กันครับเพื่อสร้าง twowaygridview ขึ้นมาตาม Code ด้านล่าง

[xml title=”activity_main.xml”]
<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" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<com.jess.ui.TwoWayGridView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/gridview"
android:layout_width="fill_parent"
android:layout_height="200dp"
app:columnWidth="80dp"
app:rowHeight="60dp"
app:numColumns="auto_fit"
app:numRows="2"
app:stretchMode="columnWidth"
app:scrollDirectionPortrait="horizontal"
app:gravity="center"/>

</RelativeLayout>
[/xml]

***ผมลองปรับ columWidth กับ rowHeight ดูแล้วก็ไม่มีผลอะไร ขนาดจะเปลี่ยนตาม single_grid.xml ของเรา

เปิดไฟล์ MainActivity.java ขึ้นมาครับ เราจะมาเรียกใช้กันแล้ว ประกาศตัวแปร TwoWayGridView กันก่อนเลย
[java]
TwoWayGridView gridView;
[/java]

จากนั้นก็ประกาศ String กับ Id ของภาพที่เราจะเอามาแสดง
[java]
String[] name = {
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15"
} ;
int[] imageId = {
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway
};
[/java]

ใน onCreate หลังจาก setContentView แล้วก็ทำการ Cast gridview กันเลย
[java]
gridView = (TwoWayGridView) findViewById(R.id.gridview);
[/java]

จากนั้นก็ประกาศตัว Adapter ที่เราสร้างมา
[java]
final GridviewAdapter adapterGrid = new GridviewAdapter(getApplication(), name, imageId);
[/java]

แล้วก็กำหนดให้ gridview ใช้ adapter ที่เราสร้างเป็นข้อมูลข้างใน
[java]
gridView.setAdapter(adapterGrid);
[/java]

แล้วก็ลองรันกันดูเลยครับ จะได้ออกมาเป็นแบบนี้
Screenshot_2015-03-10-23-07-09

เสร็จแล้วครับกับ Horizontal Gridview ไม่ยากไปใช่มั้ยครับ ลองปรับเปลี่ยน xml ดูตามที่ต้องการนะครับ

[java title=”MainActivity.java”]
public class MainActivity extends ActionBarActivity {

TwoWayGridView gridView;
String[] name = {
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15"
} ;
int[] imageId = {
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway,
R.drawable.kamonway
};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

gridView = (TwoWayGridView) findViewById(R.id.gridview);

final GridviewAdapter adapterGrid = new GridviewAdapter(getApplication(), name, imageId);

gridView.setAdapter(adapterGrid);

gridView.setOnItemClickListener(new TwoWayAdapterView.OnItemClickListener() {
@Override
public void onItemClick(TwoWayAdapterView<?> parent, View view, int position, long id) {
Toast.makeText(MainActivity.this,view.getTag().toString(),Toast.LENGTH_SHORT).show();
}
});

}

}
[/java]

About author View all posts

admin