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<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));
			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<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.ViewPager
		android: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;
	
	@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下載下傳位址

點選打開連結