返回发烧友论坛
发 帖  

[文章]基于HarmonyOS Java UI，实现一个可以定时刷新文字和图片的电影推荐卡片

早知
2021-09-14 14:55:35
阅读量0
HarmonyOS
0
1
1. 介绍      
本篇codelab主要由2*2和2*4布局的电影卡片、主页（电影排行榜单）和电影详情页组成，功能包括卡片的定时刷新和相关卡片的创建，删除，主动刷新相关回调函数的使用以及事件的控制，还介绍了电影首页的布局以及如何携带参数跳转电影详情页，最后介绍了电影详情页的布局以及电影剧情介绍的展开和收起。效果如下图：


最终效果预览
我们最终会构建一个基于Java代码的电影卡片手机客户端。效果如下图所示。本篇Codelab我们将会一起完成这个客户端，其中包括：
  • 页面未初始化布局
  • 页面初始化布局
  • 应用初始化
  • 卡片的刷新


   
2. 搭建HarmonyOS环境
我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。
  • 安装DevEco Studio，详情请参考下载和安装软件。
  • 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：
    • 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
    • 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。
  • 开发者可以参考以下链接，完成设备调试的相关配置：
    • 使用真机进行调试
    • 使用模拟器进行调试
   
3. 代码结构解读      
本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在9 参考中提供下载方式，接下来我们会用一小节来讲解整个工程的代码结构：
  • annotation包：Bind是一个自定义注解，用来初始化页面中的组件。
  • database包：存放对象关系数据库主要组件，具体使用方法可考官方文档，对象关系映射数据库
  • provider包： 主要作用为高效传递和使用相关数据。
  • slice包：MainAbilitySlice是主要代码逻辑实现的一个类，同时对应我们的电影首页，MoviesDetailAbilitySlice对应电影详情页。
  • util包：存放所有封装好的公共方法，如LogUtils等。
  • resources目录：存放工程使用到的资源文件，其中resourcesbaselayout下存放xml布局文件；resourcesbasemedia下存放图片资源，resources/rawfile存放电影说明文件资源。
  • config.json：工程相关配置文件。

  
4. 页面布局      
卡片布局
卡片布局分为2*2和2*4两种布局，由于2*4中包含2*2的元素，且包含更多的功能，下面将以2*4布局卡片来介绍。

2*4布局对应的xml文件名为form_list_pattern_form_card_2_4.xml，可分为上下两部分，其中上部分显示标题，下部分用于展示电影的图片及说明。当手机重启之后不点击应用和卡片，卡片为未初始化状态。效果图如下：


标题部分由两个Text组件组成，分别作为标题和完整榜单的点击事件，示例代码如下：
  1. <DependentLayout
  2.         ohos:height="40vp"
  3.         ohos:width="match_parent"
  4.         ohos:orientation="horizontal"
  5.         >
  6.         <Text
  7.                 ohos:id="$+id:title"
  8.                 ohos:height="match_parent"
  9.                 ohos:width="100vp"
  10.                 ohos:end_margin="12vp"
  11.                 ohos:start_margin="44vp"
  12.                 ohos:text="$string:title"
  13.                 ohos:text_color="#E5000000"
  14.                 ohos:text_size="16fp"
  15.                 ohos:text_weight="500"
  16.                 ohos:bottom_margin="5vp"
  17.                 ohos:top_margin="10vp"/>

  19.         <Text
  20.                 ohos:id="$+id:rankings"
  21.                 ohos:height="match_parent"
  22.                 ohos:width="100vp"
  23.                 ohos:align_parent_end="true"
  24.                 ohos:right_margin="35vp"
  25.                 ohos:text="$string:all_rankings"
  26.                 ohos:text_color="#E5000000"
  27.                 ohos:text_size="16fp"
  28.                 ohos:text_alignment="center"
  29.                 ohos:background_element="$graphic:background_button"
  30.                 ohos:bottom_margin="5vp"
  31.                 ohos:text_weight="500"
  32.                 ohos:top_margin="10vp"/>
  33. </DependentLayout>
复制代码
当手机重启，应用未启动时卡片给出提示用户点击卡片刷新数据，布局对应xml文件如下：
  1. <DirectionalLayout
  2.         ohos:id="$+id:card4_hints"
  3.         ohos:height="match_content"
  4.         ohos:width="match_parent"
  5.         ohos:center_in_parent="true"
  6.         ohos:visibility="visible">
  7.         <Text
  8.                 ohos:height="match_content"
  9.                 ohos:width="match_parent"
  10.                 ohos:text_alignment="center"
  11.                 ohos:text="$string:init_data">
  12.         </Text>
  13. </DirectionalLayout>
