天天看點

開源控件滾動選擇器WheelView學習筆記 & 省市區關聯選擇器

大神寫控件,小的學習之。

開源控件Wheel效果一覽

開源控件滾動選擇器WheelView學習筆記 & 省市區關聯選擇器

開源項目部落格:

http://android-devblog.blogspot.com/2010/05/wheel-ui-contol.html

介紹了該控件,以及設計原理,看過之後對該控件進行改造有幫助。

下載下傳源碼通讀了一遍,好在能看懂,膜拜之。

原元件已經十分成熟和友善使用,附帶的demo也示範了各種用法。

但這貌似是3年前的項目,源碼對元件的界面風格已經在源代碼确定,是如上圖實體風格。

剛好找到另外一篇文章在此控件的基礎上完成了省市區三級關聯的選擇器,他将Wheel的風格修改成了當下流行的扁平簡約風格

詳見:Android省市區三級關聯滾輪選擇

效果圖:(性别選擇是我的測試)

開源控件滾動選擇器WheelView學習筆記 & 省市區關聯選擇器

下面将關于界面風格的幾處代碼貼出來,需要修改風格在這些地方修改。

有時間将這些地方抽成方法應該就更友善了。

界面的繪制都在WheelView.java之中。

1、滾動項目頂部底部陰影顔色。注釋中為原元件實體風格。

/** Top and bottom shadows colors */
	/*
	 * / Modified by wulianghuan 2014-11-25 private int[] SHADOWS_COLORS = new
	 * int[] { 0xFF111111, 0x00AAAAAA, 0x00AAAAAA }; //
	 */
	private int[] SHADOWS_COLORS = new int[] { 0xefE9E9E9, 0xcfE9E9E9,
			0x3fE9E9E9 };
           

2'、頂部底部陰影大小。原元件中固定為陰影為1.5個項高度,這在可見項設定為<=3時會使得陰影完全覆寫内容,是以我在這修改一下,根據設定的可見項數量來設定陰影的大小,確定顯示内容。

/**
	 * Draws shadows on top and bottom of control
	 * 
	 * @param canvas
	 *            the canvas for drawing
	 */
	private void drawShadows(Canvas canvas) {
		// by wkw1125 @2015-9-22 20:22:04 根據可見項數量調整陰影大小

		int itemCount = getVisibleItems();
		double ratio = 0.0;
		if (itemCount <= 1) {
			ratio = 0.1;
		} else if (itemCount <= 3) {
			ratio = 0.5;
		} else {
			ratio = 1.5;
		}
		// int height = (int)(1.5 *getItemHeight());
		int height = (int) (ratio * getItemHeight());

		topShadow.setBounds(0, 0, getWidth(), height);
		topShadow.draw(canvas);

		bottomShadow
				.setBounds(0, getHeight() - height, getWidth(), getHeight());
		bottomShadow.draw(canvas);
	}
           

3、中部選中内容的邊框。原元件是繪制了一個漸變寬,由上文作者改成了兩條線。

/**
	 * Draws rect for current value
	 * 
	 * @param canvas
	 *            the canvas for drawing
	 */
	private void drawCenterRect(Canvas canvas) {
		int center = getHeight() / 2;
		int offset = (int) (getItemHeight() / 2 * 1.2);

		// Remarked by wulianghuan 2014-11-27 使用自己的畫線,而不是描邊
		// centerDrawable.setBounds(0, center - offset, getWidth(), center +
		// offset);
		// centerDrawable.draw(canvas);

		Paint paint = new Paint();
		// 線顔色
		paint.setColor(getResources().getColor(R.color.province_line_border));
		// 設定線寬
		paint.setStrokeWidth((float) 1);
		// 繪制上邊直線
		canvas.drawLine(0, center - offset, getWidth(), center - offset, paint);
		// 繪制下邊直線
		canvas.drawLine(0, center + offset, getWidth(), center + offset, paint);
		//
	}
           

4、關于文本顔色、字型大小等,則是在擴充卡中設定的。

// 文本内容
		String[] sexs = { "男", "女", "男", "女", "男", "女", "男", "女" };
		ArrayWheelAdapter<String> sexadapter = new ArrayWheelAdapter<String>(
				this, sexs);
		// 文本顔色
		sexadapter.setTextColor(getResources().getColor(R.color.blue));
		// 文本大小
		sexadapter.setTextSize(20);
		mViewSex.setViewAdapter(sexadapter);
		// 可見數目,預設是5
		mViewSex.setVisibleItems(3);
           

5、對滾動項使用自定義布局,同樣是在擴充卡中設定

sexadapter.setItemResource(R.layout.tab_item);
           

6、修改預設項目高度ItemHeight。

若擴充卡沒有指定setItemResource,wheel将預設地使用一個TextView作為項目布局,是以其高度隻受其文本大小影響。

改變預設Textview屬性,增加padding,在AbstractWheelTextAdapter.java修改代碼如下

/**
	 * Configures text view. Is called for the TEXT_VIEW_ITEM_RESOURCE views.
	 * 
	 * @param view
	 *            the text view to be configured
	 */
	protected void configureTextView(TextView view) {
		view.setTextColor(textColor);
		view.setGravity(Gravity.CENTER);
		view.setTextSize(textSize);
		view.setEllipsize(TextUtils.TruncateAt.END);
		view.setLines(1);
		// by wkw1125 設定padding以撐高ItemHeight
		view.setPadding(0, 20, 0, 20);
		// 字型設定
		// view.setCompoundDrawablePadding(20);
		// view.setTypeface(Typeface.SANS_SERIF);
	}
           

7、可見項數量和整個wheel控件高度實際上是動态計算得到的:

若在主布局檔案中指定wheel的高度,如250dp,将根據滾動項的高度(如50)計算得到可見數量=250/50=5;此時設定setVisibleItems無效。

若在主布局檔案中指定wheel高度為wrap_content,此時根據setVisibleItems的值來顯示可見屬性,預設為5.(此時wheel的高度由可見數量*項高度決定。)

自定義布局,與增加預設項高度的效果如下:

開源控件滾動選擇器WheelView學習筆記 &amp; 省市區關聯選擇器

最後,整合了wheel源碼以及的demo,以及修改陰影大小後的省市區三級關聯選擇器代碼, 以待後用。

android開源滾動選擇器wheel&demo&省市區位址選擇器

感謝原作者!

/**
	 * Configures text view. Is called for the TEXT_VIEW_ITEM_RESOURCE views.
	 * 
	 * @param view
	 *            the text view to be configured
	 */
	protected void configureTextView(TextView view) {
		view.setTextColor(textColor);
		view.setGravity(Gravity.CENTER);
		view.setTextSize(textSize);
		view.setEllipsize(TextUtils.TruncateAt.END);
		view.setLines(1);
		// by wkw1125 設定padding以撐高ItemHeight
		view.setPadding(0, 20, 0, 20);
		// 字型設定
		// view.setCompoundDrawablePadding(20);
		// view.setTypeface(Typeface.SANS_SERIF);
	}