Androidで最近よく見る縦横スクロールの実装

こんにちは。m_saekiです。

最近のアプリで縦横スクロールのアプリって多くないですか？
サンプルを実装したので参考までにどうぞー！
https://github.com/m-saeki0926/android_demo_recyclerview
残念ながらKotlinではなくJavaです。。。

![sample.gif](https://qiita-image-store.s3.amazonaws.com/0/237545/eab85db3-4ff0-abd6-230f-37ae30a5b331.gif)


# 概要
MainActivityにVerticalRecyclerViewを定義し、
VerticalAdapteにHorizontalAdapterを定義しています。

下の図のように入れ子構造になっています。
他にも実装方法はあるのであくまで例ですよー ^ ^

<img width="345" alt="スクリーンショット 2018-05-19 0.28.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/237545/f553750e-bc4d-0cb6-8577-c2a216949c27.png">

# Main
``` MainActivity.java
public class MainActivity extends AppCompatActivity {

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

        initRecyclerView();
    }

    private void initRecyclerView() {
        // Setting recycler view
        RecyclerView recyclerView = findViewById(R.id.recycler_view);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        // Generate demo data
        List<Object> demoList = new ArrayList<>();
        demoList.add(null);
        demoList.add(null);
        demoList.add(null);
        demoList.add(null);
        demoList.add(null);
        // Setting adapter
        VerticalAdapter adapter = new VerticalAdapter(this, demoList);
        recyclerView.swapAdapter(adapter, false);
    }
}
```

``` activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</android.support.constraint.ConstraintLayout>
```

# Adapter
``` VerticalAdapter.java
public class VerticalAdapter extends RecyclerView.Adapter {

    private Context context;
    private List<Object> list;

    public VerticalAdapter(@NonNull final Context context, @NonNull final List<Object> list) {
        this.context = context;
        this.list = list;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View defaultView = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item_vertical, parent, false);
        return new ContentViewHolder(defaultView);
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ((ContentViewHolder) holder).setData(list.get(position), context);
    }

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

    static class ContentViewHolder extends RecyclerView.ViewHolder {

        View view;

        ContentViewHolder(View itemView) {
            super(itemView);
            this.view = itemView;
        }

        void setData(Object item, Context context) {
            // Setting recycler view
            RecyclerView recyclerView = view.findViewById(R.id.horizontal_recycler_view);
            recyclerView.setLayoutManager(new LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false));
            // Generate demo data
            List<Object> demoList = new ArrayList<>();
            demoList.add(null);
            demoList.add(null);
            demoList.add(null);
            demoList.add(null);
            demoList.add(null);
            // Setting adapter
            HorizontalAdapter adapter = new HorizontalAdapter(context, demoList);
            recyclerView.swapAdapter(adapter, false);
        }
    }
}
```
``` list_item_vertical.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:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000"
        android:gravity="right"
        android:padding="10dp"
        android:text="View All"
        android:textColor="#FFF" />

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

</LinearLayout>
```
``` HorizontalAdapter.java
public class HorizontalAdapter extends RecyclerView.Adapter {

    private Context context;
    private List<Object> list;

    public HorizontalAdapter(@NonNull final Context context, @NonNull final List<Object> list) {
        this.context = context;
        this.list = list;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View defaultView = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item_horizontal, parent, false);
        return new HorizontalAdapter.ContentViewHolder(defaultView);
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ((HorizontalAdapter.ContentViewHolder) holder).setData(list.get(position), context);
    }

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

    static class ContentViewHolder extends RecyclerView.ViewHolder {

        View view;

        ContentViewHolder(View itemView) {
            super(itemView);
            this.view = itemView;
        }

        void setData(Object item, Context context) {
          // 処理を実装
        }
    }
}
``` 
``` list_item_horizontal.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="240dp"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:src="@drawable/sample" />

</RelativeLayout>
```