2. 程式人生 > >Android 顯示 Gif動態圖片的三種常用方法

Android 顯示 Gif動態圖片的三種常用方法

阿新 • • 發佈：2019-02-15

1.首先描述下自定義控制元件的一般方法:

自定義控制元件是被創造出來，所以先要複寫它三個的構造方法，根據需求決定複寫哪個，若沒有自定義屬性，複寫只有一個引數的即可。若有自定義屬性，則可以通過obtainStyledAttributes獲得TypedArray物件，通過該物件獲得屬性並進行相應操作。然後下面的過程和畫畫差不多，我們在畫一樣東西的時候，首先要知道物品大概的樣子，也就是需要複寫onMeasure（）方法，測量控制元件以及其子佈局的大小。知道物品的大概後，我們需要對其裡面的細節精雕細琢，也就是呼叫onLayout（）方法，決定其子View的位置。最後就是將圖整體勾勒出來，即是呼叫onDraw（）方法。這樣子控制元件大概的樣子就出來了，再根據需求增加相應藉口，回撥方法。

2.Android顯示gif的三種方式：

（1）使用Android自帶的Movie物件，將Gif當成視訊。隨著時間的變化，通過setTime方法設定需要顯示的圖片，然後onDraw方法不斷將新的畫畫出來。例項程式碼如下：

MainActivity：

public class MainActivity extends Activity {

	
	private GifView gv;
	private ListView lv_content;
	private int[] gifResource={R.drawable.car,R.drawable.rick,R.drawable.car,R.drawable.mm,R.drawable.qq};
	private MyAdapter adapter=null;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		lv_content=(ListView) findViewById(R.id.lv_content);

		adapter = new MyAdapter();
		lv_content.setAdapter(adapter);
	/*	
		lv_content.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				
				if(adapter!=null)
				{
					adapter.notifyDataSetChanged();
				}
			}
		});*/
	
		// 去掉listView的item點選的效果
//		lv_content.setEnabled(false);
		lv_content.setSelector(color.transparent);
	}
	
	
	private class MyAdapter extends BaseAdapter{

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return gifResource.length;
		}

		@Override
		public Object getItem(int position) {
			return null;
		}

		@Override
		public long getItemId(int position) {
			return 0;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			
			ViewHolder holder=null;
			if(convertView == null)
			{
				convertView=View.inflate(getApplicationContext(), R.layout.item_gif, null);
				holder=new ViewHolder();
				holder.tv_username=(TextView) convertView.findViewById(R.id.tv_username);
				holder.tv_comemnt=(TextView) convertView.findViewById(R.id.tv_comment);
				holder.gv=(GifView) convertView.findViewById(R.id.gv);
				
				convertView.setTag(holder);
			}else{
				
				holder=(ViewHolder) convertView.getTag();
			}
			
			holder.tv_username.setText("username"+position);
			holder.tv_comemnt.setText("comment"+position);
			holder.gv.setMovieResource(gifResource[position]);
			
			holder.gv.setOnClickListener(new OnClickListener() {
				
				@Override
				public void onClick(View v) {
					GifView view=(GifView) v;
					view.setPaused(!view.isPause());
				}
			});
			
			return convertView;
		}
		
		
		class ViewHolder{
			
			public TextView tv_username;
			public TextView tv_comemnt;
			public GifView gv;
			
			
		}
		
	}

	
	
}

自定義元件GifView：

package com.example.gifdemo.view;

import com.example.gifdemo.R;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Movie;
import android.os.Build;
import android.os.SystemClock;
import android.util.AttributeSet;
import android.view.View;


/**使用Android自定義的movie實現**/

public class GifView extends View{

	
	private static final int DEFAULT_GIF_DURATION=1000;
	// the reference for gif
	private int mMovieResourceId;
	private Movie mMovie;
	
	
	private long mStart;
	private int mCurrentAnimationTime=0;
	
	private boolean mPause=true;
	private boolean mVisible=true;
	
	
	private long mWidth;
	private long mHeight;
	