复制代码
当卡片数据刷新后，布局对应xml文件如下：
  1. <DirectionalLayout
  2.         ohos:id="$+id:card4_content"
  3.         ohos:height="match_content"
  4.         ohos:width="match_parent"
  5.         ohos:align_parent_bottom="true"
  6.         ohos:bottom_margin="12vp"
  7.         ohos:end_margin="12vp"
  8.         ohos:orientation="horizontal"
  9.         ohos:start_margin="24vp"
  10.         ohos:top_margin="12vp"
  11.         ohos:visibility="invisible">
  12.          
  13.         ...
  14.          
  15. </DirectionalLayout>
复制代码
卡片内容区域分为左右两个布局，用于展示电影信息，其中包含电影的图片，电影名以及介绍，对应xml文件如下：
  1. <DirectionalLayout
  2.         ohos:id="$+id:movie_bottom_2x4"
  3.         ohos:height="match_parent"
  4.         ohos:width="0vp"
  5.         ohos:left_margin="5vp"
  6.         ohos:orientation="vertical"
  7.         ohos:weight="4">
  8.          
  9.         <DependentLayout
  10.                 ohos:height="70vp"
  11.                 ohos:width="130vp">
  12.                  
  13.                 <Image
  14.                         ohos:id="$+id:movie_bottom_img_2x4"
  15.                         ohos:height="match_parent"
  16.                         ohos:width="match_parent"
  17.                         ohos:scale_mode="stretch"
  18.                         />
  19.         </DependentLayout>

  21.         <DirectionalLayout
  22.                 ohos:height="match_content"
  23.                 ohos:width="match_content"
  24.                 ohos:layout_alignment="vertical_center"
  25.                 ohos:left_margin="10vp"
  26.                 ohos:orientation="vertical">

  28.                 <Text
  29.                         ohos:id="$+id:movie_bottom_title_2x4"
  30.                         ohos:height="match_content"
  31.                         ohos:width="match_parent"
  32.                         ohos:text_color="#E5000000"
  33.                         ohos:text_size="14fp"
  34.                         ohos:text_weight="500"
  35.                         ohos:truncation_mode="ellipsis_at_end"/>

  37.                 <Text
  38.                         ohos:id="$+id:movie_bottom_introduction_2x4"
  39.                         ohos:height="match_content"
  40.                         ohos:width="match_parent"
  41.                         ohos:text_color="#99000000"
  42.                         ohos:text_size="10fp"
  43.                         ohos:text_weight="400"
  44.                         ohos:top_margin="2vp"
  45.                         ohos:truncation_mode="ellipsis_at_end"/>
  46.         </DirectionalLayout>
  47. </DirectionalLayout>
复制代码
电影首页布局
对应的xml文件名为ability_main.xml，可分为上下2大块，其中上半部分显示标题及说明，由DirectionalLayout布局和两个Text组件组成；下半部分展示电影排行榜由ScrollView和ListContainer组件组成。
效果图如下：

上半部分示例代码如下：
  1. <DirectionalLayout
  2.         ohos:height="200vp"
  3.         ohos:width="match_parent"
  4.         ohos:background_element="$media:movies_bg"
  5.         ohos:scrollbar_background_color="#FF262525"
  6.         ohos:orientation="vertical">

  8.         <Text
  9.                 ohos:height="50vp"
  10.                 ohos:width="match_content"
  11.                 ohos:text_size="25fp"
  12.                 ohos:layout_alignment="center"
  13.                 ohos:text_alignment="center"
  14.                 ohos:text_color="#FF7E7A7A"
  15.                 ohos:text="$string:movie_rank"/>  

  17.         <Text
  18.                 ohos:height="match_content"
  19.                 ohos:width="match_content"
  20.                 ohos:text_size="15fp"
  21.                 ohos:layout_alignment="center"
  22.                 ohos:multiple_lines="true"
  23.                 ohos:max_text_lines="3"
  24.                 ohos:text_color="#FF0FE570"
  25.                 ohos:text="$string:movie_rank_detail"/>  
  26. </DirectionalLayout>
复制代码
中部滑动区域对应的xml文件如下：

  1. <ScrollView
  2.         ohos:height="match_parent"
  3.         ohos:width="match_parent">
  4. <ListContainer
  5.         ohos:id="$+id:movies_container"
  6.         ohos:width="match_parent"
  7.         ohos:height="match_parent"/>
  8. </ScrollView>
