堆栈内存溢出
  简体   繁体   English

如何在LinearLayout中重叠布局/视图？

[英]How to overlap layouts/views within LinearLayout?

 原文  2017-06-08 09:15:07  2   4    android/ android-layout

问题描述

I would like to create layout that looks like this: 我想创建如下布局：

在此处输入图片说明

Layout1 and Layout2 are some layouts of any kind, nested in a parent LinearLayout . Layout1和Layout2是嵌套在父LinearLayout的任何类型的布局。 The LinearLayout is necessary to give both child layouts a 50% height by using layout_weight . 使用layout_weight可以为两个子布局提供50％的高度，而LinearLayout是必需的。

The red squares should be Buttons which overlap both Layout1 and Layout2 and are centered between the two layouts. 红色正方形应该是与Layout1和Layout2重叠并且位于两个布局之间的中心的Buttons 。

Of course this could achived by using RelativeLayout as parent instead but then I would loose the possibility to use layout_weight ... 当然，可以通过使用RelativeLayout作为父代来实现，但是随后我将放弃使用layout_weight的可能性...

If I keep using LinearLayout , it seems to be impossible to let the buttons overlap the two other layouts. 如果我继续使用LinearLayout ，似乎不可能让按钮与其他两个布局重叠。

Furthermore the buttons cannot be siblings of the two layouts but need to be nested inside a common container layout that takes care of the horizontal positioning (eg a LinearLayout with horizontal orientation). 此外，按钮不能是这两种布局的同级，而是需要嵌套在负责水平定位的通用容器布局内（例如，具有水平方向的LinearLayout ）。

Any idea how to solve this? 任何想法如何解决这个问题？

I already tried to place the buttons inside Layout1 (or Layout2 ), place them below the bottom and use android:clipChildren=false , but this had no effect. 我已经尝试将按钮放在Layout1 （或Layout2 ）内，将它们放在底部下方，并使用android:clipChildren=false ，但这没有任何效果。 The button where simple cut in half. 简单地将按钮切成两半。

Edit: Splitting the height between the two layouts 50/50 is just one version. 编辑：在两个布局50/50之间拆分高度只是一种版本。 Another view uses the same basic layout but splits the height 70/30 between the two layouts. 另一个视图使用相同的基本布局，但在两个布局之间将高度划分为70/30。 The buttons should always be centered between the two layouts. 按钮应始终位于两个布局之间的中心。 Sorry for not pointing this out earlier. 对不起，您没有早点指出这一点。

Layout Code: 布局代码： 

<!-- parent/root layout -->
<LinearLayout
    ...
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    ... >

    <!-- Layout1 -->
    <LinearLayout 
        android:layout_weight="1"
        ... />

    <!-- Buttons -->
    <LinearLayout             
        android:orientation="horizontal"
        ... >

        <Button ... />
        <Button ... />
        <Button ... />

    </LinearLayout>


    <!-- Layout2 -->
    <LinearLayout 
        android:layout_weight="1"
        ... />


</LinearLayout>

4 个解决方案

解决方案1
 3 已采纳  2017-06-08 09:47:33

50% linearOne 50% linearTwo 50％线性一个50％线性两个 

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/colorAccent">

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/colorPrimary">

    </LinearLayout>


</LinearLayout>

    <LinearLayout
        android:layout_centerInParent="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <View
            android:layout_weight="1"
            android:layout_width="50dp"
            android:layout_height="50dp"
             />
        <View
            android:layout_weight="1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#000" />
        <View
            android:layout_weight="1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            />
        <View
            android:layout_weight="1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#000" />
        <View
            android:layout_weight="1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            />
        <View
            android:layout_weight="1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="#000" />
        <View
            android:layout_weight="1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            />


    </LinearLayout>

</RelativeLayout>

============================================================================ ================================================== =========================

70% linearOne 30% linearTwo 线性70％一个30％线性两个

