Question

我有圆形图标，它由一个文本视图和一个图像视图构建。

我希望文字和图片可以重叠，所以我使用relativeLayout。

当我运行应用程序时，我发现它在不同的屏幕尺寸范围内排除了我的控制。

有没有更好的方法来设计布局？

我设置了这样的布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".PageFragment.ActivityHomePage">

    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/activityHpEduin"
            android:textSize="15dp"
            android:textColor="#66CDAA"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="test" />

        <TextView
            android:id="@+id/activityHpTitle"
            android:layout_marginTop="5dp"
            android:textSize="20dp"
            android:textColor="@android:color/black"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="test" />

        <TextView
            android:textSize="18dp"
            android:layout_marginTop="5dp"
            android:textColor="#6666ff"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="7.16.2016-2/12.2017"
            android:id="@+id/activityHpDate" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <RelativeLayout
        android:paddingTop="20dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView

            android:id="@+id/circleNews"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:src="@drawable/btn_news" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="24dp"
            android:layout_marginTop="70dp"
            android:textColor="@android:color/white"
            android:gravity="center"
            android:text="@string/circleNews" />

        <ImageView
            android:id="@+id/circleActivityContent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_toRightOf="@+id/circleNews"
            android:src="@drawable/btn_content" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="140dp"
            android:layout_marginTop="70dp"
            android:gravity="center"
            android:textColor="@android:color/white"
            android:text="@string/circleActivityContent" />

        <ImageView
            android:id="@+id/circleSignUp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginLeft="5dp"
            android:layout_toRightOf="@+id/circleActivityContent"
            android:src="@drawable/btn_apply" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="252dp"
            android:layout_marginTop="70dp"
            android:gravity="center"
            android:textColor="@android:color/white"
            android:text="@string/circleSignUp" />

    </RelativeLayout>

    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="20dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp">

        <ImageView
            android:id="@+id/circlePresenter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"

            android:src="@drawable/btn_speakers" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginTop="70dp"
            android:gravity="center"
            android:textColor="@android:color/white"
            android:text="@string/circlePresenter" />

        <ImageView
            android:id="@+id/circleHotel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_toRightOf="@+id/circlePresenter"
            android:src="@drawable/btn_accommodation" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="138dp"
            android:layout_marginTop="70dp"
            android:gravity="center"
            android:textColor="@android:color/white"
            android:text="@string/circleHotel" />

        <ImageView
            android:id="@+id/circleTransportation"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginLeft="5dp"
            android:layout_toRightOf="@+id/circleHotel"
            android:src="@drawable/btn_traffic" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="252dp"
            android:layout_marginTop="70dp"
            android:gravity="center"
            android:textColor="@android:color/white"
            android:text="@string/circleTransportation" />


    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="20dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp">

        <ImageView
            android:id="@+id/circleSponsor"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="117dp"
            android:src="@drawable/btn_sponsors" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="146dp"
            android:layout_marginTop="70dp"
            android:textColor="@android:color/white"
            android:gravity="center"
            android:text="@string/circleSponsor" />


    </RelativeLayout>


</LinearLayout>

Answer 1

尝试此示例代码，它与您想要的类似。

首先是这里的xml文件代码我有一个imageview，下面是一个文本，它们是相对的布局。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/RelativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_gravity="center"
        android:layout_marginTop="40dp"
        android:layout_weight="1"
        android:src="@drawable/user_icon" />

    <TextView
        android:id="@+id/tv_email"
        android:layout_width="200dp"
        android:layout_height="45dp"
        android:layout_alignStart="@+id/imageView3"
        android:layout_below="@+id/imageView3"
        android:layout_gravity="center_horizontal"
        android:textColor="@color/White"
        android:textSize="18sp" />

</RelativeLayout>

输出如下：

新要求的另一个答案： xml代码：

 <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="119dp"
        android:layout_marginTop="50dp">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:background="@drawable/banner_bg" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:fontFamily="@string/font_family_universal"
            android:gravity="center"
            android:padding="20dp"
            android:text="hello world"
            android:textAlignment="center"
            android:textColor="@color/white"
            android:textSize="25dp"
            android:textStyle="normal"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true" />

    </RelativeLayout>

上述代码的截图：

请记住相应的示例代码更改背景路径和其他属性。这里有图像，上面有文本视图。

Answer 2

尝试像这样把你的textview带到前面 tv_shimmer_tv_gooffline.bringToFront（）;

Answer 3

使用SDP。这对于支持多种屏幕尺寸的设计更有帮助。

SDP - 可扩展的单位。

提供新大小单元的android SDK - sdp（可扩展dp）。此尺寸单位随屏幕尺寸而变化。它可以帮助Android开发人员支持多个屏幕。

对于文本视图，请参阅ssp，它基于文本的sp大小单位。

https://github.com/intuit/sdp

relativelayout对齐文本和图像重叠的问题

3 个答案: