既然選擇了遠(yuǎn)方,便只顧風(fēng)雨兼程.

該圖片來自網(wǎng)絡(luò)資源,若有侵權(quán),請留言,我將自行刪除

之前對View的left , top ,x ,y ,translationX, translationY,有所研究,但是時(shí)間一長,腦袋中的東西大都都還給了時(shí)間.好記性不如爛筆頭,今天重翻 任玉剛大神的 《Android 開發(fā)藝術(shù)探究》,一切從頭開始, come on.

image.png

咱們按照上面的圖繪實(shí)例來說一說 left,top,x,y,translationX,以及translationY.

• left,top,right,bottom

view 的位置坐標(biāo)和父容器的關(guān)系.png

view 的位置主要由它的四個頂點(diǎn)來控制的,分別對應(yīng)View的四個屬性:left,top,right,buttom.其中:

left 是左上橫坐標(biāo)
top 是左上縱坐標(biāo)
right 是右下橫坐標(biāo)
bottom是右下縱坐標(biāo)

需要注意的是,這些坐標(biāo)都是相對于View的父容器來說的,因此它是相對坐標(biāo).在Android中,x軸 和 y軸的正方向分別為右 和 下.

• 根據(jù)上圖所描述的我們可以得出,view的寬高和坐標(biāo)之間的關(guān)系

width = right - left
height = bottom - top 

如何得到left, top,right,bottom 的值呢? 在View的源碼中它們有自己對應(yīng)的是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增加了額外的幾個參數(shù):x,y,translationX 和 translationY.其中x,y是view左上角的位置,而translationX和translationY是View左上角相對于父容器的偏移量,這幾個參數(shù)也是相對父容器的坐標(biāo),并且translationX和translationY默認(rèn)是0.其實(shí)這樣說有點(diǎn)籠統(tǒng).咱們還是看圖.

平移過程中view帚桩，及x仪或，y 發(fā)生的變化.png

當(dāng)view<紅框> 靜止不動的時(shí)候 (x,y) == (left,top),此時(shí)translationX/Y.默認(rèn)為0.當(dāng)view向下做平移運(yùn)動的時(shí)候,此刻view發(fā)生了偏移,并產(chǎn)生了偏移量,這個偏移相對于X軸就是translationX,相對于Y軸就是translationY.如上圖所示.View 在平移的過程中,top 和 left 表示的是原始左上角的信息,其值并不會發(fā)生變化,此時(shí)發(fā)生改變的是x,y,translationX/Y.它們之間的換算關(guān)系如下:

x = left + translationX
y = top + translationY

• 總結(jié):

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

2. translationX/Y 是View左上角相對與父容器的偏移量,translationX/Y默認(rèn)為0,和View的四個基本位置參數(shù)一樣,View也為它們提供了get/set方法.

3.View在發(fā)生平移的時(shí)候,top和left表示的原始左上角的位置信息,其值不會發(fā)生變化.

• 代碼實(shí)現(xiàn)說明

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("查看當(dāng)前 top left x y translationX,translationY 的數(shù)據(jù):$top , $left , $x , $y ,$translationX , $translationY")

   }

日志打印

System.out: 查看當(dāng)前 top left x y translationX,translationY 的數(shù)據(jù):10 , 20 , 20.0 , 10.0 ,0.0 , 0.0
System.out: 查看當(dāng)前 top left x y translationX,translationY 的數(shù)據(jù):10 , 20 , 50.0 , 60.0 ,30.0 , 50.0

// ImageView
I/System.out: 查看當(dāng)前 top left x y translationX,translationY 的數(shù)據(jù):360 , 432 , 432.0 , 360.0 ,0.0 , 0.0
I/System.out: 查看當(dāng)前 top left x y translationX,translationY 的數(shù)據(jù):360 , 432 , 402.0 , 360.0 ,-30.0 , 0.0
 

如果您發(fā)現(xiàn)這篇文章,有錯誤之處,希望請您留言,并指出.我定虛心接受.并感激不盡!