การสร้าง RecyclerView แบบ Multiple Layout

values/strings.xml

<resources>
    <string name="app_name">My Application</string>
    <string name="action_settings">Settings</string>

    <integer name="edit_fade_duration">800</integer>
</resources>

<string name="app_name">My Application</string>

<string name="action_settings">Settings</string>

</resources>

values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="item_state_pressed">#ffa</color>
    <color name="item_state_normal">#fff</color>
</resources>

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

</resources>

drawable/bottom_item_state.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="@integer/edit_fade_duration">

    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" />
            <solid android:color="@color/item_state_pressed" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" />
            <solid android:color="@color/item_state_normal" />
        </shape>
    </item>
</selector>

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

</shape>

</item>

<item>

</shape>

</item>

</selector>

drawable/normal_item_state.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="@integer/edit_fade_duration">

    <item android:drawable="@color/item_state_pressed" android:state_pressed="true" />
    <item android:drawable="@color/item_state_normal" />
</selector>

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

</selector>

drawable/one_item_state.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="500">

    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:radius="10dp" />
            <solid android:color="@color/item_state_pressed" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="10dp" />
            <solid android:color="@color/item_state_normal" />
        </shape>
    </item>
</selector>

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

</shape>

</item>

<item>

</shape>

</item>

</selector>

drawable/top_item_state.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="@integer/edit_fade_duration">

    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
            <solid android:color="@color/item_state_pressed" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
            <solid android:color="@color/item_state_normal" />
        </shape>
    </item>
</selector>

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

</shape>

</item>

<item>

</shape>

</item>

</selector>

layout/child_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="0.75dp"
    android:layout_marginTop="0.75dp"
    android:background="@drawable/normal_item_state"
    android:padding="2dp">

    <TextView
        android:id="@+id/textView_child"
        android:layout_columnWeight="1"
        android:layout_gravity="center_vertical"
        android:paddingBottom="7dp"
        android:paddingLeft="15dp"
        android:paddingTop="7dp"
        android:textColor="#333"
        android:textSize="18dp" />

    <ImageView
        android:layout_gravity="center_vertical"
        android:src="@drawable/arrow_right"
        android:tint="#bbb" />

</GridLayout>

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

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

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="0.75dp"

android:layout_marginTop="0.75dp"

android:background="@drawable/normal_item_state"

android:padding="2dp">

<TextView

android:id="@+id/textView_child"

android:layout_columnWeight="1"

android:layout_gravity="center_vertical"

android:paddingBottom="7dp"

android:paddingLeft="15dp"

android:paddingTop="7dp"

android:textColor="#333"

android:textSize="18dp" />

<ImageView

android:layout_gravity="center_vertical"

android:src="@drawable/arrow_right"

android:tint="#bbb" />

</GridLayout>

layout/section_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:layout_marginTop="10dp"
    android:orientation="vertical"
    android:padding="7dp">

    <TextView
        android:id="@+id/textView_section"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#009"
        android:textSize="20dp" />

</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:layout_marginTop="10dp"

android:orientation="vertical"

android:padding="7dp">

<TextView

android:id="@+id/textView_section"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:textColor="#009"

android:textSize="20dp" />

</LinearLayout>

ChildHolder.java

package com.phaisarn.myapplication;

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;

public class ChildHolder extends RecyclerView.ViewHolder {

    public TextView textView;

    public ChildHolder(View v) {
        super(v);
        textView = (TextView) v.findViewById(R.id.textView_child);
    }
}

package com.phaisarn.myapplication;

import android.support.v7.widget.RecyclerView;

import android.view.View;

import android.widget.TextView;

public class ChildHolder extends RecyclerView.ViewHolder {

public TextView textView;

public ChildHolder(View v) {

super(v);

textView = (TextView) v.findViewById(R.id.textView_child);

}

ChildItem.java

package com.phaisarn.myapplication;

public class ChildItem {
    public String itemText;

    public ChildItem(String itemText) {
        this.itemText = itemText;
    }

}

package com.phaisarn.myapplication;

public class ChildItem {

public String itemText;

public ChildItem(String itemText) {

this.itemText = itemText;

}

CustomAdapter.java

package com.phaisarn.myapplication;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

public class CustomAdapter extends RecyclerView.Adapter {
    private Context mContext;
    private ArrayList mItems;
    private final int SECTION_ITEM = 0;
    private final int CHILD_ITEM = 1;
    private boolean mIsFirstChild = true;

    public CustomAdapter(Context context, ArrayList items) {
        mContext = context;
        mItems = items;
    }

    @Override
    public int getItemCount() {
        return mItems.size();
    }