复制代码
用于ListContainer的item(item_movies_layout.xml)示例代码如下：
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="110vp"
  5.     ohos:width="match_parent"
  6.     ohos:orientation="vertical">

  8.     <DirectionalLayout
  9.         ohos:height="109.5vp"
  10.         ohos:width="match_parent"
  11.         ohos:orientation="horizontal"
  12.         ohos:padding="10vp">

  14.         <!--排名序号-->
  15.         <Text
  16.             ohos:id="$+id:item_movies_id"
  17.             ohos:height="match_content"
  18.             ohos:width="8vp"
  19.             ohos:layout_alignment="center"
  20.             ohos:left_margin="15vp"
  21.             ohos:right_margin="20vp"
  22.             ohos:text_alignment="center"
  23.             ohos:text_color="red"
  24.             ohos:text_size="18vp"
  25.             ohos:text_weight="30000"
  26.             />

  28.         <!--电影图片-->

  30.         <Image
  31.             ohos:id="$+id:item_movies_image"
  32.             ohos:height="110vp"
  33.             ohos:width="110vp"
  34.             ohos:clip_alignment="center"
  35.             ohos:layout_alignment="center"
  36.             ohos:scale_mode="stretch"
  37.             />
  38.         <!--中间的-->
  39.         <DirectionalLayout
  40.             ohos:height="match_parent"
  41.             ohos:width="150vp"
  42.             ohos:orientation="vertical">

  44.             <Text
  45.                 ohos:id="$+id:item_movies_title"
  46.                 ohos:height="match_content"
  47.                 ohos:width="match_content"
  48.                 ohos:left_margin="10vp"
  49.                 ohos:text_size="18vp"
  50.                 />

  52.             <DirectionalLayout
  53.                 ohos:height="match_content"
  54.                 ohos:width="match_content"
  55.                 ohos:orientation="horizontal"
  56.                 ohos:top_margin="5vp">

  58.                 <Image
  59.                     ohos:height="12vp"
  60.                     ohos:width="12vp"
  61.                     ohos:background_element="$media:rating"
  62.                     ohos:left_margin="10vp"/>

  64.                 <Image
  65.                     ohos:height="12vp"
  66.                     ohos:width="12vp"
  67.                     ohos:background_element="$media:rating"/>

  69.                 <Image
  70.                     ohos:height="12vp"
  71.                     ohos:width="12vp"
  72.                     ohos:background_element="$media:rating"/>

  74.                 <Image
  75.                     ohos:height="12vp"
  76.                     ohos:width="12vp"
  77.                     ohos:background_element="$media:rating"/>

  79.                 <Image
  80.                     ohos:height="12vp"
  81.                     ohos:width="12vp"
  82.                     ohos:background_element="$media:rating1"/>

  84.                 <Text
  85.                     ohos:id="$+id:item_movies_rating"
  86.                     ohos:height="match_content"
  87.                     ohos:width="200vp"
  88.                     ohos:left_margin="10vp"
  89.                     ohos:text_color="#FF9800"
  90.                     ohos:text_size="12vp"
  91.                     ohos:weight="3"
  92.                     />
  93.             </DirectionalLayout>

  95.             <Text
  96.                 ohos:id="$+id:item_movies_type"
  97.                 ohos:height="match_content"
  98.                 ohos:width="match_content"
  99.                 ohos:left_margin="10vp"
  100.                 ohos:text_color="#FF81807E"
  101.                 ohos:text_size="12vp"
  102.                 ohos:weight="3"
  103.                 />

  105.         </DirectionalLayout>

  107.         <!--想看-->
  108.         <DirectionalLayout
  109.             ohos:height="match_parent"
  110.             ohos:width="50vp"
  111.             ohos:left_margin="5vp"
  112.             ohos:orientation="vertical">

  114.             <Image
  115.                 ohos:height="30vp"
  116.                 ohos:width="30vp"
  117.                 ohos:background_element="$media:like"/>

  119.             <Text
  120.                 ohos:height="30vp"
  121.                 ohos:width="30vp"
  122.                 ohos:text="$string:want_see"
  123.                 ohos:text_color="#FFF88B06"
  124.                 ohos:text_size="13fp"/>
  125.         </DirectionalLayout>

  127.     </DirectionalLayout>

  129.     <!--分割线-->
  130.     <Component
  131.         ohos:height="0.5vp"
  132.         ohos:width="match_parent"
  133.         ohos:background_element="#EAEAEC"
  134.         />
  135. </DirectionalLayout>
复制代码

电影详情页布局
电影详情页主要展示电影的图片，演员表，剧照，介绍的信息效果图如下：

对应的xml文件名为movies_detail_layout.xml，其中包含xml布局文件如下：
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DependentLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:id="$+id:parent_layout"
  5.     ohos:height="match_parent"
  6.     ohos:width="match_parent"
  7.     ohos:background_element="#445164">

  9.     <ScrollView
  10.         ohos:height="match_parent"
  11.         ohos:width="match_parent">

  13.         <DirectionalLayout
  14.             ohos:height="match_content"
  15.             ohos:width="match_parent"
  16.             ohos:bottom_padding="70vp"
  17.             ohos:left_margin="20vp"
  18.             ohos:orientation="vertical"
  19.             ohos:right_margin="20vp">

  21.             <!--电影-->
  22.             <Text
  23.                 ohos:id="$+id:title_icon"
  24.                 ohos:height="match_content"
  25.                 ohos:width="match_content"
  26.                 ohos:left_margin="130vp"
  27.                 ohos:text="$string:movie"
  28.                 ohos:text_size="20fp"

  30.                 ohos:weight="1"/>

  32.             <!--电影下方-->
  33.             <DirectionalLayout
  34.                 ohos:height="match_content"
  35.                 ohos:width="match_parent"
  36.                 ohos:alignment="vertical_center"
  37.                 ohos:orientation="horizontal"
  38.                 ohos:top_padding="15vp">
  39.                 <!--电影图片-->
  40.                 <Image
  41.                     ohos:id="$+id:image_content"
  42.                     ohos:height="200vp"
  43.                     ohos:width="150vp"
  44.                     ohos:image_src="$media:movies_image11"
  45.                     ohos:scale_mode="stretch"
  46.                     />

  48.                 <!--电影图片右边-->
  49.                 <DirectionalLayout
  50.                     ohos:height="230vp"
  51.                     ohos:width="match_content"
  52.                     ohos:orientation="vertical"
  53.                     >

  55.                     <!--电影名字-->
  56.                     <Text
  57.                         ohos:id="$+id:title_text"
  58.                         ohos:height="match_content"
  59.                         ohos:width="140vp"
  60.                         ohos:left_margin="50vp"
  61.                         ohos:text_color="#000000"
  62.                         ohos:text_size="18fp"/>

  64.                     <!--电影类型-->
  65.                     <Text
  66.                         ohos:id="$+id:like_num"
  67.                         ohos:height="match_content"
  68.                         ohos:width="match_content"
  69.                         ohos:left_margin="20vp"
  70.                         ohos:text_color="#FFB4B7B3"
  71.                         ohos:text_size="15fp"
  72.                         ohos:top_margin="15vp"/>

  74.                     <!--主要演员-->
  75.                     <Text
  76.                         ohos:id="$+id:vip"
  77.                         ohos:height="match_content"
  78.                         ohos:width="match_content"
  79.                         ohos:left_margin="20vp"
  80.                         ohos:text="$string:starring"
  81.                         ohos:text_color="#FFB4B7B3"
  82.                         ohos:text_size="15fp"
  83.                         ohos:top_margin="5vp"/>

  85.                     <!--演员表-->
  86.                     <ScrollView
  87.                         ohos:height="match_content"
  88.                         ohos:width="match_parent"
  89.                         ohos:left_margin="20vp"
  90.                         ohos:top_margin="5vp">

  92.                         <DirectionalLayout
  93.                             ohos:height="match_content"
  94.                             ohos:width="match_content"
  95.                             ohos:orientation="horizontal">

  97.                             <Image
  98.                                 ohos:height="50vp"
  99.                                 ohos:width="50vp"
  100.                                 ohos:bottom_margin="5vp"
  101.                                 ohos:image_src="$media:movies_image11"
  102.                                 ohos:left_margin="1vp"
  103.                                 ohos:top_margin="5vp"
  104.                                 ohos:scale_mode="stretch"
  105.                                 />

  107.                             <Image
  108.                                 ohos:height="50vp"
  109.                                 ohos:width="50vp"
  110.                                 ohos:bottom_margin="5vp"
  111.                                 ohos:image_src="$media:movies_image3"
  112.                                 ohos:left_margin="1vp"
  113.                                 ohos:top_margin="5vp"
  114.                                 ohos:scale_mode="stretch"
  115.                                 />

  117.                             <Image
  118.                                 ohos:height="50vp"
  119.                                 ohos:width="50vp"
  120.                                 ohos:bottom_margin="5vp"
  121.                                 ohos:image_src="$media:movies_image5"
  122.                                 ohos:left_margin="1vp"
  123.                                 ohos:top_margin="5vp"
  124.                                 ohos:scale_mode="stretch"
  125.                                 />

  127.                             <Image
  128.                                 ohos:height="50vp"
  129.                                 ohos:width="50vp"
  130.                                 ohos:bottom_margin="5vp"
  131.                                 ohos:image_src="$media:movies_image6"
  132.                                 ohos:left_margin="1vp"
  133.                                 ohos:top_margin="5vp"
  134.                                 ohos:scale_mode="stretch"
  135.                                 />
  136.                         </DirectionalLayout>
  137.                     </ScrollView>

  139.                     <!--想看-->
  140.                     <DirectionalLayout
  141.                         ohos:height="30vp"
  142.                         ohos:width="30vp"
  143.                         ohos:left_margin="10vp"
  144.                         ohos:orientation="horizontal"
  145.                         ohos:top_margin="55vp">

  147.                         <Image
  148.                             ohos:height="30vp"
  149.                             ohos:width="30vp"
  150.                             ohos:background_element="$media:like"/>

  152.                     </DirectionalLayout>

  154.                 </DirectionalLayout>

  156.             </DirectionalLayout>

  158.             <!--评分-->
  159.             <DirectionalLayout
  160.                 ohos:height="match_content"
  161.                 ohos:width="match_content"
  162.                 ohos:orientation="horizontal"
  163.                 ohos:top_margin="5vp">

  165.                 <Image
  166.                     ohos:height="20vp"
  167.                     ohos:width="20vp"
  168.                     ohos:background_element="$media:rating"
  169.                     ohos:left_margin="10vp"/>

  171.                 <Image
  172.                     ohos:height="20vp"
  173.                     ohos:width="20vp"
  174.                     ohos:background_element="$media:rating"/>

  176.                 <Image
  177.                     ohos:height="20vp"
  178.                     ohos:width="20vp"
  179.                     ohos:background_element="$media:rating"/>

  181.                 <Image
  182.                     ohos:height="20vp"
  183.                     ohos:width="20vp"
  184.                     ohos:background_element="$media:rating"/>

  186.                 <Image
  187.                     ohos:height="20vp"
  188.                     ohos:width="20vp"
  189.                     ohos:background_element="$media:rating1"/>

  191.                 <Text
  192.                     ohos:id="$+id:read_num"
  193.                     ohos:height="match_content"
  194.                     ohos:width="200vp"
  195.                     ohos:left_margin="10vp"
  196.                     ohos:text_color="#FF9800"
  197.                     ohos:text_size="20vp"
  198.                     ohos:weight="3"
  199.                     />
  200.             </DirectionalLayout>

  202.             <!--剧情简介-->
  203.             <Text
  204.                 ohos:id="$+id:title_content1"
  205.                 ohos:height="match_content"
  206.                 ohos:width="match_parent"
  207.                 ohos:left_margin="15vp"
  208.                 ohos:text="$string:introduction"
  209.                 ohos:text_alignment="horizontal_center"
  210.                 ohos:text_color="#000000"
  211.                 ohos:text_size="16vp"
  212.                 ohos:top_margin="25vp"/>

  214.             <!--简介内容-->
  215.             <Text
  216.                 ohos:id="$+id:title_content"
  217.                 ohos:height="match_content"
  218.                 ohos:width="match_parent"
  219.                 ohos:background_element="#415165"
  220.                 ohos:multiple_lines="true"
  221.                 ohos:text=""
  222.                 ohos:text_alignment="horizontal_center"
  223.                 ohos:text_color="white"
  224.                 ohos:text_size="16vp"
  225.                 ohos:top_margin="5vp"/>

  227.             <Text
  228.                 ohos:id="$+id:v_expansion"
  229.                 ohos:height="match_content"
  230.                 ohos:width="match_content"
  231.                 ohos:background_element="$graphic:sel_text_touch"
  232.                 ohos:text="$string:full_text"
  233.                 ohos:top_margin="5vp"
  234.                 ohos:padding="5vp"
  235.                 ohos:left_margin="280vp"
  236.                 ohos:text_color="#000000"
  237.                 ohos:text_size="16vp"
  238.                 ohos:element_end="$+id:title_content"
  239.                 />

  241.             <!--剧照-->
  242.             <Text
  243.                 ohos:id="$+id:movie_stills"
  244.                 ohos:height="match_content"
  245.                 ohos:width="match_parent"
  246.                 ohos:left_margin="15vp"
  247.                 ohos:text="$string:stills"
  248.                 ohos:text_alignment="horizontal_center"
  249.                 ohos:text_color="#000000"
  250.                 ohos:text_size="16vp"
  251.                 ohos:top_margin="25vp"/>

  253.             <ScrollView
  254.                 ohos:height="match_content"
  255.                 ohos:width="match_content">

  257.                 <DirectionalLayout
  258.                     ohos:height="match_content"
  259.                     ohos:width="match_content"
  260.                     ohos:orientation="horizontal">

  262.                     <Image
  263.                         ohos:height="100vp"
  264.                         ohos:width="100vp"
  265.                         ohos:bottom_margin="10vp"
  266.                         ohos:image_src="$media:movies_image6"
  267.                         ohos:left_margin="1vp"
  268.                         ohos:top_margin="10vp"
  269.                         ohos:scale_mode="stretch"
  270.                         />

  272.                     <Image
  273.                         ohos:height="100vp"
  274.                         ohos:width="100vp"
  275.                         ohos:bottom_margin="10vp"
  276.                         ohos:image_src="$media:movies_image10"
  277.                         ohos:left_margin="1vp"
  278.                         ohos:top_margin="10vp"
  279.                         ohos:scale_mode="stretch"
  280.                         />

  282.                     <Image
  283.                         ohos:height="100vp"
  284.                         ohos:width="100vp"
  285.                         ohos:bottom_margin="10vp"
  286.                         ohos:image_src="$media:movies_image3"
  287.                         ohos:left_margin="1vp"
  288.                         ohos:top_margin="10vp"
  289.                         ohos:scale_mode="stretch"
  290.                         />

  292.                     <Image
  293.                         ohos:height="100vp"
  294.                         ohos:width="100vp"
  295.                         ohos:bottom_margin="10vp"
  296.                         ohos:image_src="$media:movies_image5"
  297.                         ohos:left_margin="1vp"
  298.                         ohos:top_margin="10vp"
  299.                         ohos:scale_mode="stretch"
  300.                         />
  301.                 </DirectionalLayout>
  302.             </ScrollView>

  304.         </DirectionalLayout>

  306.     </ScrollView>

  308. </DependentLayout>
