鸿蒙应用开发,鸿蒙应用开发-DevEco Studio 模板体验（五）

详细步骤可查看下面三个视频：

显示效果：

可以左右滑动

布局中的代码<?xml version="1.0" encoding="utf-8"?>

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_content"

ohos:width="match_parent"

ohos:background_element="$graphic:main_ability_title_background"

ohos:orientation="vertical">

ohos:id="$id:app_bar"

ohos:height="match_content"

ohos:width="match_parent"

ohos:layout="$layout:app_bar_layout"/>

ohos:id="$+id:page_view"

ohos:height="match_content"

ohos:width="match_parent"/>

ohos:id="$+id:page_indicator"

ohos:height="$float:page_indicator_height"

ohos:width="match_parent"

ohos:bottom_margin="$float:margin_page_slider_indicator"

ohos:layout_alignment="center"

ohos:top_margin="$float:margin_page_slider_indicator"/>

ohos:id="$+id:list_view"

ohos:height="match_content"

ohos:width="match_parent"

ohos:background_element="$graphic:item_background"

ohos:top_margin="$float:breadth_common"/>

显示效果：

点击其中任何的一条信息都可以进入下一个页面

<?xml version="1.0" encoding="utf-8"?>

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:id="$+id:parent_layout"

ohos:height="match_parent"

ohos:width="match_parent">

ohos:height="match_parent"

ohos:width="match_parent">

ohos:height="match_content"

ohos:width="match_parent"

ohos:bottom_padding="70vp"

ohos:orientation="vertical">

ohos:height="match_content"

ohos:width="match_parent"

ohos:alignment="vertical_center"

ohos:orientation="horizontal">

ohos:id="$+id:image"

ohos:height="50vp"

ohos:width="50vp"

ohos:image_src="$media:huawei"

ohos:layout_alignment="left"

ohos:left_margin="10vp"

ohos:scale_mode="stretch"/>

ohos:id="$+id:title_icon"

ohos:height="match_content"

ohos:width="match_content"

ohos:text="$string:title"

ohos:text_size="20fp"

ohos:weight="1"/>

ohos:height="match_content"

ohos:width="match_content"

ohos:right_margin="10vp"

ohos:text="$string:read"

ohos:text_size="10fp"/>

ohos:height="match_content"

ohos:width="match_content"

ohos:right_margin="20vp"

ohos:text="$string:like"

ohos:text_size="10fp"/>

ohos:id="$+id:title_text"

ohos:height="match_content"

ohos:width="match_parent"

ohos:left_margin="20vp"

ohos:max_text_lines="4"

ohos:multiple_lines="true"

ohos:right_margin="20vp"

ohos:text="$string:original_title"

ohos:text_color="#000000"

ohos:text_size="18fp"

ohos:top_margin="10vp"/>

ohos:id="$+id:title_content"

ohos:height="match_content"

ohos:width="match_parent"

ohos:left_margin="20vp"

ohos:multiple_lines="true"

ohos:right_margin="20vp"

ohos:text_alignment="center_horizontal"

ohos:text_color="#708090"

ohos:text_size="16fp"

ohos:top_margin="5vp"/>

ohos:height="match_content"

ohos:width="match_parent"

ohos:orientation="horizontal">

ohos:id="$+id:image_content1"

ohos:height="100vp"

ohos:width="0vp"

ohos:image_src="$media:content"

ohos:layout_alignment="center"

ohos:left_margin="20vp"

ohos:right_margin="2vp"

ohos:top_margin="10vp"

ohos:weight="1"/>

ohos:id="$+id:image_content2"

ohos:height="100vp"

ohos:width="0vp"

ohos:image_src="$media:news_big_5g"

ohos:layout_alignment="center"

ohos:left_margin="10vp"

ohos:right_margin="2vp"

ohos:top_margin="10vp"

ohos:weight="1"/>

ohos:id="$+id:image_content3"

ohos:height="100vp"

ohos:width="0vp"

ohos:image_src="$media:content_news"

ohos:layout_alignment="center"

ohos:left_margin="2vp"

ohos:right_margin="20vp"

ohos:top_margin="10vp"

ohos:weight="1"/>

