如何在android coordinatorlayout中半覆盖frameLayout

【问题标题】：How to half overlap frameLyout in android coordinate layout如何在android coordinatorlayout中半覆盖frameLayout
【发布时间】：2019-04-29 06:02:35
【问题描述】：

我想设计一个这样的布局：

我使用了AppBarLayout 并尝试了以下代码：

    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--tools:layout_marginTop="-200dp">-->

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="@android:color/transparent"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:titleEnabled="false">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/banner_detail_course_img"
                    android:visibility="visible">
                    <!--<ImageView-->
                    <!--android:layout_width="match_parent"-->
                    <!--android:layout_height="match_parent"-->
                    <!--android:src="@drawable/banner_detail_course_img"-->
                    <!--android:scaleType="centerCrop"/>-->
                    <TextView
                        android:id="@+id/header_txtTitleCourse"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:layout_marginTop="60dp"
                        android:layout_marginEnd="10dp"
                        android:text="@{courseItem.title}"
                        android:textColor="#fff"
                        android:textSize="30sp" />

                    <TextView
                        android:id="@+id/header_txtShortDescCourse"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/header_txtTitleCourse"
                        android:layout_alignParentEnd="true"
                        android:layout_marginTop="10dp"
                        android:layout_marginEnd="10dp"
                        android:text="@{courseItem.shortDescription}"
                        android:textColor="#fff"
                        android:textSize="15sp" />

                    <TextView
                        android:id="@+id/header_txtRate"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/header_txtShortDescCourse"
                        android:layout_alignParentEnd="true"
                        android:layout_marginTop="10dp"
                        android:layout_marginEnd="10dp"
                        android:background="@drawable/rounded_background_textview"
                        android:drawableEnd="@drawable/ic_star"
                        android:drawablePadding="5dp"
                        android:text="@{String.valueOf(courseItem.ratingAvg)}"
                        android:textColor="#fff"
                        android:textSize="15sp" />

                    <TextView
                        android:id="@+id/header_txtEnrolled"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/header_txtShortDescCourse"
                        android:layout_marginTop="10dp"
                        android:layout_marginEnd="10dp"
                        android:layout_toStartOf="@+id/header_txtRate"
                        android:background="@drawable/rounded_background_textview"
                        android:drawableEnd="@drawable/ic_user_enrolled"
                        android:drawablePadding="5dp"
                        android:text="@{courseItem.numberEnroll.concat(@string/space).concat(@string/number_enroll)}"
                        android:textColor="#fff"
                        android:textSize="15sp" />

                    <TextView
                        android:id="@+id/header_txtDuration"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/header_txtRate"
                        android:layout_alignParentEnd="true"
                        android:layout_marginTop="10dp"
                        android:layout_marginEnd="10dp"
                        android:background="@drawable/rounded_background_textview"
                        android:drawableEnd="@drawable/ic_play_icon"
                        android:drawablePadding="5dp"
                        android:text="@{courseItem.duration.concat(@string/space).concat(@string/label_hour)}"
                        android:textColor="#fff"
                        android:textSize="15sp" />

                    <TextView
                        android:id="@+id/header_txtInstructor"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/header_txtRate"
                        android:layout_marginTop="10dp"
                        android:layout_marginEnd="10dp"
                        android:layout_toStartOf="@+id/header_txtDuration"
                        android:background="@drawable/rounded_background_textview"
                        android:text="@{@string/txt_label_instructor.concat(@string/space).concat(courseItem.instructorName)}"
                        android:textColor="#fff"
                        android:textSize="15sp" />

                    <TextView
                        android:id="@+id/header_txtUpdate"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/header_txtInstructor"
                        android:layout_alignParentEnd="true"
                        android:layout_marginTop="10dp"
                        android:layout_marginEnd="10dp"
                        android:background="@drawable/rounded_background_textview"
                        android:text="@{@string/last_update_course.concat(@string/space).concat(courseItem.updateDate)}"
                        android:textColor="#FFF"
                        android:textSize="15sp" />

                    <FrameLayout
                        android:id="@+id/flPreview"
                        android:layout_width="260dp"
                        android:layout_height="220dp"
                        android:layout_below="@+id/header_txtUpdate"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="20dp">

                        <ImageView
                            android:id="@+id/imgPreview"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:scaleType="centerCrop"
                            android:src="@drawable/preview_video_view"
                            app:imageUrl="@{courseItem.imagePreview}" />

                        <ImageView
                            android:id="@+id/imgPlayButton"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:src="@drawable/ic_play_video" />

                        <TextView
                            android:id="@+id/header_txtPreview"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_horizontal|bottom"
                            android:layout_marginBottom="20dp"
                            android:text="@string/txt_show_preview_video"
                            android:textColor="#FFF"
                            android:textSize="20sp"
                            android:textStyle="bold" />
                    </FrameLayout>

                </RelativeLayout>

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">

                        <ImageView
                            android:id="@+id/imgBack"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentEnd="true"
                            android:layout_marginTop="10dp"
                            android:layout_marginEnd="20dp"
                            android:src="@drawable/ic_back_press" />

                        <ImageView
                            android:id="@+id/imgFavorit"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="10dp"
                            android:layout_marginTop="10dp"
                            android:layout_toEndOf="@+id/imgShare"
                            android:src="@drawable/ic_favorite_toolbar" />

                        <ImageView
                            android:id="@+id/imgShare"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentStart="true"
                            android:layout_marginTop="10dp"
                            android:layout_marginEnd="20dp"
                            android:src="@drawable/ic_share" />
                    </RelativeLayout>
                </android.support.v7.widget.Toolbar>
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>



        <android.support.v4.widget.NestedScrollView 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:layout_gravity="fill_vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">


                <TextView
                    android:id="@+id/txtCurrentPrice"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentEnd="true"
                    android:layout_marginTop="30dp"
                    android:layout_marginEnd="20dp"
                    android:text="@{courseItem.price}"
                    android:textSize="30sp"
                    android:textStyle="bold" />