	private float mScale;
	
	private float mLeft;
	private float mTop;
	
	private int mMeasuredWidth;
	private int mMeasureHeight;
	
	public GifView(Context context) {
		this(context,null);
	}
	
	
	public GifView(Context context, AttributeSet attrs) {
		this(context, attrs,R.styleable.CustomTheme_gifMoviewViewStyle);
	}
	
	
	public GifView(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		setViewAttributes(context, attrs, defStyleAttr);
	}
	
	
	private void setViewAttributes(Context context, AttributeSet attrs, int defStyleAttr)
	{
		
		/**
		 * Starting from HONEYCOMB have to turn off HW acceleration to draw
		 * Movie on Canvas.
		 */
		if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.HONEYCOMB)
		{
			setLayerType(View.LAYER_TYPE_SOFTWARE, null);
		}
		
		//?? TODO get the collection of the attrs
		final TypedArray array=context.obtainStyledAttributes(attrs, R.styleable.GifView, defStyleAttr, R.style.Widget_GifMoviewView);
		
		mPause=array.getBoolean(R.styleable.GifView_paused, true);
		mMovieResourceId=array.getResourceId(R.styleable.GifView_gif, -1);
		
		// recycle TypedArray
		array.recycle();
		
		if(mMovieResourceId!=-1)
		{
			mMovie=Movie.decodeStream(getResources().openRawResource(mMovieResourceId));
		}
		
	}
	
	
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		
		if(mMovie!=null)
		{
			
			int mWidth=mMovie.width();
			int mHeight=mMovie.height();
			
		
		float scaleX=1f;
		int measureModeWidth=MeasureSpec.getMode(widthMeasureSpec);
		if(measureModeWidth!=MeasureSpec.UNSPECIFIED)
		{
			int maximumWidth=MeasureSpec.getSize(widthMeasureSpec);
			if(mWidth>maximumWidth)
			{
				scaleX=(float)mWidth/(float)maximumWidth;
			}
		}
		
		
		float scaleY=1f;
		int measureModeHeight=MeasureSpec.getMode(heightMeasureSpec);
		if(measureModeHeight!=MeasureSpec.UNSPECIFIED)
		{
			int maximumHeight=MeasureSpec.getSize(heightMeasureSpec);
			if(mHeight>maximumHeight)
			{
				scaleY=(float)mHeight/(float)maximumHeight;
			}
		}
		
		
		mScale=1f/Math.max(scaleX, scaleY);
		
		mMeasuredWidth=(int) (mWidth*mScale);
		mMeasureHeight=(int) (mHeight*mScale);
		
		setMeasuredDimension(mMeasuredWidth,mMeasureHeight);
		}else
		{
			setMeasuredDimension(getSuggestedMinimumWidth(), getSuggestedMinimumHeight());
			
		}
		
	}
	
	
	
	@Override
	protected void onLayout(boolean changed, int left, int top, int right,
			int bottom) {
		super.onLayout(changed, left, top, right, bottom);
		
		/** Calculate left / top for drawing in center **/
		
		mLeft=(getWidth()-mMeasuredWidth)/2f;
		mTop=(getHeight()-mMeasureHeight)/2f;
		
		mVisible= getVisibility() == View.VISIBLE;
	}
	
	
	@Override
	protected void onDraw(Canvas canvas) {
		
		if(mMovie!=null)
		{
			
			if(!mPause)
			{
				updateCurrentTime();
				drawFrame(canvas);
				invalidateView();
			}else{
				
				drawFrame(canvas);
			}
			
		}
	}
	
	
	private void updateCurrentTime()
	{
		long now=SystemClock.uptimeMillis();
		if(mStart==0)
		{
			mStart=now;
		}
		
		int dur=mMovie.duration();
		if(dur==0)
		{
			dur=DEFAULT_GIF_DURATION;
		}
		
		mCurrentAnimationTime=(int)((now-mStart)%dur);
		
	}
	
	private void drawFrame(Canvas canvas)
	{
		
		mMovie.setTime(mCurrentAnimationTime);
		canvas.save(Canvas.MATRIX_SAVE_FLAG);
		canvas.scale(mScale, mScale);
		// TODO
		mMovie.draw(canvas, mLeft/mScale, mTop/mScale);
		mMovie.draw(canvas, 0, 0);
		canvas.restore();
	}
	
	
	/**
	 * Invalidates view only if it is visible.
	 * <br>
	 * {@link #postInvalidateOnAnimation()} is used for Jelly Bean and higher.
	 * 
	 */
	@SuppressLint("NewApi")
	private void invalidateView() {
		if(mVisible) {
			if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
				postInvalidateOnAnimation();
			} else {
				invalidate();
			}
		}
	}
	
	
	
	// the methods of the important attribute
	public void setPaused(boolean pause)
	{
		this.mPause=pause;
		
		// retrieve the StartTime
		if(!mPause)
		{
			mStart=SystemClock.uptimeMillis()-mCurrentAnimationTime;
		}
		
		invalidate();
	}
	
	
	public boolean isPause()
	{
		return mPause;
	}
	
	
	public void setMovieResource(int movieResourceId)
	{
		this.mMovieResourceId=movieResourceId;
		mMovie=Movie.decodeStream(getResources().openRawResource(movieResourceId));
		// important Call this when something has changed which has invalidated the
	    //layout of this view. 
		requestLayout();
	}
	
	public void setMovie(Movie movie)
	{
		this.mMovie=movie;
		requestLayout();
	}
	
	
	public Movie getMovie()
	{
		return mMovie;
	}
	
	
	public void setMovieTime(int time)
	{
		this.mCurrentAnimationTime=time;
		invalidate();
	}
}

