การสร้าง Custom GridView

layout/custom_layout.xml

<?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="wrap_content"
    android:background="@null"
    android:descendantFocusability="blocksDescendants"
    android:orientation="vertical"
    android:padding="7dp">

    <FrameLayout
        android:layout_width="150dp"
        android:layout_height="110dp"
        android:layout_gravity="center">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="150dp"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/textView_title"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="#99ccddff"
            android:maxLines="2"
            android:padding="5dp"
            android:textColor="#0ff"
            android:textSize="18sp" />

        <CheckBox
            android:id="@+id/checkbox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|right"
            android:layout_margin="0dp"
            android:background="#99ffffff" />
    </FrameLayout>

    <TextView
        android:id="@+id/textView_desc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="5dp"
        android:maxLines="2"
        android:textSize="16sp" />
</LinearLayout>

<?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="wrap_content"

android:background="@null"

android:descendantFocusability="blocksDescendants"

android:orientation="vertical"

android:padding="7dp">

<FrameLayout

android:layout_width="150dp"

android:layout_height="110dp"

android:layout_gravity="center">

<ImageView

android:id="@+id/imageView"

android:layout_width="150dp"

android:layout_height="wrap_content" />

<TextView

android:id="@+id/textView_title"

android:layout_width="150dp"

android:layout_height="wrap_content"

android:layout_gravity="bottom"

android:background="#99ccddff"

android:maxLines="2"

android:padding="5dp"

android:textColor="#0ff"

android:textSize="18sp" />

<CheckBox

android:id="@+id/checkbox"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="top|right"

android:layout_margin="0dp"

android:background="#99ffffff" />

</FrameLayout>

<TextView

android:id="@+id/textView_desc"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginTop="5dp"

android:maxLines="2"

android:textSize="16sp" />

</LinearLayout>

CustomAdapter.java

package com.phaisarn.myapplication;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;

import java.util.ArrayList;

public class CustomAdapter extends ArrayAdapter {
    private Context mContext;
    private ArrayList<ItemInfo> mItems;

    public CustomAdapter(Context context, ArrayList<ItemInfo> items) {
        super(context, 0, items);
        mContext = context;
        mItems = items;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder vHolder;
        if(convertView == null) {
            LayoutInflater inflater = LayoutInflater.from(mContext);
            convertView = inflater.inflate(R.layout.custom_layout, parent, false);
            vHolder = new ViewHolder(convertView);
            convertView.setTag(vHolder);
        } else {
            vHolder = (ViewHolder)convertView.getTag();
        }

        ItemInfo itemInfo = mItems.get(position);
        vHolder.imageView.setImageResource(itemInfo.imgId);
        vHolder.textTitle.setText(itemInfo.textTitle);
        vHolder.textDesc.setText(itemInfo.textDesc);

        return convertView;
    }
}

package com.phaisarn.myapplication;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import java.util.ArrayList;

public class CustomAdapter extends ArrayAdapter {

private Context mContext;

private ArrayList<ItemInfo> mItems;

public CustomAdapter(Context context, ArrayList<ItemInfo> items) {

super(context, 0, items);

mContext = context;

mItems = items;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

ViewHolder vHolder;

if(convertView == null) {

LayoutInflater inflater = LayoutInflater.from(mContext);

convertView = inflater.inflate(R.layout.custom_layout, parent, false);

vHolder = new ViewHolder(convertView);

convertView.setTag(vHolder);

} else {

vHolder = (ViewHolder)convertView.getTag();

}

ItemInfo itemInfo = mItems.get(position);

vHolder.imageView.setImageResource(itemInfo.imgId);

vHolder.textTitle.setText(itemInfo.textTitle);

vHolder.textDesc.setText(itemInfo.textDesc);

return convertView;

}

ItemInfo.java

package com.phaisarn.myapplication;

public class ItemInfo {
    public int imgId;
    public String textTitle;
    public String textDesc;

    public ItemInfo(int imgId, String textTitle, String textDesc) {
        this.imgId = imgId;
        this.textTitle = textTitle;
        this.textDesc = textDesc;
    }
}

package com.phaisarn.myapplication;

public class ItemInfo {

public int imgId;

public String textTitle;

public String textDesc;

public ItemInfo(int imgId, String textTitle, String textDesc) {

this.imgId = imgId;

this.textTitle = textTitle;

this.textDesc = textDesc;

}

ViewHolder.java

package com.phaisarn.myapplication;

import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

public class ViewHolder {
    ImageView imageView;
    TextView textTitle;
    TextView textDesc;

    public ViewHolder(View view) {
        imageView = (ImageView) view.findViewById(R.id.imageView);
        textTitle = (TextView) view.findViewById(R.id.textView_title);
        textDesc = (TextView) view.findViewById(R.id.textView_desc);
    }
}

package com.phaisarn.myapplication;

import android.view.View;

import android.widget.ImageView;

import android.widget.TextView;

public class ViewHolder {

ImageView imageView;

TextView textTitle;

TextView textDesc;

public ViewHolder(View view) {

imageView = (ImageView) view.findViewById(R.id.imageView);

textTitle = (TextView) view.findViewById(R.id.textView_title);

textDesc = (TextView) view.findViewById(R.id.textView_desc);

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

tools:context=".MainActivity">

<android.support.design.widget.AppBarLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="?attr/colorPrimary"

app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|end"

android:layout_margin="@dimen/fab_margin"

app:srcCompat="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnWidth="180dp"
        android:horizontalSpacing="10dp"
        android:numColumns="auto_fit"
        android:stretchMode="spacingWidth"
        android:verticalSpacing="30dp" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/content_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

tools:context=".MainActivity"

tools:showIn="@layout/activity_main">

<GridView

android:id="@+id/gridView"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:columnWidth="180dp"

android:horizontalSpacing="10dp"

android:numColumns="auto_fit"

android:stretchMode="spacingWidth"

android:verticalSpacing="30dp" />

</LinearLayout>

MainActivity.java

package com.phaisarn.myapplication;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.Arrays;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
        fab.hide();

        ArrayList<ItemInfo> itemArray = new ArrayList<>();
        int id = R.drawable.cupcake;
        itemArray.addAll(Arrays.asList(
                new ItemInfo(R.drawable.cupcake, "Cupcake", "Version: 1.5"),
                new ItemInfo(R.drawable.donut, "Donut", "Version: 1.6"),
                new ItemInfo(R.drawable.eclair, "Eclair", "Version: 2.0 - 2.1"),
                new ItemInfo(R.drawable.froyo, "Froyo", "Version: 2.2"),
                new ItemInfo(R.drawable.gingerbread, "Gingerbread", "Version: 2.3 - 2.4"),
                new ItemInfo(R.drawable.honeycomb, "Honeycomb", "Version: 3.0 - 3.2"),
                new ItemInfo(R.drawable.icecreamsandwich, "Ice Cream Sandwich", "Version: 4.0"),
                new ItemInfo(R.drawable.jellybean, "Jelly Bean", "Version: 4.1")));

        CustomAdapter adapter = new CustomAdapter(getBaseContext(), itemArray);

        GridView gridView = (GridView) findViewById(R.id.gridView);
        gridView.setAdapter(adapter);

        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                TextView textView = (TextView) view.findViewById(R.id.textView_title);
                Toast.makeText(getBaseContext(), textView.getText().toString(), 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.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

package com.phaisarn.myapplication;

import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.design.widget.Snackbar;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.View;

import android.view.Menu;

import android.view.MenuItem;

import android.widget.AdapterView;

import android.widget.GridView;

import android.widget.TextView;

import android.widget.Toast;

import java.util.ArrayList;

import java.util.Arrays;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

fab.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)

.setAction("Action", null).show();

}

});

fab.hide();

ArrayList<ItemInfo> itemArray = new ArrayList<>();

int id = R.drawable.cupcake;

itemArray.addAll(Arrays.asList(

new ItemInfo(R.drawable.cupcake, "Cupcake", "Version: 1.5"),

new ItemInfo(R.drawable.donut, "Donut", "Version: 1.6"),

new ItemInfo(R.drawable.eclair, "Eclair", "Version: 2.0 - 2.1"),

new ItemInfo(R.drawable.froyo, "Froyo", "Version: 2.2"),

new ItemInfo(R.drawable.gingerbread, "Gingerbread", "Version: 2.3 - 2.4"),

new ItemInfo(R.drawable.honeycomb, "Honeycomb", "Version: 3.0 - 3.2"),

new ItemInfo(R.drawable.icecreamsandwich, "Ice Cream Sandwich", "Version: 4.0"),

new ItemInfo(R.drawable.jellybean, "Jelly Bean", "Version: 4.1")));

CustomAdapter adapter = new CustomAdapter(getBaseContext(), itemArray);

GridView gridView = (GridView) findViewById(R.id.gridView);

gridView.setAdapter(adapter);

gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {

TextView textView = (TextView) view.findViewById(R.id.textView_title);

Toast.makeText(getBaseContext(), textView.getText().toString(), 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.menu_main, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar will

// automatically handle clicks on the Home/Up button, so long

// as you specify a parent activity in AndroidManifest.xml.

int id = item.getItemId();

//noinspection SimplifiableIfStatement

if (id == R.id.action_settings) {

return true;

}

return super.onOptionsItemSelected(item);

}

รูปที่ใช้

Phaisarn Sutheebanjard

blog.phaisarn.com

การสร้าง Custom GridView