Android и разбивка текста между двумя изображениями разного размера

#android #android-layout #image-processing

#Android #android-макет #обработка изображений

Вопрос:

Представьте, что у меня есть верхняя панель, в которой есть родительский контейнер.

  • Я хочу, чтобы текст находился в центре.
  • Слева у меня изображение небольшой ширины.
  • Справа у меня изображение большой ширины.

(Из-за разницы в размерах изображений я дал каждому изображению родительский элемент с одинаковой шириной. Это было сделано для облегчения центрирования текста при возможности правильного отслеживания, например, кликов по изображениям. Если бы не было необходимости отслеживать клики, я мог бы просто убедиться, что изображения были одинакового размера с прозрачностью в них.)

Я пытаюсь решить выше, используя следующий макет, но при просмотре по горизонтали результат:

  • Левое изображение неправильно выровнено по левому краю внутри своего родительского элемента.
  • Текст находится сразу после левой части, а не по центру.
  • Правое изображение сразу после центральной части.

Таким образом, полный сбой. Вот код 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>
  

Ответ №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"
А также добавьте некоторые поля к представлениям, чтобы они не прилипали друг к другу.

Комментарии:

1. В итоге я использовал это в сочетании с вычислениями времени выполнения, регулирующими ширину некоторых дополнительных прозрачных изображений

Ответ №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 вместо изображения…

Ответ №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>
  

Комментарии:

1. В основном это работает, за исключением левых изображений (которые в данном случае меньше по ширине, но поскольку изображения загружаются онлайн, я не могу заранее знать размеры), которые затем центрируются в пределах 100dp вместо выравнивания по левому краю