MagicIndicator的日常使用笔记

蔚落 2022-09-26 02:30 241阅读 0赞

## 前言 ##

**最近在网上看到了MagicIndicator这个自定义指示器觉得蛮有趣的，而网上的很多博客，我看不到懂，就自己看博主github上的源码，自己谢了一个测试Demo,有错误的地方欢迎大家指出，我也有很多不太懂的地方，只是简单的会用**

## 进入正题 ##

**先贴一张结构图很简单**  
，![很简单][20160918092951607]

***\*别忘了MagicIndicator首先导入Module，即第三个红线，最后会放上github地址，里面有\****

**gradle中别忘了compile project(‘:magicindicator’)，是app下的，dependencies里，添加依赖**

1.**第一个红框是主要的Java类**

**MainActivity**

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.titles.ClipPagerTitleView;
    
    import java.util.Arrays;
    import java.util.List;
    
    public class MainActivity extends AppCompatActivity { 
    
    
        //MagicIndicator指示器数据,Arrays.asList(channels)返回一个Arraylist,并将数据存到mDataList
        String[] channels = new String[]{
       "CUPCAKE", "DONUT", "ECLAIR", "GINGERBREAD", "HONEYCOMB", "ICE_CREAM_SANDWICH", "JELLY_BEAN", "KITKAT", "LOLLIPOP", "M", "NOUGAT"};
        private List<String> mDataList = Arrays.asList(channels);
    
    
    
        //testArray，viewPager要显示的数据
        String[] classmate = new String[]{
       "曹博", "张汪洋", "金威", "智慧", "李庄", "草纸", "销毁", "张自豪感", "棒棒糖", "嚣张", "导员"};
    
        //ViewPager实例
        private ViewPager mViewPager;
    
        //自定义适配器实例
        private MypagerAdapter mAdapter;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            //生成自定义pagerAdapter对象，构造函数是自己写的，重构的，结构更好
            mAdapter =new MypagerAdapter(classmate);
            mViewPager = (ViewPager) findViewById(R.id.view_pager);
            mViewPager.setAdapter(mAdapter);
    
            //MagicIndicator指示器部分
            final MagicIndicator magicIndicator = (MagicIndicator) findViewById(R.id.magic_indicator);
            final CommonNavigator commonNavigator = new CommonNavigator(this);
            commonNavigator.setAdapter(new CommonNavigatorAdapter() {
                @Override
                public int getCount() {
                    //mDataList == null条件，为真返回0；
                    return mDataList == null ? 0 : mDataList.size();
                }
    
                @Override
                public IPagerTitleView getTitleView(Context context, final int index) {
                    ClipPagerTitleView clipPagerTitleView = new ClipPagerTitleView(context);
    
                    clipPagerTitleView.setText(mDataList.get(index));
                    clipPagerTitleView.setTextColor(Color.parseColor("#f2c4c4"));
                    clipPagerTitleView.setClipColor(Color.WHITE);
    
                    clipPagerTitleView.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View view) {
                            mViewPager.setCurrentItem(index);
                        }
                    });
                    return clipPagerTitleView;
                }
    
                @Override
                public IPagerIndicator getIndicator(Context context) {
                    return null;    // 没有指示器，因为title的指示作用已经很明显了
                }
            });
            magicIndicator.setNavigator(commonNavigator);
    
    
            //指示器滑动跟随的效果
            ViewPagerHelper.bind(magicIndicator, mViewPager);
        }
    }

2.**ViewPager适配器类**

***\*ViewPager的数据更改在这里面，我这里只提供了一个构造函数，用于实验，如果你需要更多其他类型的数据，可以自己写构造函数，然后在Acitity中生成实例时，调用不同的构造函数\****

**MypagerAdapter**

package com.caobo.magiclndicatortest;
    
    import android.support.v4.view.PagerAdapter;
    import android.view.Gravity;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.TextView;
    
    import java.util.Arrays;
    import java.util.List;
    
    /** * Created by 曹博 on 2016/9/18. * 重构了一下，结构更清晰，将适配器单独弄成一个类，重写构造方法，方便自定义数据 */
    public class MypagerAdapter extends PagerAdapter { 
    
    
    
        private List<String> mTest ;
    
        //构造函数
        public MypagerAdapter(String[] classmate){
    
            mTest = Arrays.asList(classmate);
        }
    
        返回页卡的数量
        @Override
        public int getCount() {
            return mTest.size();
        }
    
        //官方提示这样写
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
    
        //这个方法，return一个对象，这个对象表明了PagerAdapter适配器选择哪个对象*放在当前的ViewPager中
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
    
            TextView textView = new TextView(container.getContext());
            //根据点击的位置，取到mTest数组中的数据
            textView.setText(mTest.get(position));
            textView.setGravity(Gravity.CENTER);
            container.addView(textView);
            return textView;
        }
    
        //这个方法，是从ViewGroup中移出当前View
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    
        @Override
        public int getItemPosition(Object object) {
            TextView textView = (TextView) object;
            String text = textView.getText().toString();
            int index = mTest.indexOf(text);
            if (index >= 0) {
                return index;
            }
            return POSITION_NONE;
        }
    
        @Override
        public CharSequence getPageTitle(int position) {
            return mTest.get(position);
        }
    }

3.**布局文件**

**activity\_main**

<?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.caobo.magiclndicatortest.MainActivity">
    
        <net.lucode.hackware.magicindicator.MagicIndicator android:id="@+id/magic_indicator" android:layout_width="match_parent" android:layout_height="40dp" android:background="#d43d3d" />
    
        <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@android:color/white" />
    
    
    </LinearLayout>

**需要说的也就这么多，注释基本上都有，简单使用应该没什么问题，放上运行图**  
![这里写图片描述][20160918123153161]

**github地址：[https://github.com/Androidcaobo/MagiclndicatorTest][https_github.com_Androidcaobo_MagiclndicatorTest]**

[20160918092951607]: /images/20220717/9992749f084c4d75b7b9e2f9c1cb39fd.png
[20160918123153161]: /images/20220717/7a20d3255fbb4a1c820d9b192a1bb163.png
[https_github.com_Androidcaobo_MagiclndicatorTest]: https://github.com/Androidcaobo/MagiclndicatorTest