31 July 2013

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

Updated on

        และในคราวนี้ก็ถึงคราวของบทความของภาพกันบ้าง โดยเป็นการนำภาพเคลื่อนไหวที่มีนามสกุลไฟล์เป็น 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]