[文章]HarmonyOS应用开发- BusinessCard体验

一、项目总述
项目名称: 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;@Overridepublic void onStart(Intent intent) {    super.onStart(intent);    super.setUIContent(ResourceTable.Layout_ability_main);    initLists();    initAppBarButtons();    initScrollView();    initBottomTab();}@Overridepublic void onActive() {    super.onActive();}@Overridepublic 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);    }}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);        });    }}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);    }三、代码地址：
https://gitee.com/jltfcloudcn/jump_to/tree/master/Basiness_card
附加：