Android中高手必須瞭解的關於View的細節(進階必備)

關於Android的視圖體系,有一些位置、座標系、定位的小細節可能開發者並沒有注意到,本文將指出一些讓人驚訝的小細節,並以實例證明。

一、Android的視圖組織體系不爲人知的小細節

衆所周知Android中的view分爲view和viewGroup,viewGroup又繼承了view,兩者組織起來成爲一顆“視圖樹”。

Actiity並不直接承載view,承載view的是Android中的Window,他們具體的組織形式如下圖所畫。






其中DecorView作爲根View,是Android中的一個自定義View,看源碼可知它繼承了FrameLayout。它內部有有三個部分:

  • 頂部的View,這個View起到一個佔位的作用,讓系統狀態欄能顯示出來。
  • 一個垂直方向的線性佈局,分爲標題欄和內容欄,我們用setContentView給一個Activity設置的佈局,就會加入到內容欄部分。
  • 頂部導航欄,同樣起到一個佔位的作用,讓系統的底部導航欄顯示出來。

下圖是使用Android Studio Inspector Layout 抓取的視圖樹的截圖。




二、View的繪製過程的一個小細節

視圖樹的測量過程是從上到下的,頂層View先測量自己的大小,然後遞歸調用子View的測量方法。這個很好理解,只有父View測量好了,才能讓子View知道自己最大可以獲得多大空間。

關於測量不再多講,此處特別提出關於MeasureSpec的一些小知識。

我們在自定義View的重寫onMeasure()發現有傳入兩個Int型的參數,就是MeasureSpec,如下代碼所示。

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        int width, height;

        //一些判斷邏輯
        
        
        //最終設置自定義View寬高
        setMeasuredDimension(width, height);
    }

關於MeasureSpec有一個奇怪的現象,它明明是一個int值,但是卻保存兩個信息:

  • 模式信息,通過getMode()得到
  • 尺寸信息:通過getSize()得到

這是爲什麼呢?這可以通過查看源碼得到,MeasureSpec是一個32位的int值沒錯,但是它的高2位儲存了SpecMode信息,低30位儲存了SpecSize尺寸信息。

private static final int MODE_SHIFT = 30;
 
 private static final int MODE_MASK  = 0x3 << MODE_SHIFT;
 
 public static int getMode(int measureSpec) { 
           //通過與掩碼與運算獲得模式信息
            return (measureSpec & MODE_MASK);
        }

 public static int getSize(int measureSpec) {
            //通過與掩碼的反碼與運算獲得尺寸信息
            return (measureSpec & ~MODE_MASK);
        }

如上述源碼所示,定義一個掩碼 原始值 0000 0000 0000 0000 0000 0000 0000 0011

通過左移運算符 移動30位,變爲 1100 0000 0000 0000 0000 0000 0000 0000

getMode()中通過與掩碼與運算獲得模式信息(高2位留存)。

getSize()中通過與掩碼的反碼與運算獲得尺寸信息(低30位留存)。

講到這,是不是解決了一塊小小的心病?

更多自定View的基礎知識可以參看本人另一篇博客:Android自定義View講解加示例

三、View定位體系不爲人知的細節。

關於View的定位體系很多開發者並沒深入瞭解,本節將提出一些問題看看諸位看客是否都有所瞭解。

1. View的定位模型和定位參數

我們在使用View定位的時候,可能會設置他們的一些位置信息

  • 比如top,left,right,bottom,這些可以通過setTop()等方法進行。

  • 或者會使用到setX(),setY()方法設置其X,Y座標。

  • 又有可能使用setTranslateX(),setTranslateY()。

  • 還有可能使用scrollBy(),scrollTo()改變其位置信息。

那麼關於上述的種種行爲就需要理清楚View的座標體系,請看下圖。


從上圖可以看出:

  • View的定位是一種相對定位,即相對於父元素進行定位。

  • View的座標系和常規略有不同,x的正方向是向右,x軸正方向向下。

  • top和left含義很好理解,但是請注意,right的含義是子View右邊距距離父View左邊距的距離,botton的含義是子View下邊距距離父View上邊距的距離。

  • View的X,Y座標是指左上角相對於父元素的座標。

  • 關於translateX和 translateY圖中並沒有畫出,這兩個屬性是View左上角相對於原來位置的偏移量。通過以下公式可能更加清晰:

    X=left+translateX

關於定位模型,是不是解決了你的一些疑惑?

2. View的scrollBy(x,y)和scrollTo(x,y)方法。

可能有開發者經常使用,這兩個方法,但是你是否注意到兩個小點:

  • x傳入正值向左移,y傳入正值向上移動(後面有代碼示範。)

  • 這兩個方法只是移動了View的內容,View的實際定位框架並沒有改變,還是用個圖來表示。


上圖可以說明這個概念,scroll移動的只是view的內容,view實際上的位置並沒有移動。

那肯定有人會表示懷疑,必須通過一個例子實踐證明。

怎麼驗證上述結論呢?其實很簡單,第一、如果View整體都移動了,那麼應該會引起整個視圖樹的重新定位,比如會發生後面的view會補充空白等現象。第二、我們實時獲取被移動View的 top、left屬性值,看是否發生變化。好,我們寫一個demo。

寫一個佈局文件,一個垂直線性佈局,放入一個textView和一個button

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <TextView
        android:id="@+id/textview1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView點擊移動自己"
        android:layout_marginTop="350dp"
        android:gravity="center"
        />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="button觀察其是否跟隨移動補位"
        android:layout_marginTop="20dp"
        />
</LinearLayout>

寫activity的代碼,讓textView點擊的時候,向上移動自己的位置。

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final TextView textView = (TextView) findViewById(R.id.textview1);
        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.scrollBy(0, 10);//點擊移動自己
                //輸出位置參數
                Log.i("WQW", "Top參數:" + textView.getTop());
                Log.i("WQW", "Left參數:" + textView.getLeft());
                Log.i("WQW", "Right參數:" + textView.getRight());
                Log.i("WQW", "Bottom參數:" + textView.getBottom());
            }
        });
    }
}

來看下Gif運行結果,檢查一下下面的Button是否會補位。從下面結果中可以看到Button並不會隨之向上移動補位。


再來看一下Log輸出,可以發現top等位置屬性值都沒有發生變化。至此,已經證明完畢,scrollBy()等方法只是移動了View的內容。

11-08 04:24:18.678 32105-32105/com.example.administrator.myapplication I/WQW: Top參數:1050
11-08 04:24:18.678 32105-32105/com.example.administrator.myapplication I/WQW: Left參數:0
11-08 04:24:18.678 32105-32105/com.example.administrator.myapplication I/WQW: Right參數:1080
11-08 04:24:18.678 32105-32105/com.example.administrator.myapplication I/WQW: Bottom參數:1107
11-08 04:24:20.603 32105-32105/com.example.administrator.myapplication I/WQW: Top參數:1050
11-08 04:24:20.603 32105-32105/com.example.administrator.myapplication I/WQW: Left參數:0
11-08 04:24:20.603 32105-32105/com.example.administrator.myapplication I/WQW: Right參數:1080
11-08 04:24:20.603 32105-32105/com.example.administrator.myapplication I/WQW: Bottom參數:1107
11-08 04:24:23.867 32105-32105/com.example.administrator.myapplication I/WQW: Top參數:1050
11-08 04:24:23.867 32105-32105/com.example.administrator.myapplication I/WQW: Left參數:0
11-08 04:24:23.867 32105-32105/com.example.administrator.myapplication I/WQW: Right參數:1080
11-08 04:24:23.867 32105-32105/com.example.administrator.myapplication I/WQW: Bottom參數:1107

三、總結

本文總結了三個方面的一些開發者沒有關注到的小細節,如Android的視圖組織體系,繪製過程和View定位模型定位參數,將來如發現更多值得補充的內容,仍舊會更新在本文當中。

如果覺得本文對你有幫助,請關注、留言、點讚我,謝謝!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章