</RelativeLayout>

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

我的输出布局是：

我想成为 AppBarLayout 中 ID flPreview 的 FrameLayout 预览的一半。

【问题讨论】：

    标签： android xml overlap android-collapsingtoolbarlayout


    【解决方案1】：

    请检查此代码。这可能会帮助你

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="500dp">



        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorPrimary"
            android:layout_marginBottom="100dp">  <!--just set the half of the size of the frame layout-->

            <!--your content here-->

        </RelativeLayout>

        <FrameLayout
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            android:background="@color/colorPrimaryDark">

            <!--your frame layout content here-->

        </FrameLayout>
    </RelativeLayout>
</RelativeLayout>

    在你的代码上试试这个。

     <?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--tools:layout_marginTop="-200dp">-->

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:background="#fff"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@android:color/transparent"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="false">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:visibility="visible">
                <!--<ImageView-->
                <!--android:layout_width="match_parent"-->
                <!--android:layout_height="match_parent"-->
                <!--android:src="@drawable/banner_detail_course_img"-->
                <!--android:scaleType="centerCrop"/>-->

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/colorPrimaryDark"
                    android:layout_marginBottom="110dp">

                  <!--  android:background="@drawable/banner_detail_course_img"-->
                <TextView
                    android:id="@+id/header_txtTitleCourse"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentEnd="true"
                    android:layout_marginTop="60dp"
                    android:layout_marginEnd="10dp"
                    android:text="courseItem.title"
                    android:textColor="#fff"
                    android:textSize="30sp" />

                <TextView
                    android:id="@+id/header_txtShortDescCourse"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/header_txtTitleCourse"
                    android:layout_alignParentEnd="true"
                    android:layout_marginTop="10dp"
                    android:layout_marginEnd="10dp"
                    android:text="courseItem.shortDescription"
                    android:textColor="#fff"
                    android:textSize="15sp" />

                <TextView
                    android:id="@+id/header_txtRate"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/header_txtShortDescCourse"
                    android:layout_alignParentEnd="true"
                    android:layout_marginTop="10dp"
                    android:layout_marginEnd="10dp"
                    android:drawablePadding="5dp"
                    android:text="courseItem ratingAvg"
                    android:textColor="#fff"
                    android:textSize="15sp" />
                    <!--android:drawableEnd="@drawable/ic_star"
                    android:background="@drawable/rounded_background_textview"-->

                <TextView
                    android:id="@+id/header_txtEnrolled"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/header_txtShortDescCourse"
                    android:layout_marginTop="10dp"
                    android:layout_marginEnd="10dp"
                    android:layout_toStartOf="@+id/header_txtRate"

                    android:drawablePadding="5dp"
                    android:text="@{courseItem.numberEnroll.concat(@string/space).concat(@string/number_enroll)}"
                    android:textColor="#fff"
                    android:textSize="15sp" />

                    <!--android:background="@drawable/rounded_background_textview"
                    android:drawableEnd="@drawable/ic_user_enrolled"-->

                <TextView
                    android:id="@+id/header_txtDuration"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/header_txtRate"
                    android:layout_alignParentEnd="true"
                    android:layout_marginTop="10dp"
                    android:layout_marginEnd="10dp"

                    android:drawablePadding="5dp"
                    android:text="@{courseItem.duration.concat(@string/space).concat(@string/label_hour)}"
                    android:textColor="#fff"
                    android:textSize="15sp" />

                  <!--  android:background="@drawable/rounded_background_textview"
                    android:drawableEnd="@drawable/ic_play_icon"-->

                <TextView
                    android:id="@+id/header_txtInstructor"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/header_txtRate"
                    android:layout_marginTop="10dp"
                    android:layout_marginEnd="10dp"
                    android:layout_toStartOf="@+id/header_txtDuration"

                    android:text="@{@string/txt_label_instructor.concat(@string/space).concat(courseItem.instructorName)}"
                    android:textColor="#fff"
                    android:textSize="15sp" />
                   <!-- android:background="@drawable/rounded_background_textview"-->
                <TextView
                    android:id="@+id/header_txtUpdate"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/header_txtInstructor"
                    android:layout_alignParentEnd="true"
                    android:layout_marginTop="10dp"
                    android:layout_marginEnd="10dp"

                    android:text="@{@string/last_update_course.concat(@string/space).concat(courseItem.updateDate)}"
                    android:textColor="#FFF"
                    android:textSize="15sp" />

                   <!-- android:background="@drawable/rounded_background_textview"-->
                </RelativeLayout>

                <FrameLayout
                    android:id="@+id/flPreview"
                    android:layout_width="260dp"
                    android:layout_height="220dp"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:background="@color/colorPrimary"
                    android:layout_marginTop="20dp">

                    <ImageView
                        android:id="@+id/imgPreview"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:scaleType="centerCrop"
                        />

                   <!-- android:src="@drawable/preview_video_view"-->

                    <ImageView
                        android:id="@+id/imgPlayButton"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:background="@color/colorPrimary"
                        />
                   <!-- android:src="@drawable/ic_play_video"-->
                    <TextView
                        android:id="@+id/header_txtPreview"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal|bottom"
                        android:layout_marginBottom="20dp"
                        android:text="txt_show_preview_video"
                        android:textColor="#FFF"
                        android:textSize="20sp"
                        android:textStyle="bold" />
                </FrameLayout>

            </RelativeLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:id="@+id/imgBack"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:layout_marginTop="10dp"
                        android:layout_marginEnd="20dp"
                         />

                   <!-- android:src="@drawable/ic_back_press"-->

                    <ImageView
                        android:id="@+id/imgFavorit"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="10dp"
                        android:layout_marginTop="10dp"
                        android:layout_toEndOf="@+id/imgShare"
                         />
                    <!--android:src="@drawable/ic_favorite_toolbar"-->

                    <ImageView
                        android:id="@+id/imgShare"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentStart="true"
                        android:layout_marginTop="10dp"
                        android:layout_marginEnd="20dp"
                         />

                  <!--  android:src="@drawable/ic_share"-->
                </RelativeLayout>
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>



    <android.support.v4.widget.NestedScrollView 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:layout_gravity="fill_vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">


            <TextView
                android:id="@+id/txtCurrentPrice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_marginTop="30dp"
                android:layout_marginEnd="20dp"
                android:text="@{courseItem.price}"
                android:textSize="30sp"
                android:textStyle="bold" />
        </RelativeLayout>

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

    只需根据您的项目更改值和图像

    【讨论】：

    • 我不知道如何更改布局。！！
    • 只看主布局和子布局。只需将下边距一半设置为框架布局的大小。并设置框架布局 android:layout_alignParentBottom="true"
    • 我试试你的解决方案。但是只增加了 AppBarLayout 的高度。我把结果放在我的答案中。
    • 你是否正确使用了相对布局？我刚刚检查了你的代码，它工作正常。只需检查对您的代码所做的更改
    • 是的。我在主要相对布局之外放置了两个额外的相对布局，并将其边距设置为 110 dp。然后我把我的框架布局放在主要亲戚之后，并为它设置android:layout_alignParentBottom="true"。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-02-17
    • 1970-01-01
    • 1970-01-01
    • 2017-05-03
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode