【软通动力】HarmonyOS三方件开发指南(10)——GifImage 原创 精华

软通田可辉
发布于 2021-2-18 17:28
浏览
19收藏

1. GifImage组件功能介绍
1.1. 功能介绍:
GifImage组件是一个可以显示加载动态图片(gif格式)的三方组件。

1.2. 模拟器上运行效果:
 【软通动力】HarmonyOS三方件开发指南(10)——GifImage-鸿蒙开发者社区

 

2. GifImage使用方法
2.1. 新建工程,增加组件Har包依赖
在应用模块中添加HAR,只需要将GifImage.har复制到entry\libs目录下即可(由于build.gradle中已经依赖的libs目录下的*.har,因此不需要在做修改)。

2.2. 设置gif的布局文件
修改主页面的布局文件ability_main.xml,将Image更新为Gif并将图片源设为gif格式

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <com.isoftstone.modulea.Gif
        ohos:id="$+id:testimg"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:image_src="$media:gif6"
        ohos:layout_alignment="horizontal_center"
    />

    <com.isoftstone.modulea.Gif
        ohos:id="$+id:testimg1"
        ohos:image_src="$media:coffe"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="horizontal_center"
        />

    <com.isoftstone.modulea.Gif
        ohos:layout_alignment="horizontal_center"
        ohos:height="match_content"
        ohos:image_src="$media:deleting"
        ohos:width="match_content"
        ohos:id="$+id:text"
        />

</DirectionalLayout>

2.3.  MainAbilitySlice的UI加载代码
设置Gif gif= findComponentById(ResourceTable.Id_**)即可。
3. GifImage开发实现
3.1. 新建一个Module
新建一个Module,类型选择HarmonyOS Library,模块名为Gif,如图

【软通动力】HarmonyOS三方件开发指南(10)——GifImage-鸿蒙开发者社区

3.2. 新建Gif类
新建一个Gif类,继承自Image类,设置 ResourceManager并通过attrSet.getAttr("image_src").get().getStringValue() 获取图片路径,代码如下:

public class Gif extends Image{
public Gif(Context context) throws IOException, NotExistException, WrongTypeException {
    super(context);
    this.context=context;
    ResourceManager resourceManager =context.getResourceManager();
    init(resourceManager);
}
public Gif(Context context, AttrSet attrSet) throws IOException, NotExistException, WrongTypeException {
    super(context, attrSet);
    this.context=context;
    String id  = attrSet.getAttr("image_src").get().getStringValue();
    // $media:16777218
    Pattern pattern = Pattern.compile("[^0-9]");
    Matcher matcher = pattern.matcher(id);
    String all = matcher.replaceAll("");
    ids = Integer.valueOf(all);
    ResourceManager resourceManager = context.getResourceManager();
    init(resourceManager);
}
}

为了实现动画,需要定义一个AnimatorValue,并设置动画侦听回调函数,代码如下:

// 动画

private AnimatorValue animatorValue;

创建ImageSource和 RawFileEntry读取文件并通过while循环获得图片的每一帧:

private void init()  {
  ImageSource.SourceOptions sourceOptions = new ImageSource.SourceOptions();
  ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions();
  decodingOptions.allowPartialImage=true;
  sourceOptions.formatHint="image/gif";
  RawFileEntry rawFileEntry = resourceManager.getRawFileEntry(resourceManager.getMediaPath(ids));
  imageSource = ImageSource.create(rawFileEntry.openRawFile(),sourceOptions);
  if (imageSource != null) {
      i=0;
      while(imageSource.createPixelmap(i,decodingOptions)!=null) {
          pixelMapList.add(imageSource.createPixelmap(i, decodingOptions));
          i++;
      }
}

 通过AnimatorValue启动动画

 

 animatorValue = new AnimatorValue();
    animatorValue.setCurveType(Animator.CurveType.LINEAR);
    animatorValue.setDelay(100);
    animatorValue.setLoopedCount(Animator.INFINITE);
    animatorValue.setDuration(2000);
    animatorValue.setValueUpdateListener(mAnimatorUpdateListener);
    animatorValue.start();

为实现图片切换效果,在动画监听回调函数内设置setPixelMap,进度为v*pixelMapList.size()

(转换为Int类型)

// 动画侦听函数

private final AnimatorValue.ValueUpdateListener mAnimatorUpdateListener
        = new AnimatorValue.ValueUpdateListener() {
    @Override
    public void onUpdate(AnimatorValue animatorValue, float v) {
      index++;
setPixelMap(pixelMapList.get((int)(v*pixelMapList.size())));
        invalidate();
    }
};

3.3. 编译HAR包
利用Gradle可以将HarmonyOS Library库模块构建为HAR包,构建HAR包的方法如下:

在Gradle构建任务中,双击PackageDebugHar或PackageReleaseHar任务,构建Debug类型或Release类型的HAR。

待构建任务完成后,可以在GifImage> bulid > outputs > har目录中,获取生成的HAR包。

【软通动力】HarmonyOS三方件开发指南(10)——GifImage-鸿蒙开发者社区

项目源代码地址:https://github.com/isoftstone-dev/gif_HarmonyOS

欢迎交流:HWIS-HOS@isoftstone.com

 

 

 

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2021-2-18 17:28:12修改
23
收藏 19
回复
举报
26条回复
按时间正序
/
按时间倒序
软通田可辉
软通田可辉

开工大吉

回复
2021-2-18 17:29:40
张荣超_九丘教育
张荣超_九丘教育

👍👍👍

回复
2021-2-18 21:30:15
软通田可辉
软通田可辉 回复了 张荣超_九丘教育
👍👍👍

张老师新年快乐

回复
2021-2-19 08:52:46
张荣超_九丘教育
张荣超_九丘教育 回复了 软通田可辉
张老师新年快乐

新年快乐哈~~

回复
2021-2-19 10:14:18
Whyalone
Whyalone

开工大吉!

回复
2021-2-20 10:21:59
鲜橙加冰
鲜橙加冰

开工大吉!

回复
2021-2-20 13:31:03
白鹿白鹿
白鹿白鹿

大佬救命 怎么在AbilitySlice获取根布局就想安卓的activity.findViewById(android.R.id.content))

回复
2021-2-21 02:08:54
软通田可辉
软通田可辉 回复了 Whyalone
开工大吉!

开工大吉!

回复
2021-2-22 09:07:21
软通田可辉
软通田可辉 回复了 鲜橙加冰
开工大吉!

开工大吉!

回复
2021-2-22 09:07:29
软通田可辉
软通田可辉 回复了 白鹿白鹿
大佬救命 怎么在AbilitySlice获取根布局就想安卓的activity.findViewById(android.R.id.content))

findComponentById(ResourceTable.content);

回复
2021-2-22 11:49:14
白鹿白鹿
白鹿白鹿 回复了 软通田可辉
findComponentById(ResourceTable.content);

这个方法获取xml文件里的带id的控件可以,我是想获取根布局下的api里的布局。然后底层布局上去改动布局

回复
2021-2-23 10:59:48
mb5fd173af2a0c8
mb5fd173af2a0c8 回复了 白鹿白鹿
这个方法获取xml文件里的带id的控件可以,我是想获取根布局下的api里的布局。然后底层布局上去改动布局

就是在不知道xml文件中的控件id的情况下,根据AbilitySlice怎么获取到它的跟布局。

这个问题也困扰我很久了,目前还没找到方法。只能是临时通过给xml中最外层layout设置个id,然后findComponentById的方法来替代。

 

回复
2021-2-23 11:23:26
软通田可辉
软通田可辉 回复了 白鹿白鹿
这个方法获取xml文件里的带id的控件可以,我是想获取根布局下的api里的布局。然后底层布局上去改动布局

根据AbilitySlice获取跟布局,可以新建一个类继承自AbilitySlice,重写SetUIContent方法,将跟布局保存起来,然后新增GetUIContent方法返回跟布局。
注意使用时一定要调用重写的SetUIContent方法,而不能调用另一个带int layoutRes参数的SetUIContent方法。

public class MyAbilitySlice extends AbilitySlice {
    /* 跟布局 */
    private ComponentContainer componentContainer;

    @Override
    public void setUIContent(ComponentContainer componentContainer) {
        // 保存跟布局
        this.componentContainer = componentContainer;
        super.setUIContent(componentContainer);
    }