ohos:height="0.5vp"

ohos:width="match_parent"

ohos:above="$+id:bottom_layout"

ohos:background_element="#EAEAEC"

/>

ohos:id="$+id:bottom_layout"

ohos:height="50vp"

ohos:width="match_parent"

ohos:align_parent_bottom="true"

ohos:alignment="vertical_center"

ohos:background_element="#ffffff"

ohos:left_padding="20vp"

ohos:orientation="horizontal"

ohos:right_padding="20vp"

>

ohos:id="$+id:text_file"

ohos:height="30vp"

ohos:width="160vp"

ohos:background_element="$graphic:corner_bg_comment"

ohos:hint="$string:comment"

ohos:left_padding="5vp"

ohos:right_padding="10vp"

ohos:text_alignment="vertical_center"

ohos:text_size="15vp"/>

ohos:id="$+id:button1"

ohos:height="20vp"

ohos:width="20vp"

ohos:image_src="$media:message_icon"

ohos:left_margin="20vp"/>

ohos:id="$+id:button2"

ohos:height="20vp"

ohos:width="20vp"

ohos:image_src="$media:collect_icon"

ohos:left_margin="20vp"/>

ohos:id="$+id:button3"

ohos:height="20vp"

ohos:width="20vp"

ohos:image_src="$media:like_icon"

ohos:left_margin="20vp"/>

ohos:id="$+id:button4"

ohos:height="20vp"

ohos:width="20vp"

ohos:image_src="$media:share_icon"

ohos:left_margin="20vp"/>

显示效果：

放置一些内容 可以上下滑动

布局中的代码<?xml version="1.0" encoding="utf-8"?>

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="$float:list_item_height"

ohos:width="match_parent"

ohos:bottom_padding="$float:list_item_bottom_padding"

ohos:top_padding="$float:list_item_top_padding"

>

ohos:id="$+id:head_image_layout"

ohos:height="match_content"

ohos:width="match_content"

ohos:right_margin="$float:list_item_profile_picture_right_margin"

ohos:vertical_center="true"

>

ohos:id="$+id:list_left_image"

ohos:height="match_content"

ohos:width="match_content"

ohos:image_src="$media:ori_star"

/>

ohos:id="$+id:left_layout"

ohos:height="match_content"

ohos:width="match_content"

ohos:bottom_margin="$float:list_item_double_line_bottom_margin"

ohos:end_of="$id:head_image_layout"

ohos:orientation="vertical"

ohos:vertical_center="true"

>

ohos:id="$+id:list_main_text"

ohos:height="match_content"

ohos:width="match_content"

ohos:alpha="0.9"

ohos:multiple_lines="true"

ohos:text="$string:Double_line_list_item"

ohos:text_alignment="vertical_center|left"

ohos:text_size="$float:list_item_main_text_size"

/>

ohos:id="$+id:list_aux_text"

ohos:height="match_content"

ohos:width="match_content"

ohos:alpha="0.6"

ohos:multiple_lines="true"

ohos:text="$string:Auxiliary_text"

ohos:text_alignment="vertical_center|left"

ohos:text_size="$float:list_item_aux_text_size"

/>

ohos:id="$+id:right_layout"

ohos:height="match_content"

ohos:width="match_parent"

ohos:alignment="right"

ohos:end_of="$id:left_layout"

ohos:orientation="horizontal"

ohos:vertical_center="true"

>

ohos:id="$+id:list_right_text"

ohos:height="match_content"

ohos:width="match_content"

ohos:alpha="0.6"

ohos:multiple_lines="true"

ohos:right_margin="4vp"

ohos:text="$string:Right_text"

ohos:text_size="$float:list_item_right_text_size"

/>

ohos:id="$+id:list_right_image"

ohos:height="match_content"

ohos:width="match_content"

ohos:image_src="$media:right_arrow"

ohos:layout_alignment="vertical_center"

/>

ohos:height="$float:list_item_divider_height"

ohos:width="match_parent"

ohos:alpha="0.3"

ohos:background_element="$graphic:item_divider"

ohos:below="$id:left_layout"

ohos:end_of="$id:head_image_layout"

/>

完整代码地址：