Android实现TV端大图浏览效果的全过程

目录
  • 前言
  • 1.BitmapRegionDecoder:
  • 2.SubsamplingScaleImageView
  • 3.Glide+SubsamplingScaleImageView混合加载渲染
  • 4.自定义LongImageView,结合BitmapRegionDecoder使用
  • 5.在MainActivity中的使用:
  • 6.布局文件代码:
  • 7.实现的效果如下:
  • 总结

前言

最近TV开发需要加载的图片很长,大小也很大,并且还不允许压缩。比如显示:世界地图、清明上河图、微博长图、海报、活动照片等。

那么对于这种需求,该如何做呢?

首先不压缩,按照原图尺寸加载,那么屏幕肯定是不够大的,并且考虑到内存的情况,不可能一次性整图加载到内存中,所以肯定是局部加载,那么就需要用到一个类:

  • BitmapRegionDecoder

其次,既然屏幕显示不完,那么最起码要添加一个上下左右拖动的手势,让用户可以拖动查看。

实现方式有很多:

1.BitmapRegionDecoder:

分片加载,使用系统BitmapRegionDecoder去加载本地的图片,调用bitmapRegionDecoder.decodeRegion解析图片的矩形区域,返回bitmap,最终显示在ImageView上。这种方案需要手动处理滑动、缩放手势,网络图片还要处理缓存策略等问题。实现方式比较繁琐也不是很推荐。

2.SubsamplingScaleImageView

一款封装 BitmapRegionDecoder的三方库,已经处理了滑动,缩放手势。我们可以考虑选择这个库来进行加载长图,但是官方上的Demo示例加载的长图均为本地图片。这可能并不符合我们的网络场景需求,所以对于网络图片,我们还要考虑不同的加载框架,

3.Glide+SubsamplingScaleImageView混合加载渲染

对于图片加载框架,Glide当然是首选,我们使用Glide进行网络图片的下载和缓存管理,FileTarget作为桥梁,SubsamplingScaleImageView进行本地资源图片的分片加载,看起来很靠谱,那么一起来实现吧。

4.自定义LongImageView,结合BitmapRegionDecoder使用

本文采取的第四种方式,代码如下:

public class LongImageView extends AppCompatImageView {
    private String TAG = getClass().getSimpleName();
    private int mTargetY = 0;
    private int scrollDistance = 0;
    private int imgWidth = 0, imgHeight = 0;
    private Bitmap imgBitmap = null;
    private Bitmap holderBitmap;
    private BitmapRegionDecoder bitmapRegionDecoder;
    private boolean isScrolling = false;
    private float startY = -1;
    private int mStartTargetY = -1;
    private BitmapFactory.Options scaleOptions = new BitmapFactory.Options();
    public Bitmap bitmap;
    public static final String EVENT_PROP_URL = "url";
    public static final String EVENT_PROP_BITMAP_WIDTH = "resourceWidth";
    public static final String EVENT_PROP_BITMAP_HEIGHT = "resourceHeight";
​
    public LongImageView(Context context) {
        super(context);
        init();
    }
​
    public LongImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }
​
    public LongImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
​
    private void init() {
        //遥控器按键事件
        setOnKeyListener(new OnKeyListener() {
            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {
                scrollDistance = scrollDistance <= 0 ? getHeight() : scrollDistance;
                if (event.getAction() == KeyEvent.ACTION_DOWN && !isScrolling) {
                    switch (event.getKeyCode()) {
                        case KeyEvent.KEYCODE_DPAD_UP:
                            scrollBy(0 - viewHeight2ImageHeight(scrollDistance));
                            break;
                        case KeyEvent.KEYCODE_DPAD_DOWN:
                            scrollBy(viewHeight2ImageHeight(scrollDistance));
                            break;
                    }
                }
                return false;
            }
​
        });
        //响应鼠标拖拽(手指也可以)
        setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        Log.e(TAG, " touch down");
                        startY = event.getRawY();
                        mStartTargetY = mTargetY;
                        break;
                    case MotionEvent.ACTION_MOVE:
                        float currentY = event.getRawY();
                        mTargetY = mStartTargetY + (int) (viewHeight2ImageHeight((int) (startY - currentY)) * 1f);
                        mTargetY = Math.max(0, Math.min(mTargetY, imgHeight - viewHeight2ImageHeight(getHeight())));
                        Log.e(TAG, " touch move " + mTargetY);
                        invalidate();
                        break;
                    case MotionEvent.ACTION_UP:
                        Log.e(TAG, " touch up");
                        startY = -1;
                        break;
                }
                return true;
            }
        });
    }
