在两个不同的布局上重叠circleView

时间:2015-05-25 09:30:29

标签: android android-layout overlap

我想要获得这个:

enter image description here

但我只能得到这个:

enter image description here

使用此布局:

<?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"
    android:orientation="vertical" >
    <!--android:background="@mipmap/background_poly"-->
    <RelativeLayout android:id="@+id/headerL"
        android:layout_width="match_parent" android:layout_height="100dp"
        android:background="@color/account_grey_200">

</RelativeLayout>

<RelativeLayout android:id="@+id/account_det"
    android:layout_width="match_parent" android:layout_height="wrap_content">
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/usrAvatar"
        android:layout_width="90dp" android:layout_height="90dp"
        android:src="@mipmap/aka"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="38dp"/>

    <TextView android:id="@+id/usrName"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_marginLeft="8dp" android:layout_marginStart="8dp"
        android:layout_marginTop="2dp"
        android:text="CrisRe"
        android:textColor="#000000" android:textSize="14sp" android:textStyle="normal"
        android:layout_toEndOf="@id/usrAvatar"
        android:layout_toRightOf="@id/usrAvatar"
        android:layout_alignTop="@id/usrAvatar" />
    <!--android:layout_alignBaseline="@id/usrAvatar"-->

    <TextView android:id="@+id/usrEmail"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_marginTop="6dp"
        android:textColor="#000000"
        android:textSize="16sp"
        android:textStyle="normal"
        android:text="crisRe@mymail.com"
        android:layout_alignLeft="@id/usrName"
        android:layout_alignStart="@id/usrName"
        android:layout_below="@id/usrName" />
</RelativeLayout>

<LinearLayout android:layout_width="match_parent" android:layout_height="fill_parent"
    android:layout_below="@+id/headerL"
    android:background="@color/account_grey_400"/>

问题是什么?如何在两个布局之上重叠CircleView? 我也考虑使用可绘制的layer-list,但我无法使其正常工作。这个似乎是最简单的解决方案,但我也在考虑其他替代方案。

2 个答案:

答案 0 :(得分:1)

xml中稍作修改:

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

    <!-- android:background="@mipmap/background_poly" -->

    <RelativeLayout
        android:id="@+id/headerL"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/account_grey_200" >
    </RelativeLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/headerL"
        android:background="@color/account_grey_400" />

    <RelativeLayout
        android:id="@+id/account_det"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/usrAvatar"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginTop="38dp"
            android:src="@mipmap/aka" />

        <TextView
            android:id="@+id/usrName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/usrAvatar"
            android:layout_marginLeft="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="2dp"
            android:layout_toEndOf="@id/usrAvatar"
            android:layout_toRightOf="@id/usrAvatar"
            android:text="CrisRe"
            android:textColor="#000000"
            android:textSize="14sp"
            android:textStyle="normal" />
        <!-- android:layout_alignBaseline="@id/usrAvatar" -->

        <TextView
            android:id="@+id/usrEmail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/usrName"
            android:layout_alignStart="@id/usrName"
            android:layout_below="@id/usrName"
            android:layout_marginTop="6dp"
            android:text="crisRe@mymail.com"
            android:textColor="#000000"
            android:textSize="16sp"
            android:textStyle="normal" />
    </RelativeLayout>

答案 1 :(得分:1)

根据您的要求更改以下代码

<RelativeLayout
    android:id="@+id/top_layout"
    android:layout_width="match_parent"
    android:background="#FFFF0000"
    android:layout_height="100dp"></RelativeLayout>

<RelativeLayout
    android:id="@+id/bottom_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"></RelativeLayout>

<de.hdodenhof.circleimageview.CircleImageView
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_below="@+id/top_layout"
    android:layout_marginTop="-45dp" //It should be half of the height
    android:src="@drawable/ic_launcher" />