HarmonyOS鸿蒙Next中加载长图(大图自动适用屏幕的宽度)

HarmonyOS鸿蒙Next中加载长图(大图自动适用屏幕的宽度)

implementation 'io.openharmony.tpc.thirdlib:glide:1.0.3' 

implementation 'io.openharmony.tpc.thirdlib:subsampling-scale-image-view:1.0.4'//加载长图


private void initView() {
    GlideUrl glideUrl = new GlideUrl(url, new LazyHeaders.Builder()
            .build());
    Glide.with(context)
            .asBitmap()
            .load(glideUrl)
            .apply(new RequestOptions()
                    .placeholder(ResourceTable.Media_boy)
                    .error(ResourceTable.Media_boy)
                    .skipMemoryCache(true) // 不使用内存缓存
                    .diskCacheStrategy(DiskCacheStrategy.NONE) // 不使用磁盘缓存
            )
            .into(new SimpleTarget<PixelMap>() {
                public void onResourceReady(PixelMap pixelMap, Transition<? super PixelMap> transition) {
                    longImg.setPixelMap(pixelMap);
                    int phoneWidth = DisplayUtils.getDisplayWidthInPx(context);
                    int phoneHeight = DisplayUtils.getDisplayHeightInPx(context);
                    Log.d("屏幕-宽度", phoneWidth + "");
                    Log.d("屏幕-高度", phoneHeight + "");
                    int picWidth = pixelMap.getImageInfo().size.width;
                    int picHeight = pixelMap.getImageInfo().size.height;
                    Log.d("图片-宽度", picWidth + "");
                    Log.d("图片-高度", picHeight + "");
                    float scaleNum = ((float) phoneWidth / (float) picWidth);
                    Log.d("放大比率-宽度", scaleNum + "");
                    //如果 图片的高度度 大于 屏幕的宽度 就把原始图片放大到屏幕的宽度 放大的比率是 手机屏幕的宽度除以图片的宽度
                    if (picHeight >= phoneHeight) {
                        Log.d("设置最小放大比率", "小====");
                        longImg.setMinScale(scaleNum);
                    }
                }
            });
}

更多关于HarmonyOS鸿蒙Next中加载长图(大图自动适用屏幕的宽度)的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

楼主很棒哦，有个Codelabs挑战赛期待您的参与，链接：https://developer.huawei.com/consumer/cn/forum/topic/0201877679236150031?fid=0101271690375130218

更多关于HarmonyOS鸿蒙Next中加载长图(大图自动适用屏幕的宽度)的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中加载长图并使其自动适应屏幕宽度，可以使用Image组件结合fit属性来实现。fit属性可以设置为ImageFit.Contain，这样图片会按比例缩放以适应屏幕宽度，同时保持图片的宽高比。

示例代码如下：

import { Image, ImageFit } from '@ohos.agp.components';

// 假设图片资源路径为'resources/base/media/long_image.png'
const image = new Image(this);
image.src = 'resources/base/media/long_image.png';
image.fit = ImageFit.Contain;

通过这种方式，长图会自动适应屏幕宽度，并且不会失真。如果需要进一步优化图片加载性能，可以考虑使用Image组件的load事件来监听图片加载状态，或者使用Image的cache属性来启用图片缓存。

在HarmonyOS鸿蒙Next中加载长图并使其自动适应屏幕宽度，可以使用Image组件，并设置fit属性为ImageFit.Fill。同时，通过width和height属性动态获取屏幕宽度，并保持图片的宽高比。示例代码如下：

import { Image, ImageFit } from '@ohos.agp.components';
import { getContext } from '@ohos.ability.featureAbility';

const context = getContext();
const screenWidth = context.getResourceManager().getDeviceCapability().screenWidth;

<Image
  src="path_to_long_image"
  fit={ImageFit.Fill}
  width={screenWidth}
  height="auto"
/>

这样，长图将自动适应屏幕宽度，并保持原始比例。

回到顶部