การแสดงภาพ GIF Animation บนแอนดรอยด์ ~ Akexorcist

และในคราวนี้ก็ถึงคราวของบทความของภาพกันบ้าง โดยเป็นการนำภาพเคลื่อนไหวที่มีนามสกุลไฟล์เป็น GIF มาแสดงบนแอปพลิเคชันของผู้ที่หลงเข้ามาอ่าน

ปกติแล้วบนแอนดรอยด์จะไม่สามารถเล่นภาพเคลื่อนไหวได้ ถึงแม้ว่าจะเปิดไฟล์ได้ก็ตาม ก็แสดงแค่ภาพจากเฟรมแรกเท่านั้น แต่บ่อยครั้งก็มีความต้องการนำภาพเหล่านี้มาใช้งานบนแอปพลิเคชัน จึงต้องมีการใช้คำสั่งเพิ่มเติมถึงจะทำให้เป็นภาพเคลื่อนไหวได้

โดยเป็นคลาสๆหนึ่งที่เจ้าของบล็อกนำมาจากที่อื่น มีชื่อว่า GifMovieView ของ Sergey Bakhtiarov ดังนั้นเจ้าของบล็อกก็จะไม่อธิบายอะไร มีแต่วิธีใช้งานเป็นหลัก

ก่อนอื่นก็ให้สร้างโปรเจคขึ้นมาแล้วสร้างไฟล์ attrs.xml ดังนี้

จากนั้นก็เปิดไฟล์ attrs.xml ขึ้นมาแล้วพิมลงไปดังนี้

attrs.xml


<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="GifMoviewView">
        <attr name="gif" format="reference" />
        <attr name="paused" format="boolean" />
    </declare-styleable>

    <declare-styleable name="CustomTheme">
        <attr name="gifMoviewViewStyle" format="reference" />
    </declare-styleable>

</resources>

และไฟล์ style.xml ให้เพิ่่มเข้าไปดังนี้

style.xml


<resources>
    <style name="AppBaseTheme" parent="android:Theme.Light" />
    <style name="AppTheme" parent="AppBaseTheme" />

    <style name="Widget.GifMoviewView" parent="@android:style/Widget" />

</resources>

ต่อไปก็ให้นำไฟล์ภาพ GIF มาไว้ในโฟลเดอร์ drawable จะ drawable อันไหนก็ได้ แต่แนะนำให้เป็นโฟลเดอร์ drawable

ต่อไปให้นำไฟล์คลาส GifMovieView มาไว้ในโปรเจค โดยโหลดจากไฟล์ตัวอย่างที่เจ้าของบล็อกแจกเลยง่ายกว่า ก็ให้โหลดเก็บไว้แล้วเปิดเอาไฟล์ GifMovieView.java แล้วก๊อปไฟล์ไปวางไว้ในโฟลเดอร์โปรเจคเลย

ทีนี้ก็ให้เปิดไฟล์ Layout ขึ้นมาเพื่อวาง Widget สำหรับ GIF ดังนี้

main.xml


<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <app.akexorcist.gif.GifMovieView
        android:id="@+id/gifMovieView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>

ให้สังเกตตรงแท็กของ GifMovieView ใน xml ว่าจะขึ้นต้นด้วยชื่อแพคเกจ เวลาใช้งานจริงก็ให้แก้ชื่อแพคเกจให้ตรงกับแอปพลิเคชันนั้นๆด้วย

สำหรับการเรียกใช้งานใน Java ก็ไม่มีอะไรมากมายเลย เพียงแค่ประกาศเรียกใช้คลาส GifMovieView และกำหนดค่า เวลาเรียกใช้ก็มีคำสั่งให้กำหนดไฟล์ Gif ที่ต้องการได้ทันที

Main.java


package app.akexorcist.gif;

import android.os.Bundle;
import android.app.Activity;

public class Main extends Activity {

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
  
        GifMovieView gmv = (GifMovieView)findViewById(R.id.gifMovieView);
        gmv.setMovieResource(R.drawable.apple);  
    }
}

AndroidManifest.xml


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="app.akexorcist.gif"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="app.akexorcist.gif.Main"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

สำหรับขนาดของภาพที่ใช้ จะไม่ถูกขยายตามขนาดของ Widget นะ สมมติ Widget ขนาด 100dp แต่ภาพแค่ 50px จะไม่ขยายเต็ม 100dp แต่ภาพจะแสดงอยู่ในขนาด 50px เหมือนเดิมเท่านั้น กรณีที่ภาพใหญ่กว่า Widget ก็จะถูกย่อลงมาให้เท่ากับ Widget แทน

สำหรับผู้ที่หลงเข้ามาอ่านคนใดที่ต้องการไฟล์ตัวอย่าง สามารถดาวน์โหลดได้ที่ GIF [Google Drive]

31 July 2013