安卓自定义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去使用,非常方便