复制代码

5. 应用初始化      
当我们首次安装应用打开时会进入到类MainAbility的onStart(Intent intent)方法，进入电影首页会调用MainAbilitySlice类的onStart()方法，进入电影详情页会进入MoviesDetailAbilitySlice类的onStart()方法，依次进行了如下流程：

MainAbility
初始化数据，从json文件中读取电影信息并写入对象关系映射数据库，示例代码如下：
  1. /**
  2. * initData
  3. */
  4. private void initData() {
  5.         // 查询数据库是否有数据
  6.         Long movieCount = DatabaseUtils.queryMovieCount(this, null);
  7.         if (movieCount == 0) {
  8.                 saveMovieInfo(CommonUtils.getMoviesData(this));
  9.         }
  10. }

  12. /**
  13. * insert movies
  14. * [url=home.php?mod=space&uid=3142012]@param[/url] movieInfoList movie list
  15. */
  16. private void saveMovieInfo(List<MovieInfo> movieInfoList) {
  17.         if (movieInfoList.size() < 1 || movieInfoList == null) {
  18.                 return;
  19.         }
  20.         DatabaseUtils.deletMovie(this, null);
  21.         for (int index = 0; index < movieInfoList.size(); index++) {
  22.                 MovieInfo movieInfo = movieInfoList.get(index);
  23.                 DatabaseUtils.insertMovieInfo(this, movieInfo);
  24.         }
  25. }
