Android Developer

เขียนแอพ Android สร้าง Animation เวลาเปลี่ยนหน้าด้วย Intent

การเปลี่ยนหน้าของ Android ด้วย Intent Activity นั้นบางทีเราต้องการ Animation เลื่อนหน้าจอจากขวาไปซ้าย หรือซ้ายไปขวา ให้ดูน่าสนใจเราสามารถทำได้ดังนี้

ให้เราสร้าง New Project ขึ้นมาใหม่ตั้งชื่อว่า IntentAnimation กำหนดรูปแบบเป็น Blank Activity ครับ

Screen Shot 2558-12-29 at 9.02.03 PM

สร้าง New Project มาใหม่

Screen Shot 2558-12-29 at 9.02.31 PM

เลือก Blank Activity

เมื่อพร้อมแล้วให้ออกแบบหน้าจอของแอพพลิเคชันของเราด้วย Button Widget แก้ไขไฟล์ content_main.xml ตามนี้

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.daydev.intentanimation.MainActivity"
    tools:showIn="@layout/activity_main">


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="53dp"
        android:src="@drawable/logo" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Change View"
        android:id="@+id/button"
        android:layout_marginTop="151dp"
        android:layout_below="@+id/imageView"
        android:layout_centerHorizontal="true"
        android:singleLine="true"
        android:background="#02a4f0"
        android:textColor="#FFF" />
</RelativeLayout>

จะได้หน้าจอแอพพลิเคชันหน้าตาแบบนี้

Screen Shot 2558-12-29 at 9.29.41 PM

คลิกขวาที่ โฟลเดอร์ res บน Project ของเรา ทำการเปิดไปที่ Explorer  บน PC หรือ Finder บน Mac

Screen Shot 2558-12-29 at 9.30.14 PM

เปิดบน Finder

Screen Shot 2558-12-29 at 9.30.53 PM

ทำการสร้าง Folder ขึ้นมาชื่อว่า “anim” เสร็จแล้วกลับมาที่ Project ของเราจะพบว่า res จะมี package folder ชื่อ “anim” ปรากฏขึ้นมาให้สร้างไฟล์ XML ใหม่ 4 ไฟล์คือ

Screen Shot 2558-12-29 at 9.33.48 PM

แต่ละไฟล์จะมีโครงสร้างดังนี้

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fromXDelta="100%"
        android:toXDelta="0%" >
    </translate>
</set>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="300"
        android:fromXDelta="-100%"
        android:toXDelta="0%" >
    </translate>
</set>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="600"
        android:fromXDelta="0%"
        android:toXDelta="-100%" >
    </translate>
</set>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="600"
        android:fromXDelta="0%"
        android:toXDelta="100%" >
    </translate>
</set>

ต่อมาให้สร้าง Class ใหม่ขึ้นมาใน Project

Screen Shot 2558-12-29 at 9.33.24 PM

ตั้งชื่อว่า RootActivity.java ใส่ code ดังนี้

package com.daydev.intentanimation;

/**
 * Created by daydev on 12/29/15 AD.
 */
import android.app.Activity;
import android.os.Bundle;

public class RootActivity extends Activity {
    int onStartCount = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        onStartCount = 1;
        if (savedInstanceState == null) // 1st time
        {
            this.overridePendingTransition(R.anim.anim_slide_in_left,
                    R.anim.anim_slide_out_left);
        } else // already created so reverse animation
        {
            onStartCount = 2;
        }
    }
    @Override
    protected void onStart() {
        // TODO Auto-generated method stub
        super.onStart();
        if (onStartCount > 1) {
            this.overridePendingTransition(R.anim.anim_slide_in_right,
                    R.anim.anim_slide_out_right);
        } else if (onStartCount == 1) {
            onStartCount++;
        }

    }

}

ให้เราไปแก้ไข MainActivity.java ในส่วนของ extends Class ครับ (ระวังเรื่อง ToolBar ให้ทำ setter ซะ)

public class MainActivity extends RootActivity {
private Toolbar supportActionBar;

ทำการสร้างหน้า Activity ปลายทางสักหน้า

Screen Shot 2558-12-29 at 9.58.43 PM

ตัวอย่างผมออกแบบหน้าของผมเล่นๆ มา 1 หน้า

Screen Shot 2558-12-29 at 10.16.14 PM

ทำการทดสอบดู

Screen Shot 2558-12-30 at 9.53.56 AM

เปิดโปรแกรม Genymotion ขึ้นมา

Screen Shot 2558-12-30 at 9.56.47 AM

ทำการ run ตัวแอพพลิเคชันของเราแล้วกดที่ปุ่ม Change View

Screen Shot 2558-12-30 at 9.57.01 AM

สังเกต แอนิเมชันการเปลี่ยนหน้าของแอพพลิเคชันของเรา

วีดิโอสาธิตก็มีนะครับ

จะเห็นว่าเกิดการเปลี่ยนหน้าแบบ แอนิเมชัน Swipe ซ้ายขวาแล้ว ง่ายไหมครับ ดาวน์โหลด source code ที่:

https://github.com/banyapondpu/IntentAnimation

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน