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

0

สวัสดีครับ หลังจากหายไป วันนี้ผมกลับมาพร้อมกับ 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

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

แล้วกด 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 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>

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

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

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

}

บรรทัด 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 ด้านล่าง

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

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

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

TwoWayGridView gridView;

จากนั้นก็ประกาศ String กับ Id ของภาพที่เราจะเอามาแสดง

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

ใน onCreate หลังจาก setContentView แล้วก็ทำการ Cast gridview กันเลย

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

จากนั้นก็ประกาศตัว Adapter ที่เราสร้างมา

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

แล้วก็กำหนดให้ gridview ใช้ adapter ที่เราสร้างเป็นข้อมูลข้างใน

gridView.setAdapter(adapterGrid);

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

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

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

    }

}
Facebook Comments
Share.

About Author

Comments are closed.