Tampilan Wrap_content di dalam ConstraintLayout membentang di luar layar


132

Saya mencoba menerapkan gelembung obrolan sederhana menggunakan a ConstraintLayout. Inilah yang saya coba capai:

masukkan deskripsi gambar di sini masukkan deskripsi gambar di sini

Namun, wrap_content sepertinya tidak berfungsi dengan baik dengan kendala. Itu menghormati margin, tetapi tidak menghitung ruang yang tersedia dengan benar. Inilah tata letak saya:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="wrap_content">

    <TextView
        android:id="@+id/chat_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_bias="0"
        tools:background="@drawable/chat_message_bubble"
        tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales accumsan tortor at bibendum."
        android:layout_marginStart="64dp"
        android:layout_marginLeft="64dp"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp" />
</android.support.constraint.ConstraintLayout>

Ini membuat sebagai berikut:

masukkan deskripsi gambar di sini

Saya menggunakan com.android.support.constraint:constraint-layout:1.0.0-beta4.

Apakah saya melakukan sesuatu yang salah? Apakah itu bug atau hanya perilaku yang tidak intuitif? Dapatkah saya mencapai perilaku yang tepat menggunakan a ConstraintLayout(Saya tahu saya bisa menggunakan tata letak lain, saya bertanya ConstrainLayoutsecara spesifik).


dapatkah Anda memposting tampilan teks beserta tata letak kendala induknya? seperti yang Anda ketahui, atribut tata letak orang tua memiliki dampak besar pada anak
Mohammed Atif

Ngomong-ngomong, dalam kasus Anda kurasa bias horisontal adalah biang keladinya. coba hapus tata letak kanan ke kanan dan bias
Mohammed Atif

1
Diperlukan bias horizontal, jika tidak, gelembungnya berada di tengah. Tanpa tata letak kanan ke kanan, margin kanan tidak akan diperhitungkan, yang bukan itu yang kita inginkan. Saya mencoba untuk menghapusnya, seperti yang Anda sarankan, tetapi tidak membantu.
Marcin Jedynak

1
Masalahnya adalah bias horisontal 0 pasti. Saya akan memeriksa solusi yang mungkin dan mempostingnya secepatnya karena saya juga bekerja dengan sesuatu yang serupa pada tata letak kendala.
Mohammed Atif

1
Balasan obrolan @nmu berasal tools:background="@drawable/chat_message_bubble". Untuk menerapkannya, Anda harus membuat file chat_message_bubble.xml di folder drawable kemudian tambahkan kode ini: <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#FB4382"/> <corners android:radius="10dip"/> </shape>
Eugene Brusov

Jawaban:


242

Kedaluwarsa: Lihat jawaban yang lebih baik

Tidak, Anda tidak dapat melakukan apa yang Anda inginkan dengan ConstraintLayout seperti sekarang (1.0 beta 4):

  • wrap_content hanya meminta widget untuk mengukur sendiri, tetapi tidak akan membatasi ekspansi terhadap kendala yang akhirnya
  • match_constraints(0dp) akan membatasi ukuran widget terhadap batasan ... tetapi akan mencocokkannya meskipun ukurannya wrap_contentlebih kecil (contoh pertama Anda), yang juga bukan yang Anda inginkan.

Jadi sekarang, Anda kurang beruntung untuk kasus tertentu: - /

Sekarang ... kami sedang berpikir tentang menambahkan kemampuan ekstra match_constraintsuntuk menangani skenario yang tepat ini (berlaku sebagaiwrap_content -olah ukurannya lebih dari kendala).

Saya tidak bisa menjanjikan bahwa fitur baru ini akan membuatnya sebelum rilis 1.0 sekalipun.

Sunting : kami menambahkan kemampuan ini di 1.0 dengan atribut app:layout_constraintWidth_default="wrap"(dengan lebar diatur ke 0dp). Jika disetel, widget akan memiliki ukuran yang sama seperti jika menggunakan wrap_content, tetapi akan dibatasi oleh batasan (artinya tidak akan meluas di luarnya)

Perbarui Sekarang tag-tag tersebut sudah tidak digunakan lagi, sebagai gantinya gunakan layout_width = "WRAP_CONTENT" dan layout_constrainedWidth = "true".


1
Itu masalah super bagi saya. Saya tidak bisa menggunakan TextView dengan drawable majemuk sekarang karena jika saya set ke match_constraintsdrawable gabungan akan berada di sebelah kanan, bahkan jika ada teks yang sangat pendek.
Paul Woitaschek

2
@NicolasRoard: bisakah Anda tolong bantu saya dengan tata letak kendala, saya punya gambar di bagian atas dengan pedoman 0,4 dan konten di bawah, tetapi ketika saya mengatur tata letak kendala untuk wrap_content hanya mengambil 0,4 layar (dan setengah dari tampilan teks di bawah ini tidak terlihat), saya app:layout_constraintWidth_default="wrap"juga menggunakan , dan v1.0.2 dari perpustakaan tetapi tidak membantu
Rat-a-tat-a-tat Ratatouille

3
app: layout_constraintWidth_default = "wrap" dengan lebar seperti 0dp melakukannya dengan baik!
Tunji_D

11
ini harus EXPLICIT dalam dokumentasi / instruksi.
SQLiteNoob

