04 ธันวาคม 2556

[Android Code] ใส่ลูกเล่นด้วย Animation ให้กับ List View


        วันนี้เจ้าของบล็อกจะมาแนะนำเทคนิคเล็กๆน้อยๆกับ List View ที่จะทำให้แอปพลิเคชันของผู้ที่หลงเข้ามาอ่านมีลูกเล่นมากขึ้น


        สามารถประยุกต์เป็นลูกเล่นแบบอื่นๆได้นะ ให้ผู้ที่หลงเข้ามาอ่านไปหัดลองประยุกต์กันเองละกันนะ โดย List View ที่จะใส่ลูกเล่นนั้นต้องเป็น Custom List View นะ เพราะว่าจะมีการใส่โค๊ดเพิ่มเข้าไปในคลาส Adapter ของ List View

        ผู้ที่หลงเข้ามาอ่านหลายๆคนอาจจะยังไม่รู้เกี่ยวกับ Custom List View มากนักและไม่รู้ว่าในคลาส Adapter ของ Custom List View ว่ามีการทำงานยังไง ถ้ายังไม่เคยลองทำ Custom List View มาก่อน ให้ไปดูบทความนี้ก่อน [Android Code] Custom List View เบื้องต้น

        สำหรับบทความนี้จะใส่ลูกเล่นให้กับ List View ธรรมดาๆเท่านั้น ซึ่งประกอบไปด้วย Text View แค่อย่างเดียว เพื่อให้เข้าใจง่าย ดังนั้นคลาส Adapter เจ้าของบล็อกใช้ ArrayAdapter<String> ถึงจะใช้แบบอื่นก็ไม่ต่างกันนักหรอก ถ้าพยายามทำความเข้าใจนะ

public class CustomAdapter extends ArrayAdapter<String> {
    ...
    
    public CustomAdapter(Context context, int textResId, String[] obj) {
        super(context, textResId, obj);
              ...
    }
 
    public View getView(int position, View convertView, ViewGroup parent) {
        ...
        
        return ...;
    }
}

        ตัวอย่างโค๊ดข้างต้นนี้เป็นโค๊ด Adapter สำหรับ Custom List View อย่างง่าย เจ้าของบล็อกลดรูปให้เหลือน้อยสุด เพื่อให้ดูได้ง่ายขึ้นนะ ถ้าดูคร่าวๆเจ้าของบล็อกตั้งชื่อคลาสว่า Custom Adapter โดยสืบทอดคลาสมาจาก ArrayAdapter<String> เพื่อทำ Custom List View

        ทีนี้ให้โฟกัสไปที่ getView ผู้ที่หลงเข้ามาอ่านหลายๆคนอาจจะไม่รู้ ว่าเจ้าฟังก์ชันนี้มันมีไว้ทำอะไร เพราะปกติเอาโค๊ดไปใช้อย่างเดียว

        ฟังก์ชัน getView เป็นฟังก์ชันที่จะทำงานเมื่อ View ถูกแสดง ก่อนอื่นให้มองว่า List View เป็นการนำ View มาเรียงต่อๆกันจำนวนเยอะๆ


        กรอบสีฟ้าคือพื้นที่หน้าจออุปกรณ์แอนดรอยด์ที่ผู้ใช้จะเห็นจริงๆ ในขณะที่มีบางอันที่จะไม่ได้แสดงอยู่บนหน้าจอ เพราะล้นจอ

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


        ปกติ View ที่อยู่นอกพื้นที่หน้าจอก็จะไม่ทำอะไร แต่เมื่อส่วนใดส่วนหนึ่ง แม้จะนิดเดียวโผล่แว่บเข้ามาในพื้นที่ ฟังก์ชัน getView สำหรับ View ตัวนี้ก็จะเริ่มทำงานทันที ดังนั้นคำสั่งในฟังก์ชันนี้ก็จะเป็นการกำหนดค่าต่างๆให้กับ View เช่นกำหนด Text View กำหนดข้อความ กำหนดบลาๆ แล้วแต่จะใส่

        รู้ว่า getView ทำงานยังไง แล้วทำอะไรได้หรือ?

        เจ้าของบล็อกเชื่ออยู่แล้วว่า ต่อให้เจ้าของบล็อกอธิบายยาวแค่ไหน ก็น่าจะมีผู้ที่หลงเข้ามาอ่านไม่ค่อยเข้าใจในสิ่งที่เล่าไปอยู่ดี ดังนั้นเจ้าของบล็อกจึงขอตั้งคำถามต่อจากคำถามข้างบนนี้ว่า

        เมื่อ getView ทำงานเมื่อ View ถูกแสดงให้เห็นบนหน้าจอ โดยคำสั่งในนี้มีไว้กำหนดค่าต่างๆให้กับ View ถ้าเจ้าของบล็อกใส่โค๊ด Animation ให้กับ View จะเกิดอะไรขึ้น?

        ให้ลองคิดต่อดูครับ ว่าถ้าใส่ลงไปจะเกิดอะไรขึ้น
        .
        .
        .
        เวลาที่ View โผล่ขึ้นมาบนหน้าจอ Animation ก็จะทำงานทันทีหรือก็คือสามารถใส่ลูกเล่นในขณะที่ View แสดงขึ้นมาได้


        ก่อนอื่นเจ้าของบล็อกขอเตรียม Layout สำหรับ Custom List View ดังนี้

