Android开发实战2----圆点导航指示器（使用自定义View实现）

一、项目概述

当我们使用viewpager进行图片预览时，底部一般情况都会出现圆点导航指示器，效果如图所示：

二、不好的一种处理方式：

刚开始的情况下，我们会现在activity中先定义一个LinearLayout，然后对于这个LinearLayout进行增删Imageview操作。比如：

@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		LayoutInflater inflater = getLayoutInflater();
		pageViews = new ArrayList();
		pageViews.add(inflater.inflate(R.layout.viewpager01, null));
		pageViews.add(inflater.inflate(R.layout.viewpager02, null));
		pageViews.add(inflater.inflate(R.layout.viewpager03, null));
		pageViews.add(inflater.inflate(R.layout.viewpager04, null));
		pageViews.add(inflater.inflate(R.layout.viewpager05, null));
		pageViews.add(inflater.inflate(R.layout.viewpager06, null));

		// 小圆点数组，大小是图片的个数
		imageViews = new ImageView[pageViews.size()];
		// 从指定的XML文件中加载视图
		viewPictures = (ViewGroup) inflater.inflate(R.layout.viewpagers, null);

		viewPager = (ViewPager) viewPictures.findViewById(R.id.guidePagers);
		viewPoints = (ViewGroup) viewPictures.findViewById(R.id.viewPoints);

		// 添加小圆点导航的图片
		for (int i = 0; i < pageViews.size(); i++) {
			imageView = new ImageView(WhatsnewPagesA.this);
			imageView.setLayoutParams(new LayoutParams(20, 20));
			imageView.setPadding(5, 0, 5, 0);
			// 吧小圆点放进数组中
			imageViews[i] = imageView;
			// 默认选中的是第一张图片，此时第一个小圆点是选中状态，其他不是
			if (i == 0)
				imageViews[i].setImageDrawable(getResources().getDrawable(
						R.drawable.page_indicator_focused));
			else
				imageViews[i].setImageDrawable(getResources().getDrawable(
						R.drawable.page_indicator_unfocused));
			// 将imageviews添加到小圆点视图组
			viewPoints.addView(imageViews[i]);
		}

		setContentView(viewPictures);

		viewPager.setAdapter(new NavigationPageAdapter());
		// 为viewpager添加监听，当view发生变化时的响应
		viewPager.setOnPageChangeListener(new NavigationPageChangeListener());
	}

这种编码方式，把视图显示代码和业务逻辑操作代码混在一起了。代码显得很论乱。

三、改进的一种处理方式：

项目架构如下：

下面我们就采用自定义View的方式，把圆点导航指示器的显示代码，放到自定义视图（RoundNavigationIndicator）中

RoundNavigationIndicator.java文件如下：

package edu.njupt.javer.roundnavigationindicator.view;

import edu.njupt.javer.roundnavigationindicator.R;
import android.content.Context;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;


/**
 * @author yixiang
 *自定义圆点导航指示器
 */
public class RoundNavigationIndicator extends LinearLayout {
	
	private LinearLayout container;
	private int sum=0;
	private int selected=0;
	private Context context;

	public RoundNavigationIndicator(Context context) {
		super(context);
		this.context=context;
		init(context);
	}


	public RoundNavigationIndicator(Context context, AttributeSet attrs) {
		super(context, attrs);
		this.context=context;
		init(context);
	}


	private void init(Context context) {
		LayoutInflater.from(context).inflate(R.layout.image_navigation_indicaor_layout, this);
		setOrientation(LinearLayout.HORIZONTAL);
		setGravity(Gravity.CENTER_VERTICAL);
		container=(LinearLayout) findViewById(R.id.indicator);
	}
	
	//设置圆点总数
	public void setLenght(int sum){
		this.sum=sum;
	}
	
	//设置选中圆点的下标
	public void setSelected(int selected){
		container.removeAllViews();
		this.selected=selected;
	}
	
	
	//绘制指示器
	public void draw(){
		for(int i=0;i

然后我们在布局文件中（activity_main.xml）导入我们的自定义视图（RoundNavigationIndicator），方法如下：

最后我们要在activity中对自定义视图（RoundNavigationIndicator）设置其自定义属性。

代码如下：

package edu.njupt.javer.roundnavigationindicator;

import edu.njupt.javer.roundnavigationindicator.view.RoundNavigationIndicator;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class MainActivity extends Activity {
	
	private int[] imageUrls={R.drawable.mm1,R.drawable.mm2,R.drawable.mm3,R.drawable.mm4};

	private RoundNavigationIndicator indicator;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		//初始化圆点导航指示器
		indicator=(RoundNavigationIndicator) findViewById(R.id.indicator);
		indicator.setLenght(imageUrls.length);
		indicator.setSelected(0);
		indicator.draw();
		
		ViewPager pager=(ViewPager) findViewById(R.id.pager);
		pager.setAdapter(new MyPagerAdapter());
		pager.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int position) {
				//根据viewpager的改变修正圆点导航指示器
				indicator.setSelected(position);
				indicator.draw();
			}
			
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				
			}
		});
		
	}
	
	class MyPagerAdapter extends PagerAdapter{
		
		private LayoutInflater inflater;
		
		public MyPagerAdapter() {
			inflater=LayoutInflater.from(getApplicationContext());
		}

		@Override
		public int getCount() {
			return imageUrls.length;
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0.equals(arg1);
		}
		
		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView((View)object);
		}
		
		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			View imageLayout = inflater.inflate(R.layout.item_pager_image, container, false);
			ImageView imageview=(ImageView) imageLayout.findViewById(R.id.image);
			imageview.setImageResource(imageUrls[position]);
			
			container.addView(imageLayout);
			
			return imageLayout;
		}
		
		
		
	}

}

四、Demo下载地址

点击打开链接