1. 程式人生 > >第三方開源庫:日期時間選擇器(TimePickerDialog)+ 省市區三級聯動(CityPicker) + 一級滾動

第三方開源庫:日期時間選擇器(TimePickerDialog)+ 省市區三級聯動(CityPicker) + 一級滾動

TimePickerDialog

Android時間選擇器,支援年月日時分,年月日,年月,月日時分,時分格式,可以設定最小時間和最大時間(精確到分)。

效果圖

這裡寫圖片描述

gradle

compile 'com.jzxiang.pickerview:TimePickerDialog:1.0.1'

使用預設的引數(程式碼量少)

switch (view.getId()) {
    case R.id.btn1:
        //可自定義引數
        initAll();
        break;
    case R.id.btn2:
        dialogAll = new TimePickerDialog.Builder
() .setType(Type.ALL) .setCallBack(this) .build(); dialogAll.show(getSupportFragmentManager(), "All"); break; case R.id.btn3: TimePickerDialog dialogYear = new TimePickerDialog.Builder() .setType(Type.YEAR) .setCallBack
(this) .build(); dialogYear.show(getSupportFragmentManager(), "YEAR"); break; case R.id.btn4: TimePickerDialog dialogYearMonth = new TimePickerDialog.Builder() .setType(Type.YEAR_MONTH) .setCallBack(this) .build
(); dialogYearMonth.show(getSupportFragmentManager(), "YEAR_MONTH"); break; case R.id.btn5: TimePickerDialog dialogYearMonthDay = new TimePickerDialog.Builder() .setType(Type.YEAR_MONTH_DAY) .setCallBack(this) .build(); dialogYearMonthDay.show(getSupportFragmentManager(), "YEAR_MONTH_DAY"); break; case R.id.btn6: TimePickerDialog dialogHourMins = new TimePickerDialog.Builder() .setType(Type.HOURS_MINS) .setCallBack(this) .build(); dialogHourMins.show(getSupportFragmentManager(), "HOURS_MINS"); break; case R.id.btn7: TimePickerDialog dialogMonthDayHourMin = new TimePickerDialog.Builder() .setType(Type.MONTH_DAY_HOUR_MIN) .setCallBack(this) .build(); dialogMonthDayHourMin.show(getSupportFragmentManager(), "MONTH_DAY_HOUR_MIN"); break; }

自定義引數

long tenYears = 10L * 365 * 1000 * 60 * 60 * 24L;
TimePickerDialog mDialogAll = new TimePickerDialog.Builder()
        .setCallBack(this)//回撥
        .setCancelStringId("Cancel")//取消按鈕
        .setSureStringId("Sure")//確定按鈕
        .setTitleStringId("TimePicker")//標題
        .setYearText("Year")//Year
        .setMonthText("Month")//Month
        .setDayText("Day")//Day
        .setHourText("Hour")//Hour
        .setMinuteText("Minute")//Minute
        .setCyclic(false)//是否可迴圈
        .setMinMillseconds(System.currentTimeMillis())//最小日期和時間
        .setMaxMillseconds(System.currentTimeMillis() + tenYears)//最大日期和時間
        .setCurrentMillseconds(System.currentTimeMillis())
        .setThemeColor(getResources().getColor(R.color.timepicker_dialog_bg))
        .setType(Type.ALL)//型別
        .setWheelItemTextNormalColor(getResources().getColor(R.color.timetimepicker_default_text_color))//未選中的文字顏色
        .setWheelItemTextSelectorColor(getResources().getColor(R.color.timepicker_toolbar_bg))//當前文字顏色
        .setWheelItemTextSize(12)//字型大小
        .build();

mDialogAll.show(getSupportFragmentManager(), "ALL");

去掉“取消”按鈕

setCancelStringId(null)
setCancelStringId("")

同理去掉確定按鈕

setSureStringId("")
setSureStringId(null)

回撥

因為在回撥用的是this(setCallBack(this)),所以類必須實現介面OnDateSetListener,並重寫方法:onDateSet().

@Override
public void onDateSet(TimePickerDialog timePickerView, long millseconds) {
    Date date = new Date(millseconds);
    SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm");//精確到分鐘
    String time = format.format(date);
    tv.setText("時間:" + time);
}

原始碼:

CityPicker

效果圖

這裡寫圖片描述
這裡寫圖片描述 這裡寫圖片描述

gradle

dependencies {
    ...
    compile 'liji.library.dev:citypickerview:0.7.0'
    ...
}

