[文章]

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

2021-7-18 18:27:07  385 鸿蒙系统 harmonyos
分享
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">

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

  14. </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">

  8.     <Button
  9.         ohos:id="$+id:ability_choice_image_button"
  10.         ohos:height="match_content"
  11.         ohos:width="match_content"
  12.         ohos:text_size="25vp"
  13.         ohos:text="选择图片"
  14.         ohos:text_color="#FF0000"/>


  15. </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());

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

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

  65.                     } catch (Exception e) {
  66.                         e.printStackTrace();
  67.                     } finally {
  68.                         if (imageSource != null) {
  69.                             terminateAbility();
  70.                         }
  71.                     }
  72.                 }
  73.             });

  74.         }
  75.     }
  76. }
复制代码


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

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

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

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

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

评论

您需要登录后才可以回帖 登录 | 注册

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
发文章
快速回复
扫一扫分享
返回顶部 返回列表