基于鸿蒙操作系统的鸿蒙信息搜索引擎
【中原工】
创建项目
登录华为账号 选择p40虚拟机
Ui设计
广告页面
页面代码
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:id="$+id:ability_launch_layout"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:theme="$ohos:theme:theme_hide_title_bar"
ohos:orientation="vertical">
<!--Brand display area-->
<DirectionalLayout
ohos:id="$+id:bottom_bar"
ohos:height="$float:bottom_bar_height"
ohos:width="match_parent"
ohos:align_parent_bottom="true"
ohos:alignment="horizontal_center"
ohos:orientation="vertical">
<DirectionalLayout
ohos:id="$+id:bottom_bar_title"
ohos:height="match_content"
ohos:width="match_parent"
ohos:alignment="center"
ohos:bottom_margin="$float:app_icon_bottom_margin"
ohos:orientation="horizontal"
ohos:top_margin="$float:app_title_top_margin">
<!-- TODO: Set app icon here-->
<Image
ohos:id="$+id:bottom_bar_title_icon"
ohos:height="$float:app_icon_height"
ohos:width="$float:app_icon_width"
ohos:end_margin="$float:app_icon_right_margin"
ohos:image_src="$graphic:icon_app"/>
<Text
ohos:id="$+id:bottom_bar_title_text"
ohos:height="match_content"
ohos:width="match_content"
ohos:text="$string:entry_MainAbility"
ohos:text_color="$color:app_title_text_color"
ohos:text_size="$float:app_title_text_size"/>
</DirectionalLayout>
<Text
ohos:id="$+id:bottom_bar_copyright"
ohos:height="match_content"
ohos:width="match_content"
ohos:end_margin="$float:copyright_margin"
ohos:start_margin="$float:copyright_margin"
ohos:text="$string:copyright"
ohos:text_color="$color:copyright_text_color"
ohos:text_size="$float:copyright_text_size"/>
</DirectionalLayout>
<!-- TODO: Set background_element here-->
<Image
ohos:id="$+id:loading_pic"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:above="$+id:bottom_bar"
ohos:image_src="$media:splash"
ohos:scale_mode="clip_center"
ohos:background_element="$color:image_area"/>
<!-- Skip Button -->
<StackLayout
ohos:id="$+id:skip_button"
ohos:height="$float:skip_height"
ohos:width="$float:skip_width"
ohos:align_parent_end="true"
ohos:align_parent_top="true"
ohos:background_element="$graphic:button_skip"
ohos:end_margin="$float:skip_button_right_margin"
ohos:top_margin="$float:skip_button_top_margin">
<DirectionalLayout
ohos:id="$+id:skip_button_touchTarget"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:end_margin="$float:skip_right_margin"
ohos:layout_direction="ltr"
ohos:orientation="horizontal"
ohos:start_margin="$float:skip_left_margin">
<Text
ohos:id="$+id:skip_button_text1"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:text="$string:skip"
ohos:text_alignment="center"
ohos:text_color="$color:textColor_tertiary_inverse"
ohos:text_size="$float:skip_text_size"
ohos:weight="2"/>
<Text
ohos:id="$+id:skip_button_text2"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:text_alignment="center"
ohos:text_color="$color:textColor_tertiary_inverse"
ohos:text_size="$float:skip_text_size"
ohos:weight="1"/>
</DirectionalLayout>
</StackLayout>
<!-- Advertise Mark-->
<StackLayout
ohos:id="$+id:advertise_mark"
ohos:height="$float:advertise_height"
ohos:width="$float:advertise_width"
ohos:above="$+id:bottom_bar"
ohos:background_element="$graphic:mark_advertise"
ohos:bottom_margin="$float:advertise_bottom_margin"
ohos:start_margin="$float:advertise_left_margin">
<Text
ohos:id="$+id:advertise_mark_text"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:text="$string:advertise"
ohos:text_alignment="center"
ohos:text_color="$color:textColor_tertiary_inverse"
ohos:text_size="$float:advertise_text_size"/>
</StackLayout>
</DependentLayout>搜索页面
代码展示
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:id="$+id:MainAbility_layout"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="$color:color_gray"
ohos:orientation="vertical">
<DirectionalLayout
ohos:id="$+id:discover_searchLayout"
ohos:height="50vp"
ohos:width="match_parent"
ohos:alignment="vertical_center"
ohos:left_padding="16vp"
ohos:orientation="horizontal"
ohos:right_padding="16vp">
<StackLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:weight="1">
<TextField
ohos:height="36vp"
ohos:width="match_parent"
ohos:background_element="$graphic:background_search"
ohos:hint="输入关键字"
ohos:hint_color="#8a8a8a"
ohos:left_padding="40vp"
ohos:text_alignment="vertical_center"
ohos:text_color="$color:app_title_text_color"
ohos:text_size="16vp"/>
<Image
ohos:height="16vp"
ohos:width="16vp"
ohos:image_src="$media:icon_search"
ohos:layout_alignment="vertical_center"
ohos:left_margin="16vp"
ohos:scale_mode="zoom_center"/>
</StackLayout>
<Image
ohos:height="25vp"
ohos:width="25vp"
ohos:image_src="$media:icon_message_center_02"
ohos:layout_alignment="vertical_center"
ohos:left_margin="12vp"
ohos:scale_mode="zoom_center"/>
</DirectionalLayout>
<ListContainer
ohos:id="$+id:discover_listContainer"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical"
ohos:rebound_effect="true"/>
</DirectionalLayout>主页ui页面
页面代码
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:id="$+id:MainAbility_layout"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="$color:color_gray"
ohos:orientation="vertical">
<DirectionalLayout
ohos:id="$+id:home_searchLayout"
ohos:height="50vp"
ohos:width="match_parent"
ohos:alignment="vertical_center"
ohos:left_padding="16vp"
ohos:orientation="horizontal"
ohos:right_padding="16vp">
<StackLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:weight="1">
<TextField
ohos:height="36vp"
ohos:width="match_parent"
ohos:background_element="$graphic:background_search"
ohos:hint="输入关键字"
ohos:hint_color="#8a8a8a"
ohos:left_padding="40vp"
ohos:text_alignment="vertical_center"
ohos:text_color="$color:app_title_text_color"
ohos:text_size="16vp"/>
<Image
ohos:height="16vp"
ohos:width="16vp"
ohos:image_src="$media:icon_search"
ohos:layout_alignment="vertical_center"
ohos:left_margin="16vp"
ohos:scale_mode="zoom_center"/>
</StackLayout>
<Image
ohos:height="25vp"
ohos:width="25vp"
ohos:image_src="$media:icon_message_center_02"
ohos:layout_alignment="vertical_center"
ohos:left_margin="12vp"
ohos:scale_mode="zoom_center"/>
</DirectionalLayout>
<ListContainer
ohos:id="$+id:home_listContainer"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical"
ohos:rebound_effect="true"/>
</DirectionalLayout>我的页面ui页面
页面代码
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:id="$+id:MainAbility_layout"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<DependentLayout
ohos:id="$+id:home_searchLayout"
ohos:height="50vp"
ohos:width="match_parent"
ohos:alignment="vertical_center"
ohos:background_element="$color:color_gray"
ohos:right_padding="24vp">
<Text
ohos:id="$+id:mine_title"
ohos:height="match_content"
ohos:width="match_content"
ohos:text="我的"
ohos:text_size="18fp"
ohos:left_margin="24vp"
ohos:alpha="0"
ohos:text_color="$color:color_black"/>
<Image
ohos:height="25vp"
ohos:width="25vp"
ohos:image_src="$media:icon_message_center_02"
ohos:right_margin="16vp"
ohos:left_of="$id:btn_swap"
ohos:scale_mode="zoom_center"/>
<Image
ohos:id="$+id:btn_swap"
ohos:height="25vp"
ohos:width="25vp"
ohos:align_parent_right="true"
ohos:image_src="$media:icon_swap"
ohos:scale_mode="zoom_center"/>
</DependentLayout>
<ScrollView
ohos:id="$+id:mine_scrollView"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="$color:color_gray"
ohos:rebound_effect="true">
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:left_margin="24vp"
ohos:orientation="vertical"
ohos:right_margin="24vp">
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:alignment="vertical_center"
ohos:bottom_padding="12vp"
ohos:orientation="horizontal"
ohos:top_padding="12vp">
<Image
ohos:height="65vp"
ohos:width="65vp"
ohos:background_element="$graphic:background_mine_header"
ohos:clip_alignment="center"
ohos:image_src="$media:icon_header"
ohos:scale_mode="stretch"/>
<DirectionalLayout
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="vertical_center"
ohos:left_margin="16fp"
ohos:orientation="vertical"
ohos:weight="1">
<Text
ohos:height="match_content"
ohos:width="match_parent"
ohos:layout_alignment="vertical_center"
ohos:text="非蛋不捣"
ohos:text_color="#000000"
ohos:text_size="18fp"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_mine_level"
ohos:bottom_padding="2vp"
ohos:layout_alignment="vertical_center"
ohos:left_padding="5vp"
ohos:right_padding="5vp"
ohos:text="倔强青铜"
ohos:text_color="$color:color_white"
ohos:text_size="12fp"
ohos:top_margin="8vp"
ohos:top_padding="2vp"/>
</DirectionalLayout>
</DirectionalLayout>
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:background_mine_element"
ohos:bottom_padding="24vp"
ohos:orientation="horizontal"
ohos:top_margin="12vp"
ohos:top_padding="24vp">
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:weight="1">
<Image
ohos:height="30vp"
ohos:width="30vp"
ohos:image_src="$media:icon_edite"
ohos:scale_mode="clip_center"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text="发表"
ohos:text_color="$color:color_nav_title"
ohos:text_size="12fp"
ohos:top_margin="4vp"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:weight="1">
<Image
ohos:height="30vp"
ohos:width="30vp"
ohos:image_src="$media:icon_comment"
ohos:scale_mode="clip_center"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text="评论"
ohos:text_color="$color:color_nav_title"
ohos:text_size="12fp"
ohos:top_margin="4vp"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:weight="1">
<Image
ohos:height="30vp"
ohos:width="30vp"
ohos:image_src="$media:icon_collection_02"
ohos:scale_mode="clip_center"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text="收藏"
ohos:text_color="$color:color_nav_title"
ohos:text_size="12fp"
ohos:top_margin="4vp"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:weight="1">
<Image
ohos:height="30vp"
ohos:width="30vp"
ohos:image_src="$media:icon_history_02"
ohos:scale_mode="clip_center"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text="历史"
ohos:text_color="$color:color_nav_title"
ohos:text_size="12fp"
ohos:top_margin="4vp"/>
</DirectionalLayout>
</DirectionalLayout>
<DirectionalLayout
ohos:height="55vp"
ohos:width="match_parent"
ohos:alignment="vertical_center"
ohos:background_element="$graphic:background_mine_item_first"
ohos:bottom_padding="10vp"
ohos:left_padding="12vp"
ohos:orientation="horizontal"
ohos:right_padding="12vp"
ohos:top_margin="12vp"
ohos:top_padding="10vp">
<Image
ohos:height="$float:mine_icon_size"
ohos:width="$float:mine_icon_size"
ohos:image_src="$media:icon_data_02"
ohos:scale_mode="clip_center"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:left_margin="6vp"
ohos:text="数据"
ohos:text_color="#2c2c2c"
ohos:text_size="14fp"
ohos:weight="1"/>
<Image
ohos:height="24vp"
ohos:width="24vp"
ohos:alpha="0.6"
ohos:image_src="$media:icon_right_515151"
ohos:scale_mode="clip_center"/>
</DirectionalLayout>
<Component
ohos:height="1vp"
ohos:width="50vp"
ohos:background_element="$color:color_white"/>
<DirectionalLayout
ohos:height="55vp"
ohos:width="match_parent"
ohos:alignment="vertical_center"
ohos:background_element="$color:color_white"
ohos:bottom_padding="10vp"
ohos:left_padding="12vp"
ohos:orientation="horizontal"
ohos:right_padding="12vp"
ohos:top_padding="10vp">
<Image
ohos:height="$float:mine_icon_size"
ohos:width="$float:mine_icon_size"
ohos:image_src="$media:icon_total"
ohos:scale_mode="clip_center"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:left_margin="6vp"
ohos:text="统计"
ohos:text_color="#2c2c2c"
ohos:text_size="14fp"
ohos:weight="1"/>
<Image
ohos:height="24vp"
ohos:width="24vp"
ohos:alpha="0.6"
ohos:image_src="$media:icon_right_515151"
ohos:scale_mode="clip_center"/>
</DirectionalLayout>
<Component
ohos:height="1vp"
ohos:width="50vp"
ohos:background_element="$color:color_white"/>
<DirectionalLayout
ohos:height="55vp"
ohos:width="match_parent"
ohos:alignment="vertical_center"
ohos:background_element="$color:color_white"
ohos:bottom_padding="10vp"
ohos:left_padding="12vp"
ohos:orientation="horizontal"
ohos:right_padding="12vp"
ohos:top_padding="10vp">
<Image
ohos:height="$float:mine_icon_size"
ohos:width="$float:mine_icon_size"
ohos:image_src="$media:icon_rank"
ohos:scale_mode="clip_center"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:left_margin="6vp"
ohos:text="排行"
ohos:text_color="#2c2c2c"
ohos:text_size="14fp"
ohos:weight="1"/>
<Image
ohos:height="24vp"
ohos:width="24vp"
ohos:alpha="0.6"
ohos:image_src="$media:icon_right_515151"
ohos:scale_mode="clip_center"/>
</DirectionalLayout>
<Component
ohos:height="1vp"
ohos:width="50vp"
ohos:background_element="$color:color_white"/>
<DirectionalLayout
ohos:height="55vp"
ohos:width="match_parent"
ohos:alignment="vertical_center"
ohos:background_element="$color:color_white"
ohos:bottom_padding="10vp"
ohos:left_padding="12vp"
ohos:orientation="horizontal"
ohos:right_padding="12vp"
ohos:top_padding="10vp">
<Image
ohos:height="$float:mine_icon_size"
ohos:width="$float:mine_icon_size"
ohos:image_src="$media:icon_download_02"
ohos:scale_mode="clip_center"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:left_margin="6vp"
ohos:text="下载"
ohos:text_color="#2c2c2c"
ohos:text_size="14fp"
ohos:weight="1"/>
<Image
ohos:height="24vp"
ohos:width="24vp"
ohos:alpha="0.6"
ohos:image_src="$media:icon_right_515151"
ohos:scale_mode="clip_center"/>
</DirectionalLayout>
<Component
ohos:height="1vp"
ohos:width="50vp"
ohos:background_element="$color:color_white"/>
<DirectionalLayout
ohos:height="55vp"
ohos:width="match_parent"
ohos:alignment="vertical_center"
ohos:background_element="$graphic:background_mine_item_last"
ohos:bottom_padding="10vp"
ohos:left_padding="12vp"
ohos:orientation="horizontal"
ohos:right_padding="12vp"
ohos:top_padding="10vp">
<Image
ohos:height="$float:mine_icon_size"
ohos:width="$float:mine_icon_size"
ohos:image_src="$media:icon_upload_02"
ohos:scale_mode="clip_center"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:left_margin="6vp"
ohos:text="上传"
ohos:text_color="#2c2c2c"
ohos:text_size="14fp"
ohos:weight="1"/>
<Image
ohos:height="24vp"
ohos:width="24vp"
ohos:alpha="0.6"
ohos:image_src="$media:icon_right_515151"
ohos:scale_mode="clip_center"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="55vp"
ohos:width="match_parent"
ohos:alignment="vertical_center"
ohos:background_element="$graphic:background_mine_item_first"
ohos:bottom_padding="10vp"
ohos:left_padding="12vp"
ohos:orientation="horizontal"
ohos:right_padding="12vp"
ohos:top_margin="12vp"
ohos:top_padding="10vp">
<Image
ohos:height="$float:mine_icon_size"
ohos:width="$float:mine_icon_size"
ohos:image_src="$media:icon_setting_02"
ohos:scale_mode="clip_center"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:left_margin="6vp"
ohos:text="设置"
ohos:text_color="#2c2c2c"
ohos:text_size="14fp"
ohos:weight="1"/>
<Image
ohos:height="24vp"
ohos:width="24vp"
ohos:alpha="0.6"
ohos:image_src="$media:icon_right_515151"
ohos:scale_mode="clip_center"/>
</DirectionalLayout>
<Component
ohos:height="1vp"
ohos:width="50vp"
ohos:background_element="$color:color_white"/>
<DirectionalLayout
ohos:height="55vp"
ohos:width="match_parent"
ohos:alignment="vertical_center"
ohos:background_element="$color:color_white"
ohos:bottom_padding="10vp"
ohos:left_padding="12vp"
ohos:orientation="horizontal"
ohos:right_padding="12vp"
ohos:top_padding="10vp">
<Image
ohos:height="$float:mine_icon_size"
ohos:width="$float:mine_icon_size"
ohos:image_src="$media:icon_update"
ohos:scale_mode="clip_center"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:left_margin="6vp"
ohos:text="检查更新"
ohos:text_color="#2c2c2c"
ohos:text_size="14fp"
ohos:weight="1"/>
<Image
ohos:height="24vp"
ohos:width="24vp"
ohos:alpha="0.6"
ohos:image_src="$media:icon_right_515151"
ohos:scale_mode="clip_center"/>
</DirectionalLayout>
<Component
ohos:height="1vp"
ohos:width="50vp"
ohos:background_element="$color:color_white"/>
<DirectionalLayout
ohos:height="55vp"
ohos:width="match_parent"
ohos:alignment="vertical_center"
ohos:background_element="$graphic:background_mine_item_last"
ohos:bottom_margin="24vp"
ohos:bottom_padding="10vp"
ohos:left_padding="12vp"
ohos:orientation="horizontal"
ohos:right_padding="12vp"
ohos:top_padding="10vp">
<Image
ohos:height="$float:mine_icon_size"
ohos:width="$float:mine_icon_size"
ohos:image_src="$media:icon_about_02"
ohos:scale_mode="clip_center"/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:left_margin="6vp"
ohos:text="关于我们"
ohos:text_color="#2c2c2c"
ohos:text_size="14fp"
ohos:weight="1"/>
<Image
ohos:height="24vp"
ohos:width="24vp"
ohos:alpha="0.6"
ohos:image_src="$media:icon_right_515151"
ohos:scale_mode="clip_center"/>
</DirectionalLayout>
</DirectionalLayout>
</ScrollView>
</DirectionalLayout>代码功能的实现
建立导航 实现fraction之间的切换
导航Navbar实现类
package com.qiaoxg.harmony.component.bottomNav;
import com.qiaoxg.harmony.ResourceTable;
import ohos.agp.components.*;
import ohos.agp.utils.Color;
import ohos.app.Context;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;
import java.util.ArrayList;
import java.util.List;
import static ohos.agp.utils.LayoutAlignment.CENTER;
public class MainBottomNavBar extends DirectionalLayout {
private static final HiLogLabel logLabel = new HiLogLabel(HiLog.LOG_APP, 0x00201, MainBottomNavBar.class.getSimpleName());
private final Context mContext;
private OnNavClickListener mClickListener;
//导航Tab
private List<NavItemBean> mItemList = new ArrayList<>();
private final List<Component> mNavComponentList = new ArrayList<>();
//title字体大小
private final int NAV_TEXT_SIZE = 12;
//icon的大小
private final int NAV_ICON_SIZE = 25;
//当前选中的导航位置
private int mCurrPosition = 0;
public MainBottomNavBar(Context context) {
this(context, null);
}
public MainBottomNavBar(Context context, AttrSet attrSet) {
super(context, attrSet);
this.mContext = context;
initComponent();
}
private void initComponent() {
setOrientation(HORIZONTAL);
for (int i = 0; i < mItemList.size(); i++) {
DirectionalLayout parentLayout = new DirectionalLayout(mContext);
parentLayout.setTag(i);
parentLayout.setOrientation(VERTICAL);
parentLayout.setAlignment(CENTER);
LayoutConfig layoutConfig = new LayoutConfig();
layoutConfig.weight = 1;
layoutConfig.height = LayoutConfig.MATCH_PARENT;
parentLayout.setLayoutConfig(layoutConfig);
parentLayout.setClickable(true);
parentLayout.setClickedListener(new ClickedListener() {
@Override
public void onClick(Component component) {
int tag = (int) component.getTag();
// showToast(mItemList.get(tag).getTitle());
// HiLog.info(logLabel, String.format("点击了：%s", mItemList.get(tag).getTitle()));
updateNavStyle(tag);
if (mClickListener != null) {
mClickListener.onClick(tag);
}
}
});
Image iconIv = new Image(mContext);
iconIv.setHeight(AttrHelper.vp2px(NAV_ICON_SIZE, mContext));
iconIv.setWidth(AttrHelper.vp2px(NAV_ICON_SIZE, mContext));
iconIv.setScaleMode(Image.ScaleMode.ZOOM_CENTER);
iconIv.setPixelMap(mItemList.get(i).getIconId());
parentLayout.addComponent(iconIv);
Text titleTv = new Text(mContext);
titleTv.setTextSize(AttrHelper.fp2px(NAV_TEXT_SIZE, mContext));
Color color = new Color(mContext.getColor(ResourceTable.Color_color_nav_title));
titleTv.setTextColor(color);
titleTv.setText(mItemList.get(i).getTitle());
parentLayout.addComponent(titleTv);
addComponent(parentLayout);
}
// updateNavStyle(mCurrSelectedNavPosition);
}
private void updateNavStyle(int currPosition) {
// int totalSize = getChildCount();
// for (int i = 0; i < totalSize; i++) {
// ComponentContainer currCom = (ComponentContainer) getComponentAt(i);
// Image icon = (Image) currCom.getComponentAt(0);
// Text title = (Text) currCom.getComponentAt(1);
// Color color = new Color(mContext.getColor(ResourceTable.Color_color_nav_title));
// int iconId = mItemList.get(i).getIconId();
// if (currPosition == i) {
// iconId = mItemList.get(i).getSelectedIconId();
// color = new Color(mContext.getColor(ResourceTable.Color_color_nav_title_selected));
// }
// HiLog.error(logLabel, i + " : currPosition : " + currPosition +
// " , colorId: " + color.getValue() +
// " , iconId : " + iconId);
// title.setTextColor(color);
// icon.setImageAndDecodeBounds(iconId);
// }
if (mCurrPosition != currPosition) {
ComponentContainer currCom = (ComponentContainer) getComponentAt(mCurrPosition);
Image icon = (Image) currCom.getComponentAt(0);
Text title = (Text) currCom.getComponentAt(1);
Color color = new Color(mContext.getColor(ResourceTable.Color_color_nav_title));
int iconId = mItemList.get(mCurrPosition).getIconId();
title.setTextColor(color);
icon.setPixelMap(iconId);
}
ComponentContainer currCom = (ComponentContainer) getComponentAt(currPosition);
Image icon = (Image) currCom.getComponentAt(0);
Text title = (Text) currCom.getComponentAt(1);
Color color = new Color(mContext.getColor(ResourceTable.Color_color_nav_title_selected));
int iconId = mItemList.get(currPosition).getSelectedIconId();
title.setTextColor(color);
icon.setPixelMap(iconId);
this.mCurrPosition = currPosition;
}
public int getCurrSelectedNavPosition() {
return mCurrPosition;
}
public void setCurrSelectedNavPosition(int position) {
if (position > mItemList.size()) {
position = mItemList.size() - 1;
}
this.mCurrPosition = position;
updateNavStyle(mCurrPosition);
}
public List<NavItemBean> getItemList() {
return mItemList;
}
public void setItemList(List<NavItemBean> mItemList) {
this.mItemList = mItemList;
initComponent();
}
public void setOnClickListener(OnNavClickListener listener) {
this.mClickListener = listener;
}
public interface OnNavClickListener {
void onClick(int position);
void onLongClick(int position);
}
}分别建立主页 我的页面 搜索 fraction页面
Discover页面代码展示
package com.qiaoxg.harmony.component;
import com.qiaoxg.harmony.ResourceTable;
import com.qiaoxg.harmony.component.provider.DiscoverProvider;
import ohos.aafwk.ability.fraction.Fraction;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.LayoutScatter;
import ohos.agp.components.ListContainer;
import ohos.agp.window.dialog.ToastDialog;
import ohos.agp.window.service.WindowManager;
public class DiscoverFraction extends Fraction {
private Component mRootComponent;
@Override
protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, Intent intent) {
int color = getFractionAbility().getColor(ResourceTable.Color_color_gray);
WindowManager.getInstance().getTopWindow().get().setStatusBarColor(color); // 设置状态栏颜色
if (mRootComponent == null) {
mRootComponent = scatter.parse(ResourceTable.Layout_ability_main_discover, null, false);
ListContainer listContainer = (ListContainer) mRootComponent.findComponentById(ResourceTable.Id_discover_listContainer);
listContainer.setItemProvider(new DiscoverProvider(getContext()));
listContainer.setItemClickedListener((listContainer1, component, i, l) -> {
DiscoverProvider.DiscoverItemHolder holder = (DiscoverProvider.DiscoverItemHolder) component.getTag();
new ToastDialog(component.getContext()).setText(holder.bean.getContent().substring(0,5)).show();
});
}
return mRootComponent;
}
@Override
protected void onStart(Intent intent) {
super.onStart(intent);
}
@Override
protected void onActive() {
super.onActive();
}
@Override
protected void onInactive() {
super.onInactive();
}
@Override
protected void onBackground() {
super.onBackground();
}
@Override
protected void onComponentDetach() {
super.onComponentDetach();
}
@Override
protected void onForeground(Intent intent) {
super.onForeground(intent);
}
@Override
protected void onStop() {
super.onStop();
}
}home页面代码展示
package com.qiaoxg.harmony.component;
import com.qiaoxg.harmony.ResourceTable;
import com.qiaoxg.harmony.bean.HomeBean;
import com.qiaoxg.harmony.component.provider.HomeProvider;
import ohos.aafwk.ability.fraction.Fraction;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;
import ohos.agp.window.service.WindowManager;
import java.util.ArrayList;
import java.util.List;
public class HomeFraction extends Fraction {
private Component mRootComponent;
private ListContainer mListContainer;
@Override
protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, Intent intent) {
int color = getFractionAbility().getColor(ResourceTable.Color_color_background);
WindowManager.getInstance().getTopWindow().get().setStatusBarColor(color); // 设置状态栏颜色
if (mRootComponent == null) {
mRootComponent = scatter.parse(ResourceTable.Layout_ability_main_home, null, false);
mListContainer = (ListContainer) mRootComponent.findComponentById(ResourceTable.Id_home_listContainer);
}
return mRootComponent;
}
@Override
protected void onStart(Intent intent) {
super.onStart(intent);
List<HomeBean> list = getData();
HomeProvider provider = new HomeProvider(list);
mListContainer.setItemProvider(provider);
mListContainer.setItemLongClickedListener((container, component, position, id) -> {
HomeBean item = (HomeBean) mListContainer.getItemProvider().getItem(position);
new ToastDialog(container.getContext())
.setText("you long clicked:" + item.getTitle())
.setAlignment(LayoutAlignment.CENTER)
.show();
return false;
});
mListContainer.setItemClickedListener(new ListContainer.ItemClickedListener() {
@Override
public void onItemClicked(ListContainer listContainer, Component component, int i, long l) {
HomeBean item = (HomeBean) mListContainer.getItemProvider().getItem(i);
new ToastDialog(component.getContext())
.setText("you clicked:" + item.getTitle())
.setAlignment(LayoutAlignment.CENTER)
.show();
}
});
}
@Override
protected void onActive() {
super.onActive();
}
@Override
protected void onInactive() {
super.onInactive();
}
@Override
protected void onBackground() {
super.onBackground();
}
@Override
protected void onComponentDetach() {
super.onComponentDetach();
}
@Override
protected void onForeground(Intent intent) {
super.onForeground(intent);
}
@Override
protected void onStop() {
super.onStop();
}
private List<HomeBean> getData() {
List<HomeBean> list = new ArrayList<>();
for (int i = 0; i < 20; i++) {
HomeBean bean = new HomeBean();
bean.setTitle((i + 1) + " Harmony OS正式发布");
bean.setContent("2021年6月2日晚，华为发布了鸿蒙操作系统,是面向全场景的分布式操作系统");
bean.setDateTime("2021-06-02");
list.add(bean);
}
return list;
}
}mine页面代码展示
package com.qiaoxg.harmony.component;
import com.qiaoxg.harmony.ResourceTable;
import com.qiaoxg.harmony.component.bottomNav.MainBottomNavBar;
import ohos.aafwk.ability.fraction.Fraction;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.agp.window.service.WindowManager;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;
public class MineFraction extends Fraction {
private static final HiLogLabel logLabel = new HiLogLabel(HiLog.LOG_APP, 0x00201, MineFraction.class.getSimpleName());
private Component mRootComponent;
private ScrollView mScrollView;
private Component mTitleView;
private float mCurrAlpha = 0;
private float mScrollLength = AttrHelper.vp2px(70, this);
@Override
protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, Intent intent) {
int color = getFractionAbility().getColor(ResourceTable.Color_color_gray);
WindowManager.getInstance().getTopWindow().get().setStatusBarColor(color); // 设置状态栏颜色
if (mRootComponent == null) {
mRootComponent = scatter.parse(ResourceTable.Layout_ability_main_mine, null, false);
mTitleView = mRootComponent.findComponentById(ResourceTable.Id_mine_title);
mScrollView = (ScrollView) mRootComponent.findComponentById(ResourceTable.Id_mine_scrollView);
mScrollView.addScrolledListener(new Component.ScrolledListener() {
@Override
public void onContentScrolled(Component component, int i, int i1, int i2, int i3) {
if (i1 > 0) {
mCurrAlpha = i1 / mScrollLength;
HiLog.error(logLabel, "i1 is : " + i1 + " , and alpha is :" + mCurrAlpha);
if (mCurrAlpha < 0) {
mCurrAlpha = 0;
}
if (mCurrAlpha > 1) {
mCurrAlpha = 1;
}
mTitleView.setAlpha(mCurrAlpha);
}
}
});
}
return mRootComponent;
}
@Override
protected void onStart(Intent intent) {
super.onStart(intent);
}
@Override
protected void onActive() {
super.onActive();
}
@Override
protected void onInactive() {
super.onInactive();
}
@Override
protected void onBackground() {
super.onBackground();
}
@Override
protected void onComponentDetach() {
super.onComponentDetach();
}
@Override
protected void onForeground(Intent intent) {
super.onForeground(intent);
}
@Override
protected void onStop() {
super.onStop();
}
}通过适配器实现item的垂直方向展示
Discover页面各项信息的实现
package com.qiaoxg.harmony.component.provider;
import com.qiaoxg.harmony.ResourceTable;
import com.qiaoxg.harmony.bean.DiscoverBean;
import ohos.agp.components.*;
import ohos.app.Context;
import java.util.ArrayList;
import java.util.List;
import java.util.UUID;
public class DiscoverProvider extends BaseItemProvider {
private List<DiscoverBean> mDataList = new ArrayList<>();
public static int onImageWidth = 0;
public static int towImageWidth = 0;
public static int threeImageWidth = 0;
private Context mContext;
private static int mImageContainerWidth = 0;
public DiscoverProvider(Context context) {
this.mContext = context;
this.mImageContainerWidth = 1024 - AttrHelper.vp2px(32, mContext);
for (int i = 0; i < 20; i++) {
DiscoverBean bean = new DiscoverBean();
bean.setCollectionCount((i + 4) * 8);
bean.setCommentCount((i + 3) * 9);
bean.setIconId(0);
bean.setImageCount(i % 4);
bean.setLikeCount((i + 5) * 7);
bean.setNickname("非蛋不捣");
bean.setDiscoverUUID(UUID.randomUUID().toString());
bean.setContent((i + 1) + "2021年6月2日晚，华为发布了鸿蒙操作系统");
mDataList.add(bean);
}
}
@Override
public int getCount() {
return mDataList.size();
}
@Override
public Object getItem(int i) {
return mDataList.get(i);
}
@Override
public long getItemId(int i) {
return i;
}
@Override
public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
DiscoverItemHolder holder;
DiscoverBean bean = mDataList.get(i);
if (component == null) {
component = LayoutScatter.getInstance(componentContainer.getContext())
.parse(ResourceTable.Layout_provider_item_discover, null, false);
holder = new DiscoverItemHolder(component, bean);
component.setTag(holder);
} else {
holder = (DiscoverItemHolder) component.getTag();
}
holder.collectionCount.setText(bean.getCollectionCount() + "");
holder.commentCount.setText(bean.getCommentCount() + "");
holder.content.setText(bean.getContent());
holder.likeCount.setText(bean.getLikeCount() + "");
holder.nickname.setText(bean.getNickname());
return component;
}
public static class DiscoverItemHolder {
public DiscoverBean bean;
DirectionalLayout imageContainer;
Text likeCount;
Text commentCount;
Text collectionCount;
Text content;
Text nickname;
Image header;
public DiscoverItemHolder(Component component, DiscoverBean currBean) {
this.bean = currBean;
imageContainer = (DirectionalLayout) component.findComponentById(ResourceTable.Id_image_container);
likeCount = (Text) component.findComponentById(ResourceTable.Id_like_count);
collectionCount = (Text) component.findComponentById(ResourceTable.Id_collection_count);
commentCount = (Text) component.findComponentById(ResourceTable.Id_comment_count);
content = (Text) component.findComponentById(ResourceTable.Id_content);
nickname = (Text) component.findComponentById(ResourceTable.Id_text_nickname);
header = (Image) component.findComponentById(ResourceTable.Id_image_header);
initImageWidth(component);
createImage(currBean.getImageCount());
}
private void initImageWidth(Component component) {
if (onImageWidth == 0) {
onImageWidth = mImageContainerWidth;
int diliverWidth = AttrHelper.vp2px(4, imageContainer.getContext());
towImageWidth = (onImageWidth - diliverWidth) / 2;
threeImageWidth = (onImageWidth - diliverWidth * 2) / 3;
}
}
private void createImage(int imageCount) {
DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig();
layoutConfig.height = onImageWidth;
layoutConfig.width = onImageWidth;
if (imageCount == 2) {
layoutConfig.height = towImageWidth;
layoutConfig.width = towImageWidth;
} else if (imageCount >= 3) {
layoutConfig.height = threeImageWidth;
layoutConfig.width = threeImageWidth;
}
layoutConfig.weight = 1;
for (int i = 0; i < imageCount; i++) {
Image image = new Image(imageContainer.getContext());
if (i > 0) {
layoutConfig.setMarginLeft(AttrHelper.vp2px(4, imageContainer.getContext()));
}
image.setLayoutConfig(layoutConfig);
image.setScaleMode(Image.ScaleMode.CLIP_CENTER);
image.setPixelMap(i % 2 == 0 ? ResourceTable.Media_splash : ResourceTable.Media_splash_02);
imageContainer.addComponent(image);
}
}
}
}home页面信息展示的实现
package com.qiaoxg.harmony.component.provider;
import com.qiaoxg.harmony.ResourceTable;
import com.qiaoxg.harmony.bean.HomeBean;
import ohos.agp.components.*;
import java.util.ArrayList;
import java.util.List;
public class HomeProvider extends BaseItemProvider {
private List<HomeBean> mDataList = new ArrayList<>();
public HomeProvider(List<HomeBean> list) {
this.mDataList = list;
}
public void setDataList(List<HomeBean> mDataList) {
this.mDataList = mDataList;
notifyDataChanged();
}
@Override
public int getCount() {
return mDataList.size();
}
@Override
public Object getItem(int i) {
return mDataList.get(i);
}
@Override
public long getItemId(int i) {
return i;
}
@Override
public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
HomeItemHolder itemHolder;
if (component == null) {
component = LayoutScatter.getInstance(componentContainer.getContext())
.parse(ResourceTable.Layout_provider_item_home, null, false);
itemHolder = new HomeItemHolder(component);
// 将获取到的子组件信息绑定到列表项的实例中
component.setTag(itemHolder);
} else {
// 从缓存中获取到列表项实例后，直接使用绑定的子组件信息进行数据填充
itemHolder = (HomeItemHolder) component.getTag();
}
HomeBean sampleItem = mDataList.get(i);
itemHolder.title.setText(sampleItem.getTitle());
itemHolder.content.setText(sampleItem.getContent());
itemHolder.datetime.setText(sampleItem.getDateTime());
itemHolder.image.setVisibility(i % 5 == 4 ? Component.VISIBLE : Component.HIDE);
return component;
}
public static class HomeItemHolder {
private final Text title;
private final Text content;
private final Text datetime;
private final Image image;
public HomeItemHolder(Component component) {
title = (Text) component.findComponentById(ResourceTable.Id_title);
content = (Text) component.findComponentById(ResourceTable.Id_content);
datetime = (Text) component.findComponentById(ResourceTable.Id_datetime);
image = (Image) component.findComponentById(ResourceTable.Id_image);
}
}
}
1556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
