​

Introduction: Hello, everyone, I am your friend Pengge, the development of Hongmeng more recently have a lot of discovery, Hongmeng not only in the system level to do a lot of user experience optimization, the application layer has also done a lot of optimization, for developers, Hongmeng has done a lot of convenience to provide developers, the following one.

The last original article analyzed the functionality and usage of the Chexkbox check box. This function was also used in the zhihu login page developed by Hongmeng.

Everyone study as soon as possible, the later update will be relatively fast, now is to give a new learning event to dare.

Ok, let’s talk about today’s focus……

​

Let’s start today’s article, as usual, by saying the following:

1. Introduction 2. Properties used 3

Introduction to the

Switch is a Switch control that can Switch between two states. There are only two states: on/off.

It is usually used to switch on or off a certain function on the Settings screen of a mobile application.

Attributes used

The common XML attribute of Switch still inherits from: Text

Two of the attributes are important:

Text_state_on // Enables text to be displayed. Text_state_off // disables text to be displayed

In actual combat

Let’s try to create a basic switch. 1. Switch default effect

<Switch ohos:id="$+id:switch_opt" oHOs :height="match_content" oHOs :width="match_content" oHOs :text_state_off=" off" Ohos :text_state_on=" enable "oHOs :padding="5vp" oHOs :text_size="16fp" />Copy the code

1, Default effects added several properties, on and off text, font size

Check out the results:

​

2. Set the background style

ShapeElement elementThumbOn = new ShapeElement();
elementThumbOn.setShape(ShapeElement.OVAL);
elementThumbOn.setRgbColor(RgbColor.fromArgbInt(0xFF1E90FF));
elementThumbOn.setCornerRadius(50);
Copy the code

1. Set the background demo and rounded corners

3. Set the background state

// Slider style Settings private StateElement trackElementInit(ShapeElement on, ShapeElement off){ StateElement trackElement = new StateElement(); trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on); trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off); return trackElement; }Copy the code

1. Set the state, which is the switch between two background style Settings

Complete code:

<? 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:alignment="center" ohos:orientation="vertical"> <Switch ohos:id="$+id:switch_opt" Ohos :height="match_content" oHOs :width="match_content" oHOs: text_state_OFF =" off "oHOs :text_state_on=" on" ohos:padding="5vp" ohos:text_size="16fp" /> </DirectionalLayout>Copy the code

Code logic:

package com.example.aswitch.slice; import com.example.aswitch.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.colors.RgbColor; import ohos.agp.components.ComponentState; import ohos.agp.components.Switch; import ohos.agp.components.element.ShapeElement; import ohos.agp.components.element.StateElement; public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); ShapeElement elementThumbOn = new ShapeElement(); elementThumbOn.setShape(ShapeElement.OVAL); elementThumbOn.setRgbColor(RgbColor.fromArgbInt(0xFF1E90FF)); elementThumbOn.setCornerRadius(50); ShapeElement elementThumbOff = new ShapeElement(); elementThumbOff.setShape(ShapeElement.OVAL); elementThumbOff.setRgbColor(RgbColor.fromArgbInt(0xFFFFFFFF)); elementThumbOff.setCornerRadius(50); ShapeElement elementTrackOn = new ShapeElement(); elementTrackOn.setShape(ShapeElement.RECTANGLE); elementTrackOn.setRgbColor(RgbColor.fromArgbInt(0xFF87CEFA)); elementTrackOn.setCornerRadius(50); ShapeElement elementTrackOff = new ShapeElement(); elementTrackOff.setShape(ShapeElement.RECTANGLE); elementTrackOff.setRgbColor(RgbColor.fromArgbInt(0xFF808080)); elementTrackOff.setCornerRadius(50); Switch btnSwitch = (Switch) findComponentById(resourcetable.id_switch_opt); btnSwitch.setTrackElement(trackElementInit(elementTrackOn, elementTrackOff)); btnSwitch.setThumbElement(thumbElementInit(elementThumbOn, elementThumbOff)); } // Slider style Settings private StateElement trackElementInit(ShapeElement on, ShapeElement off){ StateElement trackElement = new StateElement(); trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on); trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off); return trackElement; } // Trace style Settings private StateElement thumbElementInit(ShapeElement on, ShapeElement off) { StateElement thumbElement = new StateElement(); thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on); thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off); return thumbElement; } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); }}Copy the code

​

Old rules code can not be less, otherwise small partners should say I stingy. Source: Switch: gitee.com/codegrowth/…

Pay attention to the public number [programmer chat programming], the background reply “Hongmeng”, you can get thousands of hongmeng open source components.

Original is not easy, useful attention. I’ll give you a triple if I help you. Thanks for your support.

Feel good friends, remember to help me like and attention yo, pen xin pen xin ~**

Author: code worker

Have a question please leave a message or private message, you can search wechat: programmer chat programming, pay attention to the public number to get more free learning materials.