Viewpager2+Fragment+指示器

Viewpager2+Fragment+指示器

• 效果展示：

1. MainActivity.java

package com.huawei.myviewpager;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;

import com.huawei.myviewpager.adapter.MyFragmentPagerAdapter;
import com.huawei.myviewpager.fragment.FirstFragment;
import com.huawei.myviewpager.fragment.SecondFragment;
import com.huawei.myviewpager.fragment.ThirdFragment;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private MyFragmentPagerAdapter mAdapter;

    private ViewPager2 mViewpager;
    private List<Fragment> mList;

    private LinearLayout mPointIndicator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mList = new ArrayList<>();
        mList.add(new FirstFragment());
        mList.add(new SecondFragment());
        mList.add(new ThirdFragment());
        mAdapter = new MyFragmentPagerAdapter(this, mList);
        initView();

    }

    private void initView() {
        mViewpager = findViewById(R.id.vp2);
        mViewpager.setAdapter(mAdapter);
        mPointIndicator = findViewById(R.id.fragment_indicator);
        insertPoint();
        mViewpager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageSelected(int position) {
                int realPosition;
                if (position != 0) {
                    realPosition = position % 3;
                } else {
                    realPosition = 0;
                }
                setSelectPoint(realPosition);
            }
        });
    }

    private void insertPoint() {
        for (int i = 0; i < 3; i++) {
            View point = new View(MainActivity.this);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(40, 40);
            layoutParams.topMargin = 20;
            if (i == 0) {
                point.setBackground(getResources().getDrawable(R.drawable.indicator_point_selected));
            } else {
                point.setBackground(getResources().getDrawable(R.drawable.indicator_point_unselected));
            }
            point.setLayoutParams(layoutParams);
            mPointIndicator.addView(point);
        }
    }

    private void setSelectPoint(int realPosition) {
        for (int i = 0; i < mPointIndicator.getChildCount(); i++) {
            View point = mPointIndicator.getChildAt(i);
            if (i == realPosition) {
                point.setBackgroundResource(R.drawable.indicator_point_selected);
            } else {
                point.setBackgroundResource(R.drawable.indicator_point_unselected);
            }
        }
    }
}

2. activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/vp2"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:id="@+id/fragment_indicator"
        android:layout_width="40dp"
        android:layout_height="100dp"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="32dp"
        android:layout_marginTop="80dp"
        android:gravity="center"
        android:orientation="vertical" />

</RelativeLayout>

3. MyFragmentPagerAdapter

package com.huawei.myviewpager.adapter;

import java.util.List;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class MyFragmentPagerAdapter extends FragmentStateAdapter {

    private List<Fragment> mList;

    public MyFragmentPagerAdapter(@NonNull FragmentActivity fragmentActivity, List<Fragment> list) {
        super(fragmentActivity);
        mList = list;
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        Fragment fragment = mList.get(position);
        return fragment;
    }

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

4. FirstFragment.java

public class FirstFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_first, container, false);
    }
}

5. fragment_first.xml，三个fragment相同布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/img9" />
</RelativeLayout>

6. indicator_point_selected.xml 指示器选中shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="250dp" />
    <solid android:color="#FF000000" />
    <stroke android:color="#FF000000" />
</shape>

7. indicator_point_unselected.xml 指示器未选中shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="250dp" />
    <solid android:color="#FFFFFFFF" />
    <stroke
        android:width="1dp"
        android:color="#FF000000" />
</shape
://schemas.android.com/apk/res/android">
    <corners android:radius="250dp" />
    <solid android:color="#FFFFFFFF" />
    <stroke
        android:width="1dp"
        android:color="#FF000000" />
</shape