复制代码
初始化InnerEvent对象用于定时刷新卡片，示例代码如下：
  1. private void initMyHandler() {
  2.         myHandler = new MyEventHandler(EventRunner.current());
  3.         long param = 0L;
  4.         Object object = null;
  5.         InnerEvent normalInnerEvent = InnerEvent.get(EVENT_MESSAGE_NORMAL, param, object);
  6.         myHandler.sendEvent(normalInnerEvent, 0, EventHandler.Priority.IMMEDIATE);
  7. }
  8. /**
  9. * MyEventHandler
  10. */
  11. class MyEventHandler extends EventHandler {
  12.         MyEventHandler(EventRunner runner) throws IllegalArgumentException {
  13.                 super(runner);
  14.         }

  16.         [url=home.php?mod=space&uid=2735960]@Override[/url]
  17.         protected void processEvent(InnerEvent event) {
  18.                 super.processEvent(event);
  19.                 if (event == null) {
  20.                         return;
  21.                 }
  22.                 int eventId = event.eventId;
  23.                 switch (eventId) {
  24.                         case EVENT_MESSAGE_NORMAL:
  25.                                 invokeScheduleMethod();
  26.                                 break;
  27.                         default:
  28.                                 break;
  29.                 }
  30.         }
  31. }
复制代码
启动更新卡片的定时任务，示例代码如下：
  1. private void invokeScheduleMethod() {
  2.     Timer timer = new Timer();
  3.     timer.schedule(
  4.             new TimerTask() {
  5.                 /**
  6.                  * 定时更新卡片
  7.                  */
  8.                 public void run() {
  9.                     getUITaskDispatcher().syncDispatch(() -> {
  10.                         refeshData();
  11.                     });
  12.                 }
  13.             },
  14.             0, PERIOD
  15.     );
  16. }
复制代码
更新卡片信息，示例代码如下：
  1. private void refeshData() {
  2.     // 获取卡片集合
  3.     List<FormInfo> formList = DatabaseUtils.queryForms(this, null);
  4.     // 查询电影集合
  5.     List<MovieInfo> movieInfoList = DatabaseUtils.queryMovieList(this, null);
  6.     if (formList == null && formList.size() < 1) {
  7.         return;
  8.     }
  9.     for (FormInfo formInfo : formList) {
  10.         ComponentProvider componentProvider = getComponentProvider(movieInfoList, formInfo.getDimension());
  11.         try {
  12.             initCardContent(componentProvider); // 隐藏提示信息 显示卡片内容
  13.             updateForm(formInfo.getFormId(), componentProvider);
  14.         } catch (FormException e) {
  15.             LogUtils.error("FormException", "FormException");
  16.         }
  17.     }
  18. }