​
    private void startScroll(int targetY) {
        targetY = Math.max(0, Math.min(targetY, imgHeight - viewHeight2ImageHeight(getHeight())));
        ValueAnimator valueAnimator = ValueAnimator.ofInt(mTargetY, targetY);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mTargetY = (int) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                isScrolling = true;
            }
​
            @Override
​
            public void onAnimationEnd(Animator animation) {
                isScrolling = false;
            }
​
            @Override
​
            public void onAnimationCancel(Animator animation) {
                isScrolling = false;
            }
​
            @Override
​
            public void onAnimationRepeat(Animator animation) {
            }
        });
        valueAnimator.setInterpolator(new LinearInterpolator());
        //设置滑动速度
        valueAnimator.setDuration(10);
        valueAnimator.start();
    }
​
​
    /**
     * 根据InputStream 生成 BitmapRegionDecoder
     *
     * @param imgStream
     */
    public void setImageStream(InputStream imgStream) {
        try {
            BitmapFactory.Options options = new BitmapFactory.Options();
            options.inJustDecodeBounds = true;
            BitmapFactory.decodeStream(imgStream, new Rect(0, 0, 0, 0), options);
            imgWidth = options.outWidth;
            imgHeight = options.outHeight;
            //寻找最佳的缩放比例
            int viewHeight2ImageHeight = viewHeight2ImageHeight(getHeight());
            //设置缩放比例
            int scale = getScaleValue(imgWidth, viewHeight2ImageHeight, 1);
            scaleOptions.inSampleSize = scale;
        } catch (Exception e) {
            e.printStackTrace();
        }
        try {
            bitmapRegionDecoder = BitmapRegionDecoder.newInstance(imgStream, false);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
​
    /**
     * 根据图片文件 生成 BitmapRegionDecoder
     *
     * @param imgFile
     */
    public void setImageFile(File imgFile) {
        try {
            BitmapFactory.Options options = new BitmapFactory.Options();
            options.inJustDecodeBounds = true;
            BitmapFactory.decodeFile(imgFile.getAbsolutePath(), options);
            imgWidth = options.outWidth;
            imgHeight = options.outHeight;
            //寻找最佳的缩放比例
            int viewHeight2ImageHeight = viewHeight2ImageHeight(getHeight());
            int scale = getScaleValue(imgWidth, viewHeight2ImageHeight, 1);
            scaleOptions.inSampleSize = scale;
        } catch (Exception e) {
            e.printStackTrace();
        }
        try {
            bitmapRegionDecoder = BitmapRegionDecoder.newInstance(imgFile.getAbsolutePath(), false);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
​
    private int getScaleValue(int imgWidth, int imgHeight, int scaleValue) {
        long memory = Runtime.getRuntime().maxMemory() / 4;
        if (memory > 0) {
            if (imgWidth * imgHeight * 4 > memory) {
                scaleValue += 1;
                return getScaleValue(imgWidth, imgHeight, scaleValue);
            }
        }
        return scaleValue;
    }
​
    /**
     * 根据图片Id 生成 BitmapRegionDecoder
     *
     * @param resourceId
     */
    @SuppressLint("ResourceType")
    public void setImageResource(int resourceId) {
        InputStream imgStream = getResources().openRawResource(resourceId);
        setImageStream(imgStream);
    }
​
    /**
     * 设置占位图
     *
     * @param holderId
     */
    public void setPlaceHolder(int holderId) {
        holderBitmap = BitmapFactory.decodeResource(getResources(), holderId);
    }
​
    /**
     * 滑动到具体的位置
     *
     * @param targetY
     */
    private void scrollTo(int targetY) {
        startScroll(targetY);
    }
​
    /**
     * 设置相对于当前,继续滑动的距离。小于0 向上滑动,大于0向下滑动
     *
     * @param distance
     */
    private void scrollBy(int distance) {
        startScroll(mTargetY + distance);
    }
​
    /**
     * 设置每次滑动的距离
     *
     * @param scrollDistance
     */
    public void setScrollDistance(int scrollDistance) {
        this.scrollDistance = scrollDistance;
    }
​
    @Override
    protected void onDraw(Canvas canvas) {
        Log.e(getClass().getSimpleName(), "draw start " + getWidth() + " " + getHeight());
        canvas.save();
        int sr = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        if (bitmapRegionDecoder != null) {
            int targetHeight = viewHeight2ImageHeight(getHeight());//根据控件的高度获取需要在原始图片上截取的高度
            Log.e(getClass().getSimpleName(), "targetHeight " + targetHeight);
            Log.e(getClass().getSimpleName(), "draw resource "
                    + " " + imgWidth + " " + imgHeight
                    + " " + mTargetY + " " + targetHeight);
            imgBitmap = null;
            if (imgHeight - mTargetY >= targetHeight) {//剩余区域大于 当前控件高度
                imgBitmap = bitmapRegionDecoder.decodeRegion(new Rect(0, mTargetY, imgWidth, mTargetY + targetHeight)
                        , scaleOptions);
            } else {//剩余区域小于 当前控件高度
                imgBitmap = bitmapRegionDecoder.decodeRegion(new Rect(0, imgHeight - targetHeight, imgWidth, imgHeight)
                        , scaleOptions);
            }
            if (imgBitmap != null) {
                //绘制需要展示的图片
                canvas.drawBitmap(imgBitmap
                        , new Rect(0, 0, imgBitmap.getWidth(), imgBitmap.getHeight())
                        , new Rect(0, 0, getWidth(), getHeight())
                        , paint);
            }
            imgBitmap = null;
            holderBitmap = null;
        } else {
            if (holderBitmap != null) {//绘制占位图
                canvas.drawBitmap(holderBitmap
                        , new Rect(0, 0, holderBitmap.getWidth(), holderBitmap.getHeight())
                        , new Rect(0, 0, getWidth(), getHeight())
                        , paint);
            }
        }
        canvas.restoreToCount(sr);
        canvas.restore();
        Log.e(getClass().getSimpleName(), "draw end");
    }
​
    /**
     * 图片高度转为相对于控件的高度
     *
     * @param imgHeight
     * @return
     */
    private int imageHeight2ViewHeight(int imgHeight) {
        if (this.imgHeight <= 0) {
            return 0;
        }
        return (int) (imgHeight / ((float) getWidth() / imgWidth * imgHeight) * getHeight());
    }
​
    /**
     * 控件高度转为相对于图片高度
     *
     * @param viewHeight
     * @return
     */
    private int viewHeight2ImageHeight(int viewHeight) {
        if (getHeight() <= 0) {
            return 0;
        }
        return (int) (viewHeight / ((float) getWidth() / imgWidth * imgHeight) * imgHeight);
    }
​
    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        //回收资源和释放内存
        release();
    }
​
    public void release() {
        if (imgBitmap != null && !imgBitmap.isRecycled()) {
            imgBitmap.recycle();
            imgBitmap = null;
        }
        if (holderBitmap != null && !holderBitmap.isRecycled()) {
            holderBitmap.recycle();
            holderBitmap = null;
        }
        System.gc();
    }
}

5.在MainActivity中的使用:

/**
 * @auth: njb
 * @date: 2022/11/7 0:11
 * @desc:
 */
public class MainActivity extends AppCompatActivity {
    public String url = "https://qcloudimg-moss.cp47.ott.cibntv.net/data_center/files/2022/10/26/67a66d35-3f7c-4de8-9dfe-c706e42f44f2.jpg";
​
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
​
    private void initView() {
        LongImageView mImageView = findViewById(R.id.imageView);
        mImageView.setScrollDistance((int) ((float) ScreenUtils.getScreenHeight(this) / 3 * 2));
        mImageView.setFocusable(true);
        try {
            Glide.with(this)
                    .load(url)
                    .downloadOnly(new SimpleTarget<File>() {
                        @Override
                        public void onResourceReady(@NonNull File resource, @Nullable Transition<? super File> transition) {
                            mImageView.setImageFile(resource);
​
                        }
                    });
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

6.布局文件代码:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <com.example.longimageView.view.LongImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:focusable="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

7.实现的效果如下:

总结

到此这篇关于Android实现TV端大图浏览效果的文章就介绍到这了,更多相关Android TV端大图浏览内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 在Android中高效的加载大图的方法示例

    将大图加载到内存中总是令人痛苦,因为我们经常会在应用的崩溃报告中看到OOM(Out Of Memory)的bug.大家都知道,Android系统的内存有限.我们必须牢记这一点. stackoverflow上有很多关于大图加载的问题,当你的应用程序遇到OOM的时候,你可以选择直接复制粘贴其中的答案来解决这个问题.因此,你完全可以略过本篇文章,但我想介绍一些加载大图的基础知识及其实际工作的原理. 我只想解释图片解码背后的逻辑.我建议你使用Picasso或Glide来加载图片.没有必要重新发明轮子.

  • Android 实现WebView点击图片查看大图列表及图片保存功能

    在日常开发过程中,有时候会遇到需要在app中嵌入网页,此时使用WebView实现效果,但在默认情况下是无法点击图片查看大图的,更无法保存图片.本文将就这一系列问题的实现进行说明. 图示: 项目的知识点: 加载网页后如何捕捉网页中的图片点击事件: 获取点击的图片资源后进行图片显示,获取整个页面所有的图片: 支持查看上下一张的图片以及对图片缩放显示: 对图片进行保存: 其他:图片缓存的处理(不用每次都重新加载已查看过的图片) 项目代码结构: 前期准备(添加权限.依赖和混淆设置): 添加权限: <us

  • Android 实现加载大图片的方法

    项目简介: 该项目为加载大图片 详细介绍: 对于超大的图片,如果不缩放的话,容易导致内存溢出.而经过处理后,无论多大的图片,都能够在手机屏幕上加载出来,不会导致内存溢出.当然,脸黑的除外 该应用涉及到的知识有: - 1.Bitmap的使用 - 2.Android手机中加载图片的原理 有的时候,我们加载一张不足1M的图片,尽管手机的堆内存有16M,仍然会导致内存溢出,why? 这就更计算机加载图片的原理有关了: 1).手机会解析图片的所有像素信息,把每个像素信息都存入到内存中 2).Android

  • Android中超大图片无法显示的问题解决

    发现问题 最近在做图片浏览功能时遇到了一个很蛋疼的问题,在开启硬件加速情况下,超大图无法正常显示(图的长宽有一个大于9000),而且程序不会crash,只是图片加载不出来,View显示为黑色.通过查看日志,发现系统打印出了下面的内容: W OpenGLRenderer( 4014): Bitmap too large to be uploaded into a texture (600x9518, max=8192x8192) 从日志内容可以看出,这是由OpenGL打印出来的日志,是由于图片的尺

  • Android自定义View实现数字雨效果的全过程

    目录 效果图 实现步骤 总结 效果图 在安卓中多种类型的动画,有帧动画.补间动画.属性动画,除此之外,使用自定义的View结合数学公式,就可以绘制出复杂的界面或者动画.这篇文章记录的是仿照黑客帝国的数字雨,来看看效果吧. 实现步骤 准备工作,常量的配置信息 // 文字的颜色值 final int DEFAULT_TEXT_COLOR = Color.argb(255, 0, 255, 70); // 文字大小 final int TEXT_SIZE = 24; // 普通画笔 Paint mPa

  • Android编程实现图片的浏览、缩放、拖动和自动居中效果

    本文实例讲述了Android编程实现图片的浏览.缩放.拖动和自动居中效果的方法.分享给大家供大家参考,具体如下: Touch.java /** * 图片浏览.缩放.拖动.自动居中 */ public class Touch extends Activity implements OnTouchListener { Matrix matrix = new Matrix(); Matrix savedMatrix = new Matrix(); DisplayMetrics dm; ImageVie

  • Android UI控件之Gallery实现拖动式图片浏览效果

    我们知道现在智能手机上都有这样一种功能,就是你在浏览图片的时候.不是硬性的点击按钮而是可以实现手指的拖动,划开效果.使用户具有更好的交互体验,不过这种效果是如何实现的呢? 在Android中是通过Gallery来实现拖动效果的. 通过Gallery可以实现各种各样的效果,此篇文章只是简要谈谈他的用法,至于后续的一些效果 有机会的时候做一个整理. 首先看看其简单实现吧!本次实例是通过选取图片实现类似设置背景的功能! 不过需要说明的是:图片不宜过大,否则容易内存溢出,android对大图片的支持不好

  • Android用TextView实现跑马灯效果代码

    目录 [前言] 一.新手设置跑马灯效果 [关键点讲解] [总结] 二.高端玩家设置跑马灯效果 三.延伸阅读 总结 [前言] 在Textview设置的宽度有限,而需要显示的文字又比较多的情况下,往往需要给Textview设置跑马灯效果才能让用户完整地看到所有设置的文字,所以给TextView设置跑马灯效果的需求是很常见的 一.新手设置跑马灯效果 1.先在xml中给Textview设置好对应的属性 <TextView android:id="@+id/tv" android:layo

  • 利用iOS实现系统相册大图浏览功能详解

    前言 本文主要给大家介绍了关于iOS实现系统相册大图浏览功能的相关资料,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 最终效果图 大图浏览 实现过程 创建两个UICollectionView分别放置大图和缩略图 实现大图和缩略图的联动 实现当前展示的大图对应的缩略图放大效果 实现原理 创建collectionView非常简单,只要正常创建就好,值得注意的是:由于需要当前展示的图片的缩略图始终保持在屏幕中间位置,所以在创建缩略图的collectionView的时候需要对coll

  • Android实现广告图片轮播效果

    本文实例介绍了Android广告轮播图效果实现方法,分享给大家供大家参考,具体内容如下 首先看下一下布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:

  • Android实现RecyclerView下拉刷新效果

    本文为大家分享了Android实现RecyclerView下拉刷新效果的具体代码,供大家参考,具体内容如下 思路 RealPullRefreshView继承了一个LinearLayout 里面放置了一个刷新头布局,将其margin_top设置为负的刷新头的高度的 再添加一个RecyclerView 触摸事件分发机制,当在特定条件下让RealPullRefreshView拦截触摸事件,否则的话,不拦截,让RecyclerView自己去处理触摸事件 在手指下拉时,定义好不同的状态STATE,在不同状

  • Android仿斗鱼直播的弹幕效果

    记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战.而弹幕则无疑是直播功能当中最为重要的一个功能之一,那么今天,我就带着大家一起来实现一个简单的Android端弹幕效果. 分析 首先我们来看一下斗鱼上的弹幕效果,如下图所示: 这是一个Dota2游戏直播的界面,我们可以看到,在游戏界面的上方有很多的弹幕,看直播的观众们就是在这里进行讨论的. 那么这样的一个界面该如何实现呢?其实并

  • Android view随触碰滑动效果

    主要思路是通过父布局的onTouch(),方法,获取滑动到的位置和点击下的位置,再去设置子view的位置.我的代码中考虑了在边缘情况.需要注意的是,使用RelativeLayout,以imageView为例.从测试结果来看,bottomMargin 和rightMargin 性能非常差,最好还是用leftMargin与topMargin定位. 下面是运行效果: 布局文件里面就是一个Relativelayout中有一个ImageView.如下 <?xml version="1.0"

  • Android TextSwitcher实现文字上下翻牌效果(铜板街)

    tvNotice = (TextSwitcher)rootView.findViewById(R.id.tv_notice); tvNotice.setFactory(new ViewSwitcher.ViewFactory() { //这里 用来创建内部的视图,这里创建TextView,用来显示文字 public View makeView() { TextView tv =new TextView(getContext()); //设置文字大小 tv.setTextSize(TypedVal

随机推荐

其他