通過使用相對和線性 - 文本和可點擊圖像在Android設計UI

我試圖設計UI，如下圖所示。這裏我想要設計兩個textViews和三個imageViews，如下所示。通過使用相對和線性 - 文本和可點擊圖像在Android設計UI

enter image description here

我試過，但將數據傳遞到textViews動態地將其錯誤地顯示之後（覆蓋在其他文本一文）

這是我的代碼：

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="90dip" 
    android:orientation="horizontal" 
    android:padding="5dip" > 

    <!-- ListRow Left side navigation_image image --> 

    <LinearLayout 
     android:id="@+id/navigation_image" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:layout_marginRight="5dip" 
     android:padding="3dip" > 

     <ImageView 
      android:id="@+id/navigation_marker_image_view" 
      android:layout_width="30dip" 
      android:layout_height="30dip" 
      android:contentDescription="@string/navigation_image" 
      android:clickable="true" 
      android:focusable="false" 
      android:src="@drawable/navigation_marker" /> 
    </LinearLayout> 

    <TextView 
     android:id="@+id/address_text_view" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_above="@+id/share_image_view" 
     android:layout_alignParentRight="true" 
     android:layout_below="@+id/date_time_text_view" 
     android:layout_toRightOf="@+id/navigation_image" 
     android:textSize="12sp" /> 

    <TextView 
     android:id="@+id/date_time_text_view" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignLeft="@+id/address_text_view" 
     android:layout_alignParentRight="true" 
     android:textStyle="bold" 
     android:typeface="sans" /> 

    <ImageView 
     android:id="@+id/share_image_view" 
     android:layout_width="25dip" 
     android:layout_height="25dip" 
     android:layout_alignTop="@+id/favourite_image_view" 
     android:layout_marginLeft="50dp" 
     android:layout_toRightOf="@+id/favourite_image_view" 
     android:contentDescription="@string/share_image" 
     android:clickable="true" 
     android:focusable="false" 
     android:src="@drawable/share" /> 

    <ImageView 
     android:id="@+id/edit_image_view" 
     android:layout_width="25dip" 
     android:layout_height="25dip" 
     android:layout_alignLeft="@+id/address_text_view" 
     android:layout_alignParentBottom="true" 
     android:layout_marginLeft="29dp" 
     android:contentDescription="@string/edit_buttonon_image" 
     android:clickable="true" 
     android:focusable="false" 
     android:src="@drawable/edit" /> 

    <ImageView 
     android:id="@+id/favourite_image_view" 
     android:layout_width="25dip" 
     android:layout_height="25dip" 
     android:layout_alignTop="@+id/edit_image_view" 
     android:layout_marginLeft="48dp" 
     android:layout_toRightOf="@+id/edit_image_view" 
     android:contentDescription="@string/favarouite_image" 
     android:clickable="true" 
     android:focusable="false" 
     android:src="@drawable/favourite" /> 

</RelativeLayout>

如何獲得corrrect設計如上所示，它應該正常工作。在此先感謝..

來源

2013-11-22 Shylendra Madda

我相信TextView問題是從90dip高度所產生的RelativeLayout的是試圖把所有東西都放在那裏，但是沒有足夠的空間，並且結束了重疊的觀點。

更改爲wrap_content應該修復它。除非你完全知道固定量足夠大，否則不要使用一個。

當然以上將導致ImageView s到被推向底部，所以從edit_image_view

android:layout_alignParentBottom="true"

刪除和添加這個到edit_image_view

android:layout_below="@+id/address_text_view"

不過，你會需要從address_text_view刪除此，以避免循環依賴

android:layout_above="@+id/share_image_view"

編輯爲清楚起見

你相對佈局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="90dip" <-- change to wrap_content 
    android:orientation="horizontal" 
    android:padding="5dip" > 

<!-- ListRow Left side navigation_image image --> 

<LinearLayout 
    android:id="@+id/navigation_image" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignParentLeft="true" 
    android:layout_marginRight="5dip" 
    android:padding="3dip" > 

    <ImageView 
     android:id="@+id/navigation_marker_image_view" 
     android:layout_width="30dip" 
     android:layout_height="30dip" 
     android:contentDescription="@string/navigation_image" 
     android:clickable="true" 
     android:focusable="false" 
     android:src="@drawable/navigation_marker" /> 
</LinearLayout> 

<TextView 
    android:id="@+id/address_text_view" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_above="@+id/share_image_view" <-- remove this 
    android:layout_alignParentRight="true" 
    android:layout_below="@+id/date_time_text_view" 
    android:layout_toRightOf="@+id/navigation_image" 
    android:textSize="12sp" /> 

<TextView 
    android:id="@+id/date_time_text_view" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignLeft="@+id/address_text_view" 
    android:layout_alignParentRight="true" 
    android:textStyle="bold" 
    android:typeface="sans" /> 

<ImageView 
    android:id="@+id/share_image_view" 
    android:layout_width="25dip" 
    android:layout_height="25dip" 
    android:layout_alignTop="@+id/favourite_image_view" 
    android:layout_marginLeft="50dp" 
    android:layout_toRightOf="@+id/favourite_image_view" 
    android:contentDescription="@string/share_image" 
    android:clickable="true" 
    android:focusable="false" 
    android:src="@drawable/share" /> 

<ImageView 
    android:id="@+id/edit_image_view" 
    android:layout_width="25dip" 
    android:layout_height="25dip" 
    android:layout_alignLeft="@+id/address_text_view" 
    android:layout_alignParentBottom="true" <-- remove this 
    android:layout_below="@+id/address_text_view" <-- add this 
    android:layout_marginLeft="29dp" 
    android:contentDescription="@string/edit_buttonon_image" 
    android:clickable="true" 
    android:focusable="false" 
    android:src="@drawable/edit" /> 

<ImageView 
    android:id="@+id/favourite_image_view" 
    android:layout_width="25dip" 
    android:layout_height="25dip" 
    android:layout_alignTop="@+id/edit_image_view" 
    android:layout_marginLeft="48dp" 
    android:layout_toRightOf="@+id/edit_image_view" 
    android:contentDescription="@string/favarouite_image" 
    android:clickable="true" 
    android:focusable="false" 
    android:src="@drawable/favourite" /> 

</RelativeLayout>

來源

2013-11-22 15:14:15 triggs

得到這個類轉換異常： java.lang.ClassCastException：android.widget.ImageView不能投到android.widget.TextView –

類轉換可能是由喲引起的ü更改其中一個圖像視圖ids無論textview是什麼，我會編輯我的答案是更清晰 – triggs

嘿..感謝它的完美我想要的是..非常感謝.. :) –

這個UI是正確的，但你必須修復textviews大小，以避免文本重疊：

<TextView 
    android:id="@+id/address_text_view" 
    android:layout_width="match_parent" 
    android:layout_height="50dp" 
    android:layout_above="@+id/share_image_view" 
    android:layout_alignParentRight="true" 
    android:layout_below="@+id/date_time_text_view" 
    android:layout_toRightOf="@+id/navigation_image" 
    android:textSize="12sp" /> 

<TextView 
    android:id="@+id/date_time_text_view" 
    android:layout_width="match_parent" 
    android:layout_height="100dp" 
    android:layout_alignLeft="@+id/address_text_view" 
    android:layout_alignParentRight="true" 
    android:textStyle="bold" 
    android:typeface="sans" />

來源

2013-11-22 14:39:43 Hamad

謝謝您的回答，我會盡力ITT –

如果這一點，幫助比接受它的答案別人的幫助也給予好評吧，如果你真正得到這個有用@shylendra – Hamad

對不起，那不是在這裏工作也呈現出在這裏和那裏沒有以適當的方式顯示在圖形佈局 –

通過使用相對和線性 - 文本和可點擊圖像在Android設計UI

回答

相關問題