1. 程式人生 > >Android TimePicker和DatePicker並列顯示調整大小

Android TimePicker和DatePicker並列顯示調整大小

原文連結:http://www.cnblogs.com/ljxxz/p/3925040.html


最近寫了個app,裡面要將DatePicker和TimePicker並列顯示。但是,Android內部把DatePicker和 TimePicker大小固定了,導致4.5寸手機螢幕一行只能顯示出一個,另一個不能完全顯示。在網上搜了一下,沒有什麼好的解決方案,看到了別人寫的 一個自定義控制元件,研究了下,發現了一個方法來調整兩個元件的大小。

沒有調整之前效果如圖:可以看到TimePicker只有很小一部分顯示出來了

由於TimePicker和DatePicker裡面的每一個選擇框都是一個NumberPicker,而NumberPicker是可以改變LayoutParams的,所以可以有如下調整思路:

1.改變DatePicker和TimePicker裡面字型的大小,目的是讓DatePicker和TimePicker縮小了以後字能夠完全顯示出來。

2.得到DatePicker和TimePicker裡面的NumberPicker

3.改變取得的NumberPicker的寬度,就大功告成了

 

1.改變字型大小

     改變字型大小有幾種方法,為了統一,我是用的主題資源來改變字型大小的,程式碼如下:

 

    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
        <item name="android:textSize">10sp</item>
    </style>

 

2.得到DatePicker和TimePicker裡面的NumberPicker

    由於DatePicker和TimePicker都繼承了FrameLayout類,所以函式可以定義為:

   

                /**
		 * 調整FrameLayout大小
		 * @param tp
		 */
		private void resizePikcer(FrameLayout tp){
			List<NumberPicker> npList = findNumberPicker(tp);
			for(NumberPicker np:npList){
				resizeNumberPicker(np);
			}
		}



這個函式很簡單,引數是FrameLayout,呼叫時傳入其子類即可。該函式呼叫了我自定義的findNumberPicker函式找到tp裡面所有的NumberPicker,然後用自定義的resizeNumberPicker調整大小。

 

  其中:findNumberPicker定義如下:

		/**
		 * 得到viewGroup裡面的numberpicker元件
		 * @param viewGroup
		 * @return
		 */
		private List<NumberPicker> findNumberPicker(ViewGroup viewGroup){
			List<NumberPicker> npList = new ArrayList<NumberPicker>();
			View child = null;
			if(null != viewGroup){
				for(int i = 0;i<viewGroup.getChildCount();i++){
					child = viewGroup.getChildAt(i);
					if(child instanceof NumberPicker){
						npList.add((NumberPicker)child);
					}
					else if(child instanceof LinearLayout){
						List<NumberPicker> result = findNumberPicker((ViewGroup)child);
						if(result.size()>0){
							return result;
						}
					}
				}
			}
			return npList;
		}



這個函式是遍歷viewGroup的子元素,如果是NumberPicker則加入集合中。如果是一個LinearLayout佈局,遞迴呼叫該函式,找佈局裡面的NumberPicker.

 

resizeNumberPicker定義如下:

		/*
		 * 調整numberpicker大小
		 */
		private void resizeNumberPicker(NumberPicker np){
			LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(50, LayoutParams.WRAP_CONTENT);
			params.setMargins(10, 0, 10, 0);
			np.setLayoutParams(params);
		}



該函式完成調整功能,也很簡單,new一個佈局引數,然後設定寬度為50,高度為wrap_content,再通過setMargins設定邊距,把NumberPicker的佈局引數設定為該值。

 

準備完這些後,就可以呼叫了,呼叫也很簡單,就是得到DatePicker和TimePicker物件,然後用resizePicker(DatePicker)和resizePicker(TimePicker)即可。

下面貼出我的呼叫程式碼:

			DatePicker datePicker = (DatePicker)rootView.findViewById(R.id.date);//日期選擇框
			TimePicker timePicker = (TimePicker)rootView.findViewById(R.id.time);//時間選擇框
			resizePikcer(datePicker);//調整datepicker大小
			resizePikcer(timePicker);//調整timepicker大小


功告成,所有步驟完成後,DatePicker和TimePicker就可以並列顯示了,我的顯示結果如下圖: