Android – Picker


Được đăng vào ngày 22/05/2016 | 0 bình luận
Đánh giá bài viết

Trong phần này chúng ta sẽ tìm hiểu về Picker. Picker là lớp View cho phép chúng ta chọn một giá trị nào đó trong một tập các giá trị cho trước, có 2 loại giá trị là số và giờ/ngày tháng.

NumberPicker

NumberPicker cho phép chúng ta chọn một giá trị số trong một tập giá trị cho trước.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" android:layout_width="fill_parent" 
    android:layout_height="fill_parent">
    
    <NumberPicker android:id="@+id/npId" 
        android:layout_marginTop="5dp" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" />

    <TextView android:id="@+id/tvId" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_marginTop="5dp" 
        android:layout_marginLeft="5dp" 
        android:text="0" android:textSize="30sp" />              
</LinearLayout>

Trong file layout chúng ta khai báo thẻ NumberPicker và thẻ TextView, TextView sẽ hiển thị giá trị đang được chọn trong NumberPicker. 

package com.phocode;

import android.app.Activity;
import android.os.Bundle;
import android.widget.NumberPicker;
import android.widget.TextView;
import android.widget.NumberPicker.OnValueChangeListener;

public class MainActivity extends Activity
{
    private TextView tv;

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        tv = (TextView) findViewById(R.id.tvId);

        NumberPicker np = (NumberPicker) findViewById(R.id.npId);

        np.setOnValueChangedListener(new OnValueChangeListener()
        {
            public void onValueChange(NumberPicker picker, int oldVal, 
                int newVal)
            {
                tv.setText(String.valueOf(newVal)); 
            }        
        });

        np.setMaxValue(100);
        np.setMinValue(0);
    }
}

NumberPicker hiển thị giá trị và 2 nút cộng trừ để tăng giảm giá trị.

np.setOnValueChangedListener(new OnValueChangeListener()
{
    public void onValueChange(NumberPicker picker, int oldVal, 
        int newVal)
    {
        tv.setText(String.valueOf(newVal)); 
    }        
});

Khi chúng ta click vào 2 nút cộng trừ thì NumberPicker sẽ giải phóng sự kiện, chúng ta bắt sự kiện này bằng lớp OnValueChangeListener. Ở đoạn code trên chúng ta gắn một đối tượng listener vào picker và sử dụng phương thức onValueChange(), phương thức này sẽ được gọi khi chúng ta click vào 2 nút cộng trừ, tham số của phương thức này là đối tượng picker đã giải phóng sự kiện, giá trị mới sau khi click nút cộng/trừ và giá trị cũ trước khi click nút cộng/trừ.

np.setMaxValue(100);
np.setMinValue(0);

Hai dòng code trên thiết lập khoảng giá trị cho NumberPicker là từ 0 đến 100.

Screenshot_2016-05-22-15-18-08

TimePicker

TimePicker thì hiển thị giá trị giờ, TimePicker có 2 chế độ hiển thị là hiển thị theo dạng 24h hoặc dùng kí hiệu AM/PM. Ngoài ra còn có lớp DatePicker là chọn ngày tháng.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:orientation="vertical" 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" >
    
    <TimePicker android:id="@+id/tpId" 
        android:layout_marginTop="5dp" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" />

    <TextView android:id="@+id/tvId" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_marginTop="5dp" 
        android:layout_marginLeft="5dp" 
        android:textSize="30sp" />  
        
</LinearLayout>

Trong file main.xml chúng ta thiết kế một TimePicker và một TextView để hiển thị giá trị của TimePicker đó.

package com.phocode;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TimePicker;
import android.widget.TextView;
import android.widget.TimePicker.OnTimeChangedListener;

public class MainActivity extends Activity
{
    private TextView tv;
    
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        tv = (TextView) findViewById(R.id.tvId);
 
        TimePicker tp = (TimePicker) findViewById(R.id.tpId);
 
        int h = tp.getCurrentHour();
        int m = tp.getCurrentMinute();
 
        StringBuilder tm = new StringBuilder();
        tm.append(h + " h " + m + " m");
        tv.setText(tm);
 
        tp.setOnTimeChangedListener(new OnTimeChangedListener()
        {
            public void onTimeChanged(TimePicker view, int hour, int minute)
            {
                StringBuilder tm = new StringBuilder();
                tm.append(hour + " h " + minute + " m "); 
                tv.setText(tm);
            }
        });      
    }
}

Lớp TimePicker lắng nghe sự kiện bằng lớp OnTimeChangedListener với phương thức onTimeChanged().

tp.setOnTimeChangedListener(new OnTimeChangedListener()
{
    public void onTimeChanged(TimePicker view, int hour, 
        int minute)
    {
        StringBuilder tm = new StringBuilder();
        tm.append(hour + " h " + minute + " m "); 
        tv.setText(tm);
    }        
});

Bên trong phương thức onTimeChanged() chúng ta tạo một chuỗi từ giá trị giờ và phút được gửi tới, sau đó gán làm text cho TextView.

TimePicker tp = (TimePicker) findViewById(R.id.tpId);
 
int h = tp.getCurrentHour();
int m = tp.getCurrentMinute();

StringBuilder tm = new StringBuilder();
tm.append(h + " h " + m + " m");
tv.setText(tm);

Ngoài ra trước đó chúng ta cũng dùng chính lớp TimePicker này để lấy giờ hiện tại của hệ điều hành và gán vào TextView trước.

Screenshot_2016-05-22-15-38-19







Trả lời


Lưu ý: bọc code trong cặp thẻ [code language="x"][/code] để highlight code.


Ví dụ:


[code language="cpp"]


    std::cout << "Hello world";


[/code]



Các ngôn ngữ được hỗ trợ gồm: actionscript3, bash, clojure, coldfusion, cpp, csharp, css, delphi, diff, erlang, fsharp, go, groovy, html, java, javafx, javascript, latex, matlab, objc, perl, php, powershell, python, r, ruby, scala, sql, text, vb, xml.

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *