鴻蒙開發實戰系列之一：圓角

前言

看過鴻蒙2.0系統的發佈會，你們是否是蠢蠢欲動，想要開發第一個鴻蒙的程序呢，網上有不少文章介紹鴻蒙系統、跟Android的區別以及怎麼寫HelloWorld的文章，這邊就不復制粘貼了。

今天換個花樣，來看下如何實現Android裏面一些常見功能與效果，由於鴻蒙剛出來不久，一切都還不是很成熟（沒有前輩的神器），只能靠本身手x代碼，廢話很少說，來看下鴻蒙系統裏如何實現基本的圖片圓角功能吧。

現在大部分美術在設計樣式的時候，都會給圖片帶上圓角，在鴻蒙開發過程當中，必定會遇到要對圖片進行二次處理，添加上圓角、或者圓形圖像。

Android產品：這個圖加下圓角吧，應該花不了你3分鐘吧？

開發小蒙：喵的，這是鴻蒙，沒有glide，怎麼玩，給我3天先 。

Android產品：gun，忽悠老子呢，你覺得我第一天當產品麼？圓角這麼簡單的事，還須要3天，你是否是花2天半打醬油去了麼。

開發小蒙：卒。。。。。。

小蒙好歹也是多年Android開發的老手，怎麼會輕易認輸，通過一番翻箱倒櫃，查找鴻蒙api文檔，終於實現了以下效果：

界面背景爲灰色，圖片佈局背景爲紅色，圖片佈局中放了一張正方形的圖片，被裁減成了圓角矩形，那麼這個效果是怎麼實現的呢？

咱們以往在Android的開發過程當中，要作到這個效果，常規的解決方案有如下三種

一、使用Glide

二、自定義ImageView

三、直接操做圖片繪製

在鴻蒙系統中，暫時沒有Glide（可能好久以後纔會有），直接操做圖片的Api相對也還不夠完善，因此咱們選擇的是自定義組件，具體作法以下：

首先你要可以跟據官方的文檔，完整運行出Hello World程序（廢話），不行的請自行解決

一、新建一個佈局文件main_abilityslice_layout.xml，一個真實佈局居中嵌套一個方向佈局

<?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>

二、新建一個自定義組件RoundRectView繼承自Image組件

public class RoundRectView extends Image {
    private static final int radius = 20;//圓角半徑，若是設置成圖片的寬度的一半，則會圖片變成圓形
    private PixelMapHolder pixelMapHolder;//像素圖片持有者
    private RectFloat rectDst;//目標區域
    private RectFloat rectSrc;//源區域
    public RoundRectView(Context context, Size viewSize) {//Size是該視圖顯示區域的大小
        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) {
                //繪製圓角矩形圖片
                canvas.drawPixelMapHolderRoundRectShape(pixelMapHolder, rectSrc, rectDst, radius, radius);
                pixelMapHolder = null;
            }
        });
    }
}

三、將圖片、組件與視圖進行綁定

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));//設置圖片，ID須要先編譯後才能識別到，當前圖片資源放置在resources/base/media/test.png
        DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(DirectionalLayout.LayoutConfig.MATCH_PARENT,DirectionalLayout.LayoutConfig.MATCH_PARENT);
        imageDirectionalLayout.addComponent(rectView,layoutConfig);
    }

    /**
    * 經過資源ID獲取位圖對象
    **/
    private PixelMap getPixelMap(int drawableId) {
        InputStream drawableInputStream = 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;
    }
}

通過以上幾步操做以後，就能夠作出一個鴻蒙版的圓角圖片了，hiahiahia，終於能夠站起身能夠跟產品回覆了：給我3分鐘，哥給你lu出來。

以上情節，純屬yy與改編，若有雷同，請對號入座。

總結

鴻蒙是一款「面向將來」的操做系統，一款基於微內核的面向全場景的分佈式操做系統，現已適配智慧屏，將來它將適配手機、平板、電腦、智能汽車、可穿戴設備等多終端設備。

鴻蒙系統作了不少封裝和擴展屏蔽掉底層的工做，在多智能設備、萬物互聯的5G時代具備很大的優點，而且通過幾天的玩耍，感受鴻蒙的開發跟Android開發仍是有不少類似之處，對於Android開發人員來講」極其友好「，極其容易上手。

因此讓咱們擁抱將來，學習鴻蒙吧。

這是本系列的第一篇，後面還會爲你們帶來更多的鴻蒙乾貨，敬請期待......。

若是文章對您有一點啓發的話，但願您能點個贊，來一波關注。