鸿蒙Java开发模式8:鸿蒙启动动画和抽屉菜单的实现及效果 原创

六合李欣
发布于 2021-2-13 16:31
浏览
2收藏

1.鸿蒙启动动画页面视图实现效果:

鸿蒙Java开发模式8:鸿蒙启动动画和抽屉菜单的实现及效果-鸿蒙开发者社区

通过Java线程控制计数器变量,跳转页面片段,线程的使用尤其重要,在页面数据加载,请求网络,读取文件,Java爬虫解析尤为重要,代码如下:

鸿蒙Java开发模式8:鸿蒙启动动画和抽屉菜单的实现及效果-鸿蒙开发者社区

动画使用的是华为提供的BallPulseIndicator组件类,所以大家对Java代码创建布局也要非常了解,效果如下:

 

鸿蒙Java开发模式8:鸿蒙启动动画和抽屉菜单的实现及效果-鸿蒙开发者社区

2.跳转后的页面效果,列表项和上浮按钮,和底部抽屉菜单,默认是隐藏的:

鸿蒙Java开发模式8:鸿蒙启动动画和抽屉菜单的实现及效果-鸿蒙开发者社区

点击抽屉菜单,菜单从底部弹出,再点击底部菜单,底部菜单隐藏,效果实现如下:

鸿蒙Java开发模式8:鸿蒙启动动画和抽屉菜单的实现及效果-鸿蒙开发者社区

 

 

鸿蒙Java开发模式8:鸿蒙启动动画和抽屉菜单的实现及效果-鸿蒙开发者社区

3.首页动画页面Java代码实现,通过代码创建布局:

package com.example.javahm5.slice;

import com.example.javahm5.ResourceTable;
import com.wang.avi.AVLoadingIndicatorView;
import com.wang.avi.indicators.BallPulseIndicator;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.Button;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.DependentLayout;
import ohos.agp.components.element.ShapeElement;
import ohos.bundle.AbilityInfo;
import ohos.agp.components.DirectionalLayout.LayoutConfig;
import java.util.ArrayList;

public class MainAbilitySlice extends AbilitySlice {

    private DependentLayout myLayout = new DependentLayout(this);
    private ArrayList<AVLoadingIndicatorView> animatorList=new ArrayList<>();

