home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Android

วิธีทำแอนิเมชั่นข้อความจาก TextView หนึ่งไปอีกอันใน Android

ตัวอย่าง: การทำแอนิเมชั่นข้อความระหว่าง TextView

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

เปิด Android Studio ไปที่ File → New Project แล้วกรอกรายละเอียดที่จำเป็น

ขั้นตอนที่ 2: จัดการ Layout (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <LinearLayout
            android:id="@+id/parent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/text"
                android:textSize="30dp"
                android:textAlignment="center"
                android:layout_width="match_parent"
                android:textColor="#ff4500"
                android:layout_height="wrap_content"
                android:singleLine="true" />
        </LinearLayout>
        <Button
            android:id="@+id/animate"
            android:text="Animated button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</RelativeLayout>

ในโค้ดข้างต้น มี TextView และ Button เมื่อคลิก Button จะอัปเดต TextView พร้อมแอนิเมชั่น

ขั้นตอนที่ 3: เขียนโค้ด Java (src/MainActivity.java)

package com.example.andy.myapplication;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final TextView view = findViewById(R.id.text);
        final LinearLayout parent = findViewById(R.id.parent);
        view.setText("1+2");
        Button animate = findViewById(R.id.animate);
        animate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animation slideUp = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up);
                slideUp.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) { }
                    @Override
                    public void onAnimationEnd(Animation animation) {
                        view.setText("3"); // เปลี่ยนข้อความเมื่อแอนิเมชั่นจบ
                    }
                    @Override
                    public void onAnimationRepeat(Animation animation) { }
                });
                parent.startAnimation(slideUp);
            }
        });
    }
}

ต้องสร้างไฟล์ res/anim/slide_up.xml สำหรับแอนิเมชั่น Slide Up (โค้ดไม่ได้แสดงในต้นฉบับ แต่เป็นแอนิเมชั่นเลื่อนขึ้นมาตามปกติ)

การทดสอบแอปพลิเคชัน

เชื่อมต่ออุปกรณ์ Android จริง ใน Android Studio คลิกไอคอน Run เลือกอุปกรณ์ แล้วตรวจสอบหน้าจอ

วิธีทำแอนิเมชั่นข้อความจาก TextView หนึ่งไปอีกอันใน Android

เมื่อคลิกปุ่ม จะเล่นแอนิเมชั่น Slide Up แล้วเปลี่ยนข้อความเป็น "3":

วิธีทำแอนิเมชั่นข้อความจาก TextView หนึ่งไปอีกอันใน Android

วิธีทำแอนิเมชั่นข้อความจาก TextView หนึ่งไปอีกอันใน Android