1. 程式人生 > >調整TimePicker, DatePicker的大小,樣式

調整TimePicker, DatePicker的大小,樣式

原文地址:  http://www.ziliao1.com/Article/Show/1ADD173F9F715CF18F8A04A328CF204B.html

最近在做一個時間選擇器,想把要DatePicker和TimePicker放在一起使用,無賴他們的大小樣式是被Google寫死了,找不到相應的屬性來設定,自己花了點時間寫了一個使用的Demo,執行的效果如下。

  

  首先看佈局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".TimeActivity" >

    <NumberPicker
        android:id="@+id/date_picker"
        android:layout_width="100dip"
        android:layout_height="match_parent"
        android:layout_margin="10dip"
        />
    
      <TimePicker 
        android:id="@+id/time_picker"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="10dip"
        /> 
        
</LinearLayout>

  左邊使用了一個NumberPicker替換DatePicker的使用,只顯示月日星期

datePicker = (NumberPicker)findViewById(R.id.date_picker);
        datePicker.setMinValue(1);
        datePicker.setMaxValue(365);
        
        calendar = Calendar.getInstance();
        calendar.setLenient(true);
        Calendar tempCal = (Calendar) calendar.clone();
        long curTime = tempCal.getTimeInMillis();
        int curDay = calendar.get(Calendar.DAY_OF_YEAR);
        //此處簡單的使用365代表全年的天數
        String[] displayedValues = new String[365];
        for (int i = 0; i < 365; i++) 
        {
            tempCal = add(curTime, i - curDay + 1, Calendar.DAY_OF_MONTH);
            //格式化為月日星期
            displayedValues[i] = String.format("%tb %td %ta", tempCal, tempCal, tempCal);
        }
        datePicker.setDisplayedValues(displayedValues);
        datePicker.setValue(calendar.get(Calendar.DAY_OF_YEAR));

  右邊使用24小時制的TimePicker, 顯示小時和分鐘的NumberPicker的(TimePicker實際上就是由NumberPicker組成,而NumberPicker在android4.2包含一個EditText控制元件)

tp = (TimePicker)findViewById(R.id.time_picker);
        //設定成24小時,隱藏AM/PM picker
        tp.setIs24HourView(true);
        //修改TimePicker字型的大小
        setNumberPickerTextSize(tp);
        //修改TimePicker中NumberPicker的大小
        resizeTimerPicker(tp);

  修改字型大小的基本思路是:首先由TimePicker控制元件找到裡邊的NumberPicker控制元件,然後再找到裡邊的EditText控制元件,從而就可以自由設定它的大小,顏色。 從效果圖片可以看到,只能設定當前的字型,上一個/下一個還是原來的大小,此處還需要檢視原始碼找它的原因,如果有人知道也請告之,謝謝。

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;
    }
    
    private EditText findEditText(NumberPicker np)
    {
        if (null != np)
        {
            for (int i = 0; i < np.getChildCount(); i++)
            {
                View child = np.getChildAt(i);
                
                if (child instanceof EditText)
                {
                    return (EditText)child;
                }
            }
        }
        
        return null;
    }
    
    private void setNumberPickerTextSize(ViewGroup viewGroup)
    {
        List<NumberPicker> npList = findNumberPicker(viewGroup);
        if (null != npList)
        {
            for (NumberPicker np : npList)
            {
                EditText et = findEditText(np);
                et.setFocusable(false);
                et.setGravity(Gravity.CENTER);
                et.setTextSize(10);
                
            }
        }
    }

  修改TimpePicker的大小,實際上就是設定NumberPicker的大小,由於字型大小設定不完全,故這個地方也不能把NumberPicker設定得太小,只能稍微減小它的大小

private void resizeTimerPicker(TimePicker tp)
    {
        List<NumberPicker> npList = findNumberPicker(tp);
        
        for (NumberPicker np : npList)
        {
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(100, LayoutParams.WRAP_CONTENT);
            params.setMargins(10, 0, 10, 0);
            np.setLayoutParams(params);
        }
    }

  至此,顯示月日星期和時間的Picker就形成了,當然你也可以全部都用NumberPicker來完成,那樣會麻煩一點,由於時間花的還不夠深入,故還有一些欠缺,抱歉,如果看到的人有其他補充請你也告之我,謝謝。

最後補充一種修改Picker的字型顏色的方法

  首先在styles.xml 檔案裡邊加入Theme style,設定所有EditText的顏色(因為TimePicker和DatePicker 使用的基本控制元件都是EditText)

    <style name="Theme.picker" parent="android:Theme.Holo.Light">

        <item name="android:editTextStyle">@style/Widget.EditText.White</item>

    </style>

    <style name="Widget.EditText.White" parent="@android:style/Widget.EditText">

        <item name="android:textColor">@color/red</item>

    </style>

  然後在應用的 AndroidManifest.xml檔案中的Activity下邊增加屬性 android:theme="@style/Theme.picker",表示該Acitivity使用該theme. 這樣Picker就會顯示你設定好的顏色。

    <activity

            android:name="com.example.timewidget.TimeActivity"

            android:label="@string/app_name" 

            android:theme="@style/Theme.picker">

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>