自定义view:图片显示指示器

      本篇文章使用Gallally控件和自定义view，实现一个带有图片指示器的图片集的展示效果。

      1.实现的效果

      显示一组可以滑动的图片，随着图片的切换，指示器小圆点也随着切换。

      2.自定义view的步骤

          (1)、自定义View的属性
          (2)、在View的构造方法中获得我们自定义的属性
          (3)、重写onMesure
          (4)、重写onDraw
          (3)不一定是必须的，当然了大部分情况下还是需要重写的。

           1、自定义View的属性，首先在res/values/ 下建立一个attrs.xml ， 在里面定义我们的属性和声明我们的整个样式。

           

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="FlowIndicator">
        <attr name="count" format="integer" />
        <attr name="space" format="dimension" />
        <attr name="point_size" format="dimension" />
        <attr name="point_seleted_color" format="color|reference" />
        <attr name="point_normal_color" format="color|reference" />
        <attr name="point_radius" format="dimension" />
    </declare-styleable>

</resources>

我们定义了5个属性，format是值该属性的取值类型:
一共有：string,color,demension,integer,enum,reference,float,boolean,fraction,flag;

            在图片展示的布局中，我们声明Gallery控件以及自定义属性。布局文件head_view.xml内容如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.dream.myqiyi"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <Gallery
        android:id="@+id/home_gallery"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:spacing="5dip" />

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="#65000000"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="5dip"
            android:layout_marginTop="5dip"
            android:text="承影之奇艺UIdemo"
            android:textColor="#ffffff"
            android:textSize="18dip" />

        <com.dream.myqiyi.widget.FlowIndicator
            android:id="@+id/myView"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dip"
            app:count="4"
            android:gravity="center"
            app:point_normal_color="#45000000"
            app:point_radius="3dip"
            app:point_seleted_color="#ffffff"
            app:point_size="5dip"
            app:space="10dip" />
    </LinearLayout>

</FrameLayout>

记住，一定要引入 xmlns:app="http://schemas.android.com/apk/res/com.dream.myqiyi" 命名空间，后面的包路径指的是项目的package。

             2, 自定义FlowIndicator类继承View类，在自定义的FlowIndicator类构造方法中，获得我们的自定义样式属性,并重写View类的onMeasure()和onView()方法。

public class FlowIndicator extends View {
	private int count;
	private float space, radius;
	private int point_normal_color, point_seleted_color;

	// 选中
	private int seleted = 0;

	// background seleted normal

	public FlowIndicator(Context context, AttributeSet attrs) {
		super(context, attrs);
		TypedArray a = context.obtainStyledAttributes(attrs,
				R.styleable.FlowIndicator);

		count = a.getInteger(R.styleable.FlowIndicator_count, 4);
		space = a.getDimension(R.styleable.FlowIndicator_space, 9);
		radius = a.getDimension(R.styleable.FlowIndicator_point_radius, 9);

		point_normal_color = a.getColor(
				R.styleable.FlowIndicator_point_normal_color, 0x000000);
		point_seleted_color = a.getColor(
				R.styleable.FlowIndicator_point_seleted_color, 0xffff07);

		int sum = attrs.getAttributeCount();
		if (Constans.DEBUG) {
			String str = "";
			for (int i = 0; i < sum; i++) {
				String name = attrs.getAttributeName(i);
				String value = attrs.getAttributeValue(i);
				str += "attr_name :" + name + ": " + value + "\n";
			}
			Log.i("attribute", str);
		}
		a.recycle();
	}

	public void setSeletion(int index) {
		this.seleted = index;
		invalidate();
	}

	public void setCount(int count) {
		this.count = count;
		invalidate();
	}

	public void next() {
		if (seleted < count - 1)
			seleted++;
		else
			seleted = 0;
		invalidate();
	}

	public void previous() {
		if (seleted > 0)
			seleted--;
		else
			seleted = count - 1;
		invalidate();
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		Paint paint = new Paint();
		paint.setAntiAlias(true);

		float width = (getWidth() - ((radius * 2 * count) + (space * (count - 1)))) / 2.f;

		for (int i = 0; i < count; i++) {
			if (i == seleted)
				paint.setColor(point_seleted_color);
			else
				paint.setColor(point_normal_color);
			canvas.drawCircle(width + getPaddingLeft() + radius + i
					* (space + radius + radius), getHeight() / 2, radius, paint);

		}
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		setMeasuredDimension(measureWidth(widthMeasureSpec),
				measureHeight(heightMeasureSpec));
	}

	private int measureWidth(int measureSpec) {
		int result = 0;
		int specMode = MeasureSpec.getMode(measureSpec);
		int specSize = MeasureSpec.getSize(measureSpec);

		if (specMode == MeasureSpec.EXACTLY) {
			result = specSize;
		} else {
			result = (int) (getPaddingLeft() + getPaddingRight()
					+ (count * 2 * radius) + (count - 1) * radius + 1);
			if (specMode == MeasureSpec.AT_MOST) {
				result = Math.min(result, specSize);
			}
		}
		return result;
	}

