返回发烧友论坛
发 帖  

[文章]#HarmonyOS征文#仿鸿蒙图库之2*2卡片交互

liyuanjinglyj
2021-07-18 18:27:07
阅读量0
鸿蒙系统
0
0
需求分析

现在有鸿蒙设备或者编辑器的用户，不妨打开鸿蒙图库的卡片看看，应该很容易发现它具有哪些功能。

比如，鸿蒙图库的卡片可以根据用户的选择，显示指定图片内容到卡片之上，这里就需要我们实现卡片与用户的交互与编辑。

下面，我们来分别实现卡片的功能以及交互。

卡片设计

首先，我们需要实现卡片的默认样式，因为我们这里设计的是一个2*2的Java卡片，所以其样式在XML布局文件中，代码如下所示（默认的方式创建Java卡片即可）：
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DependentLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:background_element="#FFFFFF"
  7.     ohos:remote="true">

  9.     <Image
  10.         ohos:id="$+id:form_grid_pattern_widget_image"
  11.         ohos:height="match_parent"
  12.         ohos:width="match_parent"
  13.         ohos:image_src="$media:form_grid_pattern_widget_default_image_2"
  14.         ohos:scale_mode="stretch"/>

  16. </DependentLayout>
复制代码


接着，我们需要实现用户卡片编辑功能，所以这里，我们需要在配置文件config.json文件中配置卡片的编辑界面，代码如下：
  1. "forms": [
  2.           {
  3.             "landscapeLayouts": [
  4.               "$layout:form_grid_pattern_widget_2_2"
  5.             ],
  6.             "isDefault": true,
  7.             "scheduledUpdateTime": "10:30",
  8.             "formConfigAbility": "ability://com.liyuanjinglyj.gifcard.ChoiceImageAbility",
  9.             "defaultDimension": "2*2",
  10.             "name": "widget",
  11.             "description": "This is a service widget",
  12.             "colorMode": "auto",
  13.             "type": "Java",
  14.             "supportDimensions": [
  15.               "2*2"
  16.             ],
  17.             "portraitLayouts": [
  18.               "$layout:form_grid_pattern_widget_2_2"
  19.             ],
  20.             "updateEnabled": true,
  21.             "updateDuration": 1
  22.           }
  23.         ],
复制代码


这里的编辑界面就是ChoiceImageAbility。而这个界面我们只需要实现选择图片功能即可。所以，一个按钮就可以了，布局文件如下（ability_choice_image.xml）：
  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.     <Button
  10.         ohos:id="$+id:ability_choice_image_button"
  11.         ohos:height="match_content"
  12.         ohos:width="match_content"
  13.         ohos:text_size="25vp"
  14.         ohos:text="选择图片"
  15.         ohos:text_color="#FF0000"/>


  18. </DirectionalLayout>
复制代码


而ChoiceImageAbility界面的交互代码如下所示：
  1. public class ChoiceImageAbility extends Ability {
  2.     private static final HiLogLabel label = new HiLogLabel(HiLog.LOG_APP, 0x0001, "选择图片测试");
  3.     private Button button;
  4.     private long formId;
  5.     private final  int imgRequestCode=123;
  6.     private ImageSource imageSource = null;
  7.     private PixelMap pixelMap=null;
  8.     @Override
  9.     public void onStart(Intent intent) {
  10.         super.onStart(intent);
  11.         super.setUIContent(ResourceTable.Layout_ability_choice_image);
  12.         WindowManager.getInstance().getTopWindow().get().setStatusBarColor(Color.BLACK.getValue());

  14.         formId = intent.getLongParam(AbilitySlice.PARAM_FORM_IDENTITY_KEY, -1);
  15.         requestPermissionsFromUser(new String[]{"ohos.permission.READ_USER_STORAGE"},imgRequestCode);
  16.         this.button=(Button)findComponentById(ResourceTable.Id_ability_choice_image_button);
  17.         this.button.setClickedListener(new Component.ClickedListener() {
  18.             @Override
  19.             public void onClick(Component component) {
  20.                 Intent intent = new Intent();
  21.                 Operation opt=new Intent.OperationBuilder().withAction("android.intent.action.GET_CONTENT").build();
  22.                 intent.setOperation(opt);
  23.                 intent.addFlags(Intent.FLAG_NOT_OHOS_COMPONENT);
  24.                 intent.setType("image/*");
  25.                 startAbilityForResult(intent, imgRequestCode);
  26.             }
  27.         });
  28.     }

  30.     @Override
  31.     protected void onAbilityResult(int requestCode, int resultCode, Intent resultData) {
  32.         if(requestCode==imgRequestCode)
  33.         {
  34.             HiLog.info(label,"选择图片getUriString:"+resultData.getUriString());
  35.             String chooseImgUri=resultData.getUriString();
  36.             HiLog.info(label,"选择图片getScheme:"+chooseImgUri.substring(chooseImgUri.lastIndexOf('/')));
  37.             DataAbilityHelper helper=DataAbilityHelper.creator(getContext());
  38.             String chooseImgId=null;
  39.             if(chooseImgUri.lastIndexOf("%3A")!=-1){
  40.                 chooseImgId = chooseImgUri.substring(chooseImgUri.lastIndexOf("%3A")+3);
  41.             }
  42.             else {
  43.                 chooseImgId = chooseImgUri.substring(chooseImgUri.lastIndexOf('/')+1);
  44.             }
  45.             Uri uri=Uri.appendEncodedPathToUri(AVStorage.Images.Media.EXTERNAL_DATA_ABILITY_URI,chooseImgId);
  46.             HiLog.error(label,"选择图片dataability路径:"+uri.toString());
  47.             TaskDispatcher globalTaskDispatcher = getGlobalTaskDispatcher(TaskPriority.DEFAULT);
  48.             Revocable revocable = globalTaskDispatcher.asyncDispatch(new Runnable() {
  49.                 @Override
  50.                 public void run() {
  51.                     try {
  52.                         FileDescriptor fd = helper.openFile(uri, "r");
  53.                         imageSource = ImageSource.create(fd, null);
  54.                         pixelMap = imageSource.createPixelmap(null);
  55.                         getContext().getUITaskDispatcher().asyncDispatch(new Runnable() {
  56.                             @Override
  57.                             public void run() {
  58.                                 ComponentProvider componentProvider = new ComponentProvider(ResourceTable.Layout_form_grid_pattern_widget_2_2, getContext());
  59.                                 componentProvider.setPixelMap(ResourceTable.Id_form_grid_pattern_widget_image,"setPixelMap", pixelMap);
  60.                                 try {
  61.                                     updateForm(formId,componentProvider);
  62.                                 } catch (FormException e) {
  63.                                     e.printStackTrace();
  64.                                 }
  65.                             }
  66.                         });

  68.                     } catch (Exception e) {
  69.                         e.printStackTrace();
  70.                     } finally {
  71.                         if (imageSource != null) {
  72.                             terminateAbility();
  73.                         }
  74.                     }
  75.                 }
  76.             });

  78.         }
  79.     }
  80. }
复制代码


当用户点击卡片进行交互的时候，默认就会弹出获取存储的权限，毕竟我们是需要选择手机图库中的文件用于显示的。

而且当用户选择图片完成之后，除了替换卡片上的图片之外，编辑界面肯定也是需要关闭的，所以finally之后，需要调用terminateAbility()关闭编辑界面。

到这里，我们仿照图库选择自定义卡片图片的功能就完全实现了。具体效果如头视频所示。

代码地址：https://gitee.com/liyuanjinglyj/GIFCard

附件：
GIFCard.zip
(1.56 MB, 下载次数: 0)



举报

回帖

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