鸿蒙Java开发模式8:鸿蒙启动动画和抽屉菜单的实现及效果 原创
六合李欣
发布于 2021-2-13 16:31
浏览
2收藏
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<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);
}
}
需要集成华为提供的动画库,工程依赖目录如下:
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>
抽屉菜单的组件引用,如下图:
重要的是这副春联,写得真有创意,谢谢!
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
赞
3
收藏 2
回复
相关推荐
👍👍👍
也祝你新年快乐,牛气冲天!!!
大家一起新年快乐,祝愿鸿蒙!