返回发烧友论坛
发 帖  

[文章]【木棉花】ImageCoverFlow开源组件助力七夕

张诏添
2021-09-04 13:49:35
阅读量0
0
1
前言
       深圳大学木棉花组织是一群热衷于学习鸿蒙相关知识和开发鸿蒙相关应用的开发者们，欢迎与各位感兴趣的开发者一起学习鸿蒙开发，相互交流、共同进步。
概述
       七夕已过，但是属于你的浪漫永远不会缺席，赶紧动手为你的心上人制作一个专属的相册，不是七夕也能存在莫大的惊喜！
       效果如下：左右滑动时图片会切换
       点击“自动播放”按钮时，图片会顺序切换。这是按钮变为“停止播放”，点击“停止播放”按钮时，图片会停止自动切换


正文
一、创建一个空白的工程
1. 安装和配置DevEco Studio 2.1 Release
DevEco Studio 2.1 Release下载、DevEco Studio 2.1 Release安装
2. 创建一个Empty Java Phone应用
       DevEco Studio下载安装成功后，打开DevEco Studio，点击左上角的File，点击New，再选择New Project，选择Empty Ability(Java)选项，点击Next按钮。
       将文件命名为QiXiFestival（文件名不能出现中文或者特殊字符，否则将无法成功创建项目文件），选择保存路径，选择API5，设备勾选Phone，最后点击Finish按钮。
3. 准备工作
       在entry>src>main>config.json文件中最下方"launchType": "standard"的后面添加以下代码，这样就可以实现去掉应用上方的标签栏了。
        config.json最下面部分代码：
  1.         "orientation": "unspecified",
  2.         "name": "com.test.qixifestival.MainAbility",
  3.         "icon": "$media:icon",
  4.         "description": "$string:mainability_description",
  5.         "label": "$string:entry_MainAbility",
  6.         "type": "page",
  7.         "launchType": "standard",
  8.         "metaData": {
  9.           "customizeData": [
  10.             {
  11.               "name": "hwc-theme",
  12.               "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar",
  13.               "extra": ""
  14.             }
  15.           ]
  16.         }
  17.       }
  18.     ]
  19.   }
  20. }
复制代码
二、引入开源组件ImageCoverFlow
1. 引入开源包

       在QiXiFestival>build.gradle添加以下代码：
  1. allprojects{
  2.     repositories{
  3.         mavenCentral()
  4.     }
  5. }
复制代码
  在QiXiFestival>entry>build.gradle的dependencies内添加第三方包。
  1. dependencies {
  2.     implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
  3.     testImplementation 'junit:junit:4.13'
  4.     ohosTestImplementation 'com.huawei.ohos.testkit:runner:1.0.0.200'
  5.     implementation 'io.openharmony.tpc.thirdlib:image-cover-flow:1.0.2'
  6. }
  7. decc {
  8.     supportType = ['html','xml']
  9. }
复制代码
重新生成Gradle即可。
2. 添加主页面的布局
       在QiXiFestival>entry>src>main>resources>base>layout>ability_main.xml添加布局代码。

       删除已有的Text组件。添加com.dolphinwang.imagecoverflow.CoverFlowView组件，将id属性的值设置为$+id:coverflow，以通过MainAbilitySlice.java中根据唯一标识设置相应内容。将height和width属性的值分别设置为match_parent和match_parent。orientation属性的值设置为vertical，layout_alignment属性的值设置为center。
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">

  9.     <com.dolphinwang.imagecoverflow.CoverFlowView
  10.         ohos:id="$+id:coverflow"
  11.         ohos:width="match_parent"
  12.         ohos:height="400vp"
  13.         ohos:orientation="vertical"
  14.         ohos:layout_alignment="center"/>

  16. </DirectionalLayout>
复制代码
3. 实现3D相册
       由于相册界面显示的一组图片是通过CoverFlowView控件实现的，因此需要创建一个数据适配器ResourceUtils对该控件进行数据适配。

       创建ResourceUtils.java：
  1. package com.test.qixi_java.slice;

  3. import ohos.app.Context;
  4. import ohos.global.resource.NotExistException;
  5. import ohos.global.resource.RawFileEntry;
  6. import ohos.global.resource.Resource;
  7. import ohos.global.resource.ResourceManager;
  8. import ohos.global.resource.WrongTypeException;
  9. import ohos.media.image.ImageSource;
  10. import ohos.media.image.PixelMap;

  12. import java.io.IOException;
  13. import java.util.Optional;

  15. public class ResourceUtils {
  16.    
  17.     public static Optional<PixelMap> getPixelMap(Context context, int id) {
  18.         String path = getPathById(context, id);
  19.         if (path == null || path.trim().length() == 0) {
  20.             return Optional.empty();
  21.         }
  22.         RawFileEntry assetManager = context.getResourceManager().getRawFileEntry(path);
  23.         ImageSource.SourceOptions options = new ImageSource.SourceOptions();
  24.         options.formatHint = "image/png";
  25.         ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();
  26.         try {
  27.             Resource asset = assetManager.openRawFile();
  28.             ImageSource source = ImageSource.create(asset, options);
  29.             return Optional.ofNullable(source.createPixelmap(decodingOptions));
  30.         } catch (IOException ex) {

  32.         }
  33.         return Optional.empty();
  34.     }

  36.     public static String getPathById(Context context, int id) {
  37.         String path = "";
  38.         if (context == null) {
  39.             return path;
  40.         }
  41.         ResourceManager manager = context.getResourceManager();
  42.         if (manager == null) {
  43.             return path;
  44.         }
  45.         try {
  46.             path = manager.getMediaPath(id);
  47.         } catch (IOException | NotExistException | WrongTypeException ex) {

  49.         }
  50.         return path;
  51.     }
  52. }
