android xy坐标怎么和left right切换,关于Android left, top, x, y, translationX, translationY 那点事...

既然选择了远方,便只顾风雨兼程.

该图片来自网络资源,若有侵权,请留言,我将自行删除

之前对View的left , top ,x ,y ,translationX, translationY,有所研究,但是时间一长,脑袋中的东西大都都还给了时间.好记性不如烂笔头,今天重翻 任玉刚大神的 《Android 开发艺术探究》,一切从头开始, come on.

image.png

咱们按照上面的图绘实例来说一说 left,top,x,y,translationX,以及translationY.

left,top,right,bottom

view 的位置坐标和父容器的关系.png

view 的位置主要由它的四个顶点来控制的,分别对应View的四个属性:left,top,right,buttom.其中:

left 是左上横坐标

top 是左上纵坐标

right 是右下横坐标

bottom是右下纵坐标

需要注意的是,这些坐标都是相对于View的父容器来说的,因此它是相对坐标.在Android中,x轴 和 y轴的正方向分别为右 和 下.

根据上图所描述的我们可以得出,view的宽高和坐标之间的关系

width = right - left

height = bottom - top

如何得到left, top,right,bottom 的值呢? 在View的源码中它们有自己对应的是mLeft,mTop,mRight,mBottom这四个成员变量,并且 它们都拥有自己的get/set方法.

@ViewDebug.ExportedProperty(category = "layout")

protected int mLeft;

/**

* The distance in pixels from the left edge of this view's parent

* to the right edge of this view.

* {@hide}

*/

@ViewDebug.ExportedProperty(category = "layout")

protected int mRight;

/**

* The distance in pixels from the top edge of this view's parent

* to the top edge of this view.

* {@hide}

*/

@ViewDebug.ExportedProperty(category = "layout")

protected int mTop;

/**

* The distance in pixels from the top edge of this view's parent

* to the bottom edge of this view.

* {@hide}

*/

@ViewDebug.ExportedProperty(category = "layout")

protected int mBottom;

x,y,translationX,translationY

从3.0开始,view增加了额外的几个参数:x,y,translationX 和 translationY.其中x,y是view左上角的位置,而translationX和translationY是View左上角相对于父容器的偏移量,这几个参数也是相对父容器的坐标,并且translationX和translationY默认是0.其实这样说有点笼统.咱们还是看图.

平移过程中view，及x，y 发生的变化.png

当view 静止不动的时候 (x,y) == (left,top),此时translationX/Y.默认为0.当view向下做平移运动的时候,此刻view发生了偏移,并产生了偏移量,这个偏移相对于X轴就是translationX,相对于Y轴就是translationY.如上图所示.View 在平移的过程中,top 和 left 表示的是原始左上角的信息,其值并不会发生变化,此时发生改变的是x,y,translationX/Y.它们之间的换算关系如下:

x = left + translationX

y = top + translationY

总结:

1. left ,top ,right,bottom的值都是 View相对于父容器.具体为父容器的左上角,以及右下角.

2. translationX/Y 是View左上角相对与父容器的偏移量,translationX/Y默认为0,和View的四个基本位置参数一样,View也为它们提供了get/set方法.

3.View在发生平移的时候,top和left表示的原始左上角的位置信息,其值不会发生变化.

代码实现说明

xml代码

android:padding="@dimen/dp_10"

android:background="@color/colorPrimary"

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="8dp"

android:layout_marginEnd="8dp"

android:layout_marginStart="8dp"

android:layout_marginTop="8dp"

android:text="hello"

android:textColor="@color/white"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/bt_query" />

android:id="@+id/imageView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="8dp"

android:layout_marginEnd="8dp"

android:layout_marginStart="8dp"

android:layout_marginTop="8dp"

app:layout_constraintBottom_toTopOf="@+id/textView"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toBottomOf="@+id/bt_query"

app:srcCompat="@mipmap/ic_launcher" />

kotlin 代码

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

// textView

textView.top = 10

textView.left = 20

getViewLocation(textView)

textView.translationX = 30.0f // x 轴正方向

textView.translationY = 50.0f // y 轴正方向

getViewLocation(textView)

// imageView 动画处理

imageView.setOnClickListener {

getViewLocation(imageView)

ObjectAnimator.ofFloat(imageView,"translationX",-30f) // 左平移

.setDuration(1000)

.start()

}

}

private fun getViewLocation(view: View?) {

val top = view?.top

val left = view?.left

val x = view?.x

val y = view?.y

var translationX = view?.translationX

var translationY = view?.translationY

println("查看当前 top left x y translationX,translationY 的数据:$top , $left , $x , $y ,$translationX , $translationY")

}

日志打印

System.out: 查看当前 top left x y translationX,translationY 的数据:10 , 20 , 20.0 , 10.0 ,0.0 , 0.0

System.out: 查看当前 top left x y translationX,translationY 的数据:10 , 20 , 50.0 , 60.0 ,30.0 , 50.0

// ImageView

I/System.out: 查看当前 top left x y translationX,translationY 的数据:360 , 432 , 432.0 , 360.0 ,0.0 , 0.0

I/System.out: 查看当前 top left x y translationX,translationY 的数据:360 , 432 , 402.0 , 360.0 ,-30.0 , 0.0

如果您发现这篇文章,有错误之处,希望请您留言,并指出.我定虚心接受.并感激不尽!