    @Override
    public int getItemViewType(int position) {
        if (mItems.get(position) instanceof SectionItem) {
            return SECTION_ITEM;
        } else if (mItems.get(position) instanceof ChildItem) {
            return CHILD_ITEM;
        }
        return -1;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(mContext);
        final RecyclerView.ViewHolder vHolder;
        if (viewType == SECTION_ITEM) {
            final View v = inflater.inflate(R.layout.section_layout, parent, false);
            vHolder = new SectionHolder(v);
            return vHolder;
        } else if (viewType == CHILD_ITEM) {
            final View v = inflater.inflate(R.layout.child_layout, parent, false);
            vHolder = new ChildHolder(v);
            v.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    int pos = vHolder.getAdapterPosition();
                    if (pos != RecyclerView.NO_POSITION) {
                        TextView tv = (TextView) view.findViewById(R.id.textView_child);
                        Toast.makeText(mContext, tv.getText().toString(), Toast.LENGTH_SHORT).show();
                    }
                }
            });
            return vHolder;
        }
        return null;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder vHolder, int position) {
        int type = getItemViewType(position);
        if (type == SECTION_ITEM) {
            SectionItem item = (SectionItem) mItems.get(position);
            SectionHolder secHolder = (SectionHolder) vHolder;
            secHolder.textView.setText(item.sectionText);
            mIsFirstChild = true;
        } else if (type == CHILD_ITEM) {
            ChildItem item = (ChildItem) mItems.get(position);
            ChildHolder childHolder = (ChildHolder) vHolder;
            childHolder.textView.setText(item.itemText);

            //เพิ่มเติมกรณีการทำมุมของรายการให้โค้ง

            boolean isLastOfSection = position < mItems.size() - 1 && getItemViewType(position + 1) == SECTION_ITEM;  //รายการสุดท้ายของกลุ่ม
            boolean isLastOfAll = position == mItems.size() - 1;   //รายการสุดท้ายของทั้งหมด
            boolean isLastChild = isLastOfSection || isLastOfAll;

            if (mIsFirstChild && isLastChild) {   //กรณีที่มีเพียงรายการเดียวในกลุ่ม ให้โค้งทั้ง 4 มุม
                childHolder.textView.getRootView().setBackgroundResource(R.drawable.one_item_state);
                mIsFirstChild = false;
            } else if (mIsFirstChild || position == 0) {   //position == 0 คือเผื่อกรณีที่ให้รายการแรกสุดเป็น Child Item เลย โดยไม่ได้เริ่มจากการสร้าง Section ขึ้นมาก่อน
                childHolder.textView.getRootView().setBackgroundResource(R.drawable.top_item_state);
                mIsFirstChild = false;
            } else if (isLastChild) {
                childHolder.textView.getRootView().setBackgroundResource(R.drawable.bottom_item_state);
            }

        }
    }
}

package com.phaisarn.myapplication;

import android.content.Context;

import android.support.v7.widget.RecyclerView;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.TextView;

import android.widget.Toast;

import java.util.ArrayList;

public class CustomAdapter extends RecyclerView.Adapter {

private Context mContext;

private ArrayList mItems;

private final int SECTION_ITEM = 0;

private final int CHILD_ITEM = 1;

private boolean mIsFirstChild = true;

public CustomAdapter(Context context, ArrayList items) {

mContext = context;

mItems = items;

}

@Override

public int getItemCount() {

return mItems.size();

}

@Override

public int getItemViewType(int position) {

if (mItems.get(position) instanceof SectionItem) {

return SECTION_ITEM;

} else if (mItems.get(position) instanceof ChildItem) {

return CHILD_ITEM;

}

return -1;

}

@Override

public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

LayoutInflater inflater = LayoutInflater.from(mContext);

final RecyclerView.ViewHolder vHolder;

if (viewType == SECTION_ITEM) {

final View v = inflater.inflate(R.layout.section_layout, parent, false);

vHolder = new SectionHolder(v);

return vHolder;

} else if (viewType == CHILD_ITEM) {

final View v = inflater.inflate(R.layout.child_layout, parent, false);

vHolder = new ChildHolder(v);

v.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

int pos = vHolder.getAdapterPosition();

if (pos != RecyclerView.NO_POSITION) {

TextView tv = (TextView) view.findViewById(R.id.textView_child);

Toast.makeText(mContext, tv.getText().toString(), Toast.LENGTH_SHORT).show();

}

});

return vHolder;

}

return null;

}

@Override

public void onBindViewHolder(RecyclerView.ViewHolder vHolder, int position) {

int type = getItemViewType(position);

if (type == SECTION_ITEM) {

SectionItem item = (SectionItem) mItems.get(position);

SectionHolder secHolder = (SectionHolder) vHolder;

secHolder.textView.setText(item.sectionText);

mIsFirstChild = true;

} else if (type == CHILD_ITEM) {

ChildItem item = (ChildItem) mItems.get(position);

ChildHolder childHolder = (ChildHolder) vHolder;

childHolder.textView.setText(item.itemText);

//เพิ่มเติมกรณีการทำมุมของรายการให้โค้ง

boolean isLastOfSection = position < mItems.size() - 1 && getItemViewType(position + 1) == SECTION_ITEM; //รายการสุดท้ายของกลุ่ม

boolean isLastOfAll = position == mItems.size() - 1; //รายการสุดท้ายของทั้งหมด

boolean isLastChild = isLastOfSection || isLastOfAll;

if (mIsFirstChild && isLastChild) { //กรณีที่มีเพียงรายการเดียวในกลุ่ม ให้โค้งทั้ง 4 มุม

childHolder.textView.getRootView().setBackgroundResource(R.drawable.one_item_state);

mIsFirstChild = false;

} else if (mIsFirstChild || position == 0) { //position == 0 คือเผื่อกรณีที่ให้รายการแรกสุดเป็น Child Item เลย โดยไม่ได้เริ่มจากการสร้าง Section ขึ้นมาก่อน

childHolder.textView.getRootView().setBackgroundResource(R.drawable.top_item_state);

mIsFirstChild = false;

} else if (isLastChild) {

childHolder.textView.getRootView().setBackgroundResource(R.drawable.bottom_item_state);

}

SectionHolder.java

package com.phaisarn.myapplication;

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;

public class SectionHolder extends RecyclerView.ViewHolder {

    public TextView textView;

    public SectionHolder(View v) {
        super(v);
        textView = (TextView)v.findViewById(R.id.textView_section);
    }
}

package com.phaisarn.myapplication;

import android.support.v7.widget.RecyclerView;

import android.view.View;

import android.widget.TextView;

public class SectionHolder extends RecyclerView.ViewHolder {

public TextView textView;

public SectionHolder(View v) {

super(v);

textView = (TextView)v.findViewById(R.id.textView_section);

}

SectionItem.java

package com.phaisarn.myapplication;

public class SectionItem {
    public String sectionText;

    public SectionItem(String sectionText) {
        this.sectionText = sectionText;
    }
}

package com.phaisarn.myapplication;

public class SectionItem {

public String sectionText;

public SectionItem(String sectionText) {

this.sectionText = sectionText;

}

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"
    android:background="#dfdfdf"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>

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

android:background="#dfdfdf"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

tools:context=".MainActivity"

tools:showIn="@layout/activity_main">

<android.support.v7.widget.RecyclerView

android:id="@+id/recyclerView"

android:layout_width="match_parent"

android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>

</LinearLayout>

MainActivity.java

package com.phaisarn.myapplication;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;

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

        ArrayList items = new ArrayList();
        //items.add(new ChildItem("xxx"));

        items.add(new SectionItem("ความรู้สึกและกิจกรรม"));
        items.add(new ChildItem("รู้สึก"));
        items.add(new ChildItem("กำลังชม"));
        items.add(new ChildItem("กำลังอ่าน"));
        items.add(new ChildItem("กำลังฟัง"));
        items.add(new ChildItem("กำลังเดินทาง"));

        items.add(new SectionItem("ภาพและวิดีโอ"));
        items.add(new ChildItem("รูปภาพ"));
        items.add(new ChildItem("วิดีโอ"));
        items.add(new ChildItem("ถ่ายภาพ"));

        items.add(new SectionItem("อื่่นๆ"));
        items.add(new ChildItem("เพิ่มเติม..."));

        CustomAdapter adapter = new CustomAdapter(this, items);
        RecyclerView rcv = (RecyclerView) findViewById(R.id.recyclerView);
        rcv.setAdapter(adapter);
        rcv.setLayoutManager(new LinearLayoutManager(this));

        //RecyclerView.ItemDecoration itemDecoration = new DividerItemDecoration(this, DividerItemDecoration.VERTICAL);
        //rcv.addItemDecoration(itemDecoration);
    }

    @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.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.Menu;

import android.view.MenuItem;

import android.support.v7.widget.LinearLayoutManager;

import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;

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

}

});

ArrayList items = new ArrayList();

//items.add(new ChildItem("xxx"));

items.add(new SectionItem("ความรู้สึกและกิจกรรม"));

items.add(new ChildItem("รู้สึก"));

items.add(new ChildItem("กำลังชม"));

items.add(new ChildItem("กำลังอ่าน"));

items.add(new ChildItem("กำลังฟัง"));

items.add(new ChildItem("กำลังเดินทาง"));

items.add(new SectionItem("ภาพและวิดีโอ"));

items.add(new ChildItem("รูปภาพ"));

items.add(new ChildItem("วิดีโอ"));

items.add(new ChildItem("ถ่ายภาพ"));

items.add(new SectionItem("อื่่นๆ"));

items.add(new ChildItem("เพิ่มเติม..."));

CustomAdapter adapter = new CustomAdapter(this, items);

RecyclerView rcv = (RecyclerView) findViewById(R.id.recyclerView);

rcv.setAdapter(adapter);

rcv.setLayoutManager(new LinearLayoutManager(this));

//RecyclerView.ItemDecoration itemDecoration = new DividerItemDecoration(this, DividerItemDecoration.VERTICAL);

//rcv.addItemDecoration(itemDecoration);

}

@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

การสร้าง RecyclerView แบบ Multiple Layout