如何让 imageView 离开屏幕 [Kotlin]

Question

所以我是 Kotlin 的新手，我正在尝试制作一个超级简单的应用程序。它所做的只是当我单击右按钮时，它与左按钮一样向右。问题是当我单击任一按钮（例如右键）时，我可以单击它直到图像完全脱离屏幕。那么我如何实现一个代码，一旦它碰到屏幕边缘就停止移动？

我的代码

package com.example.change_position_circle

import android.animation.ObjectAnimator
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //val picture = findViewById<ImageView>(R.id.SpongeBob)
        val right_button = findViewById<Button>(R.id.right)
        val left_button = findViewById<Button>(R.id.left)


        right_button.setOnClickListener()
        {
            //ObjectAnimator.ofFloat(SpongeBob, "x", 100)

            SpongeBob.animate().setDuration(90).translationXBy(100f)
        }

        left_button.setOnClickListener()
        {
            //ObjectAnimator.ofFloat(SpongeBob, "translationXBy", 100f).apply {
            //duration = 200
            // start()
            SpongeBob.animate().setDuration(90).translationXBy(-100f)
            //}
        }
    }
}

感谢您的帮助

Answer 1

欢迎来到科特林！

所以是的，你已经有了海绵宝宝的动画，现在你需要一些逻辑来控制动画。这里的问题是您并不总是希望发生完整的动画，对吗？如果他离屏幕边缘太近，您希望按钮只将他移动到那堵看不见的墙（如果他正好靠在墙上，那就意味着根本没有移动）。

动画和绘图系统对放置 View 的位置没有任何限制，因此由您自己处理。您基本上需要在单击按钮时执行此操作：

• 获取海绵宝宝的位置坐标（这是你现在真正关心的 X）
• 计算出你关心的边缘的位置（视图的坐标描述了左上角的位置，所以如果你在看右边缘，你需要 X 坐标 + 视图的宽度）
• 计算屏幕边缘的 X 坐标（或父布局，无论您希望海绵包含在其中）
• 如果海绵边缘和屏幕边缘之间的距离小于您的正常动画移动，则需要将其更改为剩余距离
• 您还需要计算出适当的持续时间，如果他移动的距离是通常距离的一半，则动画应该花费一半的时间

这有很多工作要做，有几种方法可以做到，但这里有一种方法只是使用屏幕边缘作为边界

    import android.os.Bundle
import android.view.View
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity
import kotlin.math.abs
import kotlin.math.min

private const val MOVE_DISTANCE = 100
private const val MOVE_TIME = 90

class MainActivity : AppCompatActivity() {
    private var screenWidth = 0
    private lateinit var spongeBob : View

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.spongebob)

        // store this when the Activity is created, if the device is rotated the Activity
        // will be recreated and this method gets run again
        screenWidth = applicationContext.resources.displayMetrics.widthPixels

        //val picture = findViewById<ImageView>(R.id.SpongeBob)
        val right_button = findViewById<Button>(R.id.right)
        val left_button = findViewById<Button>(R.id.left)
        spongeBob = findViewById(R.id.spongeBob)

        right_button.setOnClickListener()
        {
            // two possible values - the distance to the edge, and the normal amount we move
            // we want the smaller of the two (i.e. always move the normal amount, unless
            // the edge is closer than that
            val distance = min(distanceToEdge(left = false), MOVE_DISTANCE)
            moveSpongeBob(distance)
        }

        left_button.setOnClickListener()
        {
            val distance = min(distanceToEdge(left = true), MOVE_DISTANCE)
            // we're moving left so we need to use a negative distance
            moveSpongeBob (-distance)
        }
    }

    private fun distanceToEdge(left: Boolean): Int {
        // Get the Spongebob's top-left position - the call is a method on the View class,
        // I'm assuming SpongeBob is a View, and you need to pass an array in because
        // that's just how it works for whatever reason...
        val location = IntArray(2)
        spongeBob.getLocationOnScreen(location)
        val x = location[0]

        // I'm just using the View.getWidth() call here (Kotlin style) but I don't know
        // what the SpongeBob class is, so you'll need to handle this
        // You could set this once, like when we get the screen width, but width will be 0 until
        // the View is laid out - so you can't do it in #onCreate, #onViewCreated should work
        val spongeBobWidth = spongeBob.width

        // the left edge is just the x position, however far that is from zero
        return if (left) x
        // the right edge is the x position plus the width of the bob
        else screenWidth - (x + spongeBobWidth)
    }

    // Actually move the view, by the given distance (negative values to move left)
    private fun moveSpongeBob(distance: Int) {
        // work out how much this distance relates to our standard move amount, so we can
        // adjust the time by the same proportion - converting to float so we don't get
        // integer division (where it's rounded to a whole number)
        val fraction = distance.toFloat() / MOVE_DISTANCE
        // distance can be negative (i.e. moving left) so we need to use the abs function
        // to make the duration a postitive number
        val duration = abs(MOVE_TIME * fraction).toLong()
        spongeBob.animate().setDuration(duration).translationXBy(distance.toFloat())
    }
}

你可以做一些更好的事情（并且SpongeBob应该被称为spongeBoba View），但这是基础知识。这篇关于坐标系的文章也可能对您有所帮助。