	private int measureHeight(int measureSpec) {
		int result = 0;
		int specMode = MeasureSpec.getMode(measureSpec);
		int specSize = MeasureSpec.getSize(measureSpec);

		if (specMode == MeasureSpec.EXACTLY) {
			result = specSize;
		} else {
			result = (int) (2 * radius + getPaddingTop() + getPaddingBottom() + 1);
			if (specMode == MeasureSpec.AT_MOST) {
				result = Math.min(result, specSize);
			}
		}
		return result;
	}

}

          在onMeasure函数中，系统帮我们测量的高度和宽度都是MATCH_PARNET，当我们设置明确的宽度和高度时，系统帮我们测量的结果就是我们设置的结果，当我们设置为WRAP_CONTENT,或者MATCH_PARENT系统帮我们测量的结果就是MATCH_PARENT的长度。所以，当设置了WRAP_CONTENT时，我们需要自己进行测量，即重写onMesure方法”：重写之前先了解MeasureSpec的specMode,一共三种类型：
EXACTLY：一般是设置了明确的值或者是MATCH_PARENT
AT_MOST：表示子布局限制在一个最大值内，一般为WARP_CONTENT

UNSPECIFIED：表示子布局想要多大就多大，很少使用。

需要重写onMeasure方法，计算自定义view的大小。

         3，Gallery数据适配器类

public class GalleryAdapter extends BaseAdapter {
	Context mContext;
	int[] res = new int[] { R.drawable.t1, R.drawable.t2,
			R.drawable.t3, R.drawable.t1, R.drawable.t2,
			R.drawable.t3, R.drawable.t1, R.drawable.t2,
			R.drawable.t3 };

	public GalleryAdapter(Context cnt) {
		this.mContext = cnt;
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return res.length;
	}

	@Override
	public Object getItem(int arg0) {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	public long getItemId(int arg0) {
		// TODO Auto-generated method stub
		return 0;
	}

	@Override
	public View getView(int arg0, View arg1, ViewGroup arg2) {
		// TODO Auto-generated method stub
		if (arg1 == null) {
			arg1 = LayoutInflater.from(mContext).inflate(R.layout.gallery_item,
					null);
		}
		ImageView img = (ImageView) arg1.findViewById(R.id.home_img);
		img.setImageResource(res[arg0]);
		return arg1;
	}
}

            4,主Activity

public class HomeActivity extends Activity {
	static final int SCROLL_ACTION = 0;
	int[] tags = new int[] { 0, 0, 0, 0, 0 };
	Gallery mGallery;
	GalleryAdapter mGalleryAdapter;
	FlowIndicator mMyView;
	Timer mTimer;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.home_activity);
		prepareView();
		mTimer = new Timer();
		mTimer.scheduleAtFixedRate(new MyTask(), 0, 4000);
	}

	private void prepareView() {
		mExpandableListView = (ExpandableListView) findViewById(R.id.expandableListView1);
		MyListAdapter adapter = new MyListAdapter();
		View header = LayoutInflater.from(this).inflate(R.layout.header_view,
				null);
		mGallery = (Gallery) header.findViewById(R.id.home_gallery);
		mMyView = (FlowIndicator) header.findViewById(R.id.myView);
		mGalleryAdapter = new GalleryAdapter(this);
		mMyView.setCount(mGalleryAdapter.getCount());
		mGallery.setAdapter(mGalleryAdapter);
		mGallery.setOnItemSelectedListener(new OnItemSelectedListener() {

			@Override
			public void onItemSelected(AdapterView<?> arg0, View arg1,
					int arg2, long arg3) {
				// TODO Auto-generated method stub
				mMyView.setSeletion(arg2);
			}

			@Override
			public void onNothingSelected(AdapterView<?> arg0) {
				// TODO Auto-generated method stub

			}
		});

	}

	private class MyTask extends TimerTask {
		@Override
		public void run() {
			mHandler.sendEmptyMessage(SCROLL_ACTION);
		}
	}

	Handler mHandler = new Handler() {
		@Override
		public void handleMessage(Message msg) {
			// TODO Auto-generated method stub
			super.handleMessage(msg);
			switch (msg.what) {
			case SCROLL_ACTION:
				 int curPos = mGallery.getSelectedItemPosition();
				 if (curPos < mGalleryAdapter.getCount() - 1) {
				 curPos++;
				 } else {
				 curPos = 0;
				 }
				/* mGallery.setLayoutAnimation(new LayoutAnimationController(
				 AnimationUtils.loadAnimation(HomeActivity.this,
				 R.anim.gallery_in)));*/
				 mGallery.setSelection(curPos, true);
				/*MotionEvent e1 = MotionEvent.obtain(SystemClock.uptimeMillis(),
						SystemClock.uptimeMillis(), MotionEvent.ACTION_DOWN,
						89.333336f, 265.33334f, 0);
				MotionEvent e2 = MotionEvent.obtain(SystemClock.uptimeMillis(),
						SystemClock.uptimeMillis(), MotionEvent.ACTION_UP,
						300.0f, 238.00003f, 0);

				mGallery.onFling(e1, e2, -1300, 0);*/
				break;

			default:
				break;
			}
		}
	};
}

实现图片定时自动切换和手动滑动切换。