鸿蒙 HarmonyOS 原子化服务 卡片
需求分析
顾名思义,博主这里是需要创建一个GIF动图卡片,让GIF动起来。不过,目前鸿蒙的JS卡片不支持显示相册文件(Java支持)。所以,暂时我们用资源文件GIF图片代替。以下卡片基于JS。
Js卡片布局
因为我们这里只是显示一个GIF图片,所以默认的2*2卡片即可,布局也很简单就显示一张图片而已。代码如下:
index.hml:
index.css:
- .list_pattern_layout {
- flex-direction: column;
- align-items: center;
- width: 100%;
- margin: 10px;
- height: 100%;
- }
- .div_image{
- width: 100%;
- height: 100%;
- object-fit: scale-down;
- }
index.json:
- {
- "data": {
- "imageUrl": ""
- }
- }
这里,就是简单的一个图片资源文件路径而已。而动图的播放是用定时器来切换动图的播放。
定时轮播动图
这里,我们需要通过WidgetAbility类的onCreateForm()方法启动定时器任务,示例代码如下所示:
- public class WidgetAbility extends Ability {
- private int pageNum = 0;
- private int length = LYJConstant.imageFilePath.length - 1;
- private void startTimer(long formId) {
- Timer timer = new Timer();
- timer.schedule(
- new TimerTask() {
- @Override
- public void run() {
- if (pageNum >= length) {
- pageNum = 1;
- } else {
- pageNum += 1;
- }
- updateJsForms(formId,pageNum);
- }
- },
- 0,
- 100);
- }
- private void updateJsForms(long formId,int num) {
- ZSONObject zsonObject = new ZSONObject();
- zsonObject.put("imageUrl", "common/"+String.valueOf(num)+".png");
- FormBindingData formBindingData=new FormBindingData(zsonObject);
- try {
- updateForm(formId,formBindingData);
- } catch (FormException e) {
- e.printStackTrace();
- }
- }
- @Override
- protected ProviderFormInfo onCreateForm(Intent intent) {
- HiLog.info(TAG, "onCreateForm");
- long formId = intent.getLongParam(AbilitySlice.PARAM_FORM_IDENTITY_KEY, INVALID_FORM_ID);
- String formName = intent.getStringParam(AbilitySlice.PARAM_FORM_NAME_KEY);
- int dimension = intent.getIntParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY, DEFAULT_DIMENSION_2X2);
- HiLog.info(TAG, "onCreateForm: formId=" + formId + ",formName=" + formName);
- FormControllerManager formControllerManager = FormControllerManager.getInstance(this);
- FormController formController = formControllerManager.getController(formId);
- formController = (formController == null) ? formControllerManager.createFormController(formId,
- formName, dimension) : formController;
- if (formController == null) {
- HiLog.error(TAG, "Get null controller. formId: " + formId + ", formName: " + formName);
- return null;
- }
- //启动定时任务
- this.startTimer(formId);
- return formController.bindFormData();
- }
这里,就是将一张张单个的图片连贯起来达到轮播动图的目的。到这里,我们的GIF动图卡片就全部实现了。
本文源代码地址:https://github.com/liyuanjinglyj/GIFCard
回帖(1)
2021-7-7 11:51:49
秀啊,感觉这卡片挺好玩的
秀啊,感觉这卡片挺好玩的
更多回帖
长按上方图片保存到相册