[JAVA] Erstellen Sie ein Seitensteuerelement, das mit RecyclerView verwendet werden kann

Was ist Seitensteuerung?

Es ist eine punktförmige Pagenation, die in iOS üblich ist. Es wird unter Android nicht standardmäßig bereitgestellt, daher müssen Sie es erstellen oder eine Bibliothek verwenden. Hier wird es nach iOS als Seitensteuerung bezeichnet, aber in Android gibt es viele Dinge, die als Indikator bezeichnet werden, und die berühmte Bibliothek <a href"https://github.com/JakeWharton/ViewPagerIndicator"> ViewPageIndicator > Und <a href+"https://github.com/ongakuer/CircleIndicator"> CircleIndicator . Diese Bibliotheken konnten jedoch nur mit ViewPager verwendet werden, sodass ich meine eigene benutzerdefinierte Ansicht erstellt habe.

Verwenden Sie RecyclerView wie ViewPager

ViewPager in RecyclerView mithilfe von PagerSnapHelper , das mit SupportLibrary 25.1.0 oder höher verwendet werden kann Sie können das gleiche Verhalten erreichen. Dies ist nützlich, wenn Sie ViewPager in ViewPager vermeiden möchten.

MainActivity.java

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
LinearLayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
recyclerView.setLayoutManager(layoutManager);

PagerSnapHelper snapHelper = new PagerSnapHelper();
snapHelper.attachToRecyclerView(recyclerView);

Wenn Sie PagerSnapHelper aufgrund von Versionsproblemen nicht verwenden können, zeigt Ihnen der folgende Artikel, wie Sie Snaps erstellen. http://qiita.com/hotpepsi/items/1167e5263f048a005e05

Erstellen Sie eine Seitensteuerung

Machen Sie einen Punkt

Es gibt zwei Typen: Standard und Ausgewählt.

res/drawable/shape_page_control_default.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#FFFFFF" />
</shape>

res/drawable/shape_page_control_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#B7B7B7" />
</shape>

Erstellen Sie eine benutzerdefinierte Ansicht

Erstellen Sie eine benutzerdefinierte Ansicht, die die folgenden zwei Aktionen ausführt:

--Erstellen Sie so viele Punkte, wie Elemente von RecyclerView angezeigt werden. ――Wenn Sie einrasten, wechseln die Punkte auch zusammen.

Da die Position des aktuell gefangenen Elements beim Umschalten von Punkten in Verbindung mit dem Fangen erforderlich ist, wird es mit `findLastVisibleItemPosition ()` von LinerLayoutManager erfasst.

PageControlView.java

public class PageControlView extends LinearLayout {
    private ImageView[] imageViews;

    public PageControlView(Context context) {
        this(context, null);
    }

    public PageControlView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PageControlView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setRecyclerView(RecyclerView recyclerView, final LinearLayoutManager layoutManager) {
        int itemCount = layoutManager.getItemCount();
        if (itemCount < 1) {
            return;
        }
        createPageControl(itemCount);

        //Wechseln Sie die Punkte, während RecyclerView einen Bildlauf durchführt
        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                int position = layoutManager.findLastVisibleItemPosition();
                int itemCount = layoutManager.getItemCount();

                for (int i = 0; i < itemCount; i++) {
                    imageViews[i].setImageResource(R.drawable.shape_page_control_default);
                }
                imageViews[position].setImageResource(R.drawable.shape_page_control_selected);
            }
        });
    }

　　//Erstellen Sie so viele Punkte, wie Elemente in RecyclerView enthalten sind
    private void createPageControl (int itemCount) {
        imageViews = new ImageView[itemCount];

        for (int i = 0; i < imageViews.length; i++) {
            imageViews[i] = new ImageView(getContext());
            imageViews[i].setImageResource(R.drawable.shape_page_control_default);

　　　　　　 //Passen Sie die Punktgröße und den Abstand an(Das GIF-Bild oben ist 10dp)
            int dotSize = getResources().getDimensionPixelSize(R.dimen.page_control_dot_size);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(dotSize, dotSize);
            params.setMargins(dotSize / 2, 0, dotSize / 2, 0);
            imageViews[i].setLayoutParams(params);

            addView(imageViews[i]);
        }
        imageViews[0].setImageResource(R.drawable.shape_page_control_selected);
    }
}

Verwenden Sie eine benutzerdefinierte Ansicht

Ordnen Sie es wie eine normale Ansicht an.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="com.hogehoge.fugafuga.MainActivity">
    
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <com.hogehoge.fugafuga.PageControlView
        android:id="@+id/page_control_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_gravity="center"/>
</LinearLayout>

MainActivity.java

PageControlView pageControlView = (PageControlView) findViewById(R.id.page_control_view);
pageControlView.setRecyclerView(recyclerView, layoutManager);

Bonus

Sie können es auch mit ViewPager verwenden, indem Sie die setRecyclerView-Methode wie folgt umschreiben. Dies ist einfacher, weil der Hörer eine Position hat.

PageControlView.java

    public void setViewPager (final ViewPager viewPager) {
        int itemCount = viewPager.getAdapter().getCount();

        if (itemCount < 1) {
            return;
        }
        createPageControl(itemCount);

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                int itemCount = viewPager.getAdapter().getCount();

                for (int i = 0; i < itemCount; i++) {
                    imageViews[i].setImageResource(R.drawable.shape_page_control_default);
                }
                imageViews[position].setImageResource(R.drawable.shape_page_control_selected);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }