与轮播图结合的ViewPagerIndicatorView

来源：互联网发布：二叉树的前序遍历java 编辑：程序博客网时间：2024/04/18 23:34

首先看看长啥样吧

没错，这种Indication和我们在百度上一搜一大把的还是有点不一样的，这个完全就是用作为展示用的，用来提示用户当前是第几页了。

首先来看一下主要的控件，

IndicatorView.java

import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import java.lang.ref.WeakReference;
import cn.mifengkong.loan.R;
/**
 * user guide, viewpager indicator
 *
 */
public class IndicatorView extends RelativeLayout {
    /**
     * anchor container
     */
    private LinearLayout indicateLayout;
    private Handler refreshHandler;
    /**
     * page total count
     */
    private int totelCount = 0;
    /**
     * current page
     */
    private int currentIndex = 0;
    public IndicatorView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.init(context);
    }
    public IndicatorView(Context context) {
        super(context);
        this.init(context);
    }
    /**
     * @param context
     */
    private void init(Context context) {
        LayoutInflater.from(context).inflate(R.layout.viewpager_indicator_layout, this);
        this.indicateLayout = (LinearLayout) findViewById(R.id.image_indicater_layout);
        this.refreshHandler = new ScrollIndicateHandler(IndicatorView.this);
    }
    /**
     * get current index
     */
    public int getCurrentIndex() {
        return this.currentIndex;
    }
    public void setTotalCount(int size) {
        this.totelCount = size;
    }
    /**
     * git view count
     */
    public int getTotalCount() {
        return this.totelCount;
    }
    /**
     * set show item current
     *
     * @param index postion
     */
    public void setCurrentItem(int index) {
        this.currentIndex = index;
    }
    /**
     * show
     */
    public void show() {
        for (int index = 0; index < this.totelCount; index++) {
            final View indicater = new ImageView(getContext());
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            params.leftMargin = 10;
            indicater.setLayoutParams(params);
            this.indicateLayout.addView(indicater, index);
        }
        this.refreshHandler.sendEmptyMessage(currentIndex);
    }
    /**
     * refresh indicate anchor
     */
    protected void refreshIndicateView() {
        
        for (int index = 0; index < totelCount; index++) {
            final ImageView imageView = (ImageView) this.indicateLayout.getChildAt(index);
            if (this.currentIndex == index) {
                imageView.setBackgroundResource(R.drawable.dot_focus);
            } else {
                imageView.setBackgroundResource(R.drawable.dot_normal);
            }
        }
    }
    /**
     * ScrollIndicateHandler
     */
    private static class ScrollIndicateHandler extends Handler {
        private final WeakReference<IndicatorView> scrollIndicateViewRef;
        public ScrollIndicateHandler(IndicatorView scrollIndicateView) {
            this.scrollIndicateViewRef = new WeakReference<IndicatorView>(
                    scrollIndicateView);
        }
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            IndicatorView scrollIndicateView = scrollIndicateViewRef.get();
            if (scrollIndicateView != null) {
                scrollIndicateView.refreshIndicateView();
            }
        }
    }
}

贴完代码，现在来看一下代码：

public IndicatorView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.init(context);
    }
    public IndicatorView(Context context) {
        super(context);
        this.init(context);
    }
两个构造方法都调用了init()方法来初始化布局以及控件。

在初始化完控件以后，调用getTotalCount()给控件设置点的个数,以及调用setCurrentItem()方法来设置默认选中的点

show()方法:

public void show() {
        for (int index = 0; index < this.totelCount; index++) {
            final View indicater = new ImageView(getContext());
            
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            params.leftMargin = 10;
            indicater.setLayoutParams(params);
            this.indicateLayout.addView(indicater, index);
        }
        this.refreshHandler.sendEmptyMessage(currentIndex);
    }

就是将我们的一个一个的点添加到我们的线性布局中,并且我们还利用LinearLayout.LayoutParams来给点进行布局，这里的话，我让点距离右边10PX。添加完以后

调用了Handler的sendEmptyMessage方法发送了一个消息，我们的Handler还做了防止内存泄漏的操作。

在Handler的SendMessage方法中调用了refreshIndicateView()方法,

 /**
     * refresh indicate anchor
     */
    protected void refreshIndicateView() {
        for (int index = 0; index < totelCount; index++) {
            final ImageView imageView = (ImageView) this.indicateLayout.getChildAt(index);
            if (this.currentIndex == index) {
                imageView.setBackgroundResource(R.drawable.dot_focus);
            } else {
                imageView.setBackgroundResource(R.drawable.dot_normal);
            }
        }
    }
再该方法中，就只是分别对选中的点和没有选中的点设置了不同的背景图片，当然你也可以自己设置背景图片的样式。

viewpager_indicator_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >
    <LinearLayout
        android:id="@+id/image_indicater_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp"
        android:gravity="center"
        android:minHeight="10dp"
        android:minWidth="60dp"
        android:orientation="horizontal" >
    </LinearLayout>
</RelativeLayout>

两个背景图片的样式也贴一下吧

dot_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff" />
    <size
        android:width="6dp"
        android:height="6dp"/>
    <corners
        android:radius="6dp"/>
</shape>

dot_focus.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff" />
    <size
        android:width="18dp"
        android:height="6dp"/>
    <corners
        android:radius="5dp"/>
</shape>

然后接下来的看一下如何使用吧

IndicatorView indicatorView = new IndicatorView(getActivity());
            indicatorView.setTotalCount(mImageViewUrl.size());//设置点的个数
            indicatorView.setCurrentItem(0);//设置默认选中的点
            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
                    RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);
            params.addRule(RelativeLayout.CENTER_HORIZONTAL);//设置我们的View水平居中
            params.addRule(RelativeLayout.ALIGN_BOTTOM);//设置IndicatorView居于底部
            params.bottomMargin = CommonUtil.dip2px(UiUtils.getContext(), 10);//距离底部10DP
            mTopView.addView(indicatorView,params);//将IndicatorView添加到布局中
            indicatorView.show();//将IndicatorView显示粗来
mImageViewUrl这个参数是用来存放轮播图图片的地址集合

这样还不够，轮播图肯定是挥动的，所以我们要在ViewPager的OnPageChangeListener监听器中onPageSelected方法对选中的点进行改变

private class MyOnPageChangeListener implements OnPageChangeListener {
/**
 * 界面选中的时候调用,初始化点的滚动
 */
@Override
public void onPageSelected(final int position) {
if (null != indicatorView && indicatorView.getTotalCount() > 0) {
indicatorView.setCurrentItem(position % mImageUrl.size());//  % mImageUrl.size()  这个是因为我的轮播图是无限滚动的，所以加上这个，如果你的轮播图不是这样的，可以去掉
indicatorView.refreshIndicateView();
}
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
}

0 0