1. 首頁
  2. 問答
  3. relativelayout對齊問題關於文本和圖像重疊

relativelayout對齊問題關於文本和圖像重疊

2017-01-16 54 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

相關問題

 相關問題