Android調整TimePicker和DatePicker大小

最近寫了個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就可以並列顯示了，我的顯示結果如下圖：