    int  i=0;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);

        setDisplayOrientation(AbilityInfo.DisplayOrientation.PORTRAIT);
        LayoutConfig config = new
                LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT,
                ComponentContainer.LayoutConfig.MATCH_PARENT);
        myLayout.setLayoutConfig(config);


        ShapeElement element = new ShapeElement();
        element.setRgbColor(new RgbColor(231,87,100));
        myLayout.setBackground(element);

        ShapeElement commonElement = new ShapeElement();
        commonElement.setRgbColor(new RgbColor(231,87,100));

        LayoutConfig ballPulseIndicatorConfig = new
                LayoutConfig(LayoutConfig.MATCH_CONTENT, LayoutConfig.MATCH_CONTENT);
        BallPulseIndicator ballPulseIndicator=new BallPulseIndicator(this);
        ballPulseIndicatorConfig.setMargins(300,700,0,0);
        ballPulseIndicator.setLayoutConfig(ballPulseIndicatorConfig);
        ballPulseIndicator.setHeight(550);
        ballPulseIndicator.setWidth(550);
        ballPulseIndicator.setBackground(commonElement);
        myLayout.addComponent(ballPulseIndicator);
        animatorList.add(ballPulseIndicator);

        super.setUIContent(myLayout);


        new  Thread(new Runnable() {
            @Override
            public void run() {

                while (i<=10)
                {
                    i++;
                    try {
                        Thread.sleep(1000);

                        if(i==10)
                        {
                            System.out.println("结束**********");
                            getUITaskDispatcher().asyncDispatch(new Runnable() {
                                @Override
                                public void run() {
                                    present(new SlidingDrawerAbilitySlice(), new Intent());
                                }
                            });

                        }
                        System.out.println("i-->"+i);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }


            }
        }).start();
    }
    private void startAllAnimator(ArrayList<AVLoadingIndicatorView> avLoadingIndicatorViews){
        for (int i = 0; i < avLoadingIndicatorViews.size(); i++) {
            avLoadingIndicatorViews.get(i).start();
        }
    }
    @Override
    public void onActive() {
        super.onActive();
        startAllAnimator(animatorList);
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

 

需要集成华为提供的动画库,工程依赖目录如下:

鸿蒙Java开发模式8:鸿蒙启动动画和抽屉菜单的实现及效果-鸿蒙开发者社区

鸿蒙Java开发模式8:鸿蒙启动动画和抽屉菜单的实现及效果-鸿蒙开发者社区

鸿蒙Java开发模式8:鸿蒙启动动画和抽屉菜单的实现及效果-鸿蒙开发者社区

 

4.列表项和底部抽屉菜单栏的Java实现逻辑:

package com.example.javahm5.slice;

import com.bigpeach.ability.JAbilitySlice;
import com.bigpeach.components.ListItemProvider;
import com.bigpeach.components.SlidingDrawerLayout;
import com.bigpeach.components.viewholder.AbilityHolder;
import com.bigpeach.components.viewholder.ItemViewHolder;
import com.bigpeach.components.viewholder.datamodel.ItemDataModel;
import com.example.javahm5.ResourceTable;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.ListContainer;
import ohos.agp.components.Text;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;

import java.util.ArrayList;
import java.util.List;

public class SlidingDrawerAbilitySlice extends JAbilitySlice {

    private ListContainer listContainer;
    private SlidingDrawerLayout slidingDrawer;

    private String[]  strs={"祝","福","大","家","新","年","快","乐","牛","气","冲","天", "牛","年","吉","祥"};

    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_slice_sliding_drawer);
        listContainer = findComponent(ResourceTable.Id_list_container);
        List<TextInfo> data = new ArrayList<>();
        for (int i = 0; i < strs.length; i++) {
            data.add(new TextInfo(strs[i]));
        }
        listContainer.setFooterBoundarySwitch(false);
        listContainer.setHeaderBoundarySwitch(false);
        listContainer.setBoundarySwitch(true);
        listContainer.setBoundaryColor(Color.WHITE);
        listContainer.setBoundaryThickness(vp2px(8f));
        ListItemProvider<TextInfo> itemProvider = new ListItemProvider<>();
        itemProvider.setDataList(data);
        listContainer.setItemProvider(itemProvider);

        slidingDrawer = findComponent(ResourceTable.Id_sliding_drawer);
        Component drawerLayout = findComponent(ResourceTable.Id_drawer);
        drawerLayout.setMarginBottom(vp2px(-500f)); // 鸿蒙系统目前 ohos:bottom_margin="-500vp" 单位vp与px值相等的Bug
        slidingDrawer.setDrawer(drawerLayout, vp2px(60f), vp2px(500f));
        Component lineComponent = findComponent(ResourceTable.Id_line);
        ShapeElement shapeElement = new ShapeElement();
        shapeElement.setRgbColor(RgbColor.fromArgbInt(0xFFFFFFFF));
        shapeElement.setCornerRadius(10f);
        lineComponent.setBackground(shapeElement);
        Component contentLayout = findComponent(ResourceTable.Id_content);

        Button button = findComponent(ResourceTable.Id_button);
        ShapeElement shapeElement1 = new ShapeElement();
        shapeElement1.setRgbColor(RgbColor.fromArgbInt(0xFF00587a));
        shapeElement1.setCornerRadius(vp2px(60f));
        button.setBackground(shapeElement1);
        button.setClickedListener(component -> {
            if (slidingDrawer.isOpened()) {
                slidingDrawer.close();
            } else {
                slidingDrawer.open();
            }

        });
    }
    /**
     * 数据
     */
    public static class TextInfo extends ItemDataModel {

        private String text;

        public TextInfo(String text) {
            this.text = text;
        }

        public String getText() {
            return text;
        }

        @Override
        public int getLayoutId(int index) {
            return ResourceTable.Layout_item_text;
        }

        @Override
        public ItemViewHolder getViewHolder(AbilityHolder iAbility, ListContainer listContainer, ListItemProvider itemProvider, Component component) {
            return new StringHolder(iAbility, listContainer, itemProvider, component);
        }
    }
    /**
     * view
     */
    public static class StringHolder extends ItemViewHolder<AbilityHolder, TextInfo> {

        Text text;

        public StringHolder(AbilityHolder iAbility, ListContainer listContainer, ListItemProvider itemProvider, Component itemComponent) {
            super(iAbility, listContainer, itemProvider, itemComponent);
            text = findComponent(ResourceTable.Id_text);
            text.setMarginsLeftAndRight(vp2px(3f), vp2px(3f));
            ShapeElement shapeElement = new ShapeElement();
            shapeElement.setCornerRadius(10);
            shapeElement.setRgbColor(RgbColor.fromArgbInt(0xFFd7385e));
            text.setBackground(shapeElement);
            itemComponent.setClickedListener(component -> {
                new ToastDialog(getContext())
                        .setText("点我干啥?")
                        .setAlignment(LayoutAlignment.CENTER)
                        .show();
            });
        }

        @Override
        public void setContent(int index, TextInfo data) {
            text.setText(data.getText());
        }
    }
}

 