（2）自定義TextView顯示Gif，先使用GifDecoder將Gif檔案解析成一張張圖片，然後通過ImageSpan將圖片顯示在TextView中，定義一個執行緒不斷重新整理圖片。

自定義TextView：

package com.yyg.gifdemo3.view;

public class MyTextView extends TextView{

	private Context mContext;
	private SpannableStringBuilder mSb=new SpannableStringBuilder();
	private String dummyStr="dummy";
	private SimpleImageMemCache mCache;
	private List<AnimatedImageSpan> mGifSpanList=new ArrayList<AnimatedImageSpan>();
	
	
	public MyTextView(Context context) {
		super(context);
		mContext=context;
	}
	
	public MyTextView(Context context, AttributeSet attrs) {
		super(context, attrs);
		mContext=context;
		
	}	
	
	public MyTextView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		mContext=context;
	}
	
	public void setImageCache(SimpleImageMemCache pImageCache)
	{
		this.mCache=pImageCache;
	}
	
	
	
	@Override
	protected void onDetachedFromWindow() {
		super.onDetachedFromWindow();
		Log.d(this.getClass().getName(), "onDetachedFromWindow ");
		for (AnimatedImageSpan ais : mGifSpanList) {
			Log.d(this.getClass().getName(), "animation playing " + ais.isPlaying());
			if (ais.isPlaying()) {
				ais.stopRendering();
			}
		}
		mGifSpanList.clear();
		mSb.clearSpans();
		mSb.clear();
	}
	

	public void appendText(String text)
	{
		mSb.append(text);
	}
	public void appendAnimation(GifResource pAssetsSet,AnimationSettings pSettings)
	{
		mSb.append(dummyStr);
		AnimatedImageSpan ais=new AnimatedImageSpan(mContext);
		ais.setAssetsSet(pAssetsSet);
		ais.setBitmapCache(mCache);
		mSb.setSpan(ais, mSb.length()-dummyStr.length(), mSb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
		AnimationClickableSpan clickableSpan=new AnimationClickableSpan(this, ais, pSettings);
		mSb.setSpan(clickableSpan, mSb.length()-dummyStr.length(), mSb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
		mGifSpanList.add(ais);
	}
	
	public void finishAddContent()
	{
		this.setText(mSb);
		// setMovementMethod，此方法在需要響應使用者事件時使用，如點選一個電話號碼就跳轉到撥號頁面。如果不執行這個方法是不會響應事件的，即便文字看著已經是下劃線藍色字了。
		this.setMovementMethod(LinkMovementMethod.getInstance());
	}
	
	private static class AnimationClickableSpan extends ClickableSpan
	{
		private AnimatedImageSpan mImageSpan;
		private AnimationSettings mSettings;
		private AnimatedImageUpdateHandler updateHandler;
		
		
		public AnimationClickableSpan(MyTextView pTextView ,AnimatedImageSpan pAnimatedImageSpan,AnimationSettings pSettings)
		{
			this.mImageSpan=pAnimatedImageSpan;
			this.mSettings=pSettings;
			this.updateHandler=new AnimatedImageUpdateHandler(pTextView);
		}

		@Override
		public void onClick(View widget) {
			
			if(this.mImageSpan.isPlaying())
			{
				this.mImageSpan.stopRendering();
			}else{
				
				this.mImageSpan.playGif(this.mSettings,this.updateHandler);
			}
		}
		
	}
	
}

（3）使用WebView載入Gif：

package com.example.gifdemo3;


import android.os.Build;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.webkit.WebView;


public class MainActivity extends Activity {


	private WebView wv_gif;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		wv_gif=(WebView) findViewById(R.id.wv_gif);
		
		if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT)
		{
			
			wv_gif.loadUrl("http://www.wyzu.cn/data/uploadfile/200803/2008032812262650.gif");
		}
	}






}


