android:viewpager指示器MagicIndicator+viewpager2

一，安装第三方库

官方地址:

https://mvnrepository.com/artifact/com.github.hackware1993/MagicIndicator

 

编辑 build.gradle,添加:

// https://mvnrepository.com/artifact/com.github.hackware1993/MagicIndicator
implementation 'com.github.hackware1993:MagicIndicator:1.6.0'

然后点击 Sync Now 链接

二，代码：

activity xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.MagicActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <net.lucode.hackware.magicindicator.MagicIndicator
            android:id="@+id/tab_page"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_marginTop="48dp"
            android:paddingBottom="5dp"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/white"
            app:tabIndicatorHeight="1dp"
            app:tabMode="scrollable"
            app:tabTextColor="@color/white" />

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewpager2bottom"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@id/nav_view"
            />

    </LinearLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

activity java

package com.example.okdemo1.activity;

import android.content.Context;
import android.os.Bundle;
import android.view.View;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
import androidx.viewpager2.widget.ViewPager2;

import com.example.okdemo1.R;
import com.example.okdemo1.adapter.FragAdapter;
import com.example.okdemo1.fragment.Cate2Fragment;
import com.example.okdemo1.fragment.Cate3Fragment;
import com.example.okdemo1.fragment.House2Fragment;
import com.example.okdemo1.fragment.House3Fragment;

import net.lucode.hackware.magicindicator.MagicIndicator;
import net.lucode.hackware.magicindicator.ViewPagerHelper;
import net.lucode.hackware.magicindicator.buildins.UIUtil;
import net.lucode.hackware.magicindicator.buildins.commonnavigator.CommonNavigator;
import net.lucode.hackware.magicindicator.buildins.commonnavigator.abs.CommonNavigatorAdapter;
import net.lucode.hackware.magicindicator.buildins.commonnavigator.abs.IPagerIndicator;
import net.lucode.hackware.magicindicator.buildins.commonnavigator.abs.IPagerTitleView;
import net.lucode.hackware.magicindicator.buildins.commonnavigator.indicators.LinePagerIndicator;
import net.lucode.hackware.magicindicator.buildins.commonnavigator.titles.ColorTransitionPagerTitleView;

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

public class MagicActivity extends AppCompatActivity {

    private MagicIndicator magicIndicator;

    private ViewPager2 viewPager;

    //    private HomeFragmentAdapter fragmentAdapter;
    private List<Fragment> fragmentList = new ArrayList<>();
    private String[] titles = {"推荐", "类型一", "类型二", "类型三", "类型四", "类型五", "类型六", "类型七"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_magic);

        //初始化
        fragmentList.add(new Cate2Fragment());
        fragmentList.add(new Cate3Fragment());
        fragmentList.add(new House2Fragment());
        fragmentList.add(new House3Fragment());
        fragmentList.add(new House2Fragment());
        fragmentList.add(new House3Fragment());
        fragmentList.add(new House2Fragment());
        fragmentList.add(new House3Fragment());

        FragAdapter viewPagerAdapter=new FragAdapter(this,fragmentList);//创建适配器对象
        //得到viewpager,并为它设置adapter
        viewPager = findViewById(R.id.viewpager2bottom);
        viewPager.setAdapter(viewPagerAdapter); // 设置翻页视图的适配器
        viewPager.setCurrentItem(0);
        //完成

        magicIndicator = findViewById(R.id.tab_page);

        initMagicIndicator(this, titles, viewPager, magicIndicator, 18, 20, 20);
    }

    public void initMagicIndicator(Context context, String[] titleArray, ViewPager2 mPager, MagicIndicator magicIndicator
            , int textSize, int paddingLeft, int paddingRight) {

        CommonNavigator commonNavigator = new CommonNavigator(context);
        commonNavigator.setAdapter(new CommonNavigatorAdapter() {
            @Override
            public int getCount() {
                return titleArray == null ? 0 : titleArray.length;
            }

            @Override
            public IPagerTitleView getTitleView(Context context, final int index) {
                ColorTransitionPagerTitleView colorTransitionPagerTitleView = new ColorTransitionPagerTitleView(context);
                colorTransitionPagerTitleView.setNormalColor(ContextCompat.getColor(MagicActivity.this,R.color.color3));
                colorTransitionPagerTitleView.setSelectedColor(ContextCompat.getColor(MagicActivity.this,R.color.tab_indicator));
                colorTransitionPagerTitleView.setText(titleArray[index]);
                colorTransitionPagerTitleView.setTextSize(textSize);
                colorTransitionPagerTitleView.setPadding(paddingLeft, 0, paddingRight, 0);
                colorTransitionPagerTitleView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        mPager.setCurrentItem(index);
                    }
                });
                return colorTransitionPagerTitleView;
            }

            @Override
            public IPagerIndicator getIndicator(Context context) {
                LinePagerIndicator indicator = new LinePagerIndicator(context);
                indicator.setMode(LinePagerIndicator.MODE_EXACTLY);
                indicator.setLineHeight(UIUtil.dip2px(context, 2));
                indicator.setLineWidth(UIUtil.dip2px(context, 14));
                indicator.setRoundRadius(UIUtil.dip2px(context, 1));
                indicator.setColors(ContextCompat.getColor(MagicActivity.this,R.color.tab_indicator));
                return indicator;
            }
        });
        magicIndicator.setNavigator(commonNavigator);

        //ViewPagerHelper.bind(magicIndicator, mPager);
        mPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                magicIndicator.onPageScrolled(position, positionOffset, positionOffsetPixels);
            }

            @Override
            public void onPageSelected(int position) {
                magicIndicator.onPageSelected(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                magicIndicator.onPageScrollStateChanged(state);
            }
        });
    }

}

三，测试效果: