簡體   English   中英

底部將文本視圖與GridView中的ImageView對齊

[英]Bottom align a textview with an ImageView in a GridView

到目前為止,這是我的布局的結果

布局

我正在嘗試將textview放在ImageView的底部(不在其下方)。 文本視圖應與ImageView底部對齊。

我的ImageView的圖像是一個正方形。 如果textview的內容比我的ImageView的寬度更長,則該內容應繼續到下一行。

目前,我不在乎ImageView的內容是否未按比例縮放(即被拉伸等)。

這是我擁有的XML:

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

    <ImageView
        android:id="@+id/iconItem"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignBottom="@+id/textItem"
        android:scaleType="fitXY"
        android:padding="0dip"
        android:src="@drawable/shout_ic"/>
    <TextView
        android:id="@id/textItem"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textSize="11sp"
        android:text="Motorcycles"
        android:textColor="#FFF"
        android:background="#8888"/>
</RelativeLayout>

我如何獲得想要的結果?

編輯1:

我認為我正在進步...(但不完全符合我的想法)

圖像仍然太小

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

    <ImageView
        android:id="@+id/iconItem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:padding="0dip"
        android:src="@drawable/thumbqoo_launcher_ic"/>
    <TextView
        android:id="@+id/textItem"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_alignBottom="@+id/iconItem"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textSize="11sp"
        android:text="Motorcycles"
        android:textColor="#FFF"
        android:background="#8888"/>
</RelativeLayout>

像這樣將您的父布局更改為vertical方向的FrameLayout

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp" >

<ImageView
    android:id="@+id/iconItem"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:padding="0dip"
    android:scaleType="fitXY"
    android:src="@drawable/ic_launcher" />

<TextView
    android:id="@+id/textItem"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#8888"
    android:gravity="center"
    android:layout_gravity="bottom"
    android:text="Motorcycles"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:textColor="#FFF"
    android:textSize="11sp" />

</FrameLayout>

從您的imageview中刪除以下行android:layout_alignBottom="@+id/textItem" ,然后嘗試在TextView添加以下行android:layout_alignBottom="@+id/iconItem"

ImageView的寬度設置為行布局的寬度

    http://i.stack.imgur.com/HUY4o.png Check the sample image...
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/album_item"
      android:layout_width="match_parent"
      android:layout_height="fill_parent"
      android:orientation="vertical" >

    <ImageView
       android:id="@+id/cover"
       android:layout_width="148dp"
       android:layout_height="148dp"
       android:src="@drawable/empty_photo" />

   <LinearLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_alignBottom="@+id/cover"
     android:background="#70000000"
     android:padding="6dp" >

     <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:textSize="12sp"
        android:textStyle="bold" />
      </LinearLayout>
    </RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="5dp" >

    <ImageView
        android:id="@+id/iconItem"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignBottom="@+id/textItem"
        android:padding="0dip"
        android:scaleType="fitXY"
        android:src="@drawable/shout_ic" />

    <TextView
        android:id="@id/textItem"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#8888"
        android:gravity="center"
        android:text="Motorcycles"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="#FFF"
        android:textSize="11sp" android:layout_alignBottom="@id/iconItem"/>

</RelativeLayout>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM