鸿蒙系统Java实现底部任务栏,鸿蒙Java开发模式8:鸿蒙启动动画和抽屉菜单的实现及效果...

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

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

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

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

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

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

}

}

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

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

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布局代码：

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent">

ohos:id="$+id:list_container"

ohos:height="match_parent"

ohos:width="match_parent"/>

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"/>

ohos:id="$+id:sliding_drawer"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:background_element="#292421">

ohos:id="$+id:drawer"

ohos:height="match_content"

ohos:width="match_parent"

ohos:layout_alignment="bottom">

ohos:id="$+id:handle"

ohos:height="80vp"

ohos:width="match_parent"

ohos:background_element="$graphic:capsule_handle_element">

ohos:id="$+id:line"

ohos:height="5vp"

ohos:width="100vp"

ohos:horizontal_center="true"

ohos:top_margin="10vp"/>

ohos:id="$+id:content"

ohos:height="500vp"

ohos:width="match_parent"

ohos:background_element="#242730"

ohos:top_margin="60vp">

ohos:height="300vp"

ohos:width="300vp"

ohos:center_in_parent="true"

ohos:image_src="$media:qq"

ohos:scale_mode="stretch"/>

抽屉菜单的组件引用，如下图：

重要的是这副春联，写得真有创意，谢谢！