การสร้างรายการแบบ 2 ทิศทาง

menu/popup_3dots.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu1"
        android:title="ติดตั้ง" />
    <item
        android:id="@+id/menu2"
        android:title="เพิ่มเป็นสิ่งที่อยากได้" />
</menu>

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

<item

android:id="@+id/menu1"

android:title="ติดตั้ง" />

<item

android:id="@+id/menu2"

android:title="เพิ่มเป็นสิ่งที่อยากได้" />

</menu>

drawable/horz_item_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="#aaa" />
    <solid android:color="#fff" />
</shape>

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

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

android:shape="rectangle">

<stroke

android:width="1dp"

android:color="#aaa" />

</shape>

layout/horz_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="130dp"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:background="@drawable/horz_item_border"
    android:orientation="vertical"
    android:padding="8dp">

    <ImageView
        android:id="@+id/image_top"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_marginBottom="5dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_launcher" />

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="2">

        <TextView
            android:id="@+id/text_title"
            android:layout_columnWeight="1"
            android:lines="2"
            android:maxLines="2"
            android:maxWidth="70dp"
            android:textSize="16sp" />

        <ImageView
            android:id="@+id/img_3dots"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="-8dp"
            android:src="@drawable/ic_3dots"
            android:tint="#aaa" />
    </GridLayout>

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp">

        <TextView
            android:id="@+id/text_rating"
            android:layout_gravity="center_vertical"
            android:text="3.5"
            android:textColor="#009"
            android:textSize="14sp" />

        <ImageView
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="3dp"
            android:src="@drawable/ic_star" />

        <TextView
            android:id="@+id/text_price"
            android:layout_columnWeight="1"
            android:layout_gravity="center_vertical"
            android:gravity="right"
            android:text="ฟรี"
            android:textColor="#090"
            android:textSize="14sp" />
    </GridLayout>

</LinearLayout>

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

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

android:layout_width="130dp"

android:layout_height="wrap_content"

android:layout_margin="8dp"

android:background="@drawable/horz_item_border"

android:orientation="vertical"

android:padding="8dp">

<ImageView

android:id="@+id/image_top"

android:layout_width="match_parent"

android:layout_height="80dp"

android:layout_marginBottom="5dp"

android:scaleType="centerCrop"

android:src="@mipmap/ic_launcher" />

<GridLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:columnCount="2">

<TextView

android:id="@+id/text_title"

android:layout_columnWeight="1"

android:lines="2"

android:maxLines="2"

android:maxWidth="70dp"

android:textSize="16sp" />

<ImageView

android:id="@+id/img_3dots"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginRight="-8dp"

android:src="@drawable/ic_3dots"

android:tint="#aaa" />

</GridLayout>

<GridLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="8dp">

<TextView

android:id="@+id/text_rating"

android:layout_gravity="center_vertical"

android:text="3.5"

android:textColor="#009"

android:textSize="14sp" />

<ImageView

android:layout_gravity="center_vertical"

android:layout_marginLeft="3dp"

android:src="@drawable/ic_star" />

<TextView

android:id="@+id/text_price"

android:layout_columnWeight="1"

android:layout_gravity="center_vertical"

android:gravity="right"

android:text="ฟรี"

android:textColor="#090"

android:textSize="14sp" />

</GridLayout>

</LinearLayout>

layout/vert_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_margin="15dp"
    android:columnCount="2"
    android:elevation="3dp">

    <TextView
        android:id="@+id/text_section"
        android:layout_columnWeight="1"
        android:textColor="#000"
        android:textSize="18sp" />

    <TextView
        android:text="เพิ่มเติม"
        android:textColor="#080"
        android:textSize="16sp" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView_horz"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_columnSpan="2" />
</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_margin="15dp"

android:columnCount="2"

android:elevation="3dp">

<TextView

android:id="@+id/text_section"

android:layout_columnWeight="1"

android:textColor="#000"

android:textSize="18sp" />

<TextView

android:text="เพิ่มเติม"

android:textColor="#080"

android:textSize="16sp" />

<android.support.v7.widget.RecyclerView

android:id="@+id/recyclerView_horz"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_columnSpan="2" />

</GridLayout>

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rcv"
        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="#ddd"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

tools:context=".MainActivity"

tools:showIn="@layout/activity_main">

<android.support.v7.widget.RecyclerView

android:id="@+id/rcv"

android:layout_width="match_parent"

android:layout_height="match_parent">

</android.support.v7.widget.RecyclerView>

</LinearLayout>

HorzAdapter.java

package com.phaisarn.myapplication;

import android.content.Context;
import android.support.v7.widget.PopupMenu;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.MenuInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

public class HorzAdapter extends RecyclerView.Adapter<HorzHolder> {

    private Context mContext;
    private List<HorzItem> mItems;

    public HorzAdapter(Context context, List<HorzItem> items) {
        mContext = context;
        mItems = items;
    }

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

