RelativeLayout和canvas Costum視圖

Question

我想使用這種結構進行活動：

想法是在所有可能的空間內，在頂部放置一些文本，在頂部放置橫幅，在橫幅上方放置按鈕，並在視圖中心放置我的畫布。

我將View子類化以繪制畫布並重載onMeasure（）方法：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    // Calculate the size of the board
    this.squareSize = MeasureSpec.getSize(widthMeasureSpec) / BOARD_NUM_ROWS;
    this.leftMargin = (MeasureSpec.getSize(widthMeasureSpec) - squareSize*BOARD_NUM_COLUMNS) / 2;
    this.topMargin  = this.leftMargin;

    // Set the size of the board to full width and aspect ratio height
    int desiredWidth  = MeasureSpec.getSize(widthMeasureSpec);
    int desiredHeight = this.topMargin + (BOARD_NUM_ROWS * this.squareSize) + this.topMargin;

    this.setMeasuredDimension(desiredWidth, desiredHeight);
}

這是我的XML：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".DrawLevelActivity"
    android:background="@color/activity_background">

        <TextView
            android:id="@+id/instructionsText"
            android:gravity="center"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:paddingLeft="0dp"
            android:paddingRight="0dp"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />

        <com.mycanvas.BoardCanvas 
            android:id="@+id/boardCanvas"
            android:gravity="center"
            android:layout_below="@+id/instructionsText"
            android:layout_centerVertical="true"
            android:padding="0dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/solveButton"
            android:gravity="center"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:paddingLeft="30dp"
            android:paddingRight="30dp"
            android:layout_below="@+id/boardCanvas"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"/>

        <com.google.ads.AdView
            xmlns:googleads="http://schemas.android.com/apk/lib/com.google.ads"
            android:id="@+id/adView"
            android:gravity="center"
            android:paddingTop="0dp"
            android:paddingBottom="0dp"
            android:paddingLeft="0dp"
            android:paddingRight="0dp"
            android:layout_alignParentBottom="true" 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"

            googleads:adSize="BANNER"
            googleads:adUnitId="@string/admob_id" />

</RelativeLayout>

不幸的是，按鈕出現在橫幅下方，我認為原因是畫布很大。

onMeasure（）中的設置值始終小於MeasureSpec.getSize（heightMeasureSpec）

Answer 1

此處的關鍵是使用LinearLayout僅為您的畫布設置layout_weight值。 這樣，頂視圖和頂視圖將包裝其內容，而畫布將填充可用空間。 布局xml看起來像這樣。-

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center_vertical|center_horizontal"
        android:background="#990099"
        android:text="Some text here" />

    <RelativeLayout
        android:id="@+id/canvas"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#999900"
        android:layout_weight="1">
        <!-- The canvas -->
    </RelativeLayout>

    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />

    <RelativeLayout 
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#009999">
        <!-- The banner -->
    </RelativeLayout>

</LinearLayout>

注意，我設置了一些硬編碼的高度和顏色，以便您可以輕松看到結果。 這種布局將呈現這樣的視圖。