Android和两个不同大小的图像之间的中心文本

Question

假设我有一个顶部栏，它有一个父容器。

• 我想在它的中心放置文字。
• 在左边我有一个小宽度图像。
• 在右边我有一个大宽度的图像。

（由于图像大小的不同，我给每个图像一个宽度相同的父图像。这是为了便于文本居中，同时能够正确跟踪例如对图像的点击。如果没有必要跟踪点击，我可以确保图像的大小相同且具有透明度。）

我正在尝试使用以下布局解决上述问题但水平查看，结果是：

• 左图像在其父级中未正确对齐到左。
• 文本紧跟在左侧，而不是在中心。
• 右图紧跟中心部分。

因此完全失败。这是 XML 代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     
 android:layout_width="match_parent" 
  android:layout_height="match_parent"
  android:orientation="horizontal"
  android:id="@+id/myTitleLayout"
  >
<LinearLayout            
  android:layout_height="match_parent"
  android:orientation="horizontal"  
  android:layout_width="100dp"
  android:gravity="left"
  android:layout_gravity="left"    
>       
<ImageView android:id="@+id/myTitleLogoLeft" 
            android:layout_width="wrap_content" 
            android:layout_height="match_parent"
            android:background="@drawable/shared__menu__transparent"
            android:padding="2dp"
            android:visibility="visible"
            android:gravity="left"
            android:layout_gravity="left"
/>                        
</LinearLayout>   
<TextView 
  android:id="@+id/myTitleText" 
  android:text="@string/dotdotdot" 
  android:layout_width="wrap_content" 
  android:layout_height="match_parent"
  android:gravity="center"  
  android:layout_gravity="center"    
/>
<LinearLayout         
  android:layout_height="match_parent"
  android:orientation="horizontal"  
  android:layout_width="100dp"
  android:gravity="right"
  android:layout_gravity="right"
>       
<ImageView android:id="@+id/myTitleLogoRight" 
            android:layout_width="wrap_content" 
            android:layout_height="match_parent"
            android:background="@drawable/shared__menu__transparent"
            android:padding="2dp"
            android:visibility="visible"
            android:gravity="right"
            android:layout_gravity="right"                         
/>                        
</LinearLayout>


</LinearLayout>

Answer 1

使用RelativeLayout 而不是LinearLayout。它使大部分布局变得更加容易。

<?xml version="1.0" encoding="utf-8"?>
<RelateiveLaoyut xmlns:android="http://schemas.android.com/apk/res/android"     
  android:layout_width="match_parent" 
  android:layout_height="match_parent"
  android:id="@+id/myTitleLayout">

    <TextView 
      android:id="@+id/myTitleText" 
      android:text="@string/dotdotdot" 
      android:layout_width="wrap_content" 
      android:layout_height="match_parent"
      android:layout_centerInParent="true"   
    />

    <ImageView android:id="@+id/myTitleLogoLeft" 
        android:layout_width="wrap_content" 
        android:layout_height="match_parent"
        android:background="@drawable/shared__menu__transparent"
        android:padding="2dp"
        android:visibility="visible"
        android:layout_toLeftOf="@id/myTitleText"
    />

    <ImageView android:id="@+id/myTitleLogoRight" 
        android:layout_width="wrap_content" 
        android:layout_height="match_parent"
        android:background="@drawable/shared__menu__transparent"
        android:padding="2dp"
        android:visibility="visible"
        android:layout_toRightOf="@id/myTitleText"                       
    /> 
</RelateiveLaoyut >

如果左图需要在栏的左边，添加android:layout_alignParentLeft="true"。与layout_android:alignParentRight="true" 相同的正确图像。 并且还要给 Views 添加一些边距，这样它们就不会粘在一起了。

Answer 2

检查下面的代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     
 android:layout_width="match_parent" 
  android:layout_height="wrap_parent"
  android:orientation="horizontal"
  android:id="@+id/myTitleLayout"
  >
<LinearLayout            
  android:layout_height="match_parent"
  android:orientation="horizontal"  
  android:layout_width="100dp"
  android:layout_alignParentLeft="true"
>       
<ImageView android:id="@+id/myTitleLogoLeft" 
            android:layout_width="wrap_content" 
            android:layout_height="match_parent"
            android:background="@drawable/shared__menu__transparent"
            android:padding="2dp"
            android:visibility="visible"
            android:gravity="left"
            android:layout_gravity="left"
/>                        
</LinearLayout>   
<TextView 
  android:id="@+id/myTitleText" 
  android:text="@string/dotdotdot" 
  android:layout_width="wrap_content" 
  android:layout_height="match_parent"
  android:layout_centerInParent="true"
/>
<LinearLayout         
  android:layout_height="match_parent"
  android:orientation="horizontal"  
  android:layout_width="100dp"  
  android:layout_alignParentRight="true"
>       
<ImageView android:id="@+id/myTitleLogoRight" 
            android:layout_width="wrap_content" 
            android:layout_height="match_parent"
            android:background="@drawable/shared__menu__transparent"
            android:padding="2dp"
            android:visibility="visible"
            android:gravity="right"
            android:layout_gravity="right"                         
/>                        
</LinearLayout>


</LinearLayout>

就是这样，还有一个建议是在 LinearLayout 而不是 Image 上进行点击事件...

Answer 3

Try this way,hope this will help you to solve your problem.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/myTitleLayout"
    android:gravity="center">

    <ImageView
        android:id="@+id/myTitleLogoLeft"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:background="@drawable/shared__menu__transparent"
        android:adjustViewBounds="true"
        android:padding="2dp"/>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center">
        <TextView
            android:id="@+id/myTitleText"
            android:text="@string/dotdotdot"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>


    <ImageView android:id="@+id/myTitleLogoRight"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:background="@drawable/shared__menu__transparent"
        android:adjustViewBounds="true"
        android:padding="2dp" />

</LinearLayout>