相關推薦

Android 顯示 Gif動態圖片的三種常用方法

1.首先描述下自定義控制元件的一般方法: 自定義控制元件是被創造出來，所以先要複寫它三個的構造方法，根據需求決定複寫哪個，若沒有自定義屬性，複寫只有一個引數的即可。若有自定義屬性，則可以通過obtainStyledAttributes獲得TypedArray物件，通過該物件

Android學習筆記2 TextView圖文混排，顯示新增的圖片，三種常用方法，親測

圖文混排，文字就不說了，主要是顯示圖片的方法 1、TextView使用ImageSpan顯示圖片 ImageSpan span = new ImageSpan(this, R.drawable.ic_launcher);//載入圖片的資源 SpannableStrin

Android播放Gif動態圖片的幾種方式

下面介紹三種方式。 一、自定義GifView元件 簡介： 這個自定義的gifview元件核心程式碼就是讀取Gif資料，建立Movie例項，繪製每一幀圖片來達到Gif動態效果。這種方式比較直觀方便，程式碼量也少，不過經測試部分Gif圖片不能自適應大小，播放速度比實際播放速度快

Android實現日夜間模式的三種常用方法（一）

 1、使用 setTheme 的方法讓 Activity 重新設定主題；  2、設定 Android Support Library 中的 UiMode 來支援日間/夜間模式的切換；  3、通過資源 id 對映，回撥自定義 ThemeChangeListener 介

JS實現陣列去重方法總結(三種常用方法)

