Viewpager—— MagicIndicator的使用

关于viewpager的头部标题栏，我使用了 MagicIndicator 接下来看一下如何具体使用

一.在你的新建项目中引入 MagicIndicator的源码

首先你需要去GitHub下载源码：点击打开链接
将项目的源码加载到你的项目新建Module 创建的包名一定要跟源码一至
- 将源码中magicindicator文件夹下的文件一次性拷贝
在projectStructure中引入项目即可

二：使用：

首先设置多个fragment用于滑动展示

在xml中引入直接上代码了：

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.example.microsoft.magicindicatoraaaa.MainActivity">


    <net.lucode.hackware.magicindicator.MagicIndicator

    android:id="@+id/magicIndicator"
    android:layout_width="match_parent"
    android:layout_height="100dp"></net.lucode.hackware.magicindicator.MagicIndicator>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>
</LinearLayout>

MainActivity:

import android.content.Context;
import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.TextView;

import net.lucode.hackware.magicindicator.MagicIndicator;
import net.lucode.hackware.magicindicator.ViewPagerHelper;
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.BezierPagerIndicator;
import net.lucode.hackware.magicindicator.buildins.commonnavigator.titles.CommonPagerTitleView;
import net.lucode.hackware.magicindicator.buildins.commonnavigator.titles.SimplePagerTitleView;

public class MainActivity extends AppCompatActivity {
    private MagicIndicator magicIndicator;
    private ViewPager viewPager;
    private String title[] = new String[]{"国产", "欧美", "日韩", "自拍", "劲爆", "港澳"};
    private Long sellerId;
    private MyAdapter myAdapter;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        magicIndicator = findViewById(R.id.magicindicator);
        viewPager = findViewById(R.id.viewpager);
        myAdapter = new MyAdapter(getSupportFragmentManager());
        viewPager.setAdapter(myAdapter);
        initMagicindicator();


        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @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);
            }
        });

    }

    private void initMagicindicator() {

        magicIndicator.setBackgroundColor(Color.WHITE);
        //新建导航栏
        CommonNavigator commonNavigator = new CommonNavigator(this);
//        commonNavigator.setFollowTouch(true);

//        commonNavigator.setScrollPivotX(0.5f);
        commonNavigator.setEnablePivotScroll(true);
        commonNavigator.setRightPadding(50);
        commonNavigator.setAdapter(new CommonNavigatorAdapter() {
            @Override
            public int getCount() {
                return title == null ? 0 : title.length;
            }

此处为一种标题模式1

   @Override
            public IPagerTitleView getTitleView(Context context, final int index) {
                CommonPagerTitleView commonPagerTitleView = new CommonPagerTitleView(context);
                commonPagerTitleView.setContentView(R.layout.simple_pager_title_layout);
                final TextView textView = commonPagerTitleView.findViewById(R.id.textview);
                final ImageView imageView = commonPagerTitleView.findViewById(R.id.im_view);
                textView.setText(title[index]);
                commonPagerTitleView.setOnPagerTitleChangeListener(new CommonPagerTitleView.OnPagerTitleChangeListener() {
                    @Override
                    public void onSelected(int index, int totalCount) {
                        textView.setTextColor(Color.RED);
                    }

                    @Override
                    public void onDeselected(int index, int totalCount) {
                        textView.setTextColor(Color.BLACK);
                    }

                    @Override
                    public void onLeave(int index, int totalCount, float leavePercent, boolean leftToRight) {
                        imageView.setScaleX(1.3f + (0.8f - 1.3f) * leavePercent);
                        imageView.setScaleY(1.3f + (0.8f - 1.3f) * leavePercent);
                    }

                    @Override
                    public void onEnter(int index, int totalCount, float enterPercent, boolean leftToRight) {
                        imageView.setScaleX(0.8f + (1.3f - 0.8f) * enterPercent);
                        imageView.setScaleY(0.8f + (1.3f - 0.8f) * enterPercent);
                    }
                });
                commonPagerTitleView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        viewPager.setCurrentItem(index);
                    }
                });
                return commonPagerTitleView;
            }

此处为另一种标题模式2
//        commonNavigator.setAdapter(new CommonNavigatorAdapter() {
//            @Override
//            public int getCount() {
//                return title == null ? 0 : title.length;
//            }
//
//            @Override
//            public IPagerTitleView getTitleView(Context context, final int index) {
//                //设置Magicindicator的一种标题模式， 标题模式有很多种，这是最基本的一种
//                SimplePagerTitleView simplePagerTitleView = new SimplePagerTitleView(context);
//                simplePagerTitleView.setText(title[index]);
//                //设置被选中的item颜色
//                simplePagerTitleView.setSelectedColor(Color.BLACK);
//                //设置为被选中item颜色
//                simplePagerTitleView.setNormalColor(Color.GREEN);
//                simplePagerTitleView.setOnClickListener(new View.OnClickListener() {
//                    @Override
//                    public void onClick(View v) {
//
//                        viewPager.setCurrentItem(index);
//
//                    }
//                });
//                return simplePagerTitleView;
//            }
//
//            @Override
//            public IPagerIndicator getIndicator(Context context) {
//                //设置标题指示器，也有多种,可不选，即没有标题指示器。
//                BezierPagerIndicator indicator = new BezierPagerIndicator(context);
//                indicator.setColors(Color.parseColor("#ff4a42"), Color.parseColor("#fcde64"), Color.parseColor("#73e8f4")
//                        , Color.parseColor("#76b0ff"), Color.parseColor("#c683fe")
//                        , Color.parseColor("#76b0ff"), Color.parseColor("#c683fe")
//                        , Color.parseColor("#76b0ff"), Color.parseColor("#c683fe"));
//                return null;
//            }
//
//        });



        //绑定导航栏
        magicIndicator.setNavigator(commonNavigator);
        ViewPagerHelper.bind(magicIndicator, viewPager);

    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
    }

    private class MyAdapter extends FragmentPagerAdapter {

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            Fragment fragment = null;
            switch (position) {
                case 0:
                    FragmentOne fragmentOne = new FragmentOne();
                    fragment = fragmentOne;
                    break;
                case 1:
                    FragmentTwo fragmentTwo = new FragmentTwo();
                    fragment = fragmentTwo;
                    break;
                case 2:
                    FragmentThree fragmentThree = new FragmentThree();
                    fragment = fragmentThree;
                    break;
                case 3:
                    Fragment fragment4 = new com.example.microsoft.magicindicatortext.Fragment();
                    fragment = fragment4;
                    break;
                case 4:
                    Fragment fragment5 = new com.example.microsoft.magicindicatortext.Fragment();
                    fragment = fragment5;
                    break;
                case 5:
                    Fragment fragment6 = new com.example.microsoft.magicindicatortext.Fragment();
                    fragment = fragment6;
                    break;
            
            }

            return fragment;
        }

        @Override
        public int getCount() {
            return title.length;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return title[position];
        }
    }
}

下边看一下运行效果 ok！

Viewpager—— MagicIndicator的使用

猜你喜欢