    public ComponentContainer getUIContent() {
        // 返回跟布局
        return componentContainer;
    }
}

回复
2021-2-23 14:29:30
软通田可辉
软通田可辉 回复了 mb5fd173af2a0c8
就是在不知道xml文件中的控件id的情况下,根据AbilitySlice怎么获取到它的跟布局。 这个问题也困扰我很久了,目前还没找到方法。只能是临时通过给xml中最外层layout设置个id,然后findComponentById的方法来替代。

根据AbilitySlice获取跟布局,可以新建一个类继承自AbilitySlice,重写SetUIContent方法,将跟布局保存起来,然后新增GetUIContent方法返回跟布局。
注意使用时一定要调用重写的SetUIContent方法,而不能调用另一个带int layoutRes参数的SetUIContent方法。

public class MyAbilitySlice extends AbilitySlice {
    /* 跟布局 */
    private ComponentContainer componentContainer;

    @Override
    public void setUIContent(ComponentContainer componentContainer) {
        // 保存跟布局
        this.componentContainer = componentContainer;
        super.setUIContent(componentContainer);
    }

    public ComponentContainer getUIContent() {
        // 返回跟布局
        return componentContainer;
    }
}

回复
2021-2-23 14:29:56
白鹿白鹿
白鹿白鹿 回复了 软通田可辉
根据AbilitySlice获取跟布局,可以新建一个类继承自AbilitySlice,重写SetUIContent方法,将跟布局保存起来,然后新增GetUIContent方法返回跟布局。注意使用时一定要调用重写的SetUIContent方法,而不能调用另一个带int layoutRes参数的SetUIContent方法。 public class MyAbilitySlice extends AbilitySlice { /* 跟布局 */ private ComponentContainer componentContainer; @Override ...

public class MainAbilitySlice extends MyAbilitySlice implements Component.ClickedListener {

 

    LoadingLayout vLoading;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        setUIContent(   这里的跟布局怎么获取  安卓是android.R.id.content   );
        vLoading = LoadingLayout.wrap(getUIContent());
    }

}

这里setUIContent( );这里的ComponentContainer

回复
2021-2-23 19:58:31
白鹿白鹿
白鹿白鹿

谢谢大神,是我太愚钝了

 

public void onStart(Intent intent) {
    super.onStart(intent);
    super.setUIContent(ResourceTable.Layout_ability_main);
    setUIContent((ComponentContainer)         findComponentById(ResourceTable.Id_mDirectionalLayout));

    vLoading = LoadingLayout.wrap(getUIContent());
}

 

这样就可以了 完美  666

回复
2021-2-23 20:15:17
白鹿白鹿
白鹿白鹿 回复了 mb5fd173af2a0c8
就是在不知道xml文件中的控件id的情况下,根据AbilitySlice怎么获取到它的跟布局。 这个问题也困扰我很久了,目前还没找到方法。只能是临时通过给xml中最外层layout设置个id,然后findComponentById的方法来替代。

这个方法也是可行的,最终还是要得到当前页面布局。其实可以用当前布局去获取父类布局,然后通过父类布局ComponentContainer和子类布局联动,替换增加相关布局。我目前就是这样处理的

回复
2021-2-24 10:17:20
软通田可辉
软通田可辉 回复了 白鹿白鹿
谢谢大神,是我太愚钝了 public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); setUIContent((ComponentContainer) findComponentById(ResourceTable.Id_mDirectionalLayout)); vLoading = LoadingLayout.wrap(getUIContent());} 这样就可以了 完美 666

能帮助到你,就是我最大的安慰。

回复
2021-2-24 15:37:09
PengHuAnZ
PengHuAnZ

git仓库我拉下来运行不行。。

1
回复
2021-2-28 13:18:32
软通白荷
软通白荷 回复了 PengHuAnZ
git仓库我拉下来运行不行。。

你好,代码拉下来可以看到页面,也可以正常运行,但是再看到动画之前,确实需要等待两秒左右才能出来,你可以再试试,如果有问题,我们再沟通,谢谢

回复
2021-3-10 10:00:31
回复
    相关推荐