带有ImageButton的Android布局重叠其他元素

时间:2013-02-05 15:25:06

标签: android android-layout android-widget xamarin.android

我正在尝试偏移按钮并将其位置设置为使其看起来悬挂在其他元素上。在这张图片中可以看到我正在寻找的东西......注意图像按钮,它是我的xml中的id ibLoginButton,红色箭头指向:

enter image description here

这是我布局的xml,但我不知道如何让ibLoginButton产生这种效果。我是否需要以编程方式执行此操作?如果是这样,怎么样?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/db1_root"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <RelativeLayout
        style="@style/TitleBar"
        android:layout_height="54dp">
        <ImageView
            android:id="@+id/ivLoginPicture"
            android:contentDescription="@string/description_logo"
            android:src="@drawable/MDSLogoForLoginTrans"
            android:background="#ffffffff"
            android:layout_width="32dp"
            android:layout_height="44dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_centerVertical="true" />
        <TextView
            android:id="@+id/tvLoginName"
            android:text="Dr. Dentist"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="230.5dp"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/ivLoginPicture"
            android:layout_centerVertical="true" />
        <ImageButton
            android:id="@+id/ibLogout"
            android:src="@drawable/logoutButton"
            android:layout_width="80dp"
            android:layout_height="38dp"
            android:layout_gravity="center_vertical"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:scaleType="fitXY"
            android:paddingTop="0dp"
            android:paddingRight="0dp"
            android:paddingBottom="0dp"
            android:paddingLeft="0dp" />
        <ImageButton
            android:src="@android:drawable/ic_menu_gallery"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:id="@+id/ibLoginButton"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true" />
    </RelativeLayout>
    <LinearLayout
        android:id="@+id/HomePage"
        android:layout_weight="1"
        android:background="@drawable/home_background"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <GridView
            android:id="@+id/Grid"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:columnWidth="90dp"
            android:numColumns="auto_fit"
            android:listSelector="@android:color/transparent"
            android:verticalSpacing="10dp"
            android:horizontalSpacing="10dp"
            android:stretchMode="columnWidth"
            android:gravity="center"
            android:scrollbars="vertical" />
    </LinearLayout>
    <WebView
        android:layout_width="fill_parent"
        android:layout_height="100dip"
        android:layout_alignParentBottom="true"
        android:background="@drawable/gradientNews"
        android:id="@+id/webView1" />
</LinearLayout>

任何有Android布局知识的人都请光一点!我很难过。

感谢您的帮助。

3 个答案:

答案 0 :(得分:6)

需要做出一些改变

  • 需要将LinearLayout置于RelativeLayout之内。
  • 需要将ibLoginButton按钮移到其RelativeLayout
  • 之外
  • ibLoginButton需要覆盖两个区域,因为RelativeLayout底部的项目位于顶部。

完整的示例代码,可以提供您想要的内容(在Eclipse的图形布局预览中看起来很棒)。

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

    <RelativeLayout
        style="@style/TitleBar"
        android:id="@+id/first_relative"
        android:layout_width="wrap_content"
        android:layout_height="54dp" >

        <ImageView
            android:id="@+id/ivLoginPicture"
            android:contentDescription="@string/description_logo"
            android:src="@drawable/MDSLogoForLoginTrans"
            android:background="#ffffffff"
            android:layout_width="32dp"
            android:layout_height="44dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_centerVertical="true" />
        <ImageButton
            android:id="@+id/ibLogout"
            android:src="@drawable/logoutButton"
            android:layout_width="80dp"
            android:layout_height="38dp"
            android:layout_gravity="center_vertical"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:scaleType="fitXY"
            android:paddingTop="0dp"
            android:paddingRight="0dp"
            android:paddingBottom="0dp"
            android:paddingLeft="0dp" />

        <TextView
            android:id="@+id/tvLoginName"
            android:layout_width="230.5dp"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/ibLogout"
            android:text="Dr. Dentist"
            android:textAppearance="?android:attr/textAppearanceMedium" />

    </RelativeLayout>
    <LinearLayout
        android:id="@+id/HomePage"
        android:layout_weight="1"
        android:background="@drawable/home_background"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/first_relative">

        <GridView
            android:id="@+id/Grid"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:columnWidth="90dp"
            android:gravity="center"
            android:horizontalSpacing="10dp"
            android:listSelector="@android:color/transparent"
            android:numColumns="auto_fit"
            android:scrollbars="vertical"
            android:stretchMode="columnWidth"
            android:verticalSpacing="10dp" >
        </GridView>

    </LinearLayout>
    <WebView
        android:layout_width="fill_parent"
        android:layout_height="100dip"
        android:layout_alignParentBottom="true"
        android:background="@drawable/gradientNews"
        android:id="@+id/webView1" />

    <ImageButton
        android:id="@+id/ibLoginButton"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="22dp"
        android:src="@android:drawable/ic_menu_gallery" />

</RelativeLayout>

另外,应该可以只使用一个相对布局。出于性能原因,使用最少数量的容器是最佳实践。

答案 1 :(得分:1)

尝试在标题栏和主页之间放置

<View android:layout_width="40dp" 
      android:layout_height="40dp" 
      layout_gravity="center_horizontally" 
      layout_margin_top="-20dp" background="ef0"/>

这里的想法是负边际

答案 2 :(得分:1)

水平居中,然后调整边距。你知道topbar的高度,你可以设置44的上边距 - 图像高度的一半