5.xml布局代码:

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent">

    <ListContainer
        ohos:id="$+id:list_container"
        ohos:height="match_parent"
        ohos:width="match_parent"/>

    <Button
        ohos:id="$+id:button"
        ohos:height="60vp"
        ohos:width="60vp"
        ohos:text="抽屉菜单"
        ohos:text_color="#FFFFFF"
        ohos:background_element="#00EEEE"
        ohos:align_parent_right="true"
        ohos:top_margin="8vp"
        ohos:right_margin="12vp"
        ohos:text_size="12fp"/>

    <com.bigpeach.components.SlidingDrawerLayout
        ohos:id="$+id:sliding_drawer"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="#292421">

        <DependentLayout
            ohos:id="$+id:drawer"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:layout_alignment="bottom">

            <DependentLayout
                ohos:id="$+id:handle"
                ohos:height="80vp"
                ohos:width="match_parent"
                ohos:background_element="$graphic:capsule_handle_element">

                <Component
                    ohos:id="$+id:line"
                    ohos:height="5vp"
                    ohos:width="100vp"
                    ohos:horizontal_center="true"
                    ohos:top_margin="10vp"/>

            </DependentLayout>

            <DependentLayout
                ohos:id="$+id:content"
                ohos:height="500vp"
                ohos:width="match_parent"
                ohos:background_element="#242730"
                ohos:top_margin="60vp">

                <Image
                    ohos:height="300vp"
                    ohos:width="300vp"
                    ohos:center_in_parent="true"
                    ohos:image_src="$media:qq"
                    ohos:scale_mode="stretch"/>

            </DependentLayout>

        </DependentLayout>

    </com.bigpeach.components.SlidingDrawerLayout>

</DependentLayout>

 

抽屉菜单的组件引用,如下图:

鸿蒙Java开发模式8:鸿蒙启动动画和抽屉菜单的实现及效果-鸿蒙开发者社区

重要的是这副春联,写得真有创意,谢谢!

鸿蒙Java开发模式8:鸿蒙启动动画和抽屉菜单的实现及效果-鸿蒙开发者社区

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
3
收藏 2
回复
举报
3条回复
按时间正序
/
按时间倒序
张荣超_九丘教育
张荣超_九丘教育

👍👍👍

回复
2021-2-13 21:31:32
Whyalone
Whyalone

也祝你新年快乐,牛气冲天!!!

回复
2021-2-13 22:17:05
六合李欣
六合李欣

大家一起新年快乐,祝愿鸿蒙!

回复
2021-2-14 10:23:09
回复
    相关推荐