【问题标题】:Bottom align a textview with an ImageView in a GridView将文本视图与 GridView 中的 ImageView 底部对齐
【发布时间】:2014-01-09 09:14:26
【问题描述】:

到目前为止,这是我布局的结果

我试图将 textview 放在 ImageView 的底部(而不是它的下方)。 textview 应该与 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>

【问题讨论】:

  • 如果你想让你的TextView有一个固定的宽度,你为什么要使用fill_parent?尝试将其宽度设置为 80dp,如 ImageView。

标签: android android-layout gridview


【解决方案1】:

将您的父布局更改为FrameLayout,方向为vertical,如下所示

<?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 的顶部,只有文本视图的底部与 imageview 的底部对齐。您的解决方案似乎将 textview 放在图像视图下方。
【解决方案2】:

从您的图像视图中删除此行 android:layout_alignBottom="@+id/textItem" 并尝试在您的 TextView 中添加行 android:layout_alignBottom="@+id/iconItem"

ImageView 的宽度设置为行布局的宽度

【讨论】:

    【解决方案3】:
        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>
    

    【讨论】:

      【解决方案4】:
      <?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>
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-06-11
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多