如何在android坐标布局中将frameLyout重叠一半

Question

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

我从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预览的一半。

Answer 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>

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