安卓自定义View——PictureGuide一款不错的图片导航，可实现图片显示滑动到哪一张

安卓自定义View——PictureGuide一款不错的图片导航，可实现图片显示滑动到哪一张##

小弟初来乍到，第一次写文章，水平有限，不一定很牛逼，但保证一定是原创，不足之处，请谅解！ 这次给大家带来一个不错的自定义的图片导航控件，使用方便，先上图

在图片中间显示了当前为第几张图片，先看GuideView代码`

package com.example.pic_guide.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.view.View;

import com.example.pic_guide.R;

/**
 * 
 * @author 蒋坤明
 *
 */
public class GuideView extends View implements OnPageChangeListener {
    private Paint mpaint;
    private ViewPager vp;
    private Drawable d_ok;
    private Drawable d_no;
    private int img_w;
    private int img_h;
    /**当前图片索引*/
    private int position;
    /**图片总数*/
    private int viewsCounts;
    private int block = 20;
    private PagerAdapter adapter;
    {
        mpaint = new Paint();
    }
    /**
     * 将ViewPager设置进来，并设置监听
     * @param vp
     */
    public void setViewPager(ViewPager vp){
        this.vp = vp;
        vp.setOnPageChangeListener(this);
        adapter = vp.getAdapter();
        if (adapter==null) {//没有设置就抛出异常
            throw new IllegalStateException("ViewPager does not have adapter instance.");
        }
    }
    public GuideView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // TODO Auto-generated constructor stub
    }
    /**
     * 设置图片总数，因为当前设置了图片可循环滑动，所以要将图片数设置进来，否者可直接用vp.getAdapter().getCount()来获取
     * @param viewsCounts
     */
    public void setViewsCounts(int viewsCounts) {
        this.viewsCounts = viewsCounts;
    }
    public GuideView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    public GuideView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }
    /**
     * 在布局加载完后，加载图片，和图片宽高
     */
    @Override
    protected void onFinishInflate() {
        d_ok = getContext().getResources().getDrawable(R.drawable.guide_indicator);
        d_no = getContext().getResources().getDrawable(R.drawable.guide_indicator_disable);
        img_w = d_ok.getMinimumWidth();
        img_h = d_ok.getMinimumHeight();
        super.onFinishInflate();
    }
    /**
     * 根据算法计算
     */
    @Override
    protected void onDraw(Canvas canvas) {
        if (vp!=null) {
            String pageTitle = adapter.getPageTitle(position).toString();
            try {
                int index = Integer.parseInt(pageTitle);
                for (int i = 0; i < viewsCounts; i++) {
                    if (i==index) {
                        d_ok.setBounds(img_w*i+block *i, 0, img_w*(i+1)+block *i, img_h);
                        d_ok.draw(canvas);
                    }else{
                        d_no.setBounds(img_w*i+block *i, 0, img_w*(i+1)+block *i, img_h);
                        d_no.draw(canvas);
                    }
                }
            } catch (NumberFormatException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
        super.onDraw(canvas);
    }
    @Override
    public void onPageScrolled(int position, float positionOffset,
            int positionOffsetPixels) {
        // TODO Auto-generated method stub

    }
    /**
     * 当图片滑动时，改变当前图片的索引
     */
    @Override
    public void onPageSelected(int position) {
        // TODO Auto-generated method stub
        this.position = position;
        invalidate();
    }
    @Override
    public void onPageScrollStateChanged(int state) {
        // TODO Auto-generated method stub

    }
    /**
     * 设置控件的宽高
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub
        int n_h = resolveSize(img_h, heightMeasureSpec);
        int n_w = resolveSize(img_w*viewsCounts+block*(viewsCounts-1), widthMeasureSpec);
        setMeasuredDimension(n_w, n_h);
    }
}

以上就是PictureGuiView的全部代码，下面来看看使用 首先在布局中写入

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="200dp" >

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>
    <com.example.pic_guide.view.GuideView
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/mgv"
        ></com.example.pic_guide.view.GuideView>
</RelativeLayout>

在继承adapter的时候，重写getPageTitle(int position)方法时要注意

    @Override
    public CharSequence getPageTitle(int position) {
        // TODO Auto-generated method stub
        return position%views.size()+"";
    }

在滑动所在的页面要设置

mgv.setViewPager(vp);
mgv.setViewsCounts(views.size());

`这样我的的图片导航就完成了，可直接拿GuideView去使用，非常方便

代码下载地址