    @Override
    public HorzHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(mContext);
        final View v = inflater.inflate(R.layout.horz_layout, parent, false);
        return new HorzHolder(v);
    }

    @Override
    public void onBindViewHolder(final HorzHolder vHolder, int position) {
        HorzItem item = mItems.get(position);
        vHolder.textView.setText(item.title);
        vHolder.img3dots.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int pos = vHolder.getAdapterPosition();
                if (pos != RecyclerView.NO_POSITION) {
                    PopupMenu popup = new PopupMenu(mContext, v);
                    MenuInflater menuInflater = popup.getMenuInflater();
                    menuInflater.inflate(R.menu.popup_3dots, popup.getMenu());
                    popup.show();
                }
            }
        });
    }
}

package com.phaisarn.myapplication;

import android.content.Context;

import android.support.v7.widget.PopupMenu;

import android.support.v7.widget.RecyclerView;

import android.view.LayoutInflater;

import android.view.MenuInflater;

import android.view.View;

import android.view.ViewGroup;

import java.util.List;

public class HorzAdapter extends RecyclerView.Adapter<HorzHolder> {

private Context mContext;

private List<HorzItem> mItems;

public HorzAdapter(Context context, List<HorzItem> items) {

mContext = context;

mItems = items;

}

@Override

public int getItemCount() {

return mItems.size();

}

@Override

public HorzHolder onCreateViewHolder(ViewGroup parent, int viewType) {

LayoutInflater inflater = LayoutInflater.from(mContext);

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

return new HorzHolder(v);

}

@Override

public void onBindViewHolder(final HorzHolder vHolder, int position) {

HorzItem item = mItems.get(position);

vHolder.textView.setText(item.title);

vHolder.img3dots.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

int pos = vHolder.getAdapterPosition();

if (pos != RecyclerView.NO_POSITION) {

PopupMenu popup = new PopupMenu(mContext, v);

MenuInflater menuInflater = popup.getMenuInflater();

menuInflater.inflate(R.menu.popup_3dots, popup.getMenu());

popup.show();

}

});

}

HorzHolder.java

package com.phaisarn.myapplication;

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

public class HorzHolder extends RecyclerView.ViewHolder {

    public ImageView imageView;
    public TextView textView;
    public ImageView img3dots;

    public HorzHolder(View convertView) {
        super(convertView);
        imageView = (ImageView) convertView.findViewById(R.id.image_top);
        textView = (TextView) convertView.findViewById(R.id.text_title);
        img3dots = (ImageView) convertView.findViewById(R.id.img_3dots);
    }
}

package com.phaisarn.myapplication;

import android.support.v7.widget.RecyclerView;

import android.view.View;

import android.widget.ImageView;

import android.widget.TextView;

public class HorzHolder extends RecyclerView.ViewHolder {

public ImageView imageView;

public TextView textView;

public ImageView img3dots;

public HorzHolder(View convertView) {

super(convertView);

imageView = (ImageView) convertView.findViewById(R.id.image_top);

textView = (TextView) convertView.findViewById(R.id.text_title);

img3dots = (ImageView) convertView.findViewById(R.id.img_3dots);

}

HorzItem.java

package com.phaisarn.myapplication;

public class HorzItem {
    public String title;

    public HorzItem(String title) {
        this.title = title;
    }

}

package com.phaisarn.myapplication;

public class HorzItem {

public String title;

public HorzItem(String title) {

this.title = title;

}

VertAdapter.java

package com.phaisarn.myapplication;

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

import java.util.List;

public class VertAdapter extends RecyclerView.Adapter<VertHolder> {

    private Context mContext;
    private List<VertItem> mItems;

    public VertAdapter(Context context, List<VertItem> items) {
        mContext = context;
        mItems = items;
    }

    @Override
    public VertHolder onCreateViewHolder(ViewGroup vg, int type) {
        LayoutInflater inflater = LayoutInflater.from(mContext);
        final View v = inflater.inflate(R.layout.vert_layout, vg, false);
        return new VertHolder(v);
    }

    @Override
    public void onBindViewHolder(VertHolder vHolder, int position) {
        VertItem item = mItems.get(position);
        vHolder.textViewSection.setText(item.sectionText);

        HorzAdapter hAdapter = new HorzAdapter(mContext, item.horzItems);
        vHolder.rcv.setAdapter(hAdapter);
        vHolder.rcv.setLayoutManager(new LinearLayoutManager(mContext, RecyclerView.HORIZONTAL, false));
    }

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

package com.phaisarn.myapplication;

import android.content.Context;

import android.support.v7.widget.LinearLayoutManager;

import android.support.v7.widget.RecyclerView;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import java.util.List;

public class VertAdapter extends RecyclerView.Adapter<VertHolder> {

private Context mContext;

private List<VertItem> mItems;

public VertAdapter(Context context, List<VertItem> items) {

mContext = context;

mItems = items;

}

@Override

public VertHolder onCreateViewHolder(ViewGroup vg, int type) {

LayoutInflater inflater = LayoutInflater.from(mContext);

final View v = inflater.inflate(R.layout.vert_layout, vg, false);

return new VertHolder(v);

}

@Override

public void onBindViewHolder(VertHolder vHolder, int position) {

VertItem item = mItems.get(position);

vHolder.textViewSection.setText(item.sectionText);

HorzAdapter hAdapter = new HorzAdapter(mContext, item.horzItems);

vHolder.rcv.setAdapter(hAdapter);

vHolder.rcv.setLayoutManager(new LinearLayoutManager(mContext, RecyclerView.HORIZONTAL, false));

}

@Override

public int getItemCount() {

return mItems.size();

}

VertHolder.java

package com.phaisarn.myapplication;

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

public class VertHolder extends RecyclerView.ViewHolder {
    public TextView textViewSection;
    public RecyclerView rcv;

