[JAVA] Créer un contrôle de page qui peut être utilisé avec RecyclerView

Qu'est-ce que le contrôle de page?

C'est une pagination en forme de point courante dans iOS. Il n'est pas fourni en standard sur Android, vous devez donc le créer ou utiliser une bibliothèque. Ici, on l'appelle contrôle de page après iOS, mais sous Android, on l'appelle souvent Indicator, et c'est une fameuse bibliothèque <a href"https://github.com/JakeWharton/ViewPagerIndicator"> ViewPageIndicator > Et <a href+"https://github.com/ongakuer/CircleIndicator"> CircleIndicator . Cependant, ces bibliothèques ne pouvaient être utilisées qu'avec ViewPager, j'ai donc créé ma propre vue personnalisée.

Utiliser RecyclerView comme ViewPager

ViewPager dans RecyclerView à l'aide de PagerSnapHelper qui peut être utilisé avec SupportLibrary 25.1.0 ou version ultérieure Vous pouvez obtenir le même comportement. Ceci est utile lorsque vous souhaitez éviter ViewPager dans ViewPager.

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

Si vous ne pouvez pas utiliser PagerSnapHelper en raison de problèmes de version, l'article suivant vous montrera comment créer des snaps. http://qiita.com/hotpepsi/items/1167e5263f048a005e05

Créer un contrôle de page

Faire un point

Il existe deux types, par défaut et sélectionné.

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>

Créer une vue personnalisée

Créez une vue personnalisée qui effectue les deux opérations suivantes:

--Créez autant de points que d'éléments affichés par RecyclerView. ――Lorsque vous capturez, les points basculent également en tandem.

Lors de la commutation de points en conjonction avec l'accrochage, la position de l'élément actuellement capturé est requise, elle est donc acquise à l'aide de `` findLastVisibleItemPosition () '' de LinerLayoutManager.

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

        //Changer les points en fonction du défilement de RecyclerView
        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);
            }
        });
    }

　　//Créez autant de points qu'il y a d'éléments dans RecyclerView
    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);

　　　　　　 //Ajuster la taille et l'espacement des points(L'image gif en haut est 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);
    }
}

Utiliser la vue personnalisée

Organisez-le comme une vue normale.

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

prime

Vous pouvez également l'utiliser avec ViewPager en réécrivant la méthode setRecyclerView comme suit. C'est plus facile car l'auditeur a une position.

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) {

            }
        });
    }