关于Android left, top, x, y, translationX, translationY 那点事

View的left , top ,x ,y ,translationX, translationY的研究

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

• left,top,right,bottom
  
  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) == (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代码

 <TextView
        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" />

    <ImageView
        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