方法一： 雙層迴圈，外層迴圈元素，內層迴圈時比較值 如果有相同的值則跳過，不相同則push進陣列 Array.prototype.distinct = function(){  var arr = this,result = [], i,j,len = arr.length;  f

清理浮動的三種常用方法以及如何居中一個浮動元素

一、清理浮動的三種方法。 當給元素設定了float屬性之後，我們知道，元素便會脫離文件流的束縛，像一片水中浮動的樹葉隨波逐流。但是，在浮動的情況下，可能會導致網頁內容出現一些我們並不想讓其發生的干擾，例如其父元素的包裹作用將失去作用，假如你給父元素設定了漂亮的背景它卻不見了，豈不惹人煩惱！於是

Matplotlib資料視覺化——subplot的另外三種常用方法

第一種方法：subplot2grid 定義一個3*3的矩陣位置，利用subplot2grid分別框選出想要的區域大小，進而在區域中plot出想繪製的函式即可，colspan與rowspan分別表示行數和列數，用來界定大小 說明： 通過這種方法設定title和label需要在前面加上s

檢視linux版本的三種常用方法

http://www.jb51.net/os/RedHat/1114.html 1) 登入到服務器執行 lsb_release -a ，即可列出所有版本資訊，例如： [[email protected] ~]# lsb_release -a LSB Versi

Json資料的序列化與反序列化的三種常用方法介紹

       以下內容是本作者從官網中看相應的教程後所做的demo，其體現了作者對相關知識點的個人理解。。作者才疏學淺，難免會有理解不到位的地方。。還請各位讀者批判性對待。。。       本文主要介紹在Json資料的序列化與反序列化的過程中我經常用到的三種工具的基本使用方法

遍歷Map的三種常用方法 java

[size=medium][b]1、一般的map定義：[/b]Map<Key, Object> map = new HashMap<Key, Object>();這種map的定義，裡面的資料是亂序的，沒有順序規則可依；[b]2、保持有序的map定義：[

python_python中try except處理程式異常的三種常用方法

python中try except處理程式異常的三種常用方法 如果你在寫python程式時遇到異常後想進行如下處理的話,一般用try來處理異常，假設有下面的一段程式： 1 2 3 4 5 6 7 8 try: 語句1 語句2 . .

改變this指向的三種常用方法

JavaScript中this的是一個值得深入的話題，下面總結了改變this指向的3種常用方法。首先弄清楚函式這個概念：函式本身就是一種特殊型別，要時刻明白一點，函式也可以認為是一種變數。 1.通過物

python中try except處理程式異常的三種常用方法

轉載自：http://www.pythontab.com/html/2013/pythonjichu_0204/210.html 如果你在寫python程式時遇到異常後想進行如下處理的話,一般用try來處理異常，假設有下面的一段程式： 1 2 3 4 5 6 7 8 try:

android開發中監聽器的三種實現方法（OnClickListener）

宣告：本寶寶的畢業設計是基於Android開發的********    所以對Android開發有用的文章就先轉載過來    對9月份寫論文起一定幫助作用 標籤： Android開發中監聽器的實現有三種方法，對於初學者來說，能夠很好地理解這三種方法，將能更好地增進自己對a

C語言 陣列初始化的三種常用方法（{0}, memset, for迴圈賦值）以及原理

C語言 陣列初始化的三種常用方法（{0}, memset, for迴圈賦值）以及原理 C語言中，陣列初始化的方式主要有三種：

Android中三種常用解析XML的方式（DOM、SAX、PULL）簡介及區別

字符串 lan win name屬性 Coding 空間 toc log fin XML在各種開發中都廣泛應用，Android也不例外。作為承載數據的一個重要角色，如何讀寫XML成為Android開發中一項重要的技能。今天就由我向大家介紹一下在Android平臺下幾種常見的

android如何新增gif動態圖片

使用android-gif-drawable GIT地址： https://github.com/koral–/android-gif-drawable 1.首先新增引用檔案 ，只需要的app的build.gradle裡新增 dependencies { implement

Android 三種常用實現自定義圓形進度條 ProgressBar 及demo

           Android 自定義 進度條，一般有三種方式，最早一般使用UI給的圖片使用幀動畫，完成，後面兩種，一種是使用自定義顏色，另外一種是使用帶相近色的圖片加動畫完成。 下面具體 說一下三種方式，推薦使用第二種方式，如果這種達不到效果，或者比較高也可使用第一

Android 圖片模糊、高斯模糊、毛玻璃的三種實現方法

轉載自：http://blog.csdn.net/fan7983377/article/details/51568059 效果圖： 原文連結：點選訪問 這使用也很簡單，匯入依賴，使用模糊方法就行，就這兩步搞定 依賴： <code class="hljs

[note]Android按鈕單擊事件的三種常用寫法總結

xml檔案程式碼如下： <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"