复制代码
隐藏提示信息，显示卡片内容，示例代码如下：
  1. private void initCardContent (ComponentProvider componentProvider) {
  2.         // 设置2*2卡片
  3.         componentProvider.setVisibility(ResourceTable.Id_card2_hints, Component.INVISIBLE);
  4.         componentProvider.setVisibility(ResourceTable.Id_card2_content, Component.VISIBLE);
  5.         // 设置2*4卡片
  6.         componentProvider.setVisibility(ResourceTable.Id_card4_hints, Component.INVISIBLE);
  7.         componentProvider.setVisibility(ResourceTable.Id_card4_content, Component.VISIBLE);
  8. }
复制代码

MainAbilitySlice
主页面，主要展示电影排行榜（电影列表），其中电影列表的显示的示例代码如下：
  1. private void initMoviesContainer() {
  2.     // 获取数据库连接
  3.     helper = new DatabaseHelper(this);
  4.     connect = helper.getOrmContext("MovieDatabase", "MovieDatabase.db", MovieDatabase.class);
  5.     // 查询电影列表
  6.     movieInfoList = DatabaseUtils.queryMovieList(this, null);
  7.     // 创建MoviesListProvider对象，用于列表的展示
  8.     moviesListProvider = new MoviesListProvider(movieInfoList, this);
  9.     moviesListContainer.setItemProvider(moviesListProvider);
  10. }
复制代码
给列表item设置点击事件，即点击跳转到对应电影的详情页，示例代码如下：
  1. private void initListener() {
  2.     moviesListContainer.setItemClickedListener((listContainer, component, position, id) -> {
  3.         getUITaskDispatcher().asyncDispatch(new Runnable() {
  4.             @Override
  5.             public void run() {
  6.                 // 跳转到电影详情页，携带参数，电影id
  7.                 toAnotherPage(position);
  8.             }
  9.         });
  10.     });
  11. }
复制代码

MoviesDetailAbilitySlice
电影详情页，用于显示电影的详细信息，如电影介绍，演员表，剧照等。获取进入页面携带的参数并查询电影信息，示例代码如下：
  1. public void initParam(Intent intent) {
  2.     // 获取携带的电影id参数
  3.     if (intent.hasParameter("movieId")) {
  4.         Long movieId = intent.getLongParam("movieId", 0);
  5.         if (movieId == 0) {
  6.             return;
  7.         }
  8.         // 根据电影id查询电影信息
  9.         List<MovieInfo> movies = DatabaseUtils.queryMovieList(this, movieId);
  10.         if (movies.size() <= 0) {
  11.             return;
  12.         }
  13.         // 给各组件赋值
  14.         MovieInfo movieInfo = movies.get(0);
  15.         title = movieInfo.getTitle();
  16.         image = movieInfo.getImgUrl();
  17.         rating = movieInfo.getRating();
  18.         type = movieInfo.getType();
  19.         introduction = movieInfo.getIntroduction();
  20.         commentCount = movieInfo.getCommentcount();
  21.     }
  22. }
复制代码
给各组件赋值，示例代码如下：
  1. private void initView() {
  2.     initViewAnnotation();
  3.     moviesRating.setText(rating);
  4.     moviesCommentCount.setText("电影类型: " + type);
  5.     moviesTitle.setText(title);
  6.     moviesImage.setPixelMap(CommonUtils.getPixelMapFromPath(this, image, WIDTH, HIGHT).get());
  7.     moviesImage.setCornerRadius(RADIUS);
  8.     setText(introduction);
  9.     mExpansionButton.setVisibility(VISIBLE);
  10.     mExpansionButton.setClickedListener(va -> {
  11.         toggleExpansionStatus();
  12.     });
  13. }
复制代码
电影介绍的展开与收起，示例代码如下：
  1. private void toggleExpansionStatus() {
  2.     mIsExpansion = !mIsExpansion;
  3.     if (mIsExpansion) {
  4.         mExpansionButton.setText("收起");
  5.         moviesIntroduction.setMaxTextLines(Integer.MAX_VALUE);
  6.     } else {
  7.         mExpansionButton.setText("全文");
  8.         moviesIntroduction.setMaxTextLines(MMAXLINE);
  9.     }
  10. }
复制代码

