devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

手把手教你用鸿蒙HarmonyOS实现微信聊天界面（二）_鸿蒙系统可以按照message吗

作者：Cpp五条 | 2024-03-22 20:03:20

赞

踩

鸿蒙系统可以按照message吗

简介

        本系列文章记录作者大三开学第一个月中学习HarmonyOS移动应用开发学习经历，此篇为《微信聊天界面》项目，实现功能有

1、聊天信息功能，包括图片、文字

2、发送定位功能

3、选择发送本机图片功能

4、拍照并发送图片功能

        如果在真机调试请将config文件中包名换成自己的应用包名即可，申请权限有文件读写、位置获取、相机调用、麦克风调用。

之前文章


手把手教你用鸿蒙HarmonyOS实现微信聊天界面（一）_hys1124388788的博客-CSDN博客

聊天界面效果如图

图片选择效果如图

图片获取 

        本篇讲关于图片的获取。一种方式是在项目中放置静态资源，另一种则是从本机中获取图片。

第一种

        第一种方式使用很简单，只需要在Image组件添加src属性即可。

  1.  <Image
  2.             ohos:id="$+id:image_message"
  3.             ohos:width="match_content"
  4.             ohos:image_src="$media:rick_c137"
  5.             ohos:height="match_content"
  6.             ohos:scale_mode="zoom_center"
  7.             ohos:background_element="$graphic:message_background"
  8.             ohos:left_margin="15vp"
  9.             ohos:left_padding="15vp"
  10.             ohos:right_padding="15vp"
  11.             ohos:right_margin="15vp"
  12.             ohos:top_margin="15vp"
  13.             ohos:top_padding="15vp"
  14.             ohos:bottom_margin="15vp"
  15.             ohos:bottom_padding="15vp"
  16.             ohos:margin="5vp"/>

第二种

        第二种的使用场景更加普遍，是根据图片文件的uri来访问媒体资源转换为PixelMap对象传给Image组件实现的。

  1.  Component container = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_image_message_list_item, null, false);
  2.             Image image = (Image) container.findComponentById(ResourceTable.Id_image_message);
  3.  
  4.             DataAbilityHelper helper=DataAbilityHelper.creator(context);
  5.             ImageSource imageSource;
  6.             Uri uri = Uri.parse(aMessage.getMessage());
  7.             FileDescriptor fd = null;
  8.             try {
  9.                 fd = helper.openFile(uri, "r");
  10.             } catch (DataAbilityRemoteException | FileNotFoundException e) {
  11.                 e.printStackTrace();
  12.             }
  13.             imageSource = ImageSource.create(fd, null);
  14.             //创建位图
  15.             PixelMap pixelMap = imageSource.createPixelmap(null);
  16.             image.setPixelMap(pixelMap);
  17.             imageSource.release();
  18.             helper.release();
  19.  
  20.             return container;

获取Uri

        如何获取图片的Uri呢？是通过DataAbilityHelper这个类查询本机的资源（参考官方文档文档中心），媒体存储相关类AVStorage类中AVStorage.Images.Media.EXTERNAL_DATA_ABILITY_URI是获取用于处理图像媒体信息的Uri,视频资源也类似，根据查询结果获取到的资源id拼接处Uri

Uri.appendEncodedPathToUri(AVStorage.Images.Media.EXTERNAL_DATA_ABILITY_URI, String.valueOf(id));

