Android加载长图滑动显示

1、记录下学到的Android加载长图写法以备后用

首先准备一张长图。这里把图片先放到项目的 assets文件夹下：命名为big.png

然后开始自定义显示长图的view ：BigView

import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.BitmapRegionDecoder; import android.graphics.Canvas; import android.graphics.Matrix; import android.graphics.Rect; import android.support.annotation.Nullable; import android.util.AttributeSet; import android.view.GestureDetector; import android.view.MotionEvent; import android.view.View; import android.widget.Scroller; import java.io.IOException; import java.io.InputStream; public class BigView extends View implements GestureDetector.OnGestureListener,View.OnTouchListener{ private Scroller mScroller; private Rect mRect; private BitmapFactory.Options mOptions; private GestureDetector mGresureDetector; private int mImageWight,mImageHeight; private BitmapRegionDecoder mDecoder; private int mViewWidth,mViewHeight; private float mScale; private Bitmap bitmap; public BigView(Context context) { this(context,null,0); } public BigView(Context context, @Nullable AttributeSet attrs) { this(context, attrs,0); } public BigView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); //指定区域 mRect = new Rect(); //需要复用 mOptions = new BitmapFactory.Options(); //手势识别类 mGresureDetector = new GestureDetector(context,this); //设置onTouchListener setOnTouchListener(this); //滑动帮助 mScroller = new Scroller(context); } /** * 由使用者输入一张图片 * @param is * @return */ public void setImage(InputStream is){ //先读取原图片的信息 宽、高 mOptions.inJustDecodeBounds = true; BitmapFactory.decodeStream(is,null,mOptions); mImageWight = mOptions.outWidth; mImageHeight = mOptions.outHeight; //开启复用 mOptions.inMutable = true; //设置格式成RBG_565，因为565 存储像素点占用内存小，一个像素点只需要两个字节 mOptions.inPreferredConfig = Bitmap.Config.RGB_565; mOptions.inJustDecodeBounds = false; //创建一个区域解码器 try { mDecoder = BitmapRegionDecoder.newInstance(is,false); } catch (IOException e) { e.printStackTrace(); } requestLayout(); } /** * 在测量的时候把我们需要的内存区域获取到 存入到mRect中 * @param * @return */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); //获取测量的view的大小 mViewWidth = getMeasuredWidth(); mViewHeight = getMeasuredHeight(); //如果解码器拿不到，表示没有设置过要显示的图片 if (null == mDecoder){ return; } //确定要加载的图片的区域 mRect.left = 0; mRect.top = 0; mRect.right = mImageWight; //获取一个缩放比例 mScale = mViewWidth / (float)mImageWight; //高度就根据缩放比进行获取 mRect.bottom = (int)(mViewHeight/mScale); } /** * 画出内容 * @param * @return */ @Override protected void onDraw(Canvas canvas){ super.onDraw(canvas); //如果解码器拿不到，表示没有设置过要显示的图片 if (null == mDecoder){ return; } //复用上一张bitmao mOptions.inBitmap = bitmap; //解码指定区域 bitmap = mDecoder.decodeRegion(mRect,mOptions); //把得到的矩阵大小的内存进行缩放 Matrix matrix = new Matrix(); matrix.setScale(mScale,mScale); //画出来 canvas.drawBitmap(bitmap,matrix,null); } /** * 手按下的回调 * @param e * @return */ @Override public boolean onDown(MotionEvent e) { //如果移动还没有停止，强制停止 if (!mScroller.isFinished()){ mScroller.forceFinished(true); } //继续接受后续事件 return true; } /** * * @param e1 手势按下去的事件 开始获取坐标 * @param e2 当前手势事件 获取当前坐标 * @param distanceX x方向移动的距离 * @param distanceY y方向移动的距离 * @return */ @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { //上下移动的时候，需要改变显示的区域 改mRect mRect.offset(0,(int)distanceY); //处理移动时已经移到了两个顶端的问题 if (mRect.bottom > mImageHeight){ mRect.bottom = mImageHeight; mRect.top = mImageHeight-(int)(mViewHeight/mScale); } if (mRect.top < 0){ mRect.top = 0; mRect.bottom = (int)(mViewHeight/mScale); } invalidate(); return false; } /** * 处理惯性问题 * @param e1 * @param e2 * @param velocityX 每秒移动的x点 * @param velocityY * @return */ @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { //做计算 -velocityY 正负号问题，相反的 // ( 按下手指不拿开，屏幕跟着手势方向，若松开，方向则向相反方向滑动 ) 故 使用 负值才能正常使用 mScroller.fling(0,mRect.top,0, (int) -velocityY,0,0,0, mImageHeight-(int)(mViewHeight/mScale)); return false; } /** * 使用上一个接口的计算结果 */ @Override public void computeScroll() { if (mScroller.isFinished()){ return; } //true 表示当前滑动还没有结束 if (mScroller.computeScrollOffset()){ mRect.top = mScroller.getCurrY(); mRect.bottom = mRect.top+(int)(mViewHeight/mScale); invalidate(); } } @Override public void onShowPress(MotionEvent e) { } @Override public boolean onSingleTapUp(MotionEvent e) { return false; } @Override public void onLongPress(MotionEvent e) { } @Override public boolean onTouch(View v, MotionEvent event) { //交给手势处理 return mGresureDetector.onTouchEvent(event); } }

自定义view写完后，在要显示的布局中引入这个bigview控件，这个就不写了，放到布局就行了

下面在activity中展示：

public class BigViewActivity extends AppCompatActivity { @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.bigview_layout); BigView bigView = findViewById(R.id.bigview); InputStream is = null; try { //加载图片 is = getAssets().open("big.png"); bigView.setImage(is); }catch (Exception e){ e.printStackTrace(); }finally { if (is != null){ try { is.close(); } catch (IOException e) { e.printStackTrace(); } } } } }

好了这些就行了，运行就可以看到加载长图，手动上下滑动浏览大图了

转自：文艺范的世界 

原文链接：原文链接