Preface:

Hello, everyone. I haven’t updated my article for a while. I can’t remember exactly how long it has been. Today I’m going to share with you a date Picker that works with the CommonDialog implementation

rendering

The specific implementation

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; /*** * Founder: xuqing * Created: March 19, 2021 15:18:33 * Selector at the bottom of the popup window * * / 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", "on 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 i, int i1) { System.out.println("i -- > "+i+" i1 --- > "+ i1); System.out.println(getStr[i1]); }}); Picker. SetValueChangedListener ((picker1 oldVal, newVal) - > {/ / oldVal: the last time the choice of value; 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(); listener.getPickerStrSuccess(getdata); break; case ResourceTable.Id_cancel_btn: PickerDialog.this.hide(); listener.getPickerStrerror(); break; default: break; }}}Copy the code

PickerDialog inherits the SDK’s CommonDialog and rewrites the onCreate method and its constructor and then we load the PickerDialog layout file

<? The 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=" determine "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>Copy the code

So here we’ve got 2 buttons and a picker selector component and we’re going to populate our layout file in our PickerDialog and initialize our control

  • Loading layout
    @Override
    protected void onCreate() {
        super.onCreate();
        layout = LayoutScatter.getInstance(context).
                parse(ResourceTable.Layout_common_dialog, null, true);
      setTransparent(true);
       setContentCustomComponent(layout);
       initview();
    }
Copy the code
  • Initialize the controller
  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);
Copy the code
  • Selector adds data
Private String [] getStr = {" Monday ", "Tuesday", "on Wednesday", "Thursday", "Friday", "Saturday", "Sunday"}; picker.setDisplayedData(getStr);Copy the code
  • Response selector changes
Picker. SetValueChangedListener ((picker1 oldVal, newVal) - > {/ / oldVal: the last time the choice of value; Println ("oldVal "+oldVal +"newVal -- > "+newVal); System.out.println("getstr --- > "+getStr[newVal]); getdata=getStr[newVal]; });Copy the code
  • Formatting the Picker’s display Through the Picker’s setFormatter Formatter method, the user can modify the string displayed in the Picker option to a specific format.
  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;
        });
Copy the code

Shown in MainAbility

package com.example.picker; import com.example.picker.dialog.PickerDialog; import com.example.picker.listener.PickerdialogListener; import com.example.picker.slice.MainAbilitySlice; import ohos.aafwk.ability.Ability; import ohos.aafwk.content.Intent; import ohos.agp.components.Button; import ohos.agp.components.Component; import ohos.agp.components.TableLayout; import ohos.agp.components.Text; import static ohos.agp.utils.LayoutAlignment.BOTTOM; public class MainAbility extends Ability { private Button button; private Text text; @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); initview(); } private void initview() { button= (Button) findComponentById(ResourceTable.Id_mainbtn); text= (Text) findComponentById(ResourceTable.Id_miantext); if(button! =null){ button.setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) {  PickerDialog dialog=new PickerDialog(MainAbility.this, new PickerdialogListener() { @Override public void getPickerStrSuccess(String str) { text.setText(str); } @Override public void getPickerStrerror() { } }); dialog.setAlignment(BOTTOM); dialog.show(); }}); }}}Copy the code

MainAbility layout file

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:orientation="vertical"> <Button ohos:id="$+id:mainbtn" ohos:height="match_content" Ohos :width="match_content" oHOs :layout_alignment="center" oHOs :text=" Click to open popup "oHOs :text_size="15fp" ohos:top_margin="20vp" ohos:background_element="$graphic:background_ability_main" > </Button> <Text ohos:id="$+id:miantext" ohos:height="match_content" ohos:width="match_content" ohos:layout_alignment="center" Ohos :text_size="15fp" > </ text > </DirectionalLayout>Copy the code

To this hongmeng Picker date Picker implementation tutorial is finished.

The final summary

The picker selector control is provided in Hongmun so we can easily implement a simple date selector at the bottom with the CommonDialog popover control provided by the SDK. It’s a little bit closer to native Android but it’s a little bit more advanced than Android so it’s not too difficult to implement and if you’re interested you can try to do a lot more complicated things and I won’t go into that. Finally, I hope my article can help you solve the problem, and I will contribute more useful code to share with you in the future. If you think the article is good, please pay attention and star. Thank you!

The project address

Yards cloud: gitee.com/qiuyu123/pi…