RelativeLayout和画布自定义视图

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>

注意我设置了一些硬编码的高度和颜色，以便您可以轻松查看结果。此布局将呈现如下视图.-