Question

您好我必须使用常规的Android布局创建像bellow（附图）这样的UI。我有页眉，页脚和中间区域以及图像视图。根据图片：区域A和区域C的高度相似（屏幕的20％），图像视图应始终位于区域B和区域C的中间。

我当前的xml代码是这样的

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <LinearLayout
        android:id="@+id/show_contact_bottomArea"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:orientation="vertical"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

    </LinearLayout>

    <LinearLayout
        android:id="@+id/show_contact_middleArea"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:orientation="vertical"
        android:background="@color/grayContact"
        android:layout_below="@+id/show_contact_headerArea"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_above="@+id/show_contact_bottomArea">
        
    </LinearLayout>

    <LinearLayout
        android:id="@+id/show_contact_headerArea"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:orientation="vertical"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"></LinearLayout>

    <ImageView
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:srcCompat="@drawable/common_google_signin_btn_icon_dark_focused"
        android:id="@+id/imageView2"
        android:layout_marginBottom="40dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

我给了

marginBottom = “40dp”

用于向上推动图像视图，这不是一个好习惯。将图像视图放置在区域B和区域C边界的中心的最佳方法是什么。

目前我还给了

机器人：layout_height = “120dp”

对于A区和A区而言区域B的高度但理想情况下都应该是屏幕的20％（每个），如何实现呢？

Answer 1

您可以为每个 A 和 C 赋予20％的权重。这样他们将分别占据顶部和底部的20％。将剩余60％的高度分配给 B 。

对于imageView，您可以将整个布局放置在“坐标”布局中，并将锚点指定给页脚。

她是代码段

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="10">

        <LinearLayout

            android:id="@+id/show_contact_bottomArea"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_weight="2"
            android:background="@color/primary_light"
            android:orientation="vertical">

        </LinearLayout>

        <LinearLayout
            android:id="@+id/show_contact_middleArea"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_above="@+id/show_contact_bottomArea"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_below="@+id/show_contact_headerArea"
            android:layout_weight="6"
            android:background="@color/holo_blue_light"
            android:orientation="vertical">

        </LinearLayout>

        <LinearLayout
            android:id="@+id/show_contact_headerArea"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_weight="2"
            android:background="@color/primary"
            android:orientation="vertical"></LinearLayout>


    </LinearLayout>

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="40dp"
        app:layout_anchor="@+id/show_contact_headerArea"
        app:layout_anchorGravity="center_horizontal|top"
        app:srcCompat="@drawable/header_record" />


</android.support.design.widget.CoordinatorLayout>

结果： - 我用不同的颜色代码为不同的部分着色。

Answer 2

使用权重来给出区域和框架布局的确切部分例如：权重和= 4必须在父线性布局中给出 A区给1 区域b给2 区域c给出1

在区域B之后添加图像顶部视图 - （您希望在B＆＃39;部分中显示的高度）

Android布局在另外两个布局的中间放置一个布局

2 个答案: