preface

After seeing the release conference of Hongmeng 2.0 system, do you want to develop the first hongmeng program? There are many articles on the Internet to introduce hongmeng system, the difference with Android and how to write HelloWorld articles, so I won’t copy and paste here.

Today change a pattern, look at how to achieve some common Android functions and effects, because hongmeng just came out soon, everything is not very mature (no predecessors of the magic), can only rely on their own hand X code, no more nonsense, look at the hongmeng system how to achieve the basic picture rounded corner function.

Now most of the art in the design of the style, will give the image with rounded corners, in the hongmeng development process, will encounter a secondary image processing, add rounded corners, or round image.

Android products: Add rounded corners to this image. It should take you less than 3 minutes, right? Meow, this is hongmeng, no Glide, how to play, give me 3 days first. Android product: GUN, you're kidding me. You think I'm a product on my first day? Rounding corners is so simple, still need 3 days, you did not spend 2 and a half dozen soy sauce to go? Development xiaomeng: pawn...Copy the code

At least xiao Meng is also a veteran of Android development for many years, how can easily throw in the towel, after a rummage, search hongmeng API document, finally achieved the following effect:The background of the interface is gray, and the background of the image layout is red. In the image layout, a square image is cut into a rounded rectangle. How does this effect work?

In our past Android development process, to achieve this effect, the conventional solution has the following three: 1, use Glide

2. Customize ImageView

3. Direct operation of picture drawing

Glide is not available for the time being (it may be a long time coming), and the Api for directly manipulating images is still relatively incomplete, so we chose a custom component, which is as follows:

First of all, you should be able to complete the Hello World program according to the official documentation (crap), if not, please solve yourself

1. Create a layout file main_abilityslice_layout. XML

<? The XML version = "1.0" encoding = "utf-8"? > <DependentLayout xmlns:ohos="http://schemas.huawei.com/res/harmonyos" ohos:width="match_parent" ohos:height="match_parent" ohos:background_element="#ffffff" ohos:gravity="center"> <DirectionalLayout ohos:id="$+id:image_directional_layout" ohos:width="100dp" ohos:height="100dp" ohos:background_element="#ff0000" ohos:orientation="vertical" /> </DependentLayout>Copy the code

2. Create a custom component called RoundRectView that inherits from the Image component

public class RoundRectView extends Image { private static final int radius = 20; // The radius of the rounded corner, if set to half the width of the image, the image becomes a circle. Private RectFloat rectDst; Private RectFloat rectSrc; Public RoundRectView(Context Context, Size viewSize) {//Size is the Size of the display area of this view. Super (Context); onDraw(); RectDst = new RectFloat (0, 0, viewSize. Width, viewSize, height); } public void putPixelMap(PixelMap pixelMap){ if (pixelMap ! = null) { rectSrc = new RectFloat(0, 0, pixelMap.getImageInfo().size.width, pixelMap.getImageInfo().size.height); pixelMapHolder = new PixelMapHolder(pixelMap); invalidate(); }else{pixelMapHolder = null; setPixelMap(null); }} private void onDraw(){this.addDrawTask((view, canvas) -> {if (pixelMapHolder == null){return; } synchronized (pixelMapHolder) {/ / draw the rectangle canvas picture. DrawPixelMapHolderRoundRectShape (pixelMapHolder rectSrc, rectDst, radius, radius); pixelMapHolder = null; }}); }}Copy the code

3. Bind images, components and views

public class MainAbilitySlice extends AbilitySlice { DirectionalLayout imageDirectionalLayout; @Override protected void onStart(Intent intent) { super.onStart(intent); initView(); } private void initView(){ setUIContent(ResourceTable.Layout_main_abilityslice_layout); imageDirectionalLayout = (DirectionalLayout)findComponentById(ResourceTable.Id_image_directional_layout); RoundRectView rectView = new RoundRectView(this,new Size(SizeUtils.dp2px(100),SizeUtils.dp2px(100))); rectView.putPixelMap(getPixelMap(ResourceTable.Media_test)); // Set the image, ID needs to be compiled before recognition, Placed in the current image resources resources/base/media/test. The PNG DirectionalLayout. LayoutConfig LayoutConfig = new DirectionalLayout.LayoutConfig(DirectionalLayout.LayoutConfig.MATCH_PARENT,DirectionalLayout.LayoutConfig.MATCH_PARENT);  imageDirectionalLayout.addComponent(rectView,layoutConfig); } /** * private PixelMap getPixelMap(int drawableId) {InputStream drawableStream = null; try { drawableInputStream = BaseApplication.getInstance().getResourceManager().getResource(drawableId); ImageSource.SourceOptions sourceOptions = new ImageSource.SourceOptions(); sourceOptions.formatHint = "image/png"; ImageSource imageSource = ImageSource.create(drawableInputStream, sourceOptions); ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions(); decodingOptions.desiredSize = new Size(0, 0); decodingOptions.desiredRegion = new Rect(0, 0, 0, 0); decodingOptions.desiredPixelFormat = PixelFormat.ARGB_8888; PixelMap pixelMap = imageSource.createPixelmap(decodingOptions); return pixelMap; } catch (Exception e) { e.printStackTrace(); } finally { try{ if (drawableInputStream ! = null){ drawableInputStream.close } }catch (Exception e) { e.printStackTrace(); } } return null; }}Copy the code

After the above steps, you can make a big mask with rounded corners. Hiahiahia can finally stand up and reply to the product: Give me 3 minutes, I will get you out.

The above plot, purely YY and adaptation, if there is the same, please take the seat.

conclusion

Hongmeng is a “future-oriented” operating system. It is a distributed operating system based on micro-kernel for all scenarios. It has been adapted to smart screen and will be adapted to multi-terminal devices such as mobile phones, tablets, computers, smart cars and wearable devices in the future.

Hongmeng system has done a lot of encapsulation and expansion to shield the bottom work, which has a great advantage in the 5G era of multi-intelligent devices and interconnection of everything. And after a few days of playing, I feel that the development of Hongmeng and Android development still have a lot of similarities, “extremely friendly” for Android developers, extremely easy to use. So let’s embrace the future and learn from it.

This is the first article in this series, and there will be more to come, so stay tuned to…… .

If this article inspires you a little bit, I hope you can give it a thumbs-up.