项目中获取图片URI资源的类

  1. public class PictureManager {
  2.     private static final String TAG = PictureManager.class.getSimpleName();
  3.  
  4.     private List<Uri> imagePathElements = new ArrayList<>();
  5.  
  6.     private Context context;
  7.  
  8.     /**
  9.      * The construction method of this class
  10.      *
  11.      * @param context Context
  12.      */
  13.     public PictureManager(Context context) {
  14.         this.context = context;
  15.         loadFromMediaLibrary(context);
  16.     }
  17.  
  18.     private void loadFromMediaLibrary(Context context) {
  19.         Uri remoteUri = AVStorage.Images.Media.EXTERNAL_DATA_ABILITY_URI;
  20.         DataAbilityHelper helper = DataAbilityHelper.creator(context, remoteUri, false);
  21.         try {
  22.             ResultSet resultSet = helper.query(remoteUri, null, null);
  23.             LogUtil.info(TAG, "The result size: " + resultSet.getRowCount());
  24.             processResult(resultSet);
  25.             resultSet.close();
  26.         } catch (DataAbilityRemoteException e) {
  27.             LogUtil.error(TAG, "Query system media failed.");
  28.         } finally {
  29.             helper.release();
  30.         }
  31.     }
  32.  
  33.     private void processResult(ResultSet resultSet) {
  34.         while (resultSet.goToNextRow()) {
  35.             String path = resultSet.getString(resultSet.getColumnIndexForName(AVStorage.AVBaseColumns.DATA));
  36.             String title = resultSet.getString(resultSet.getColumnIndexForName(AVStorage.AVBaseColumns.TITLE));
  37.             String id = resultSet.getString(resultSet.getColumnIndexForName(AVStorage.Images.Media.ID));
  38.             Uri uri = Uri.appendEncodedPathToUri(AVStorage.Images.Media.EXTERNAL_DATA_ABILITY_URI, String.valueOf(id));
  39.  
  40.             LogUtil.info(TAG, "The title is: " + title);
  41.             LogUtil.info(TAG, "The path is: " + path);
  42.             LogUtil.info(TAG, "The id is: " + id);
  43.             LogUtil.info(TAG, "The uri is: " + uri);
  44.             imagePathElements.add(uri);
  45.         }
  46.     }
  47.  
  48.     public List<Uri> getimageElements() {
  49.         LogUtil.info(TAG, "The size is: " + imagePathElements.size());
  50.         return imagePathElements;
  51.     }
  52. }

Uri转图片

         ​​​​​​具体怎么选择图片是通过ListContiner组件将图片按行展示在手机上，通过添加图片的点击方法调用发送消息方法将图片发出。

        如何将Uri显示为图片？在鸿蒙中Image组件可通过调用setPixelMap方法设置，参数是PixMap对象。可以通过ImageSource根据FileDescriptor 创建位图

  1. DataAbilityHelper helper=DataAbilityHelper.creator(slice.getContext());
  2. ImageSource imageSource;
  3. FileDescriptor fd = null;
  4. fd = helper.openFile(uri, "r");
  5. imageSource = ImageSource.create(fd, null);
  6. PixelMap pixelMap = imageSource.createPixelmap(null);
  7. image.setPixelMap(pixelMap);

        以下是在项目中将图片一行三张展示所以Uri采用数组存储，如果只想显示一张将数组换为单个对象即可。

  1. DataAbilityHelper helper=DataAbilityHelper.creator(slice.getContext());
  2.         //定义图片来源对象
  3.         ImageSource imageSource;
  4.         Uri[] uris = imageLineItem.getUris();
  5.         FileDescriptor fd = null;
  6.  
  7.         image1.setClickedListener(component1 -> {
  8.             mainAbilitySlice.addAndUpdateMessage(mainAbilitySlice.getMessageDataSize(), String.valueOf(uris[0]),"image");
  9.             mainAbilitySlice.getDialog().destroy();
  10.         });
  11.     
  12. try {
  13.             fd = helper.openFile(uris[0], "r");
  14.         } catch (DataAbilityRemoteException | FileNotFoundException e) {
  15.             e.printStackTrace();
  16.         }
  17.         imageSource = ImageSource.create(fd, null);
  18.         //创建位图
  19.         PixelMap pixelMap = imageSource.createPixelmap(null);
  20.         image1.setPixelMap(pixelMap);
  21.         imageSource.release();
  22.         helper.release();

ListContiner的内容实体类

  1. public class ImageLineItem {
  2.     private int index;
  3.     private Uri[] uris;
  4.  
  5.     public ImageLineItem(int index) {
  6.         this.index = index;
  7.     }
  8.  
  9.     public int getIndex() {
  10.         return index;
  11.     }
  12.  
  13.     public void setIndex(int index) {
  14.         this.index = index;
  15.     }
  16.  
  17.     public Uri[] getUris() {
  18.         return uris;
  19.     }
  20.  
  21.     public void setUris(Uri[] uris) {
  22.         this.uris = uris;
  23.     }
  24. }

