Tutorial on the Implementation of Picker Date Picker

Picker Dialog Implementation Tutorial

Below is the code implementation for a picker dialog in Android:

package com.example.picker.dialog;

import com.example.picker.ResourceTable;
import com.example.picker.listener.PickerdialogListener;
import ohos.aafwk.ability.Ability;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.LayoutScatter;
import ohos.agp.components.Picker;
import ohos.agp.window.dialog.CommonDialog;
import ohos.app.Context;


public class PickerDialog extends CommonDialog implements Component.ClickedListener {
    private Ability context;
    private PickerdialogListener listener;
    private Picker picker;
    private Button cancelbtn, affirmbtn;
    private String getdata;
    private String[] getStr = {"Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"};
    Component layout;

    public PickerDialog(Ability context, PickerdialogListener listener) {
        super(context);
        this.context = context;
        this.listener = listener;
    }

    @Override
    protected void onCreate() {
        super.onCreate();
        layout = LayoutScatter.getInstance(context)
                .parse(ResourceTable.Layout_common_dialog, null, true);
        setTransparent(true);
        setContentCustomComponent(layout);
        initView();
    }

    private void initView() {
        picker = (Picker) layout.findComponentById(ResourceTable.Id_test_picker);
        cancelbtn = (Button) layout.findComponentById(ResourceTable.Id_cancel_btn);
        affirmbtn = (Button) layout.findComponentById(ResourceTable.Id_affirm_btn);
        cancelbtn.setClickedListener(this);
        affirmbtn.setClickedListener(this);
        picker.setDisplayedData(getStr);
        picker.setValueChangedListener(new Picker.ValueChangedListener() {
            @Override
            public void onValueChanged(Picker picker, int oldVal, int newVal) {
                System.out.println("oldVal  " + oldVal + " newVal   --- > " + newVal);
                System.out.println("getStr  ---  > " + getStr[newVal]);
                getdata = getStr[newVal];
            }
        });

        picker.setFormatter(i -> {
            String value;
            switch (i) {
                case 0:
                    value = "Mon";
                    break;
                case 1:
                    value = "Tue";
                    break;
                case 2:
                    value = "Wed";
                    break;
                case 3:
                    value = "Thu";
                    break;
                case 4:
                    value = "Fri";
                    break;
                case 5:
                    value = "Sat";
                    break;
                case 6:
                    value = "Sun";
                    break;
                default:
                    value = "" + i;
            }
            return value;
        });
    }


    @Override
    public void onClick(Component component) {
        switch (component.getId()) {
            case ResourceTable.Id_affirm_btn:
                PickerDialog.this.hide();
                if (listener != null) {
                    listener.getPickerStrSuccess(getdata);
                }
                break;
            case ResourceTable.Id_cancel_btn:
                PickerDialog.this.hide();
                if (listener != null) {
                    listener.getPickerStrError();
                }
                break;
            default:
                break;
        }
    }
}

The PickerDialog class inherits from the SDK's CommonDialog and overrides the onCreate method. It also provides its own constructor. The layout file for PickerDialog is loaded within the class.

Here's the layout file (common_dialog.xml):

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="300vp"
    ohos:width="match_parent"
    ohos:horizontal_center="true"
    ohos:vertical_center="true"
    ohos:orientation="vertical">

    <DirectionalLayout
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal">
        <Button
            ohos:id="$+id:cancel_btn"
            ohos:height="match_parent"
            ohos:width="0vp"
            ohos:weight="1"
            ohos:text="Cancel"
            ohos:text_size="20vp"
            ohos:text_color="#FF171818">
        </Button>
        <Button
            ohos:id="$+id:affirm_btn"
            ohos:height="match_parent"
            ohos:width="0vp"
            ohos:weight="1"
            ohos:text="Confirm"
            ohos:text_size="20vp"
            ohos:text_color="#FF171818">
        </Button>
    </DirectionalLayout>
    <Picker
        ohos:id="$+id:test_picker"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="#E1FFFF"
        ohos:vertical_center="true"
        ohos:horizontal_center="true"
        ohos:normal_text_size="16fp"
        ohos:selected_text_size="16fp"/>

</DirectionalLayout>

In the layout file, we have two buttons and a picker component. The buttons are used to confirm or cancel the selection, while the picker component displays the selectable data.

Here's how the PickerDialog class loads the layout and initializes the components:

@Override
protected void onCreate() {
    super.onCreate();
    layout = LayoutScatter.getInstance(context)
            .parse(ResourceTable.Layout_common_dialog, null, true);
    setTransparent(true);
    setContentCustomComponent(layout);
    initView();
}

private void initView() {
    picker = (Picker) layout.findComponentById(ResourceTable.Id_test_picker);
    cancelbtn = (Button) layout.findComponentById(ResourceTable.Id_cancel_btn);
    affirmbtn = (Button) layout.findComponentById(ResourceTable.Id_affirm_btn);
    cancelbtn.setClickedListener(this);
    affirmbtn.setClickedListener(this);
    picker.setDisplayedData(getStr);
    picker.setValueChangedListener((picker1, oldVal, newVal) -> {
        System.out.println("oldVal  " + oldVal + " newVal   --- > " + newVal);
        System.out.println("getStr  ---  > " + getStr[newVal]);
        getdata = getStr[newVal];
    });
}

The onCreate method loads the layout file and initializes the view components. The initView method initializes the picker and buttons, sets click listeners for the buttons, and provides data for the picker to display.