listview_row.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#FFFFFF"
    android:gravity="center_vertical"
    android:orientation="horizontal" >
    
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:text="TextView"
        android:textSize="20sp"
        android:textColor="#000000" />
    
</LinearLayout>
        เป็นแค่ Custom List View ธรรมดาๆที่มีแต่ Text View

package app.akkexorcist.customlistviewwithanim;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AnimationUtils;
import android.widget.ArrayAdapter;
import android.widget.TextView;

public class CustomAdapter extends ArrayAdapter<String> {
    String[] str; 
    Context mContext;
    LayoutInflater inflater;
    
    public CustomAdapter(Context context, int textViewResourceId
            , String[] objects) {
        super(context, textViewResourceId, objects);
        str = objects;
        mContext = context;
        inflater = (LayoutInflater)context.getSystemService(
                Context.LAYOUT_INFLATER_SERVICE);
    }
 
    public View getView(int position, View convertView, ViewGroup parent) {
        View row = inflater.inflate(R.layout.listview_row, parent, false);
        
        TextView textView = (TextView) row.findViewById(R.id.textView);
        textView.setText(str[position]);
        
        return row;
    }
}
        อันนี้เป็นคลาสสำหรับ Custom List View ที่ธรรมดาๆ ทีนี้ให้ดูที่ getView ที่กำหนดค่าให้กับ Text View เมื่อแสดงใน List View ซึ่งในนี้นี่แหละ ถ้าเจ้าของบล็อกใส่โค๊ด Animation ให้กับ Text View เข้าไปละ


CustomAdapter.java
package app.akkexorcist.customlistviewwithanim;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AnimationUtils;
import android.widget.ArrayAdapter;
import android.widget.TextView;

public class CustomAdapter extends ArrayAdapter<String> {
    String[] str; 
    Context mContext;
    LayoutInflater inflater;
    
    public CustomAdapter(Context context, int textViewResourceId
            , String[] objects) {
        super(context, textViewResourceId, objects);
        str = objects;
        mContext = context;
        inflater = (LayoutInflater)context.getSystemService(
                Context.LAYOUT_INFLATER_SERVICE);
    }
 
    public View getView(int position, View convertView, ViewGroup parent) {
        View row = inflater.inflate(R.layout.listview_row, parent, false);
        
        TextView textView = (TextView) row.findViewById(R.id.textView);
        textView.setText(str[position]);
        
        textView.setAnimation(AnimationUtils.loadAnimation(mContext
               , R.anim.listview_anim));
        
        return row;
    }
}

        สำหรับโค๊ด Animation เจ้าของบล็อกใช้ Resource เข้ามาช่วย [Android Code] การสร้าง Animation จาก Animation Resource [Anim] ลองเข้าไปดูกันก่อน โดยใช้เพื่อให้โค๊ดมันดูง่ายขึ้นเท่านั้นแหละ

        สำหรับโค๊ดใน Animation Resource ก็กำหนดไว้ดังนี้