6
Haruskah langkah Edit memiliki keunggulan yang lebih besar? Agak tersesat di bawah aslinya. Hargai jawabannya. Terima kasih @NicolasRoard.
Tom Howard

276

Diperbarui (ConstraintLayout 1.1. +)

Gunakan app:layout_constrainedWidth="true"denganandroid:layout_width="wrap_content"

Sebelumnya (usang):

app:layout_constraintWidth_default="wrap" dengan android:layout_width="0dp"


5
Benar, sejak ConstraintLayout 1.1.0 beta 2, saya percaya. androidstudio.googleblog.com/2017/10/…
Fifer Sheep

2
Ini sekarang dalam rilis 1.1: medium.com/google-developers/…
Esdras Lopez

cinta stackoverflow! terima kasih ini membantu saya! simpan konten bungkusnya, tetapi jangan pernah melampaui batasan! #TIL
Dennis Anderson

Apa jawaban, tidak tahu ini ada! Terima kasih sobat, setelah 2 jam bermain dengan alternatif ini berhasil!
dev2505

23

Yap, seperti disebutkan dalam jawaban yang diberikan oleh Nikolas Roard, Anda harus menambahkan app:layout_constraintWidth_default="wrap"dan mengatur lebar ke 0dp. Dan untuk meluruskan gelembung Anda, Anda harus mengatur 1,0 untuk layout_constraintHorizontal_bias.

Berikut kode sumber terakhir:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/chat_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginStart="64dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintWidth_default="wrap"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@drawable/chat_message_bubble"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales accumsan tortor at bibendum." />

</android.support.constraint.ConstraintLayout>

Hasilnya terlihat seperti:

masukkan deskripsi gambar di sini


Saya pikir itu karena OP ingin gelembung kecil di kiri dan milikmu benar, yang mengubah persyaratan
Waza_Be

2
bagian penting di sini adalahapp:layout_constraintHorizontal_bias="1.0"
Lester

9

Seperti jawaban lain yang sudah dikatakan, karena ConstraintLayout 1.0 dimungkinkan untuk mencapai itu, tetapi pada rilis terbaru (1.1.x) mereka telah mengubah cara Anda melakukannya.

Sejak rilis ConstraintLayout 1.1 yang lama app:layout_constraintWidth_default="wrap"dan app:layout_constraintHeight_default="wrap"atribut sekarang sudah usang .

Jika Anda ingin memberikan wrap_contentperilaku, tetapi tetap memberlakukan batasan pada Tampilan Anda, Anda harus mengatur lebar dan / atau tingginya untuk wrap_contentdigabungkan dengan app:layout_constrainedWidth=”true|false”dan / atau app:layout_constrainedHeight=”true|false”atribut, sebagaimana dinyatakan pada dokumen :

WRAP_CONTENT: menegakkan batasan (Ditambahkan dalam 1.1) Jika dimensi diatur ke WRAP_CONTENT, dalam versi sebelum 1.1 mereka akan diperlakukan sebagai dimensi literal - artinya, batasan tidak akan membatasi dimensi yang dihasilkan. Meskipun secara umum ini sudah cukup (dan lebih cepat), dalam beberapa situasi, Anda mungkin ingin menggunakan WRAP_CONTENT, namun tetap menerapkan batasan untuk membatasi dimensi yang dihasilkan. Dalam hal ini, Anda dapat menambahkan salah satu atribut yang sesuai:

app: layout_constrainedWidth = ”true | false” app: layout_constrainedHeight = ”true | false”

Adapun rilis terbaru, pada saat saya sudah menjawab ini, ConstraintLayout ada di versi 1.1.2 .


3

Penghentian aplikasi: layout_constraintWidth_default teks dan alternatifnya

@ nicolas-roard menjawab app:layout_constraintWidth_default="wrap"dan android:layout_width="0dp"sekarang DIHAPUSKAN .

Silakan dan gunakan app:layout_constrainedWidth="true"danandroid:layout_width="wrap_content" .

Alasan penghinaan, saya tidak tahu. Tetapi haknya dalam kode sumber ConstraintLayout


-7

Saya menggunakan yang ini

app:layout_constraintEnd_toEndOf="parent"

bagaimana ini menjawab pertanyaan OP? bagaimana ini membungkus konten?
Alex

-8

Anda harus mengganti

android:layout_width="wrap_content"

dengan

android:layout_width="match_parent"

dari TextView Anda dan kemudian sesuaikan bantalan dan margin sesuai. Saya telah memperbarui kode Anda,

<android.support.constraint.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="wrap_content">

<TextView
    android:id="@+id/chat_message"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="10dp"
    android:layout_marginLeft="60dp"
    android:layout_marginRight="10dp"
    android:layout_marginStart="60dp"
    android:layout_marginTop="8dp"
    android:padding="16dp"
    app:layout_constraintTop_toTopOf="parent"
    tools:background="#c9c7c7"
    tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales accumsan tortor at bibendum." />

Anda akan mendapatkan hasil ini masukkan deskripsi gambar di sini


Anda harus menghindari penggunaan "match_parent" untuk tampilan apa pun di ConstraintLayout. Lihatlah "Catatan" di sini
Eugene Brusov
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.