1. 首页
  2. 问答
  3. relativelayout对齐问题关于文本和图像重叠

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

2017-01-16 126 views
1

4"screen5"screen我有圆形图标，它由一个文本视图和一个图像视图构成。relativelayout对齐问题关于文本和图像重叠

我希望文本和图像可以重叠，所以我使用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>

来源

2017-01-16 徐博俊

+0

Share预计截图。 – TheLittleNaruto

+0

任何图片预期视图与结果？ –

+0

好吧，我更新截图，请看看。第一个是4“屏幕，第二个是5”屏幕。 –

回答

0

尝试此示例代码，它类似于你想要什么。

首先这里是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>

输出是象下面这样： enter image description here

与新要求另一个答案： 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>

截图的上面的代码：
enter image description here

请记住它的示例代码相应地改变背景路径和其他properties.Here有图像，并在它上面有文本视图根据需要。

来源

2017-01-16 06:47:50

+0

感谢您的帮助，但它不是我需要的屏幕。 –

+0

你watte添加textview和图像视图相对布局，其中textview是图像视图 –

+0

好吧，我知道了...让我看看 –

0

试着把你的textview放在前面这样 tv_shimmer_tv_gooffline.bringToFront（）;

来源

2017-01-16 07:07:08 sunil

+0

对不起，我不知道你的意思，我的问题是关于XML。 什么是tv_shimmer_tv_gooffline.bringToFront（）; ？ –

+0

你想要你的textview上面的imageview在相对布局的权利？ – sunil

+0

更正确的是重叠，并且它在不同的屏幕上具有相同的布局。 –

0

使用SDP。它帮助我更多地支持这种设计以支持多种屏幕尺寸。

SDP - 一个可扩展的大小单位。

提供新尺寸单位--SDK（可缩放dp）的android SDK。这个尺寸单位与屏幕尺寸成比例。它可以帮助Android开发者支持多个屏幕。

对于文本浏览请参考ssp这是基于文本的大小单位。

https://github.com/intuit/sdp

来源

2017-01-16 08:49:27

相关问题

 相关问题