    public VertHolder(View convertView) {
        super(convertView);
        textViewSection = (TextView) convertView.findViewById(R.id.text_section);
        rcv = (RecyclerView) convertView.findViewById(R.id.recyclerView_horz);
    }
}

package com.phaisarn.myapplication;

import android.support.v7.widget.RecyclerView;

import android.view.View;

import android.widget.TextView;

public class VertHolder extends RecyclerView.ViewHolder {

public TextView textViewSection;

public RecyclerView rcv;

public VertHolder(View convertView) {

super(convertView);

textViewSection = (TextView) convertView.findViewById(R.id.text_section);

rcv = (RecyclerView) convertView.findViewById(R.id.recyclerView_horz);

}

VertItem.java

package com.phaisarn.myapplication;

import java.util.List;

public class VertItem {
    public String sectionText;
    public List<HorzItem> horzItems;

    public VertItem(String sectionText, List<HorzItem> items) {
        this.sectionText = sectionText;
        this.horzItems = items;
    }
}

package com.phaisarn.myapplication;

import java.util.List;

public class VertItem {

public String sectionText;

public List<HorzItem> horzItems;

public VertItem(String sectionText, List<HorzItem> items) {

this.sectionText = sectionText;

this.horzItems = items;

}

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

        ArrayList<VertItem> items = new ArrayList<>();
        ArrayList<HorzItem> hItems = new ArrayList<>();

        hItems.addAll(Arrays.asList(
                new HorzItem("Candy Crap"), new HorzItem("Pogaymon"),
                new HorzItem("Stop War Episode 2"), new HorzItem("Cookie Walk"),
                new HorzItem("Buffalo & Cow")));
        items.add(new VertItem("เกมใหม่ + อัปเดต", hItems));

        hItems = new ArrayList<>();
        hItems.addAll(Arrays.asList(
                new HorzItem("Fakebook"), new HorzItem("Mytube"),
                new HorzItem("Camera 365"), new HorzItem("Lie"),
                new HorzItem("FireDog"), new HorzItem("Unknown")));
        items.add(new VertItem("แอปยอดฮิต", hItems));

        hItems = new ArrayList<>();
        hItems.addAll(Arrays.asList(
                new HorzItem("Love Story"), new HorzItem("Sad Movie"),
                new HorzItem("Do or Die"), new HorzItem("How 2 Cheat"),
                new HorzItem("The Lady Boy")));
        items.add(new VertItem("แนะนำสำหรับคุณ", hItems));

        hItems = new ArrayList<>();
        hItems.addAll(Arrays.asList(
                new HorzItem("Java"), new HorzItem("Swift"),
                new HorzItem("C#"), new HorzItem("PHP"),
                new HorzItem("jQuery")));
        items.add(new VertItem("ของดี ราคาถูก", hItems));

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

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

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

}

});

ArrayList<VertItem> items = new ArrayList<>();

ArrayList<HorzItem> hItems = new ArrayList<>();

hItems.addAll(Arrays.asList(

new HorzItem("Candy Crap"), new HorzItem("Pogaymon"),

new HorzItem("Stop War Episode 2"), new HorzItem("Cookie Walk"),

new HorzItem("Buffalo & Cow")));

items.add(new VertItem("เกมใหม่ + อัปเดต", hItems));

hItems = new ArrayList<>();

hItems.addAll(Arrays.asList(

new HorzItem("Fakebook"), new HorzItem("Mytube"),

new HorzItem("Camera 365"), new HorzItem("Lie"),

new HorzItem("FireDog"), new HorzItem("Unknown")));

items.add(new VertItem("แอปยอดฮิต", hItems));

hItems = new ArrayList<>();

hItems.addAll(Arrays.asList(

new HorzItem("Love Story"), new HorzItem("Sad Movie"),

new HorzItem("Do or Die"), new HorzItem("How 2 Cheat"),

new HorzItem("The Lady Boy")));

items.add(new VertItem("แนะนำสำหรับคุณ", hItems));

hItems = new ArrayList<>();

hItems.addAll(Arrays.asList(

new HorzItem("Java"), new HorzItem("Swift"),

new HorzItem("C#"), new HorzItem("PHP"),

new HorzItem("jQuery")));

items.add(new VertItem("ของดี ราคาถูก", hItems));

VertAdapter adapter = new VertAdapter(this, items);

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

rcv.setAdapter(adapter);

rcv.setLayoutManager(new LinearLayoutManager(this));

}

@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

การสร้างรายการแบบ 2 ทิศทาง