10
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-05-18

こんにちは。m_saekiです。

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

sample.gif

概要

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

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

スクリーンショット 2018-05-19 0.28.50.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>
10
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?