程式碼示例

最好全部程式碼都放在點選事件中,以下例外:
如果該頁面只有一個聯動,可以只把cityPicker.show();放在點選事件中即可。
多個聯動的型別一致(都是三級聯動或兩級聯動),也可以只把cityPicker.show();放在點選事件中即可。
三級聯動

cityPicker = new CityPicker.Builder(MainActivity.this).textSize(16) //滾輪文字的大小
        .title("城市選擇") //標題,設定名稱
        .titleBackgroundColor("#234Dfa") //標題背景
        .confirTextColor("#000000")
        .cancelTextColor("#000000")
        .province("山東省")
        .city("煙臺市")
        .district("萊山區")
        .textColor(Color.parseColor("#000000"))
        .provinceCyclic(true)
        .cityCyclic(false)
        .districtCyclic(false)
        .visibleItemsCount(7)
        .itemPadding(10)
        .build();
cityPicker.show();
cityPicker.setOnCityItemClickListener(new CityPicker.OnCityItemClickListener() {
    @Override
    public void onSelected(String... citySelected) {
        province = citySelected[0];
        city = citySelected[1];
        district = citySelected[2];
        code = citySelected[3];
        tv.setText(province + "\n" + city + "\n" + district + "\n郵編:" + code);
    }
});

兩級聯動

cityPicker = new CityPicker.Builder(MainActivity.this).textSize(16) 
        .title("城市選擇")
        .titleBackgroundColor("#234Dfa")
        .confirTextColor("#000000")
        .cancelTextColor("#000000")
        .onlyShowProvinceAndCity(true)//兩級聯動:省+市
        .province("山東省")
        .city("煙臺市")
        .textColor(Color.parseColor("#000000"))
        .provinceCyclic(false)
        .cityCyclic(false)
        .districtCyclic(false)
        .visibleItemsCount(7)
        .itemPadding(10)
        .build();
cityPicker.show();
cityPicker.setOnCityItemClickListener(new CityPicker.OnCityItemClickListener() {
    @Override
    public void onSelected(String... citySelected) {
        province = citySelected[0];
        city = citySelected[1];
        code = citySelected[3];
        tv.setText(province + "\n" + city + "\n" + district + "\n郵編:" + code);
    }
});

原始碼

其他

WheelView

WheelView:一級滾動

效果圖

這裡寫圖片描述

方法

方法 說明
setOffset(int offset) 上下兩邊各顯示多少個
setItems(List list) 新增資料
setSeletion(int position) 預設顯示第幾個
setOnWheelViewListener(WheelView.OnWheelViewListener onWheelViewListener) 新增滾動監聽

使用
複製類WheelView.java到專案,在xml中作為view使用。

Activity中使用

wheelView.setOffset(3);//上面3個,下面3個,這個在setItems(...)前,否則個別手機出錯
String[] array = getResources().getStringArray(R.array.province);
wheelView.setItems(Arrays.asList(array));

wheelView.setSeletion(15);//預設顯示第16個
//作者重寫了方法setBackgroundDrawable(...),所以這裡設定無效
//wheelView.setBackgroundDrawable(getResources().getDrawable(R.drawable.shape));
//wheelView.setBackgroundResource(R.drawable.shape);

wheelView.setOnWheelViewListener(new WheelView.OnWheelViewListener() {
    @Override
    public void onSelected(int selectedIndex, String item) {
        super.onSelected(selectedIndex, item);
        Log.d(TAG, "selectedIndex=" + selectedIndex + "----item" + item);
    }
});

Dialog中使用

 View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.dialog, null);
WheelView wheelView = (WheelView) view.findViewById(R.id.wheelView_dialog);
wheelView.setOffset(3);
wheelView.setSeletion(15);
String[] array = getResources().getStringArray(R.array.province);
wheelView.setItems(Arrays.asList(array));
wheelView.setOnWheelViewListener(new WheelView.OnWheelViewListener() {
    @Override
    public void onSelected(int selectedIndex, String item) {
        super.onSelected(selectedIndex, item);
        Log.d(TAG, "dialog--selectedIndex=" + selectedIndex + "----item" + item);
    }
});

new AlertDialog.Builder(MainActivity.this)
        .setTitle("請選擇省份簡稱")
        .setView(view)
        .setPositiveButton("OK", null)
        .create()
        .show();

怎麼調節TextView的內邊距?

這裡寫圖片描述

怎麼讓選中區域的分割線寬鋪滿螢幕?

這裡寫圖片描述