listview_anim.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromXDelta="0" 
        android:fromYDelta="100%p"
        android:toXDelta="0"
        android:toYDelta="0"
        android:duration="1000"
        android:interpolator="@android:anim/bounce_interpolator" /> 

        เป็น Translate Animation ให้วัตถุเลื่อนจากบนลงล่าง โดยมี Interpolator เป็น Bounce Interpolator ศึกษาได้จาก [Android Code] ว่าด้วยเรื่อง Interpolator ใน Animation ผลก็คือวัตถุเคลื่อนที่เหมือนกับวัตถุตกลงพื้นนั่นเอง เมื่อเตรียม Custom List View กับ Animation ครบแล้ว ก็จัดการกับโค๊ด Activity กันต่อเลยละกันเนอะ

Main.java
package app.akkexorcist.customlistviewwithanim;

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

public class Main extends Activity {
    String[] str = { "LG G2", "Samsung Galaxy S4", "SONY Xperia Z1"
            , "ASUS FonePad", "Nokia Lumia 1020", "Huawei Ascend P6"
            , "Nokia Lumia 925", "SONY Xperia Z Ultra", "LG Nexus 5"
            , "Acer Liquid Z3", "HTC One Max", "Lenovo K900"
            , "Nokia Lumia 1520", "OPPO N1", "Motorola Moto G"
            , "HTC One", "OPPO Find 5", "Samsung Galaxy Note 10.1"
            , "ASUS Nexus 7", "Samsung Galaxy Note 3", "LG G Flex"
            , "Nokia Lumia 1320", "SONY Xperia ZR", "Motorola Moto X"
    };
    
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        CustomAdapter adapter = new CustomAdapter(getApplicationContext()
                , android.R.id.text1, str);
        
        ListView listView = (ListView)findViewById(R.id.listView);
        listView.setAdapter(adapter);
    }
}
        ก็เป็นแค่การเรียกใช้งาน Custom List View ธรรมดาๆนั่นแหละ กำหนด String ชุดหนึ่งใส่เข้าไปใน List View ก็แค่นั้น


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

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

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="app.akkexorcist.customlistviewwithanim.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>


        เท่านี้ก็เรียบร้อยแล้ว กับการใส่ลูกเล่นให้กับ List View ต่อจากนี้ก็ลองให้ไปประยุกต์กันดูเองละกันนะ อาจจะเปลี่ยน Animation เป็นแบบอื่นอะไรแบบนี้หรือ Custom List View ที่สร้างมีมากกว่า Text View ก็สามารถใส่ลูกเล่นแบบนี้ได้เช่นกัน แต่ระวังไว้อย่างหนึ่ง สมมติผู้ที่หลงเข้ามาอ่านทำ Custom List View ที่มี Image View และ Text View ให้ระวังภาพ Image View ด้วย เพราะอะไรที่ทำงานหนักเวลาใส่ Animation จะทำให้กระตุกได้ ดังนั้นจึงใช้งานให้พอเหมาะพอสม ไม่ต้องใส่เยอะจนเวิ่นเว้อ

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


        ก็หวังว่าจะไม่มีผู้ที่หลงเข้ามาอ่านถามว่า "เปลี่ยนเป็น Animation แบบอื่นๆทำยังไง" หรอกเนอะ



เหล่าพันธมิตรแอนดรอยด์

Devahoy Layer Net NuuNeoI The Cheese Factory Somkiat CC Mart Routine Artit-K Arnondora Kamonway Try to be android developer Oatrice Benz Nest Studios Kotchaphan@Medium Jirawatee@Medium Travispea@Medium