Just close your eyes Copy and paste 闭上双眼即可复制并粘贴 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="10"
    tools:context="com.ncrypted.myapplication.MainActivity">

    <LinearLayout
        android:layout_weight="6"
        android:id="@+id/linear1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:orientation="vertical">

    </LinearLayout>

    <RelativeLayout
        android:layout_weight="2"
        android:id="@+id/relative1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/colorAccent">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:background="@color/colorAccent"
                android:layout_weight="1" />
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:background="@color/colorPrimary"
                android:layout_weight="1" />


        </LinearLayout>
        <LinearLayout
            android:layout_centerInParent="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <View
                android:layout_weight="1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                 />
            <View
                android:layout_weight="1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#000" />
            <View
                android:layout_weight="1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                />
            <View
                android:layout_weight="1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#000" />
            <View
                android:layout_weight="1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                />
            <View
                android:layout_weight="1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="#000" />
            <View
                android:layout_weight="1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                />
        </LinearLayout>

    </RelativeLayout>

    <LinearLayout
        android:layout_weight="2"
        android:id="@+id/linear2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"
        android:orientation="vertical">

    </LinearLayout>

</LinearLayout>

解决方案2
 0  2017-06-08 09:24:07

Hm, if you don't have any restrictions besides those ones that you've described in the question, you could do it by the next way: 嗯，如果除了在问题中描述的那些限制之外，您没有其他限制，可以采用以下方法： 

<!-- parent/root layout -->
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        ...
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        ... >

        <!-- Layout1 -->
        <LinearLayout 
            android:layout_weight="1"
             ... />

        <!-- Layout2 -->
        <LinearLayout 
            android:layout_weight="1"
            ... />

    </LinearLayout>

    <!-- Buttons -->
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"            
        android:orientation="horizontal"
        android:background="@android:color/transparent"
        ... >

        <Button ... />
        <Button ... />
        <Button ... />

    </LinearLayout>

</RelativeLayout>

解决方案3
 0  2017-06-08 10:08:51

Here, this is the solution using only Linearlayout. 在这里，这是仅使用Linearlayout的解决方案。

Key point is: button is consist of two part. 关键是：按钮由两部分组成。 Half top and Half bottom. 半顶半底。 And minus margin means half of your button's height. 负边距表示按钮高度的一半。

But, please do not use this code. 但是，请不要使用此代码。 Use GuideLine of ConstraintLayout . 使用ConstraintLayout的GuideLine 。 It has percentage option, so you can implement almost evert layout you want. 它具有百分比选项，因此您可以实现所需的几乎翻滚的布局。

在此处输入图片说明 

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.5"
        android:background="#d3d3d3">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginBottom="-25dp"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher"/>

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginBottom="-25dp"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher"/>

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginBottom="-25dp"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.5"
        android:background="#Ed1c24">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:layout_marginTop="-25dp"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher"/>

        <ImageView
            android:id="@+id/imageView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:layout_marginTop="-25dp"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher"/>

        <ImageView
            android:id="@+id/imageView6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:layout_marginTop="-25dp"
            android:layout_weight="1"
            android:src="@mipmap/ic_launcher"/>
    </LinearLayout>


</LinearLayout>

解决方案4
 -1  2017-06-08 09:29:56

Here you can use this: Position the imageviews according to your requirement 在这里您可以使用：根据您的要求放置图像视图 

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_test"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#e2e2"
            android:layout_weight="1"
            >

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#Ed1c24"
            android:layout_weight="1"
            >

        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:id="@+id/imageView"
        android:layout_marginStart="48dp"
        android:layout_centerVertical="true"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:id="@+id/imageView1"
        android:layout_toEndOf="@+id/imageView"
        android:layout_marginStart="48dp"
        android:layout_centerVertical="true"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:id="@+id/imageView3"
        android:layout_toEndOf="@+id/imageView1"
        android:layout_marginStart="38dp"
        android:layout_centerVertical="true"
        />


</RelativeLayout>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 水平LinearLayout中的重叠视图 - Overlap views in horizontal LinearLayout 如何在相对布局中部分重叠视图 - How to partially overlap views within a relative layout 布局中的Android视图 - Android Views within Layouts 如何重叠线性布局 - How to overlap linear layouts LinearLayout中的android布局在具有屏幕导航的设备上重叠 - android layouts in LinearLayout overlap on devices with on-screen navigation 如何“重叠”两个布局 Nativescript - How to “Overlap” two Layouts Nativescript 如何将LinearLayout放置在屏幕底部并且不与另一个LinearLayout重叠？ - How to put LinearLayout at the bottom of the screen and doesn't overlap with another LinearLayout? 如何阻止子 Linearlayout 与父 Linearlayout 圆角重叠？ - How to stop child Linearlayout to overlap parent Linearlayout rounded corners? 如何在LinearLayout中的元素上重叠图像 - How to overlap an image over an element inside a LinearLayout 在相邻布局中均匀间隔视图 - Evenly spacing views within adjacent layouts
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM