038 Android Magicindicator开源框架实现viewpager底部圆形指示器

1.Magicindicator介绍

　　Magicindicator是一个强大、可定制、易扩展的 ViewPager 指示器框架。是ViewPagerIndicator、TabLayout、PagerSlidingTabStrip的最佳替代品。支持角标，更支持在非ViewPager场景下使用（使用hide()、show()切换Fragment或使用setVisibility切换FrameLayout里的View等）。

2.Magicindicator使用环境配置

repositories {
    ...
    maven {
        url "https://jitpack.io"
    }
}

dependencies {
    ...
    compile 'com.github.hackware1993:MagicIndicator:1.5.0'
}

3.利用Magicindicator实现viewpager底部的圆形指示器

(1)xml布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!--利用帧布局实现在viewpager上添加标题-->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="180dp">
        <!--利用ViewPager实现轮播图效果-->
        <android.support.v4.view.ViewPager
            android:id="@+id/vp_news_center"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            
        </android.support.v4.view.ViewPager>
        
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="#a000"
            android:padding="10dp">
            <TextView
                android:id="@+id/tv_news_vp_title"
                android:text="标题"
                android:textColor="#fff"
                android:textSize="16dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <!--MagicIndicator的使用-->
            <net.lucode.hackware.magicindicator.MagicIndicator
                android:id="@+id/magic_indicator1"
                android:layout_width="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_height="wrap_content" />
        </RelativeLayout>
    </FrameLayout>
    

</LinearLayout>

(2)java后台

package com.example.administrator.test66smartbeijing.fragment;

import android.annotation.SuppressLint;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.alibaba.fastjson.JSONObject;
import com.bumptech.glide.Glide;
import com.example.administrator.test66smartbeijing.R;
import com.example.administrator.test66smartbeijing.javabean.NewsMenu;
import com.example.administrator.test66smartbeijing.javabean.NewsTabBean;
import com.example.administrator.test66smartbeijing.utils.CacheUtils;
import com.example.administrator.test66smartbeijing.utils.ConstantValue;
import com.example.administrator.test66smartbeijing.utils.RecyclerAdapter;

import net.lucode.hackware.magicindicator.MagicIndicator;
import net.lucode.hackware.magicindicator.ViewPagerHelper;
import net.lucode.hackware.magicindicator.buildins.circlenavigator.CircleNavigator;

import org.xutils.common.Callback;
import org.xutils.http.RequestParams;
import org.xutils.image.ImageOptions;
import org.xutils.x;

import java.util.ArrayList;

import static android.media.AudioRecord.MetricsConstants.CHANNELS;


/**
 *
 */
public class TabDataFragment extends Fragment {

    String queryResultStr="";
    NewsMenu newsMenu;
    ArrayList<NewsTabBean.TopNews> topnews;
    private ViewPager viewPager;
    TextView tv_news_vp_title;


    public TabDataFragment() {

    }
    @SuppressLint("ValidFragment")
    public TabDataFragment(NewsMenu newsMenu) {
        this.newsMenu=newsMenu;
    }

    //新建一个Fragment实例
    public static Fragment newInstance() {
        TabDataFragment fragment = new TabDataFragment();
        return fragment;
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // LayoutInflater.inflate()的功能是将一段 XML 资源文件加载成为 View。所以通常用于将 XML 文件实例化为 View。然后获取 View 上的组件最后操作之。
        View rootView = inflater.inflate(R.layout.fragment_tab_data, container, false);
        viewPager = rootView.findViewById(R.id.vp_news_center);

        tv_news_vp_title=rootView.findViewById(R.id.tv_news_vp_title);
        getDataFromServer();


        return rootView;
    }


    /**
     * viewPager的数据适配器
     */
    class NewsCenterAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            return topnews.size();
        }

        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
            return view==object;
        }

        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            ImageView imageView=new ImageView(getActivity());
            //imageView.setImageResource(R.mipmap.news_pic_default);

            String imageUrlTemp=topnews.get(position).topimage;
            //String imageUrl="http://118.25.152.62:8080/zhbj/10007/1452327318UU91.jpg";
            String imageUrl=ConstantValue.SERVER_URL+imageUrlTemp.substring(25);
            System.out.println(imageUrl);

            //利用Glide开源框架，加载网络图片
            Glide.with(getActivity()).load(imageUrl).into(imageView);
            container.addView(imageView);
            return imageView;
        }

        //销毁item
        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
            container.removeView((View) object);
        }
    }

    /**
     * 从服务器获取数据
     */
    private void getDataFromServer() {
        //请求地址
        String url=ConstantValue.SERVER_URL+newsMenu.data.get(0).children.get(0).url;
        RequestParams params = new RequestParams(url);
        x.http().get(params, new Callback.CommonCallback<String>() {
            @Override
            public void onSuccess(String result) {
                //解析result
                queryResultStr=result;
                System.out.println(result);
                processData(queryResultStr);

                //写缓存
                CacheUtils.setCache(ConstantValue.NEWSCENTER_URL,queryResultStr,getActivity());
            }
            //请求异常后的回调方法
            @Override
            public void onError(Throwable ex, boolean isOnCallback) {
            }
            //主动调用取消请求的回调方法
            @Override
            public void onCancelled(CancelledException cex) {
            }
            @Override
            public void onFinished() {
            }
        });

    }

    /**
     * @param queryResultStr 服务器返回结果
     */
    private void processData(String queryResultStr) {
        NewsTabBean newsTabBean = JSONObject.parseObject(queryResultStr,NewsTabBean.class);

        //利用viewPager实现图片轮播效果
        topnews = newsTabBean.data.topnews;
        if(topnews!=null){
            viewPager.setAdapter(new NewsCenterAdapter());
            viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                }

                @Override
                public void onPageSelected(int position) {
                    //设置viewpager上图片的标题
                    tv_news_vp_title.setText(topnews.get(position).title);
                }

                @Override
                public void onPageScrollStateChanged(int state) {

                }
            });
            //更新第一个头条新闻标题
            tv_news_vp_title.setText(topnews.get(0).title);
            initMagicIndicator1();
        }
    }


    /**
     * 初始化MagicIndicator
     */
    private void initMagicIndicator1() {
        MagicIndicator magicIndicator = getActivity().findViewById(R.id.magic_indicator1);
        CircleNavigator circleNavigator = new CircleNavigator(getActivity());
        circleNavigator.setCircleCount(topnews.size());
        circleNavigator.setCircleColor(Color.RED);
        circleNavigator.setCircleClickListener(new CircleNavigator.OnCircleClickListener() {
            @Override
            public void onClick(int index) {
                viewPager.setCurrentItem(index);
            }
        });
        magicIndicator.setNavigator(circleNavigator);
        ViewPagerHelper.bind(magicIndicator, viewPager);
    }
}

4.效果图