activity_main.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?xml version="1.0" encoding="utf-8"?> <FrameLayout 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" tools:context=".MainActivity"> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Animate" android:layout_gravity="top|center_horizontal"/> <ImageView android:id="@+id/img_car" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/car"/> <ImageView android:id="@+id/img_trees" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/tree"/> </FrameLayout> |
MainActivity.java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
package com.phaisarn.myapplication; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.DisplayMetrics; import android.view.View; import android.widget.Button; import android.widget.ImageView; public class MainActivity extends AppCompatActivity { private int mScreenWidth; private ImageView mCar; private ImageView mTrees; private int mTreeWidth; private int mCarWidth; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); DisplayMetrics display = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(display); mScreenWidth = display.widthPixels; mCar = findViewById(R.id.img_car); mTrees = findViewById(R.id.img_trees); //ความกว้างของวิวจะหาทันทีเลยไม่ได้ ต้องทำในภายหลัง mCar.post(new Runnable() { @Override public void run() { mCarWidth = mCar.getWidth(); setCarStartPoint(); } }); mTrees.post(new Runnable() { @Override public void run() { mTreeWidth = mTrees.getWidth(); setTreeStartPoint(); } }); //เนื่องจากต้องการให้แสดงแอนนิเมชั่นซ้ำ ดังนั้นสำหรับให้เรียกตัวมันเองขึ้นมาทำงานแบบ Recursion เมื่อแสดงแอนนิเมชั่นเสร็จในแต่ละรอบ final Runnable runnableCar = new Runnable() { @Override public void run() { //ให้ย้ายวิวไปยังตำแหน่งเริ่มแรกก่อนแสดงแอนนิเมชั่น setCarStartPoint(); //ให้ภาพรถยนต์เคลื่อนจากซ้ายไปขวา ไปสิ้นสุดที่ขอบหน้าจอด้านขวา mCar.animate().translationX(mScreenWidth).setDuration(5000).withEndAction(this).start(); } }; final Runnable runnableTrees = new Runnable() { @Override public void run() { //ให้ย้ายวิวไปยังตำแหน่งเริ่มแรกก่อนแสดงแอนนิเมชั่น setTreeStartPoint(); //ให้ภาพรถยนต์เคลื่อนจากขวาไปซ้าย ไปสิ้นสุดที่นอกขอบหน้าจอด้านซ้ายเป็นระยะเท่ากับความกว้างของวิว mTrees.animate().translationX(-mTreeWidth).setDuration(5000).withEndAction(this).start(); } }; final Button button = findViewById(R.id.button); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //เมื่อคลิกปุ่ม ถ้าข้อความบนปุ่มเป็นคำว่า Animate ให้เริ่มการแสดงแอนนิเมชั่น if (button.getText().equals("Animate")) { //เช่นเดียวกับที่ Runnable mCar.animate().translationX(mScreenWidth).setDuration(5000).withEndAction(runnableCar).start(); mTrees.animate().translationX(-mTreeWidth).setDuration(5000).withEndAction(runnableTrees).start(); button.setText("Cancel"); } else if (button.getText().equals("Cancel")) { mCar.animate().cancel(); mTrees.animate().cancel(); setCarStartPoint(); setTreeStartPoint(); button.setText("Animate"); } } }); } private void setCarStartPoint() { mCar.setX(-mCarWidth); mCar.setY(450); } private void setTreeStartPoint() { mTrees.setX(mScreenWidth); mTrees.setY(300); } } |
ภาพที่ใช้