复制代码
将事先准备好的图片放到QiXiFestival>entry>src>main>resources>media中，并且名字命名为image1、image2、image3、image4、image5、image6、image7。
       由于相册界面主要显示一组图片，每张图片都有自己的图片ID和标题ID的属性，所以为了方便起见，我们新建一个MyCoverFlowAdapter类继承CoverFlowAdapter来存放图片的这些属性。在MyCoverFlowAdapter方法中将图片放到列表中，并且重写getCount()和getImage()方法。

       创建MyCoverFlowAdapter.java：
  1. package com.test.qixifestival.slice;

  3. import com.dolphinwang.imagecoverflow.CoverFlowAdapter;
  4. import com.test.qixifestival.ResourceTable;
  5. import ohos.app.Context;
  6. import ohos.media.image.PixelMap;

  8. import java.util.ArrayList;
  9. import java.util.List;

  11. public class MyCoverFlowAdapter extends CoverFlowAdapter {
  12.     private List<PixelMap> mBitmapList = new ArrayList<>();

  14.     public MyCoverFlowAdapter(Context context) {
  15.         PixelMap image1 = ResourceUtils.getPixelMap(context, ResourceTable.Media_image1).get();
  16.         PixelMap image2 = ResourceUtils.getPixelMap(context, ResourceTable.Media_image2).get();
  17.         PixelMap image3 = ResourceUtils.getPixelMap(context, ResourceTable.Media_image3).get();
  18.         PixelMap image4 = ResourceUtils.getPixelMap(context, ResourceTable.Media_image4).get();
  19.         PixelMap image5 = ResourceUtils.getPixelMap(context, ResourceTable.Media_image5).get();
  20.         PixelMap image6 = ResourceUtils.getPixelMap(context, ResourceTable.Media_image6).get();
  21.         PixelMap image7 = ResourceUtils.getPixelMap(context, ResourceTable.Media_image7).get();
  22.         mBitmapList.add(image1);
  23.         mBitmapList.add(image2);
  24.         mBitmapList.add(image3);
  25.         mBitmapList.add(image4);
  26.         mBitmapList.add(image5);
  27.         mBitmapList.add(image6);
  28.         mBitmapList.add(image7);
  29.     }

  31.     @Override
  32.     public int getCount() {
  33.         return mBitmapList.size();
  34.     }

  36.     @Override
  37.     public PixelMap getImage(final int position) {
  38.         return mBitmapList.get(position);
  39.     }
  40. }
复制代码
  在QiXiFestival>entry>src>main>java>com.test.qixifestival>slice>MainAbilitySlice.java编写以下代码。

       添加一个CoverFlowView类型的名为mCoverFlowView的变量。添加一个名为initView的函数，对相册页面进行初始化。在生命周期事件函数onStart中调用函数initView，以实现对相册页面初始化：
  1. public class MainAbilitySlice extends AbilitySlice {
  2.     private CoverFlowView mCoverFlowView;
  3.     public void onStart(Intent intent) {
  4.         super.onStart(intent);
  5.         super.setUIContent(ResourceTable.Layout_ability_main);
  6.         initView();
  7.     }

  9.     private void initView() {
  10.         Component component = findComponentById(ResourceTable.Id_coverflow);
  11.         if (component instanceof CoverFlowView) {
  12.             mCoverFlowView = (CoverFlowView) component;
  13.         }
  14.     }

  16.     @Override
  17.     public void onActive() {
  18.         super.onActive();
  19.     }

  21.     @Override
  22.     public void onForeground(Intent intent) {
  23.         super.onForeground(intent);
  24.     }
  25. }
复制代码
添加一个名为initData函数，先对相册进行判断，如果相册为空，则返回。
       setReflectionHeight为设置反射高度，设置为30。setVisibleImage为设置同时可见图片的数量，这里设置为5。引入扩展adapter。
       为相册添加一个点击事件已达到通过左右滑动进行图片切换，在生命周期事件函数onStart中调用函数initData，以实现对相册数据初始化。
  1. public class MainAbilitySlice extends AbilitySlice {
  2.     private CoverFlowView mCoverFlowView;
  3.     public void onStart(Intent intent) {
  4.         super.onStart(intent);
  5.         super.setUIContent(ResourceTable.Layout_ability_main);
  6.         initView();
  7.         initData();
  8.     }

  10.     private void initView() {
  11.         ......
  12.     }

  14.     private void initData() {
  15.         if (mCoverFlowView == null) {
  16.             return;
  17.         }
  18.         mCoverFlowView.setReflectionHeight(30);
  19.         mCoverFlowView.setVisibleImage(5);
  20.         final MyCoverFlowAdapter adapter = new MyCoverFlowAdapter(this);
  21.         mCoverFlowView.setAdapter(adapter);
  22.         mCoverFlowView.setImageClickListener((coverFlowView, position) -> {
  23.             coverFlowView.setSelection(position);
  24.         });
  25.     }

  27.     ......
  28. }
