图像视图对齐问题

Question

我想用图像视图和相对布局实现我的布局，如图所示。

我尝试使用此代码但没有用。

<RelativeLayout
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/textview_ratting"
    android:layout_margin="5dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/imageView"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/icon"/>
</RelativeLayout>

Answer 1

对于这种情况，我们通常使用 FrameLayout：

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="100dp"
        android:background="@color/colorAccent"/>

    <ImageView
        android:id="@+id/widget_title_icon"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_gravity="top|center_horizontal"
        android:adjustViewBounds="true"
        android:scaleType="fitStart"
        android:src="@mipmap/ic_launcher"/>
</FrameLayout>

我们也可以玩android:paddingTop="-10dp" 随心所欲。

参见FrameLayout定义：

Child views are drawn in a stack, with the most recently added child on top.

希望这会有所帮助....

Answer 2

试试这个代码，

activity_main.xml :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relCustomerEditProfile"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerVertical="true"
    android:layout_marginTop="100dp">

    <LinearLayout
        android:id="@+id/linRoot"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="50dp"
        android:orientation="vertical">

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

            <RelativeLayout
                android:id="@+id/imgBackground"
                android:layout_width="wrap_content"
                android:layout_height="90dp"
                android:layout_alignBottom="@+id/relProfile"
                android:layout_centerHorizontal="true"
                android:background="@drawable/bg_black"></RelativeLayout>

            <RelativeLayout
                android:id="@+id/relProfile"
                android:layout_width="110dp"
                android:layout_height="110dp"
                android:layout_centerHorizontal="true">

                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/imgViewProfilePhoto"
                    android:layout_width="90dp"
                    android:layout_height="100dp"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="40dp"
                    android:background="@drawable/red"></de.hdodenhof.circleimageview.CircleImageView>

            </RelativeLayout>
        </RelativeLayout>

    </LinearLayout>
</RelativeLayout>

特此附上截图，

希望对你有帮助！！

Answer 3

android:layout_marginTop="-35dp" -35dp 是图像大小的一半 (70dp/2)，但边距在相反方向，因此请使用“-”符号。

<RelativeLayout
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/textview_ratting"
    android:layout_margin="5dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/imageView"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="-35dp"
        android:src="@drawable/icon"/>
</RelativeLayout>

Answer 4

这对我有用...提供负 paddingTop 等于 imageview 大小的一半。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_marginTop="70dp"
            android:background="@color/colorAccent" />
        <ImageView
            android:id="@+id/widget_title_icon"
            android:paddingTop="-70dp"
            android:layout_width="140dp"
            android:layout_height="140dp"
            android:layout_gravity="top|center_horizontal"
            android:adjustViewBounds="true"
            android:contentDescription="@string/action_settings"
            android:scaleType="fitStart"
            android:src="@mipmap/ic_launcher" />
</FrameLayout>

Answer 5

用过FrameLayout，用frameLayout就可以了

Answer 6

为此，您应该使用 FrameLayout。 FrameLayout 提供分层布局以重叠 UI 中的项目。示例：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="200dp"
        android:layout_gravity="center|center_horizontal"
        android:background="@color/colorAccent" />
    <ImageView
        android:id="@+id/widget_title_icon"
        android:layout_width="140dp"
        android:layout_height="140dp"
        android:layout_marginBottom="100dp"
        android:layout_gravity="center|center_horizontal"
        android:src="@mipmap/ic_launcher" />
</FrameLayout>

Arpan 已经提出了类似的答案。他使用了两个元素的填充和边距，而这个使用布局引力和 ImageView 的相对边距。这样做会始终将内容置于所有设备的屏幕中央。

ImageView(android:layout_marginBottom) = 0.5 * RelativeLayout(android:layout_height)

Answer 7

请使用circleimageview and relativelayout as a child of framelayout.

<FrameLayout 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="wrap_content">
<RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_marginBottom="0dp"
                android:paddingBottom="0dp"
                android:paddingTop="0dp">
</RelativeLayout>

 <de.hdodenhof.circleimageview.CircleImageView
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/cir_img_ptv"
                android:layout_width="@dimen/cir_img_diameter_ptv"
                android:layout_height="@dimen/cir_img_diameter_ptv"
                android:layout_gravity="center|top"
                android:layout_marginTop="@dimen/cir_img_top_margin_ptv"
                android:scaleType="centerCrop"
                android:src="@drawable/profile_user"
                app:civ_border_color="@color/white"
                app:civ_border_width="@dimen/cir_img_stroke_ptv"
                app:civ_fill_color="@color/white"
                app:civ_border_overlay="true"/>

 </FrameLayout>

图像视图对齐问题

Imageview alignment issue

android

imageview

android-layout

android-relativelayout