Android動態改變佈局

AngelDevil發表於2014-07-11

遇到這麼個需求,先看圖:

    

其實是一個軟體的登入介面,初始是第一個圖的樣子,當軟鍵盤彈出後變為第二個圖的樣子,因為登入介面有使用者名稱、密碼、登入按鈕,不這樣的話軟鍵盤彈出後會遮住登入按鈕(其實之前的實現放到了ScrollView裡面,監聽軟鍵盤彈出後滾動到底部,軟鍵盤隱藏後滾動到頂部,也是可以的)。

最簡單的方法就是多加幾個冗餘的View,根據軟鍵盤的狀態隱藏不需要的View,顯示需要的View,但這樣感覺太挫了,然後就想起了前兩年研究的RelativeLayout佈局,RelativeLayout中子控制元件的佈局都是相對位置,只需要在軟鍵盤彈出隱藏時改變應用的位置規則就行了。

先來看一下佈局檔案

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    tools:context="${packageName}.${activityClass}" >

    <RelativeLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true" >

        <ImageView
            android:id="@+id/logo"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_centerHorizontal="true"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_launcher"
            tools:ignore="ContentDescription" />

        <TextView
            android:id="@+id/label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/logo"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:text="@string/hello_world"
            android:textSize="20sp" />
    </RelativeLayout>

    <EditText
        android:id="@+id/input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/container"
        android:layout_margin="16dp"
        android:hint="Input sth."
        tools:ignore="HardcodedText" />

</RelativeLayout>

軟鍵盤的彈出隱藏用OnGlobalLayoutListener監聽實現,對Activity應用android:windowSoftInputMode="stateHidden|adjustResize",這樣開始時軟鍵盤不顯示,當軟鍵盤彈出時佈局被Resize。

接下來是程式碼,所有的程式碼都在這裡了

public class MainActivity extends Activity {

    private View root; // 最外層佈局
    private View logo; // Logo圖示
    private View label; // Logo附近的文字

    private int rootBottom = Integer.MIN_VALUE;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        root = findViewById(R.id.root);
        logo = findViewById(R.id.logo);
        label = findViewById(R.id.label);
        root.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

            @Override
            public void onGlobalLayout() {
                Rect r = new Rect();
                root.getGlobalVisibleRect(r);
                // 進入Activity時會佈局,第一次呼叫onGlobalLayout,先記錄開始軟鍵盤沒有彈出時底部的位置
                if (rootBottom == Integer.MIN_VALUE) {
                    rootBottom = r.bottom;
                    return;
                }
                // adjustResize,軟鍵盤彈出後高度會變小
                if (r.bottom < rootBottom) {
                    RelativeLayout.LayoutParams lp = (LayoutParams) logo.getLayoutParams();
                    // 如果Logo不是水平居中,說明是因為接下來的改變Logo大小位置導致的再次佈局,忽略掉,否則無限迴圈
                    if (lp.getRules()[RelativeLayout.CENTER_HORIZONTAL] != 0) {
                        // Logo顯示到左上角
                        lp.addRule(RelativeLayout.CENTER_HORIZONTAL, 0); // 取消水平居中
                        lp.addRule(RelativeLayout.ALIGN_PARENT_LEFT); // 左對齊

                        // 縮小Logo為1/2
                        int height = logo.getHeight(); // getMeasuredHeight()
                        int width = logo.getWidth();
                        lp.width = width / 2;
                        lp.height = height / 2;
                        logo.setLayoutParams(lp);

                        // Logo下的文字
                        RelativeLayout.LayoutParams labelParams = (LayoutParams) label.getLayoutParams();
                        labelParams.addRule(RelativeLayout.CENTER_HORIZONTAL, 0); // 取消水平居中
                        labelParams.addRule(RelativeLayout.BELOW, 0); // 取消顯示到logo的下方
                        labelParams.addRule(RelativeLayout.RIGHT_OF, R.id.logo); // 顯示到Logo的右方
                        labelParams.addRule(RelativeLayout.CENTER_VERTICAL); // 垂直居中
                        label.setLayoutParams(labelParams);
                    }
                } else { // 軟鍵盤收起或初始化時
                    RelativeLayout.LayoutParams lp = (LayoutParams) logo.getLayoutParams();
                    // 如果沒有水平居中,說明是軟鍵盤收起,否則是開始時的初始化或者因為此處if條件裡的語句修改控制元件導致的再次佈局,忽略掉,否則無限迴圈
                    if (lp.getRules()[RelativeLayout.CENTER_HORIZONTAL] == 0) {
                        // 居中Logo
                        lp.addRule(RelativeLayout.CENTER_HORIZONTAL);
                        lp.addRule(RelativeLayout.ALIGN_PARENT_LEFT, 0);

                        // 還原Logo為原來大小
                        int height = logo.getHeight();
                        int width = logo.getWidth();
                        lp.width = width * 2;
                        lp.height = height * 2;
                        logo.setLayoutParams(lp);

                        // Logo下的文字
                        RelativeLayout.LayoutParams labelParams = (LayoutParams) label.getLayoutParams();
                        labelParams.addRule(RelativeLayout.CENTER_HORIZONTAL); // 設定水平居中
                        labelParams.addRule(RelativeLayout.BELOW, R.id.logo); // 設定顯示到Logo下面
                        labelParams.addRule(RelativeLayout.RIGHT_OF, 0); // 取消顯示到Logo右面
                        labelParams.addRule(RelativeLayout.CENTER_VERTICAL, 0); // 取消垂直居中
                        label.setLayoutParams(labelParams);
                    }
                }
            }
        });
    }
}

當Activity啟動時也會進行Layout,此時用rootBottom記錄了初始時最外層佈局底部的位置,此後當軟鍵盤彈出時,佈局被壓縮,再次獲取同一個View底部的位置,如果比rootBottom小說明軟鍵盤彈出了,如果大於或等於rootBottom說明軟鍵盤隱藏了。

所有的程式碼都在上面,也有詳細註釋,有兩點需要注意一下:

  1. Activity啟動時會進行Layout,此時會呼叫onGlobalLayout,而且一般會呼叫兩次,這樣第二次時會進入else語句,要注意過濾
  2. 軟鍵盤彈出或隱藏時進入onGlobalLayout,此時根據需要縮放Logo的大小,並改變Logo和Label的位置,這些操作會引起再次onGlobalLayout,需要將之後的onGlobalLayout過濾掉,不然就無限迴圈了。

可以看到上面程式碼中的過濾條件,以else語句中的為例,Activity啟動時會進入else,此時Logo是水平居中狀態,會跳過else裡面的if語句,這樣就處理掉了第一種情況。

當因為軟鍵盤收起進入else時,Logo已經因為if語句塊變為了顯示在左上角,所以會進入else中的if語句,重新改變Logo為水平居中,由於修改了Logo的大小和位置,會導致再次進入onGlobalLayout,仍是進入else,但此時已經設定Logo為水平居中了,不會再次進入else中的if語句,這樣通過一個條件判斷就處理了上面提到的兩點注意事項。

關於addRule

RelativeLayout中每一個子控制元件所應用的規則都是通過陣列儲存的,如下所示:

public static final int TRUE = -1;

public void addRule(int verb) {
    mRules[verb] = TRUE;
    mInitialRules[verb] = TRUE;
    mRulesChanged = true;
}

public void addRule(int verb, int anchor) {
    mRules[verb] = anchor;
    mInitialRules[verb] = anchor;
    mRulesChanged = true;
}

以某一規則的索引為下標,值就是規則對應的anchor,如果是相對於另一個子控制元件,值就是另一個子控制元件的ID,如果是相對於父控制元件,值就是`TRUE`,即-1,如果沒有應用某一規則值就是0,可以看到,removeRule就是把相應位置的值改為了0:

public void removeRule(int verb) {
    mRules[verb] = 0;
    mInitialRules[verb] = 0;
    mRulesChanged = true;
 }

removeRuleAPI 17才加的方法,為了在API 17前也能使用,可以使用它的等價方法,像上面的例子中的一樣,使用addRule(verb, 0)

相關文章