Одна из серий разработки Hongmeng, реальный бой: закругленные углы.

HarmonyOS

предисловие

После просмотра запуска системы Hongmeng 2.0, вам не терпится разработать первую программу Hongmeng?В Интернете есть много статей, в которых рассказывается о системе Hongmeng, ее отличиях от Android и о том, как писать статьи HelloWorld.Я не буду копировать и вставить сюда. .

Давайте сегодня изменим трюк и посмотрим, как реализовать некоторые распространенные функции и эффекты в Android, потому что Hongmeng только вышел, все не очень зрело (артефактов предшественников нет), полагаться можно только на собственный X-код, а не много ерунды, давай Давайте посмотрим, как реализовать базовую функцию округления изображения в системе Hongmeng.

В настоящее время большинство художников добавляют закругленные углы к изображениям при разработке стилей.В процессе разработки Hongmeng они обязательно столкнутся с необходимостью переработать изображения и добавить закругленные углы или круглые изображения.

Android产品：这个图加下圆角吧，应该花不了你3分钟吧？ 
开发小蒙：喵的，这是鸿蒙，没有glide，怎么玩，给我3天先 。
Android产品：gun，忽悠老子呢，你以为我第一天当产品么？圆角这么简单的事，还需要3天，你是不是花2天半打酱油去了么。
开发小蒙：卒。。。。。。

Ведь Сяомэн — ветеран Android-разработки с многолетним стажем, как он мог так легко признать поражение?Фон интерфейса серый, фон раскладки картинок красный, а в раскладку картинок помещается квадратная картинка, которая разрезается на прямоугольник со скругленными углами, так как же достигается такой эффект?

В прошлом в процессе разработки Android для достижения этого эффекта использовались следующие три обычных решения. 1. Используйте скольжение

2. Пользовательское изображение

3. Непосредственная операция рисования изображения

В системе Hongmeng на данный момент нет Glide (может быть, в будущем), а API для непосредственного манипулирования картинками относительно несовершенен, поэтому выбираем кастомные компоненты Конкретные методы следующие:

Во-первых, у вас должна быть возможность запускать программу Hello World (ерунда) полностью по официальной документации, если не работает - решайте сами

1. Создайте новый файл макета 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>

2. Создайте новый пользовательский компонент 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;
            }
        });
    }
}

3. Связывание изображений, компонентов и представлений

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;
    }
}

После вышеуказанных шагов вы можете сделать округленное изображение версии Hongmeng, hiahiahia, вы, наконец, можете встать и ответить продукту: дайте мне 3 минуты, брат даст вам лу.

Приведенный выше сюжет чисто ыы и адаптация, если есть какие-то сходства, прошу садиться.

Суммировать

Hong Meng - это «ориентированная на будущее» операционная система, основанная на микроядре распределенной операционной системы для всей сцены, и теперь мудрость адаптации экрана, будущее будет соответствовать телефонам, планшетам, ПК, смарт-автомобилям, носимым устройствам и другому терминальному оборудованию.

Система Hongmeng провела большую инкапсуляцию и расширение, чтобы защитить нижний слой.У нее есть большие преимущества в эпоху 5G мульти-умных устройств и Интернета всего.После нескольких дней игры я чувствую, что развитие Hongmeng имеет много общего с разработкой Android. Он «чрезвычайно удобен» для разработчиков Android и чрезвычайно прост в использовании.Итак, давайте примем будущее и изучим Хунмэн.

Это первая статья в этой серии, и позже мы представим вам больше галантереи Hongmeng, так что следите за обновлениями....

Если статья вас немного вдохновила, надеюсь, вы поставите лайк.

Категории