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

六合李欣

发布于 2021-2-13 16:31

浏览

2收藏

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

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

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

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

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

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

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

鸿蒙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);
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.

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

鸿蒙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());
        }
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.

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>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.