android實現多圖片放大縮小的切換
前天在網上看到了http://v.qq.com/vplus/56c7ec6c231bdbafd198c58fb86eb4dc 作者仿QQ的程式碼,看了一下感覺很受啟發。正好,單位在做引導頁的時候,要用到類似的東西,只不過是放大縮小的樣子。好了,下面我們來看一下程式碼。
package com.example.cg.scaleimageview.Customs;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.widget.ImageView;
import com.example.cg.scaleimageview.R;
/**
* 自定義控制元件,根據傳入的圖片組,對圖片進行從小到大的顯示
* 作者:cg
* 時間:2017/4/24 0024 上午 10:30
*/
public class ScaleImageView extends ImageView {
private Drawable mDrawable;
private Handler mHandler;
private int[] imgSrc = new int[]{R.mipmap.mm1};
private boolean isEnlarge = true;
private float scaleNum = 1.0f; //圖片初始放大的倍數
private float scaleMaxNum = 1.2f; //圖片最大會被放大多少,預設是1.2倍
private float scaleValue = 0.002f; //圖片每次放大縮小的倍數
private int num = 1; //當前顯示到第幾個圖
public ScaleImageView(Context context) {
this(context,null);
}
public ScaleImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ScaleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.getTheme().obtainStyledAttributes(attrs,R.styleable.ScaleImageView,defStyleAttr,0);
int n = array.getIndexCount();
for(int i=0;i<n;i++)
{
int arr = array.getIndex(i);
switch (arr)
{
case R.styleable.ScaleImageView_isEnlarge:
isEnlarge = array.getBoolean(arr,true);
break;
case R.styleable.ScaleImageView_scaleMaxNum:
scaleMaxNum = array.getFloat(arr,1.2f);
break;
case R.styleable.ScaleImageView_scaleValue:
scaleValue = array.getFloat(arr,0.002f);
break;
}
}
array.recycle();
if(!isEnlarge)
{
scaleNum = scaleMaxNum;
}
//初始化第一個圖
mDrawable=getDrawable();
mHandler=new ScaleImageView.MoveHandler();
mHandler.sendEmptyMessageDelayed(1, 220L);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.scale(scaleNum,scaleNum,getMeasuredWidth()/2,getMeasuredHeight()/2);
mDrawable.draw(canvas);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
if(isEnlarge) {
mDrawable.setBounds(0, 0, getMeasuredWidth(), getMeasuredHeight());
}else{
int mCanvasWBgSize = Math.round(getMeasuredWidth() * scaleMaxNum);
int mCanvashBgSize = Math.round(getMeasuredHeight() * scaleMaxNum);
int leftRight = (mCanvasWBgSize - getMeasuredWidth())/2;
int topBottom = (mCanvashBgSize - getMeasuredHeight())/2;
mDrawable.setBounds(-leftRight,-topBottom,getMeasuredWidth() + leftRight,getMeasuredHeight() + topBottom);
}
}
private class MoveHandler extends Handler{
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
/**
* 此處進行判斷,如果小於最大倍數,就不斷放大,如果大於了最大或等於最大倍數,就進行換圖
*/
if(isEnlarge) {
if (scaleNum < scaleMaxNum) {
scaleNum += scaleValue;
invalidate();
mHandler.sendEmptyMessageDelayed(1, 22);
} else {
scaleNum = 1.0f;
setImageResource(imgSrc[num % 3]);
mDrawable = getDrawable();
num++;
invalidate();
mHandler.sendEmptyMessageDelayed(1, 22);
}
}else{
if(scaleNum >= 0.9) {
scaleNum -= 0.002;
invalidate();
mHandler.sendEmptyMessageDelayed(1, 22);
}else {
scaleNum = scaleMaxNum;
//如果圖片只有一個,哪就迴圈此圖片,不用更新
if(imgSrc.length!=1) {
setImageResource(imgSrc[num % 3]);
mDrawable = getDrawable();
num++;
}
invalidate();
mHandler.sendEmptyMessageDelayed(1, 22);
}
}
}
}
/**
* 載入圖片列表
* @param images 圖片列表
*/
public void setImages(int[] images)
{
this.imgSrc = images;
invalidate();
}
}
程式碼中我加了詳細的註解。都不難理解。
下載
CSDN下載地址
gitHub下載地址
相關文章
- C語言實現BMP圖片的放大縮小C語言
- android 自定義ImageView實現圖片手勢滑動,多點觸控放大縮小效果AndroidView
- css3 實現圖片等比例放大與縮小CSSS3
- imageView圖片放大縮小及旋轉View
- Canvas——滑桿操控圖片放大縮小Canvas
- JS實現動態瀑布流及放大切換圖片效果(js案例)JS
- axure教程|axure之圖片拖動放大縮小
- js實現放大縮小頁面JS
- iOS 仿淘寶實現商品規格圖片的放大縮小功能iOS
- flutter實現可縮放可拖拽雙擊放大的圖片功能Flutter
- canvas實現的圖片放大鏡效果Canvas
- js圖片等比例放大縮小例項程式碼JS
- javascript仿新浪微博圖片放大縮小及旋轉效果JavaScript
- jquery實現的具有漸變效果的圖片切換jQuery
- 點選按鈕實現圖片切換效果
- JQuery實現簡單美觀的圖片切換效果jQuery
- Android 實現APP可切換多語言AndroidAPP
- 實現圖片縮放
- 滑鼠懸浮實現圖片動畫上下切換效果動畫
- 用原生JS實現 圖片輪播切換 功能JS
- CSS3實現的圓球放大縮小效果CSSS3
- switchable圖片切換
- javascript實現的圖片簡單切換程式碼例項JavaScript
- 使用HTML5 canvas做地圖(3)圖片載入平移放大縮小HTMLCanvas地圖
- iOS實現點選圖片放大&長按儲存圖片iOS
- css實現滑鼠滑過切換背景圖片程式碼CSS
- JNI實現圖片壓縮
- 高德地圖 放大縮小 logo很大地圖Go
- Android-壓縮大圖到容量超小的圖片Android
- jQuery實現的滑鼠滑過切換圖片程式碼例項jQuery
- CSS實現圖片等比例縮小不變形CSS
- Android 動態佈局實現多主題切換Android
- 視訊直播app原始碼,點選圖片放大再點選縮小APP原始碼
- Android圖片壓縮實現過程及程式碼Android
- js點選實現多圖順序切換和迴圈切換效果程式碼JS
- 23.Quick QML-簡單且好看的圖片瀏覽器-支援多個圖片瀏覽、縮放、旋轉、滑輪切換圖片UI瀏覽器
- 前端的圖片壓縮image-compressor(可在圖片上傳前實現圖片壓縮)前端
- 利用 canvas 實現圖片壓縮Canvas