Provider类

  1. public class ImageLineProvider extends BaseItemProvider {
  2.     private static final String TAG = ImageLineProvider.class.getSimpleName();
  3.     private List<ImageLineItem> list;
  4.     private AbilitySlice slice;
  5.  
  6.     private MainAbilitySlice mainAbilitySlice;
  7.  
  8.     public void setMainAbilitySlice(MainAbilitySlice mainAbilitySlice){
  9.         this.mainAbilitySlice = mainAbilitySlice;
  10.     }
  11.  
  12.     public ImageLineProvider(List<ImageLineItem> list, AbilitySlice slice) {
  13.         LogUtil.info(TAG,"list.size() : "+list.size());
  14.         this.list = list;
  15.         this.slice = slice;
  16.     }
  17.  
  18.     @Override
  19.     public int getCount() {
  20.         return list == null ? 0 : list.size();
  21.     }
  22.  
  23.     @Override
  24.     public Object getItem(int position) {
  25.         if (list != null && position >= 0 && position < list.size()){
  26.             return list.get(position);
  27.         }
  28.         return null;
  29.     }
  30.  
  31.     @Override
  32.     public long getItemId(int position) {
  33.         return position;
  34.     }
  35.  
  36.     private Component getItemComponent(int position) {
  37.         return getComponent(position);
  38.     }
  39.  
  40.     private Component getComponent(int position) {
  41.         LogUtil.info(TAG,"list.size()"+list.size());
  42.         final Component cpt;
  43.         cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_images_line, null, false);
  44.         ImageLineItem imageLineItem = list.get(position);
  45.         Image image1,image2,image3;
  46.         image1 = (Image) cpt.findComponentById(ResourceTable.Id_image1);
  47.         image2 = (Image) cpt.findComponentById(ResourceTable.Id_image2);
  48.         image3 = (Image) cpt.findComponentById(ResourceTable.Id_image3);
  49.  
  50.         DataAbilityHelper helper=DataAbilityHelper.creator(slice.getContext());
  51.         //定义图片来源对象
  52.         ImageSource imageSource;
  53.         Uri[] uris = imageLineItem.getUris();
  54.         FileDescriptor fd = null;
  55.  
  56.         image1.setClickedListener(component1 -> {
  57.             mainAbilitySlice.addAndUpdateMessage(mainAbilitySlice.getMessageDataSize(), String.valueOf(uris[0]),"image");
  58.             mainAbilitySlice.getDialog().destroy();
  59.         });
  60.         image2.setClickedListener(component1 -> {
  61.             mainAbilitySlice.addAndUpdateMessage(mainAbilitySlice.getMessageDataSize(), String.valueOf(uris[1]),"image");
  62.             mainAbilitySlice.getDialog().destroy();
  63.         });
  64.         image3.setClickedListener(component1 -> {
  65.             mainAbilitySlice.addAndUpdateMessage(mainAbilitySlice.getMessageDataSize(), String.valueOf(uris[2]),"image");
  66.             mainAbilitySlice.getDialog().destroy();
  67.         });
  68.  
  69.         try {
  70.             fd = helper.openFile(uris[0], "r");
  71.         } catch (DataAbilityRemoteException | FileNotFoundException e) {
  72.             e.printStackTrace();
  73.         }
  74.         imageSource = ImageSource.create(fd, null);
  75.         //创建位图
  76.         PixelMap pixelMap = imageSource.createPixelmap(null);
  77.         image1.setPixelMap(pixelMap);
  78.         imageSource.release();
  79.         helper.release();
  80.  
  81.         try {
  82.             fd = helper.openFile(uris[1], "r");
  83.         } catch (DataAbilityRemoteException | FileNotFoundException e) {
  84.             e.printStackTrace();
  85.         }
  86.         imageSource = ImageSource.create(fd, null);
  87.         //创建位图
  88.         pixelMap = imageSource.createPixelmap(null);
  89.         image2.setPixelMap(pixelMap);
  90.         imageSource.release();
  91.         helper.release();
  92.  
  93.         try {
  94.             fd = helper.openFile(uris[2], "r");
  95.         } catch (DataAbilityRemoteException | FileNotFoundException e) {
  96.             e.printStackTrace();
  97.         }
  98.         imageSource = ImageSource.create(fd, null);
  99.         //创建位图
  100.         pixelMap = imageSource.createPixelmap(null);
  101.         image3.setPixelMap(pixelMap);
  102.         imageSource.release();
  103.         helper.release();
  104.  
  105.         return cpt;
  106.     }
  107.  
  108.     @Override
  109.     public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) {
  110.         return getItemComponent(position);
  111.     }
  112. }

        到此图片获取的方式讲完了，下篇讲前边图片中展示的效果怎么实现。

Gitee链接
WeChatPage: 鸿蒙版微信界面

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/290592?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号