【问题标题】:align textview below ImageView在 ImageView 下方对齐 textview
【发布时间】:2018-06-30 16:06:52
【问题描述】:

我有一个 ImageView 和 3 个 TextView。我需要对齐图像视图下方的 3 个文本视图。第一个在左边。中间的第二个。右边第三个。

以下代码适用于普通和小屏幕。但对于平板电脑和大屏幕,第一个文本视图不在 imageview 下方。它移得太左了。第三个 TextView 也向右移动了。

<RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/Rel_wind2_img">

        <ImageView
            android:id="@+id/window2_image1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:id="@+id/window2_image1"/>
        <TextView
            android:id="@+id/TV1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/window2_image1"
            android:layout_alignParentLeft="true"
            android:textAlignment="center"/>


        <TextView
            android:id="@+id/TV2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/window2_image1"
            android:layout_centerInParent="true"
            android:textAlignment="center"/>

        <TextView
            android:id="@+id/TV3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/window2_image1"
            android:layout_alignParentRight="true"
            android:text="@string/info2_txt_moves"
            android:textAlignment="center"/>

    </RelativeLayout>

我可以从语法上解决这个问题。但我需要一种使用 XML 的简单方法。

【问题讨论】:

  • 如果给平板造成问题,请为平板创建额外的布局。

标签: android textview imageview alignment


【解决方案1】:

在线性布局中赋予布局权重。它将在所有文本视图之间平均设置宽度。试试这个

  <RelativeLayout android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/Rel_wind2_img"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:id="@+id/window2_image1"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/window2_image1"
        >
    <TextView
        android:id="@+id/TV1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_weight="1"
        android:textAlignment="center"/>


    <TextView
        android:id="@+id/TV2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_weight="1"
        android:textAlignment="center"/>

    <TextView
        android:id="@+id/TV3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="info2_txt_moves"
        android:layout_weight="1"
        android:textAlignment="center"/>
    </LinearLayout>
</RelativeLayout>

【讨论】:

    【解决方案2】:

    使用这个:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Rel_wind2_img"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    
    <ImageView
        android:id="@+id/window2_image1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher" />
    
    
    <LinearLayout
     android:orientation="horizontal"
     android:layout_width="match_parent"
     android:layout_height="wrap_content">
     <TextView
        android:text="dfgf"
        android:id="@+id/TV1"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:textAlignment="center" />
    
    
    <TextView
        android:id="@+id/TV2"
        android:text="dfgf"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAlignment="center" />
    
    <TextView
        android:id="@+id/TV3"
        android:text="dfgf"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAlignment="center" />
    
     </LinearLayout>
    </LinearLayout>
    

    希望这对您有所帮助...如果您需要任何帮助,您可以询问

    【讨论】:

    • 我试过了,它比我的代码好一点,但是 TV1 和 TV3 仍然远离图像视图。
    • 您的意思是 tv1 和 tv3 都在像 tv2 这样的图像视图下方吗?
    • 我需要将 tv1 放在图像下方(在左侧图像下方对齐)。 tv3 同在右边。我在 tv2 中没有问题,因为它总是在中心。
    • TV1 仍然向左移动,而不是明显低于图像,同样的 tv3 仍然向右移动
    • 你能把屏幕短发给你吗?你到底想要什么?
    【解决方案3】:

    进行这种 UI 设计的最佳方法是将布局划分为权重。 因为如果我们将 ui 划分为权重,它将根据划分大小自动调整,因此在任何设备上都不会出现问题。 喜欢:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent">
        <RelativeLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/Rel_wind2_img">
            <LinearLayout
                android:id="@+id/tr"
                android:layout_centerHorizontal="true"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
    
            <ImageView
                android:id="@+id/window2_image1"
                android:layout_width="fill_parent"
                android:layout_height="20dp"
                android:background="@color/black"
                />
            </LinearLayout>
            <LinearLayout
                android:layout_below="@+id/tr"
                android:weightSum="3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <LinearLayout
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="match_parent">
            <TextView
                android:id="@+id/TV1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="dhshshs"
                />
                </LinearLayout>
                <LinearLayout
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="match_parent">
    
            <TextView
                android:id="@+id/TV2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
    
                android:text="fjkhajhjfha"
                />
                </LinearLayout>
                <LinearLayout
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="match_parent">
            <TextView
                android:id="@+id/TV3"
                android:text="aoifoijoajoifjoajofjafafg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/window2_image1"
    
          />
                </LinearLayout>
            </LinearLayout>
    
        </RelativeLayout>
    
    </LinearLayout> 
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-10-15
      • 2020-03-25
      • 2018-07-07
      • 2012-07-14
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多