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

一、项目概述

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

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

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

@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);LayoutInflater inflater = getLayoutInflater();pageViews = new ArrayList<View>();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));elseimageViews[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<sum;i++){ImageView imageview=new ImageView(context);imageview.setLayoutParams(new LayoutParams(20, 20));imageview.setPadding(5, 0, 5, 0);if(i==selected){imageview.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused));}else{imageview.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused));}container.addView(imageview);}}}

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

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/dark" >        <android.support.v4.view.ViewPagerandroid:id="@+id/pager"android:layout_width="match_parent"android:layout_height="match_parent"/>            <edu.njupt.javer.roundnavigationindicator.view.RoundNavigationIndicator        android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:id="@+id/indicator"    android:layout_marginBottom="20dp"    android:layout_gravity="bottom|center_horizontal"    /></FrameLayout>

最后我们要在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;@Overrideprotected 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() {@Overridepublic void onPageSelected(int position) {//根据viewpager的改变修正圆点导航指示器indicator.setSelected(position);indicator.draw();}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});}class MyPagerAdapter extends PagerAdapter{private LayoutInflater inflater;public MyPagerAdapter() {inflater=LayoutInflater.from(getApplicationContext());}@Overridepublic int getCount() {return imageUrls.length;}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0.equals(arg1);}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView((View)object);}@Overridepublic 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下载地址

点击打开链接