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;

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

    }

}

// 返回按钮

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