iOS Autolayout: dua tombol dengan lebar yang sama, berdampingan

92

Saat ini saya mengalami kesulitan dengan AutoLayout. Saya menggunakan pembuat antarmuka dan saya mencoba memposisikan dua tombol dengan lebar yang sama berdampingan seperti yang diilustrasikan pada gambar berikut.

tata letak objektif

Dari gambar Pratinjau berikut, titleImage saya telah dibatasi dengan benar dan ditampilkan dengan benar, namun tombolnya tidak. Saya telah bereksperimen dengan menyelaraskan tombol 1 dengan tepi depan titleImage, dan tombol2 dengan tepi belakang titleImage, namun distribusi lebar antara dua tombol menjadi miring pada titik ini, seperti yang ditunjukkan di bawah ini.

skenario masalah

Tujuan saya adalah untuk memahami batasan apa yang hilang dan harus diterapkan pada dua tombol untuk menjaga lebar yang sama terlepas dari perangkatnya. Jika memungkinkan saya ingin mencapai ini melalui pembuat antarmuka sebagai lawan dari kode tambahan.

ios iphone xcode autolayout Scratcha
sumber
1
Masonry adalah cara yang direkomendasikan untuk melakukan ini melalui programatis. Tautan: github.com/Masonry/Masonry
Itachi
1
ini tautannya ... Anda dapat memeriksa ... stackoverflow.com/questions/29620409/…
EI Captain v2.0

Jawaban:

246

Tambahkan batasan berikut

  1. Tetapkan lebar yang sama dari tombol1 ke tombol2.
  2. Tetapkan jarak horizontal antara kedua tombol.
  3. Tetapkan spasi di depan dari tombol1 ke tampilan supernya.
  4. Tetapkan spasi tambahan dari tombol2 ke tampilan supernya.
  5. Tetapkan ruang atas ke kedua tombol.
    Beri tahu saya jika ini berhasil untuk Anda.
Abubakr Dar
sumber
7
Luar biasa - ini berhasil untuk saya. Secara khusus poin # 2 - menambahkan spasi horizontal.
Scratcha
WoW !!! Apa maksudku kamu? Ini benar-benar berfungsi seperti pesona, dan saya telah terbuang sekitar 3 jam! :( Dalam kasus saya, saya memiliki dua Tampilan dengan lebar yang sama di Super View yang membaginya. Namun pada akhirnya saya ditanyai sesuatu seperti, "Perlu kendala untuk Y atau Tinggi" Saya memilih untuk melakukan "Tambahkan kendala yang hilang" dan diselesaikan.
Randika Vishman
@Abubakr: Ini berfungsi hanya untuk satu ukuran layar karena kedua tombol memiliki lebar yang sama.
AG
1
Berfungsi untuk lebih dari 2 elemen UI yang berdekatan juga!
siege_Perilous
1
Terima kasih, tetapi saya menemukan solusinya dan lebih baik dalam kode. Berikan salah satu dari mereka rata tengah ke induk dan berikan setengah konstan dari ukuran konten Anda dapat menghitungnya dalam kode atau jika konten statis Anda dapat memperbarui bingkai dan memperbarui konstan. bersama dengan itu juga tambahkan setengah dari jarak tengah di antara dua tombol ke tengah itu. Dan berikan saja di depan atau di belakang tombol lainnya. Perbaiki ini untuk saya. Dan jika konten Anda bersifat intrinsik dan perlu diperbarui, panggil saja metode pembaruan tata letak dan hitung nilai konstan lagi.
Amber K
80

Ikuti Langkah dan Tangkapan Layar untuk solusi mudah

Langkah 1)

  • Untuk Tombol 1: Atur Batasan: (1) Memimpin, (2) Atas atau Bawah sesuai kebutuhan Anda, (3) Tinggi

Langkah 2)

  • Untuk Tombol 2: Atur Batasan: (1) Trailing, (2) Atas atau Bawah sesuai kebutuhan Anda, (3) Tinggi

Langkah-3)

  • Tekan Ctrl + Seret Dari Tombol 1 ke Tombol 2

  • Pilih Horizontal Spacing

Langkah-4)

  • Pilih Kedua Tombol (menggunakan Command) dan Tambahkan Constraints Equal Width

KELUARAN

Semoga Membantu Anda :)

Vvk
sumber
1
Tinggi tidak harus diperbaiki. Biarkan tampilan menentukan ketinggian tombol sesuai dengan ukuran layar.
Kunal Kumar
@KunalKumum kasus ini Ketinggian adalah Tetap. bisakah Anda memberi tahu saya apa yang Anda inginkan?
Vvk
@Vv ... sempurna bro :)
Jaywant Khedkar
18

Tata letak tumpukan di iOS9, akan melakukan pekerjaan dengan sangat baik. Tambahkan tampilan tumpukan ke tampilan Anda dan konfigurasikan sebagai berikut:

masukkan deskripsi gambar di sini

Ben
sumber
2

Anda dapat memeriksa contoh saya - Anda dapat dengan mudah mengarahkan ini, dengan menggunakan batasan proporsional. Anda juga dapat dengan mudah mengarahkan beberapa UIViews proporsional. Silakan lihat contoh terlampir

https://dl.dropboxusercontent.com/u/48223929/TestViewController.xib

Vitaliy Gozhenko
sumber
0

Solusi saya adalah

  1. Letakkan tampilan kecil di tengah dua tombol dan buat itu di tengah (Tengah horizontal di wadah dan tengah vertikal di kontener sebagai 0).
  2. Tambahkan tinggi dan lebar ke tampilan kecil.
  3. Tambahkan batasan tombol dan berikan batasan ruang horizontal pada tampilan kecil.
  4. Beri warna background view kecil sama seperti tombol atau warna View.

Catatan: Lihat Screenshot.

masukkan deskripsi gambar di sini

AG
sumber