1. 程式人生 > >Android中自定義滑動選中控制元件WheelView

Android中自定義滑動選中控制元件WheelView

WheelView

a great functional custom WheelView with demo in dialog and bottomDialog,android 滾動選擇控制元件,滾動選擇器

=========

How to use

layout:

    <wheelview.WheelView
        android:id="@+id/wheel_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
android:layout_marginLeft="50dp" android:layout_marginRight="50dp" app:textColorCenter="@android:color/holo_blue_dark" app:lineSpaceingDimens="15dp" app:itemVisibleNum="3" app:lineColor="@android:color/holo_blue_dark" app:textSizeCenter="20dp" app
:textSizeOuter="16dp" app:isLoop="false" app:textColorOuter="@android:color/darker_gray" />

Attributes

There are several attributes you can set:

attr 屬性 description 描述
lineColor divider line color 分割線顏色
itemVisibleNum wheelview show item count 此wheelView顯示item的個數
textColorOuter unSelected Text color 未選中文字顏色
textSizeOuter unSelected Text size 未選中文字字型大小
textColorCenter selected Text color 選中文字顏色
textSizeCenter selected Text size 選中文字字型大小
isLoop isLoop or no 滾輪是否首尾相連
lineSpaceingDimens item unit margin height 每個item單元格中文字距離上下的高度
wheelGravity align direction:left;center;right 對齊方向:靠左對齊 居中 靠右對齊

Method

1. setItems(List items, int initPosition)

set WheelView items and init selected position
設定WheelView的資料和初始位置

2. setOnItemSelectedListener(OnItemSelectedListener OnItemSelectedListener)

set listener on WheelView that can get info when WheelView changed selected item.
對WheelView設定監聽器,當WheelView 選中項改變時返回選中項的索引和值。

Activity:

WheelView wva = (WheelView) findViewById(R.id.wheel_view);
wva.setItems(Arrays.asList(PLANETS),1);//init selected position is 1 初始選中位置為1
wva.setOnItemSelectedListener(new WheelView.OnItemSelectedListener() {
	@Override
	public void onItemSelected(int selectedIndex, String item) {
		Log.d(TAG, "selectedIndex: " + selectedIndex + ", item: " + item);
	}
});

Show in dialog:

View outerView = LayoutInflater.from(this).inflate(R.layout.dialog_content_view, null);
final WheelView wv = (WheelView) outerView.findViewById(R.id.wheel_view_wv);
wv.setItems(getNumbers(),0);//init selected position is 0 初始選中位置為0
wv.setOnItemSelectedListener(new WheelView.OnItemSelectedListener() {
	@Override
	public void onItemSelected(int selectedIndex, String item) {
		Log.d(TAG, "[Dialog]selectedIndex: " + selectedIndex + ", item: " + item);
	}
});

new AlertDialog.Builder(this)
		.setTitle("WheelView in Dialog")
		.setView(outerView)
		.setPositiveButton("OK", new DialogInterface.OnClickListener() {
			@Override
			public void onClick(DialogInterface dialog, int which) {
				Toast.makeText(MainActivity.this,
						"selectedIndex: "+ wv.getSelectedPosition() +"  selectedItem: "+ wv.getSelectedItem(),
						Toast.LENGTH_SHORT).show();
			}
		})
		.show();

Show in a bottomDialog:

View outerView1 = LayoutInflater.from(this).inflate(R.layout.dialog_select_date_time, null);
//日期滾輪
final WheelView wv1 = (WheelView) outerView1.findViewById(R.id.wv1);
//小時滾輪
final WheelView wv2 = (WheelView) outerView1.findViewById(R.id.wv2);
//分鐘滾輪
final WheelView wv3 = (WheelView) outerView1.findViewById(R.id.wv3);

final TimeRange timeRange = getTimeRange();
wv1.setItems(Common.buildDays(timeRange),0);
wv2.setItems(Common.buildHourListStart(timeRange),0);
wv3.setItems(Common.buildMinuteListStart(timeRange),0);

//聯動邏輯效果
wv1.setOnItemSelectedListener(new WheelView.OnItemSelectedListener() {
	@Override
	public void onItemSelected(int index,String item) {
		List hourStrList = Common.buildHoursByDay(wv1, timeRange);
		int newIndexHour = hourStrList.indexOf(wv2.getSelectedItem());
		wv2.setItems(hourStrList,newIndexHour);
		List minStrList = Common.buildMinutesByDayHour(wv1, wv2, timeRange);
		int newIndexMin = minStrList.indexOf(wv3.getSelectedItem());
		wv3.setItems(minStrList,newIndexMin);
	}
});
wv2.setOnItemSelectedListener(new WheelView.OnItemSelectedListener() {
	@Override
	public void onItemSelected(int index,String item) {
		List minStrList = Common.buildMinutesByDayHour(wv1, wv2, timeRange);
		int newIndexMin = minStrList.indexOf(wv3.getSelectedItem());
		wv3.setItems(minStrList,newIndexMin);
	}
});

TextView tv_ok = (TextView) outerView1.findViewById(R.id.tv_ok);
TextView tv_cancel = (TextView) outerView1.findViewById(R.id.tv_cancel);
//點選確定
tv_ok.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View arg0) {
		bottomDialog.dismiss();
		String selectDateTimeStrToShow;
		String mSelectDate = wv1.getSelectedItem();
		String mSelectHour = wv2.getSelectedItem();
		String mSelectMin = wv3.getSelectedItem();
		String time = mSelectHour + mSelectMin;
		time = Common.timeToStr(Common.dateTimeFromCustomStr( mSelectDate, time));
		selectDateTimeStrToShow = mSelectDate + "  " + time;
		Toast.makeText(MainActivity.this, "selectDateTime: "+selectDateTimeStrToShow, Toast.LENGTH_SHORT).show();
	}
});
//點選取消
tv_cancel.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View arg0) {
		bottomDialog.dismiss();
	}
});
//防止彈出兩個視窗
if (bottomDialog !=null && bottomDialog.isShowing()) {
	return;
}

bottomDialog = new BottomDialog(this, R.style.ActionSheetDialogStyle);
//將佈局設定給Dialog
bottomDialog.setContentView(outerView1);
bottomDialog.show();//顯示對話方塊
我修改後的原始碼: