1.游玩南昌

从上一篇博客【鸿蒙】鸿蒙App应用-《校园通》开发步骤中，点击主页面中的游玩南昌，进入以下界面，整个界面的显示是有列表组件完成，每一条数据由图片，名称和简介三部分组成。

2.布局搭建

在layouot文件夹下新建xml布局文件，外层使用线性布局控制整个界面的显示，内部使用列表组件用于显示列表信息。

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><ListContainerohos:id="$+id:lc_list"ohos:height="match_parent"ohos:width="match_parent"/></DirectionalLayout>

3.初始化数据

创建AbilitySlice类，准备静态数据资源，进行加载

 private ListContainer lc_list;private int[] images={ResourceTable.Media_badashanrenjinianguan,ResourceTable.Media_hanwangfeng,ResourceTable.Media_meiling,ResourceTable.Media_xiangshangongyuan,ResourceTable.Media_xishanwanshougong,ResourceTable.Media_tengwangge};private String[] names = new String[] { "滕王阁", "八大山人纪念馆", "罕王峰", "象山森林公园", "西山万寿宫","梅岭" };private String[] briefs = new String[] { "江南三大名楼之首", "集收藏、陈列、研究、宣传为一体","青山绿水，风景多彩，盛夏气候凉爽", "避暑、休闲、疗养、度假的最佳场所", "江南著名道教宫观和游览胜地","山势嵯峨，层峦叠翠，四时秀色，气候宜人" };private List<YWNN> ywnns=new ArrayList<>();private YWNNListAdapter adapter;private void initDate() {for (int i = 0; i < images.length; i++) {YWNN ywnn=new YWNN(images[i],names[i],briefs[i]);ywnns.add(ywnn);}}

搭建子布局xml文件，子布局用于控制列表中每一项的显示格式，组件的摆放结构，根据效果图的显示，每一项都是左边一张图片，右边为名称和简介上下摆放。

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="100fp"ohos:width="match_parent"ohos:margin="10fp"ohos:alignment="vertical_center"ohos:orientation="horizontal"><Imageohos:id="$+id:iv_ywnn_image"ohos:weight="1"ohos:height="match_parent"ohos:width="match_content"ohos:image_src="$media:meiling"ohos:scale_mode="stretch"/><DirectionalLayoutohos:height="match_parent"ohos:width="match_content"ohos:left_margin="10fp"ohos:weight="2"ohos:orientation="vertical"><Textohos:id="$+id:tv_ywnn_name"ohos:height="match_content"ohos:width="match_parent"ohos:text="AAA"ohos:text_size="25fp"ohos:weight="1"/><Textohos:id="$+id:tv_ywnn_info"ohos:height="match_content"ohos:width="match_parent"ohos:text_size="20fp"ohos:text_color="#00f"ohos:text="BBB"ohos:weight="1"/></DirectionalLayout></DirectionalLayout>

创建列表适配器继承至BaseItemProvider类，实现未实现的方法，将加载子布局使用列表缓存技术根据数据量对子布局进行加工

package com.example.campusproject.adapter;import com.example.campusproject.ResourceTable;
import com.example.campusproject.entity.YWNN;
import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.*;import java.util.List;public class YWNNListAdapter extends BaseItemProvider {private AbilitySlice context;private List<YWNN> ywnns;public YWNNListAdapter(AbilitySlice context, List<YWNN> ywnns) {this.context = context;this.ywnns = ywnns;}@Overridepublic int getCount() {return ywnns.size();}@Overridepublic Object getItem(int i) {return ywnns.get(i);}@Overridepublic long getItemId(int i) {return i;}private class Holder{Image image;Text name,info;public Holder(Component component) {image= (Image) component.findComponentById(ResourceTable.Id_iv_ywnn_image);name= (Text) component.findComponentById(ResourceTable.Id_tv_ywnn_name);info= (Text) component.findComponentById(ResourceTable.Id_tv_ywnn_info);}}@Overridepublic Component getComponent(int i, Component component, ComponentContainer componentContainer) {//定义布局对象Component pc;//定义Holder对象Holder holder;//判断缓存布局是否为空if (component==null){//缓存为空，说明未加载过列表，需要手动加载子布局pc=LayoutScatter.getInstance(context).parse(ResourceTable.Layout_ability_ywnn_item,null,false);holder=new Holder(pc);pc.setTag(holder);}else {//已经缓存过，则不需要重复加载，直接使用缓存布局即可pc=component;holder= (Holder) pc.getTag();}holder.name.setText(ywnns.get(i).getName());holder.info.setText(ywnns.get(i).getInfo());holder.image.setPixelMap(ywnns.get(i).getImage());return pc;}
}

在AbilitySlice类中，重写onStart方法，加载列表布局文件，将加工后的适配器对象显示在列表组件上，并给列表组件添加单项点击事件，实现ListContainer.ItemClickedListener接口，点击任何一项，通过intent保存被点击的项数的下标和当前项的风景图片，跳转至列表详情界面

 @Overrideprotected void onStart(Intent intent) {super.onStart(intent);this.setUIContent(ResourceTable.Layout_ability_ywnn);lc_list= (ListContainer) this.findComponentById(ResourceTable.Id_lc_list);initDate();adapter=new YWNNListAdapter(this,ywnns);lc_list.setItemProvider(adapter);lc_list.setItemClickedListener(new ListContainer.ItemClickedListener() {@Overridepublic void onItemClicked(ListContainer listContainer, Component component, int i, long l) {intent.setParam("image",images[i]);intent.setParam("index",i);present(new YWNNDetailsAbilitySlice(), intent);}});}

4.完整AbilitySlice代码

package com.example.campusproject.slice;import com.example.campusproject.ResourceTable;
import com.example.campusproject.adapter.YWNNListAdapter;
import com.example.campusproject.entity.YWNN;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.ListContainer;
import ohos.ivihardware.advancedmanager.IntNoZoneSubscribeCallback;import java.util.ArrayList;
import java.util.List;public class YWNNAbilitySlice extends AbilitySlice {private ListContainer lc_list;private int[] images={ResourceTable.Media_badashanrenjinianguan,ResourceTable.Media_hanwangfeng,ResourceTable.Media_meiling,ResourceTable.Media_xiangshangongyuan,ResourceTable.Media_xishanwanshougong,ResourceTable.Media_tengwangge};private String[] names = new String[] { "滕王阁", "八大山人纪念馆", "罕王峰", "象山森林公园", "西山万寿宫","梅岭" };private String[] briefs = new String[] { "江南三大名楼之首", "集收藏、陈列、研究、宣传为一体","青山绿水，风景多彩，盛夏气候凉爽", "避暑、休闲、疗养、度假的最佳场所", "江南著名道教宫观和游览胜地","山势嵯峨，层峦叠翠，四时秀色，气候宜人" };private List<YWNN> ywnns=new ArrayList<>();private YWNNListAdapter adapter;@Overrideprotected void onStart(Intent intent) {super.onStart(intent);this.setUIContent(ResourceTable.Layout_ability_ywnn);lc_list= (ListContainer) this.findComponentById(ResourceTable.Id_lc_list);initDate();adapter=new YWNNListAdapter(this,ywnns);lc_list.setItemProvider(adapter);lc_list.setItemClickedListener(new ListContainer.ItemClickedListener() {@Overridepublic void onItemClicked(ListContainer listContainer, Component component, int i, long l) {intent.setParam("image",images[i]);intent.setParam("index",i);present(new YWNNDetailsAbilitySlice(), intent);}});}private void initDate() {for (int i = 0; i < images.length; i++) {YWNN ywnn=new YWNN(images[i],names[i],briefs[i]);ywnns.add(ywnn);}}
}

5.列表详情页布局

搭建详情页xml布局文件

详情页由两部分组成，显示风景图片，下部分显示风景点的历史介绍，代码如下

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_content"ohos:width="match_parent"ohos:background_element="#000"ohos:orientation="vertical"><Imageohos:id="$+id:iv_ywnn_details"ohos:height="200fp"ohos:width="match_parent"ohos:scale_mode="stretch"/><Textohos:id="$+id:tv_ywnn_details"ohos:height="match_content"ohos:width="match_parent"ohos:scrollable="true"ohos:text_color="#0f0"ohos:multiple_lines="true"ohos:text_size="25fp"/></DirectionalLayout>

6.列表详情页AbilitySlice界面

从intent获得列表页面传递过来的图片数据和下标，展示对应的风景点历史介绍，并实现文本滚动效果

package com.example.campusproject.slice;import com.example.campusproject.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Image;
import ohos.agp.components.Text;public class YWNNDetailsAbilitySlice extends AbilitySlice {private Image image;private Text text;String[] contents = new String[] {"\t\t滕王阁位于江西省南昌市沿江路赣江与抚河故道交汇处与黄鹤楼、岳阳楼并称为江南三大名楼。1991年被国家旅游局列为\"中国旅游胜地四十佳\"提名单位；2001年1月被国家旅游局授予首批\"国家AAAA级旅游区（点）\"称号，2004年被国务院批准为国家重点风景名胜区。重建后的滕王阁已成了南昌，也是江西省的一处重要的旅游景点。"+ "\n\t\t\"江南三大名楼\"之一的腾王阁，屡毁屡建达二十八次之多。新落成的腾王阁，较一千三百多年前的建筑更嵯峨雄壮，充分表现\"飞阁流丹，下临无地\"的气势。投资建造了\"马当神\"号豪华游艇供游客畅游赣江；建造了滕王阁宾馆、贵宾宴会厅、仿古展演厅、名人字画厅等。登楼眺望，南昌景致尽收眼底。"+ "\n\t\t滕王阁之所以享有巨大名声，很大程度上归功于一篇脍炙人口的散 文《滕王阁序》。传说当时诗人王勃探亲路过南昌，正赶上阎都督重修 滕王阁后，在阁上大宴宾客，王勃当场一气写下这篇令在座宾客赞服的 《秋日登洪府滕王阁饯别序》（即《滕王阁序》），王勃作序后，又有王仲舒作记，王绪作赋，历史上称为\"三王文章\"。从此，序以阁而闻 名，阁以序而著称。1300多年来，滕五阁历经兴废28次，最后在1926年 被北洋军阀邓如琢部纵火烧毁。"+ "\n\t\t苏东坡手书的千古名篇 《滕王阁序》。《滕王阁序》中 最著名的两句是\"落霞与孤鹜齐飞，秋水共长天一色\"。这已作为主阁 正门的巨联。暮秋之后，鄱阳湖区将有成千上万只侯鸟飞临，那将构成 一幅活生生的\"落霞与孤鹜齐飞，秋水共长天一色\"，成为滕王阁的 一大胜景。","\t\t八大山人纪念馆地处南昌市南郊十五华里的青云谱道院内，青云谱道院是一座具有江南地方特色的园林。园林之南部、西部面临宽阔的梅湖，泊岸曲折，水明如镜，独揽湖山田园之美。青云谱园内，苍木翠绿，掩映着殿宇云阁，丹桂碧池，环抱住凉亭月楼，逸静幽雅，宛若仙境。\n\t\t园中现存有关帝、吕祖、许祖三官、斗姆、峤园等六座殿堂，中间以天地相融，东西接庑殿四座，中部鹤巢二间，抬梁式构架，悬山顶、青砖灰瓦的粉墙，精而不华，青而不饰，古朴典雅，风格独具。 ","\t\t梦山胜迹,原名罕王峰，是南昌市一个较大的旅游景区，地处市郊30公里，景区面积15平方公里。青山绿水，风景多彩，盛夏气候凉爽。景区有20多个风景点，是一个美丽的旅游风景胜地和避暑山庄。\n\t\t据历史的记载，三国蜀炎兴元年（263年），蜀汉为晋所灭，昭烈帝刘备之孙刘护，携家从四川来到这里，见山势险要，便傍山结寨距守。其母罗氏，见天下大势不可逆转，劝子归晋，封为广惠王，母封协庆夫人。太康元年（280年），晋灭东吴。东吴余党败走西山藩源，与山贼勾结，拥众万余，焚烧荡空，民受其害。是年九月，刘护率军破贼，因功封罕王，赐所住山峰为罕王峰。刘护之母常感人人梦，俗称\"梦娘娘\"，民间历来有人求梦，遂又称梦山。","\t\t位于赣江中下游的鄱阳湖之滨，与著名的旅游胜地庐山隔湖相望，与世界候鸟保护区鄱阳湖紧连一体，紧紧接壤南昌昌北机场，京九铁路、昌九高速公路从公园擦肩而过，乐昌水泥公路贯通公园全境，处于庐山、鄱阳湖候鸟观赏区、南昌滕王阁旅游带之间，地理位置优越，交通条件便利。\n\t\t公园总面积2.5万亩，森林面积1.8万亩，在茂密葱葱的森林里，每年的3-10月间，相继都有70-80羽鹭鸟在林间栖息、繁衍，不同种类的鹭鸟，分片栖息，麻鹭灰鹭在东片林，大、中、小白鹭在西片林，绿色的池鹭与黄色的苹鹭在南片林，鹭鸟飞时遮天蔽地、站落婷婷玉立、远观群星点点、近望美丽可爱，在江南形成了一大奇观，是南昌市大十景点之一，是全国最大的鹭鸟主要的生息之地，据有关野生动物学者及鸟类专家考证为中国之最。","\t\t西山万寿宫是纪念许真君而修建的一座宫殿。坐落于距南昌市西南三十公里的西山逍遥山下。道教认为除了凡人居住的世界外，还有神仙的处所三十六洞天，七十二福地。许真君栖身修炼的西山则为第四十福地。因他在此仙逝，故又称\"飞升福地\"。公元1520年（明正德十五年），皇帝题额《妙济万寿宫》对宫内建筑作了重大修葺。至清代增建关帝阁、万寿宫门、这时是万寿宫极盛时期，占地三万一千平方米。宫门之内，正殿琉璃为瓦，重檐画栋，金碧辉煌，气势宏伟。绣金帷里，真君塑像端坐中央，坐像头部为黄铜铸成，重500斤。12真人分列两旁，吴猛、郭璞站立坛前。高明殿等三殿之前，6株参天古柏苍老遒劲，四季常青，相传最大一株为许真君亲手所植。宫门左侧的八角井，相传当年许真君铸铁为柱，链钩地脉，以绝水患。宫外还有大量的辅助建筑，如接仙台、云会常、冲升阁等形成一个以万寿宫为中心的古建筑群。远眺西山万寿宫，万顷绿海中，琉璃瓦黄绿相间，绚丽多彩，飞檐串串铜铃，金光闪烁，层层斑澜的宫顶，突兀鹤立，天地氤氲、万物化淳，疑是天上宫阙。铁铸大吊针，重二吨余，入夜钟声宏浑悠扬，能传十里之遥。 农历正有二十七日是许真君诞上辰，为每年小朝；八月仙逝日为朝颧高潮，各地信民薰沐斋戒纷纷前来进香，成千上万的进香者比肩接踵、张袂成荫。他们进入宫后一步一跪拜，到殿前陈敬贡品，晋谒仙颜，祈祷自己的心愿。焚香炉前，鞭炮声不绝不耳，香火明烛通宵达旦，炉烟缥缈，钟声悠扬，一派仙家气氛。","\t\t梅岭风景区位于南昌市西郊。山势嵯峨，层峦叠翠，四时秀色，气候宜人。素有\"小庐山\"之称。 梅岭原名飞鸿山，早在汉朝初年，就辟有驿道。西汉末年，南昌县尉梅福为抵制王莽专政,退隐西郊飞鸿山。后人纪念他的高风亮节，在岭上建梅仙坛，岭下建梅仙观，改飞鸿山为梅岭。唐朝以来，有张九龄、张商英、周必大、王安石、张位五位丞相，欧阳修、曾巩、黄庭坚、陈师道、汤显祖等文学家，岳飞等武将，慕名而来，留下了许多名诗佳作和文人景观。\n\t\t梅岭是佛、道两教的圣地之一，寺庙观坛曾多达136处。道书称此为\"第十二洞天\"。西山八大名刹之首的翟岩寺，原有一尊1.6丈高的曾居云堂寺，8尺高的铜莲台和铜瓶、铜香炉、千僧锅。原道教名刹太平观旁有一株\"千年银杏\"，树高30米，胸围7.5米。位居山巅的紫阳宫，石室尚存，东汉开国元勋邓禹曾到此，旁有邓仙洞和真君墓。梅岭上百座山峰，各具特色。梅岭头翠竹生幽，狮子峰险峻难攀，紫阳山秀丽多姿，罗汉岭利于观景。梅岭有许多古树名木，尤以\"盆景樟\"、\"石中兰\"、\"树生竹\"为奇，被誉为\"梅岭三绝\"。" };@Overrideprotected void onStart(Intent intent) {super.onStart(intent);this.setUIContent(ResourceTable.Layout_ability_ywnndetails);image= (Image) this.findComponentById(ResourceTable.Id_iv_ywnn_details);text= (Text) this.findComponentById(ResourceTable.Id_tv_ywnn_details);image.setPixelMap(intent.getIntParam("image",ResourceTable.Media_hw));text.setText(contents[intent.getIntParam("index",0)]);}
}

7.列表详情页界面效果

【鸿蒙】《校园通》--游玩南昌模块相关推荐

android 游玩南昌模块,模块玩起来：Android 7.X可用的Xposed框架卡刷包放出
感谢IT之家网友ZeroSimple的线索投递 7月20日消息自适用于Android 7.X的Xposed框架现身Github以来,ROM开发者以及喜欢折腾的安卓玩家纷纷尝试编译和使用,毕竟Andr ...
【鸿蒙】鸿蒙App应用-《校园通》开发步骤
1. 介绍 <校园通>软件很多系统中都有,android,ios,平板电脑等,该软件主要用于学校里的环境,学生,老师之间的沟通,方便学生的行动. 实现思路: 创建一个Java语言的鸿蒙项目 ...
【鸿蒙】《校园通》--校园生活模块
1.校园生活从上一篇博客[鸿蒙]鸿蒙App应用-<校园通>开发步骤中,点击主页面中的校园生活,进入以下界面,如图一图1 1.基本步骤 1.创建布局在layout文件夹下创建布局文件, ...
【鸿蒙】《校园通》--号码百事通模块
号码百事通从上一篇博客[鸿蒙]鸿蒙App应用-<校园通>开发步骤中,点击主页面中的号码百事通,进入以下界面,整个界面的显示是由二级列表展示. 1.功能效果展示 2.xml布局搭建该功能 ...
实习项目-校园通简介
毕业实习我所在的部门是研发部,参与到公司一个叫"校园通"项目开发中. "校园通"这个项目由两个后台和四个模块加一个即时通信系统组成.两个后台为中央后台和学校后台 ...
基于Android的校园通的开题报告
源码下载地址: 毕业设计-基于Android的校园通的开题报告-Android文档类资源-CSDN下载一. 本选题的研究意义和应用价值当今是一个移动互联网的时代,信息科技的发展日新月异,各行各业都 ...
android校园通代码,Android校园通软件的设计与实现.doc
4 Android校园通软件的设计与实现 4.1 研究目标 (1)了解Android应用程序的设计和开发过程: (2) 使用多种组件进行Android 平台校园资讯软件的开发. 本软件是基于Eclip ...
校园通课表功能android,基于Android的“科师校园通”移动应用终端的设计与实现参考.doc...
基于Android的"科师校园通"移动应用终端的设计与实现参考基于Android的"科师校园通"移动应用终端的设计与实现 XXX (河北科技师范学院院专业班 ...
广和通L610 4G模块MQTT连接阿里云物理模型
广和通L610 4G模块MQTT连接阿里云物理模型我采用的是广和通的L610模块成功连接,先激活设备,最重要的是三元组. AT+CLOUDAUTH="Productkey",&q ...

【鸿蒙】《校园通》--游玩南昌模块