Implementation of vertical and horizontal scrolling that is often seen on Android recently

Hello. This is m_saeki.

Are there many recent apps that scroll vertically and horizontally? I have implemented a sample, so please refer to it! https://github.com/m-saeki0926/android_demo_recyclerview Unfortunately it's Java, not Kotlin. .. ..

sample.gif

Overview

Define VerticalRecyclerView in MainActivity and HorizontalAdapter is defined in VerticalAdapte.

It has a nested structure as shown in the figure below. There are other implementation methods, so it's just an example ^ ^

スクリーンショット 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) {
          //Implement processing
        }
    }
}

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>

Recommended Posts

Implementation of vertical and horizontal scrolling that is often seen on Android recently
Implementation comparison of production that makes images shine on iOS and Android
Review of "strange Java" and Java knowledge that is often forgotten in Java Bronze
A description of Interface that is often mistaken
Review the basic knowledge of ruby that is often forgotten
Chat function that is updated immediately (implementation of Action Cable)