Как предотвратить наложение в поле зрения? - PullRequest
Новая
       89

Как предотвратить наложение в поле зрения?

2 голосов
/ 23 января 2020

Я хочу создать вид, подобный этому.

Actual image

Проблема в том, что когда размер TextView больше, он выглядит следующим образом. enter image description here

Таким образом, оно перекрывается "Просмотреть все (35)" TextView. Как предотвратить перекрытие? ImageView должен быть справа от TextView, но он не должен перекрывать «Просмотреть все (35)». Я думаю, вы понимаете. Спасибо.

Вот файл xml. 

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:fontFamily="@font/montserrat_semi_bold"
        android:maxLines="1"
        android:layout_alignParentStart="true"
        android:textColor="@color/colorTextDark"
        android:textSize="@dimen/text_extra_large"
        tools:text="Birthday" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="16dp"
        android:layout_toEndOf="@+id/textView"
        android:src="@drawable/wishlist_public" />

    <TextView
        android:id="@+id/textViewAll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:fontFamily="@font/montserrat_semi_bold"
        android:text="View all (35)"
        android:layout_alignParentEnd="true"
        android:textColor="@color/colorTextPrimary"
        android:textSize="@dimen/text_small" />

</RelativeLayout>

Ответы [ 4 ]

1 голос
/ 24 января 2020

Попробуйте поместить ваш imageView в свойство drawableEnd textView, после чего поместите его во вложенную линейную разметку и присвойте ему вес. 

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableEnd="@drawable/imageView"
            android:layout_marginStart="16dp"
            android:maxLines="1"
            android:gravity="start|center"
            android:textSize="@dimen/text_extra_large"
            android:ellipsize="end"
            android:text="Your text here" />

        <Space
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </Space>

        </LinearLayout>

        <TextView
            android:id="@+id/textViewAll"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:gravity="end"
            android:layout_gravity="center_vertical"
            android:text="View All"
            android:textSize="@dimen/text_small" />
    </LinearLayout>
1 голос
/ 24 января 2020

Попробуйте использовать ContraintLayout и использовать ограничение Барьер или Ограничение Guidline для достижения желаемого макета Я исправил с использованием контрольного ограничения 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="16dp">


    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:maxLines="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintHorizontal_bias="0.095"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.005"
        tools:text="Birthday" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_adb_black_24dp"
        app:layout_constraintBottom_toBottomOf="@+id/textViewAll"
        app:layout_constraintEnd_toStartOf="@+id/textViewAll"
        app:layout_constraintHorizontal_bias="0.13"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" />

    <TextView
        android:id="@+id/textViewAll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="View all (35)"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_editor_absoluteX="333dp" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.62" />

</androidx.constraintlayout.widget.ConstraintLayout>
1 голос
/ 24 января 2020

Я думаю, что вы можете использовать Linearlayout для достижения чего-то подобного, что я использую для написания этого кода, и я думаю, что это может помочь вам достичь этого дизайна макета 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical">



    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginStart="10dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Birthdayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy"
            android:layout_weight="1"
            android:textSize="20sp" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:src="#111"
            android:layout_marginStart="10dp" />
    </LinearLayout>

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View All(35)"
        android:textSize="20sp"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        android:layout_weight="1"/>
</LinearLayout>

После этого вы получите что-то подобное

Нажмите здесь, чтобы посмотреть изображение

1 голос
/ 24 января 2020

Попробуйте это (Пожалуйста, добавьте некоторые из ваших свойств измерений, которые я удаляю, потому что у меня их не было): 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:paddingTop="10dp"
    android:weightSum="3">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="3">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_marginStart="16dp"
            android:maxLines="1"
            android:textSize="20dp"
            tools:text="Birthdayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="16dp"
            android:layout_toRightOf="@id/textView"
            android:src="@drawable/wishlist_public"
            />
    </LinearLayout>

    <TextView
        android:id="@+id/textViewAll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_gravity="right"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:layout_weight="2"
        android:text="View all (35)"
        android:textSize="20dp" />

</LinearLayout>
...