6. 卡片的相关回调      
创建卡片事件的回调，示例代码如下：
  1. @Override
  2. protected ProviderFormInfo onCreateForm(Intent intent) {
  3.     // 卡片名称
  4.     String formName = intent.getStringParam(AbilitySlice.PARAM_FORM_NAME_KEY);
  5.     // 卡片id
  6.     Long formId = intent.getLongParam(AbilitySlice.PARAM_FORM_IDENTITY_KEY, 0);
  7.     // 卡片规格
  8.     int dimension = intent.getIntParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY, DEFAULT_DIMENSION_2X2);
  9.     // 将卡片信息存入数据库
  10.     saveFormInfo(formId, formName, dimension);
  11.     // 创建卡片展示信息
  12.     ProviderFormInfo formInfo = null;
  13.     int layoutId = ResourceTable.Layout_form_list_pattern_form_card_2_2;
  14.     if (dimension == DIMENSION_2X4) {
  15.         layoutId = ResourceTable.Layout_form_list_pattern_form_card_2_4;
  16.     }
  17.     formInfo = new ProviderFormInfo(layoutId, this);
  18.     List<MovieInfo> movieInfoList = DatabaseUtils.queryMovieList(this, null);
  19.     ComponentProvider componentProvider = getComponentProvider(movieInfoList, dimension);
  20.     initCardContent(componentProvider); // 隐藏提示信息 显示卡片内容
  21.     formInfo.mergeActions(componentProvider);
  22.     return formInfo;
  23. }
复制代码
其中可通过componentProvider 的setIntentAgent方法给卡片上的组件设置点击事件，第一个参数为组件的资源id，第二个参数为IntentAgent对象，示例代码如下：
  1. componentProvider.setIntentAgent(resourceIds.get(RESOUECE_AGENT_ID),
  2.         
  3.         getIntentAgent(movieInfo));
复制代码
获取IntentAgent对象，示例代码如下：
  1. private IntentAgent getIntentAgent(MovieInfo movie) {
  2.     // 设置点击的跳转页面
  3.     Intent intent = new Intent();
  4.     Operation operation = new Intent.OperationBuilder()
  5.             .withDeviceId("")
  6.             .withBundleName(getBundleName())
  7.             .withAbilityName(MoviesDetailAbility.class.getName())
  8.             .build();
  9.     // 携带参数，电影id
  10.     intent.setParam("movieId", movie.getId());
  11.     intent.setOperation(operation);
  12.     List<Intent> intentList = new ArrayList<>();
  13.     intentList.add(intent);
  14.     // 对于不同的响应事件，第一个参数requestCode需要不同，此处用电影id设为requestCode
  15.     IntentAgentInfo paramsInfo = new IntentAgentInfo(Math.toIntExact(movie.getId()),
  16.             IntentAgentConstant.OperationType.START_ABILITY,
  17.             IntentAgentConstant.Flags.UPDATE_PRESENT_FLAG, intentList, null);
  18.     IntentAgent intentAgent = IntentAgentHelper.getIntentAgent(this, paramsInfo);
  19.     return intentAgent;
  20. }
复制代码
删除卡片事件的回调，示例代码如下：
  1. @Override
  2. protected void onDeleteForm(long formId) {
  3.     super.onDeleteForm(formId);
  4.     // 删除数据库中的卡片信息
  5.     DatabaseUtils.deleteForm(this, formId);
  6. }
复制代码
系统桌面使用方主动定时定点更新卡片的回调，由于本篇Codelab未在此回调中做其他操作，因此不做介绍。此回调需要配合config.json中的配置，config.json配置示例代码如下：
  1. "forms": [
  2.           {
  3.             "landscapeLayouts": [
  4.               "$layout:form_list_pattern_form_card_2_2"
  5.             ],
  6.             "isDefault": true,
  7.             "scheduledUpdateTime": "10:40",
  8.             "defaultDimension": "2*2",
  9.             "name": "form_card",
  10.             "description": "This is a form card",
  11.             "colorMode": "auto",
  12.             "type": "Java",
  13.             "supportDimensions": [
  14.               "2*2"
  15.             ],
  16.             "portraitLayouts": [
  17.               "$layout:form_list_pattern_form_card_2_2"
  18.             ],
  19.             "updateEnabled": true,
  20.             "updateDuration": 1
  21.           }
  22.         ]
复制代码

说明
上述的"scheduledUpdateTime": "10:40","updateDuration": 1分别为桌面使用方主动更新卡片的时间和间隔（1表示30分钟更新一次），详细说明可参考Java卡片开发指导

7. 回顾和总结      本篇Codelab我们介绍了Java电影卡片的页面布局开发和卡片几个重要的回调函数的处理，在主页面可以通过向上滑动app图标进行卡片的创建，点击卡片或者app图标进入电影首页，点击首页中的每个电影进入电影详情页，在详情页中点击全部展开功能进行电影剧情内容的收缩。
   
8. 恭喜你      
目前你已经成功完成了Codelab并且学到了：
  • 如何进行卡片的创建
  • 如何进行卡片的刷新
  • 卡片的事件控制
  • 如何进行电影首页和详情页的布局
  • 如何开发电影剧情展开收起功能
   
9. 参考         

举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友