复制代码
三、实现图片自动播放
1. 实现主页面布局
       打开ability_main.xml文件。
       添加Button组件，将id属性的值设置为$+id:change_bitmap_button，以通过MainAbilitySlice.java中根据唯一标识设置点击事件。将height和width属性的值分别设置为50vp和200vp。text属性的值设置为“自动播放”，text_color属性的值设置为#ffffff，text_size属性的值设置为24vp，top_marginr属性的值设置为20vp，background_element属性的值设置为#5D3C51，layout_alignment属性的值设置为center。
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">

  9.     <com.dolphinwang.imagecoverflow.CoverFlowView
  10.         ohos:id="$+id:coverflow"
  11.         ohos:width="match_parent"
  12.         ohos:height="400vp"
  13.         ohos:orientation="vertical"
  14.         ohos:layout_alignment="center"/>

  16.     <Button
  17.         ohos:id="$+id:change_bitmap_button"
  18.         ohos:height="50vp"
  19.         ohos:width="200vp"
  20.         ohos:text="自动播放"
  21.         ohos:text_color="#ffffff"
  22.         ohos:text_size="24fp"
  23.         ohos:top_margin="20vp"
  24.         ohos:background_element="#5D3C51"
  25.         ohos:layout_alignment="center"/>
  26.    
  27. </DirectionalLayout>
复制代码
2. 实现自动播放逻辑代码
       添加一个Timer类型的变量time，以实现图片每隔一秒自动切换。添加一个String类型的变量text，以记录是否自动播放。添加一个int类型的变量number，以记录当前的图片是哪张。添加一个boolean类型的变量k，以记录是正序播放还是倒序播放。
       在initData函数内，通过唯一标识符添加一个点击事件。先判断text为“自动播放”时，对time进行初始化，设置时间任务的延迟为0，间隔为1000ms即1秒，在时间任务中添加一个子线程，通过CoverFlowView的监听事件获取当前图片是哪张。如果number为0，即当前的图片为第一张，则k赋值为true，以实现图片正序切换；如果number为6，即当前的图片为最后一张，则k赋值为false，以实现图片倒序播放。通过setSelection设置当前的图片。最后根据k的值对number进行加1或减1，并且text设置为“停止播放”，按钮上的文本设置为text。
       如果text为“停止播放”时，取消时间任务。对text设置为“自动播放”，按钮上的文本设置为text。
  1. public class MainAbilitySlice extends AbilitySlice {
  2.     private CoverFlowView mCoverFlowView;
  3.     private static Timer time;
  4.     private static String text = "自动播放";
  5.     private static int number = 0;
  6.     private static boolean k = true;
  7.     public void onStart(Intent intent) {
  8.         super.onStart(intent);
  9.         super.setUIContent(ResourceTable.Layout_ability_main);
  10.         initView();
  11.         initData();
  12.     }

  14.     private void initView() {
  15.         ......
  16.     }

  18.     private void initData() {
  19.         ......

  21.         Button button = (Button) findComponentById(ResourceTable.Id_change_bitmap_button);
  22.         button.setClickedListener(new Component.ClickedListener() {
  23.             @Override
  24.             public void onClick(Component component) {
  25.                 mCoverFlowView.setStateListener(new CoverFlowView.StateListener() {
  26.                     @Override
  27.                     public void imageOnTop(CoverFlowView coverFlowView, int i, float v, float v1, float v2, float v3) {
  28.                         number = i;
  29.                     }

  31.                     @Override
  32.                     public void invalidationCompleted(CoverFlowView coverFlowView) {

  34.                     }
  35.                 });

  37.                 if(text == "自动播放"){
  38.                     time = new Timer();
  39.                     time.schedule(new TimerTask() {
  40.                         @Override
  41.                         public void run() {
  42.                             getUITaskDispatcher().asyncDispatch(()->{
  43.                                 if(number == 0){
  44.                                     k = true;
  45.                                 }else if(number == 6){
  46.                                     k = false;
  47.                                 }
  48.                                 mCoverFlowView.setSelection(number);
  49.                                 if(k == true){
  50.                                     number++;
  51.                                 }else{
  52.                                     number--;
  53.                                 }
  54.                             });
  55.                         }
  56.                     },0,1000);
  57.                     text = "停止播放";
  58.                     button.setText(text);
  59.                 }else if(text == "停止播放"){
  60.                     time.cancel();
  61.                     text = "自动播放";
  62.                     button.setText(text);
  63.                 }
  64.             }
  65.         });
  66.     }

  68.     ......
  69. }
复制代码
保存代码运行即可。
更多资料请关注我们的项目 : Awesome-Harmony_木棉花

举报

回帖

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