AndroidWheelView:LoopView

效果圖

這裡寫圖片描述

屬性

屬性 程式碼設定 說明
awv_textsize setTextSize(20) 字型大小
awv_lineSpace setLineSpacingMultiplier(2.0f) 當前View的內邊距
awv_centerTextColor setCenterTextColor(R.color.color1)無效 當前text顏色
awv_outerTextColor setOuterTextColor(R.color.color3)無效 其他text顏色
awv_dividerTextColor setDividerColor(R.color.color2)無效 line的顏色
awv_itemsVisibleCount setItemsVisibleCount(7) 可見item數量
awv_isLoop setNotLoop() 是否開啟迴圈
setCurrentPosition(11) 當前是第幾個
setInitPosition(5) 當前是第幾個

新增依賴

dependencies {
    ...
    compile 'com.weigan:loopView:0.1.1'
}

xml

簡單使用就只需要配置寬高即可

<com.weigan.loopview.LoopView
    android:id="@+id/loopView"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    app:awv_centerTextColor="@color/color1"
    app:awv_dividerTextColor="@color/color2"
    app:awv_isLoop="false"
    app:awv_itemsVisibleCount="9"
    app:awv_lineSpace="3"
    app:awv_outerTextColor="@color/color3"
    app:awv_textsize="20"/>

程式碼設定

loopView.setItems(list);
loopView.setListener(new OnItemSelectedListener() {
    @Override
    public void onItemSelected(int index) {
        Log.d(TAG, "index=" + index);
    }
});

其他設定

loopView.setTextSize(50);
loopView.setCenterTextColor(R.color.color1);
loopView.setCurrentPosition(11);
//      loopView.setInitPosition(5);//同setCurrentPosition
loopView.setDividerColor(R.color.color2);
loopView.setOuterTextColor(R.color.color3);
loopView.setItemsVisibleCount(7);
loopView.setNotLoop();
loopView.setLineSpacingMultiplier(2.0f);

原始碼

venshine/WheelView

README.md

Gradle:

compile 'com.wx.wheelview:wheelview:1.3.3'

匯入Eclipse:

Demo

Use the WheelView as a View, Java and XML are both supported.

Java:

    public class MainActivity extends Activity {
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main)

            WheelView wheelView = (WheelView) findViewById(R.id.wheelview);
            wheelView.setWheelAdapter(new ArrayWheelAdapter(this)); // 文字資料來源
            wheelView.setSkin(WheelView.Skin.Common); // common面板
            wheelView.setWheelData( ?);  // 資料集合

        }
    }

XML:

    <com.wx.wheelview.widget.WheelView
            android:id="@+id/wheelview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

Methods:

method 方法 description 描述
void setWheelAdapter(BaseWheelAdapter adapter) 設定滾輪資料來源介面卡(required)
void setWheelData(List list) 設定滾輪資料(required)
void setLoop(boolean loop) 設定滾輪是否迴圈滾動
void setWheelSize(int wheelSize) 設定滾輪個數
void setSkin(Skin skin) 設定面板風格
Skin getSkin() 獲得面板風格
void setStyle(WheelViewStyle style) 設定滾輪樣式
WheelViewStyle getStyle() 獲得滾輪樣式
void setWheelClickable(boolean clickable) 設定滾輪選中項是否可點選
void setSelection(final int selection) 設定滾輪位置
int getSelection() 獲取滾輪位置
void join(WheelView wheelView) 連線副WheelView(聯動設定)
void joinDatas(HashMap
wheelView = (WheelView) findViewById(R.id.wheelView);
wheelView.setWheelAdapter(new ArrayWheelAdapter(this));
wheelView.setSkin(WheelView.Skin.Holo);
wheelView.setWheelData(Arrays.asList(provinces));
wheelView.setLoop(false);//預設false
WheelView.WheelViewStyle style = new WheelView.WheelViewStyle();
style.selectedTextColor = Color.RED;
style.selectedTextSize = 15;
style.selectedTextZoom = 20;
style.textSize = 12;
style.textColor = Color.BLACK;
style.textAlpha = 0.5f;
wheelView.setStyle(style);
wheelView.setWheelSize(5);

String province = (String) wheelView.getSelectionItem();

或者放到dialog中

WheelView wheelView = new WheelView<String>(this);
new AlertDialog.Builder(this)
        .setTitle("請選擇省份")
        .setView(wheelView)
        .setPositiveButton("確定",null)
        .create()
        .show();

gzu-liyujiang/AndroidPicker