HarmonyOS应用开发- BusinessCard体验 原创
鸿蒙时代
发布于 2021-7-20 16:30
浏览
1收藏
一、项目总述
项目名称: BusinessCard
项目语言: JAVA
体验模板: Business Card
工具:deveco studio
效果如下
二、开发过程
第一步 建立项目
新建一个java的应用项目
然后构建完成项目后在jltf_template下new->module
选择phone下的About Feature模板
登录你的账号然后启动模拟器即可实现效果
二、项目介绍
该模板采用自定义组件进行构建成用户来电信息或联系人卡片的信息;
项目结构如下:
部分代码
/**
- MainAbilitySlice
*/
public class MainAbilitySlice extends AbilitySlice {
private static final int BUTTON_NUM = 4;
private static final int LIST_LEN = 4;
private static final int LIST_ITEM_HEIGHT = 65;
private static final int OVERSCROLL_PERCENT = 20;
private static final float OVERSCROLL_RATE = 1.0f;
private static final int REMAIN_VISIBLE_PERCENT = 10;
private static final int PROFILE_SIZE = 108;
private static final int ORIGINAL_BACKGROUND_COLOR = 220;
private static final int BACKGROUND_COLOR = 255;
private static final int LIST_ITEM_TYPE = 2;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
initLists();
initAppBarButtons();
initScrollView();
initBottomTab();
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
private void initLists() {
List<ItemInfo> contactsDetails = new ArrayList<>();
Element aboutIcon = ElementScatter.getInstance(getContext()).parse(ResourceTable.Graphic_ic_about);
Element switchIcon = ElementScatter.getInstance(getContext()).parse(ResourceTable.Graphic_ic_enabled);
// List item data
for (int index = 0; index < LIST_LEN; index++) {
contactsDetails.add(new DefaultDoubleLineListItemInfo("175 2025 2120",
"Mobile - ShangHai", aboutIcon, aboutIcon));
contactsDetails.add(new SingleButtonDoubleLineListItemInfo("8:50 AM",
"175 2025 2120", switchIcon));
}
// Set providers to ListContainers
ListContainer contactsList = (ListContainer) findComponentById(ResourceTable.Id_contacts_detail_upperCard_list);
if (contactsList != null) {
contactsList.setLongClickable(false);
contactsList.setItemProvider(new ListItemProvider(contactsDetails, this));
contactsList.setHeight(AttrHelper.vp2px(LIST_ITEM_HEIGHT, this) * LIST_LEN * LIST_ITEM_TYPE);
}
}
- 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.
// 返回按钮
private void initAppBarButtons() {
Image backButton = (Image) findComponentById(ResourceTable.Id_appBar_backButton);
if (backButton != null) {
if (backButton.getLayoutDirectionResolved() == Component.LayoutDirection.RTL) {
Element backButtonImage = ElementScatter.getInstance(this).parse(ResourceTable.Graphic_ic_back_mirror);
backButton.setImageElement(backButtonImage);
}
backButton.setClickedListener(component -> MainAbilitySlice.super.onBackPressed());
}
}
private void initScrollView() {
ScrollView scrollView = (ScrollView) findComponentById(ResourceTable.Id_contacts_detail_scroll);
int profileSizePx = AttrHelper.vp2px(PROFILE_SIZE, this);
if (scrollView != null) {
scrollView.setReboundEffectParams(OVERSCROLL_PERCENT, OVERSCROLL_RATE, REMAIN_VISIBLE_PERCENT);
scrollView.setReboundEffect(true);
scrollView.setGesturePriority(Component.GestureType.VERTICAL_DRAG, 1);
Text userName = (Text) findComponentById(ResourceTable.Id_appBar_userName);
DirectionalLayout backGround = (DirectionalLayout) findComponentById(ResourceTable.Id_background);
ShapeElement shapeElement = new ShapeElement();
shapeElement.setShape(ShapeElement.RECTANGLE);
// Set Scrolled listener
scrollView.getComponentTreeObserver().addScrolledListener(() -> {
float curY = scrollView.getScrollValue(Component.AXIS_Y);
int colorChange = (int) ((BACKGROUND_COLOR - ORIGINAL_BACKGROUND_COLOR) * curY / profileSizePx);
shapeElement.setRgbColor(new RgbColor(ORIGINAL_BACKGROUND_COLOR + colorChange,
ORIGINAL_BACKGROUND_COLOR + colorChange, ORIGINAL_BACKGROUND_COLOR + colorChange));
backGround.setBackground(shapeElement);
userName.setAlpha(1 * curY / profileSizePx);
});
}
}
- 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.
// 底部按钮
private void initBottomTab() {
DirectionalLayout bottomTab = (DirectionalLayout) findComponentById(ResourceTable.Id_bottom_tabMenu);
List<DirectionalLayout> tabList = new ArrayList<>();
// Cast xml resources to elements
Element tabActived = ElementScatter.getInstance(getContext()).parse(ResourceTable.Graphic_ic_actived);
Element tabNormal = ElementScatter.getInstance(getContext()).parse(ResourceTable.Graphic_ic_normal);
for (int count = 0; count < BUTTON_NUM; count++) {
// Use LayoutScatter to convert xml file into Component instance
DirectionalLayout tab = (DirectionalLayout) LayoutScatter.getInstance(getContext())
.parse(ResourceTable.Layout_tab, bottomTab, false);
Image buttonImage = (Image) tab.findComponentById(ResourceTable.Id_bottom_tab_button_image);
if (buttonImage != null) {
if (count == BUTTON_NUM - 1) {
buttonImage.setImageElement(tabActived);
} else {
buttonImage.setImageElement(tabNormal);
}
}
Text buttonText = (Text) tab.findComponentById(ResourceTable.Id_bottom_tab_button_text);
// Set Tab Text Here
if (buttonText != null) {
buttonText.setText("Tab");
}
tab.setClickedListener(component -> {
// Deselect all tabs in tab menu
for (DirectionalLayout btn : tabList) {
((Image) btn.findComponentById(ResourceTable.Id_bottom_tab_button_image))
.setImageElement(tabNormal);
}
// Set Selected state on the clicked tab
((Image) component.findComponentById(ResourceTable.Id_bottom_tab_button_image))
.setImageElement(tabActived);
});
tabList.add(tab);
bottomTab.addComponent(tab);
}
}
- 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.
}
三、代码地址:
https://gitee.com/jltfcloudcn/jump_to/tree/master/Basiness_card
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
蛟龙腾飞basiness_card模板体验.docx 301.92K 8次下载
已于2021-7-22 19:15:45修改
赞
2
收藏 1
回复
2
2
1
相关推荐
感觉UI挺简洁的,不过下次能把上面的项目栏去掉更好hhh
感谢提的建议和想法。