UIButton dengan dua baris teks di judul (numberOfLines = 2)

87

Saya mencoba membuat UIButtonyang memiliki dua baris teks di titleLabel-nya. Ini adalah kode yang saya gunakan:

    UIButton *titleButton = [[UIButton alloc] initWithFrame:CGRectMake(15, 10, frame.size.width-100, 100)];
    titleButton.titleLabel.font = [UIFont boldSystemFontOfSize:24.0];
    [titleButton setTitle:@"This text is very long and should get truncated at the end of the second line" forState:UIControlStateNormal];
    titleButton.titleLabel.lineBreakMode = UILineBreakModeTailTruncation;
    titleButton.titleLabel.numberOfLines = 2;
    [self addSubview:titleButton];

Saat saya coba ini, teksnya hanya muncul di satu baris. Tampaknya satu-satunya cara untuk mencapai lebih dari satu baris teks UIButton.titleLabeladalah dengan mengatur numberOfLines=0dan menggunakan UILineBreakModeWordWrap. Tapi ini tidak menjamin teks menjadi dua baris.

UILabelNamun, menggunakan polos tidak berhasil:

    UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(15, 10, frame.size.width-100, 100)];
    titleLabel.font = [UIFont boldSystemFontOfSize:24.0];
    titleLabel.text = @"This text is very long and should get truncated at the end of the second line";
    titleLabel.numberOfLines = 2;
    titleLabel.lineBreakMode = UILineBreakModeTailTruncation;
    [self addSubview:titleLabel];

Adakah yang tahu bagaimana membuat UIButtonkarya dengan dua baris? Apakah satu-satunya solusi untuk membuat terpisah UILabeluntuk menampung teks, dan menambahkannya sebagai subview dari tombol?

objective-c ios uibutton uilabel pemasar
sumber
1
Pernahkah kamu melihat ini ? - stackoverflow.com/questions/604632/…
Viraj
Viraj, ya, jika Anda mengatur numberOfLines=0dan menggunakan UILineBreakModeWordWrap, Anda bisa mendapatkan banyak baris. Masalahnya adalah itu bisa memberi lebih dari dua baris jika teksnya terlalu panjang. Saya ingin tepat dua lones dengan elips di akhir baris kedua (jika teksnya terlalu panjang).
pemasar
Oh, kalau begitu saya kira menambahkan subview mungkin satu-satunya cara untuk pergi.
Viraj

Jawaban:

87

Jawaban yang diperbarui untuk versi iOS yang lebih baru

Karena ini adalah jawaban yang diterima, tambahkan jawaban @ Sean di sini:

Setel properti ini pada label judul tombol Anda.

button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
button.titleLabel.numberOfLines = 2; // if you want unlimited number of lines put 0

Swift 3 dan 4:

button.titleLabel?.lineBreakMode = .byWordWrapping
button.titleLabel?.numberOfLines = 2 // if you want unlimited number of lines put 0

Jawaban asli untuk versi iOS yang lebih lama

Jika Anda ingin 2 baris teks di atas Anda, UIButtonAnda harus menambahkan a UIlabeldi atasnya yang melakukan hal itu.

UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(15, 10, frame.size.width-100, 100)];
titleLabel.font = [UIFont boldSystemFontOfSize:24.0];
titleLabel.text = @"This text is very long and should get truncated at the end of the second line";
titleLabel.numberOfLines = 2;
titleLabel.lineBreakMode = UILineBreakModeTailTruncation;
[myButton addSubview:titleLabel]; //add label to button instead.

Diperbarui untuk solusi pembuat antarmuka

Ditambahkan jawaban @Borut Tomazin untuk jawaban yang lebih lengkap. Memperbarui bagian ini lagi sejak jawaban @Borut Tomazin ditingkatkan.

Anda dapat melakukan ini dengan lebih mudah, tanpa perlu kode. Dalam Interface Builder, atur Line BreakUIButton ke Word Wrap. Daripada Anda dapat memasukkan beberapa baris judul. Tekan saja Option + Returntombol untuk membuat baris baru. Anda juga perlu menambahkan ini ke Atribut Waktu Proses yang Ditentukan Pengguna di Pembuat Antarmuka:

titleLabel.textAlignment Number [1]
Totumus Maximus
sumber
5
UILineBreakModetidak digunakan lagi, gunakan NSLineBreakModesebagai gantinya
guillaume
2
Ini tidak diperlukan pada versi iOS terbaru. Lihat jawaban @ sean.
cbowns
146

Anda tidak perlu menambahkan UILabel ke UIButton. Itu hanya objek dan pekerjaan ekstra.

Setel properti ini pada label judul tombol Anda.

button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
button.titleLabel.numberOfLines = 2;//if you want unlimited number of lines put 0

Cepat:

button.titleLabel!.lineBreakMode = NSLineBreakMode.ByWordWrapping
button.titleLabel!.numberOfLines = 2//if you want unlimited number of lines put 0
Sean
sumber
6
Ini adalah 2013 dan sampai hari ini adalah solusi mutakhir.
Klaas
@Blip sayangnya Anda tidak bisa dan perlu melakukannya dalam kode. Mungkin layak mengajukan laporan bug dengan Apple meminta fungsionalitas ini.
bpapa
@bpapa Ya saya setuju, storyboard harus lebih fleksibel.
Blip
6
Ini berfungsi untuk saya, namun ini merusak perilaku default tombol intrinsicContentSize, yang masih mengembalikan ketinggian yang hanya sesuai dengan satu baris teks. Saya memperbaikinya dengan mengganti tombol intrinsicContentSizetempat saya mengatur ketinggian [self.titleLabel sizeThatFits(CGSizeMake(self.titleLabel.frame.size.width, CGFLOAT_MAX)].height.
Elise
@WillVonUllrich karena Anda hanya dapat mengubah jawaban yang diterima jika diedit. Saya menambahkan jawaban ini ke jawaban yang diterima sehingga akan membantu orang-orang yang tidak melihat lebih jauh dari jawaban yang diterima.
Totumus Maximus
88

Anda dapat melakukan ini dengan lebih mudah, tanpa perlu kode. Dalam Interface Builder, atur Line BreakUIButton ke Word Wrap. Daripada Anda dapat memasukkan beberapa baris judul. Tekan saja Option + Returntombol untuk membuat baris baru. Anda juga perlu menambahkan ini ke Atribut Waktu Proses yang Ditentukan Pengguna di Pembuat Antarmuka:

titleLabel.textAlignment Number [1]

Sesederhana itu. Semoga membantu ...

Borut Tomazin
sumber
1
Solusi ini lebih baik (lebih sedikit objek, kode) daripada yang diterima saat ini, untuk kasus sederhana.
Jonathan Zhan
1
Anda menyetel properti yang sama persis seperti yang Anda lakukan secara terprogram sehingga argumen Anda "lebih sedikit objek" tidak valid. Kode mungkin kurang. Tapi itu lebih mudah dibaca. Silakan pilih;)
Totumus Maximus
Oh, saya pikir saya tidak jelas. Terima kasih telah mencoba menjelaskan. Tidak terlalu peduli dengan fakta bahwa itu dilakukan di IB vs Code. Lebih berkaitan dengan fakta bahwa Anda tidak perlu menambahkan label tambahan dengan solusi Borut, dan itu juga menyelesaikan hal yang sama. Tapi ya, keduanya bekerja dengan baik. :)
Jonathan Zhan
benar-benar luar biasa untuk melihat kode di belakang untuk tugas dasar seperti itu.
Can Poyrazoğlu
3
Anda dapat mencapai tujuan yang sama 100% tanpa kode dengan menambahkan titleLabel.textAlignment Atribut Waktu Proses yang Ditentukan Pengguna di Interface Builder dan menyetelnya ke Number = 1 (nilai NSTextAlignmentCenter).
0xced
21 
 button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;

button.titleLabel.textAlignment = NSTextAlignmentCenter;

[button setTitle: @"Line1\nLine2" forState: UIControlStateNormal];
Suraj K Thomas
sumber
Yang sempurna! Anda tidak perlu membelah bagian NSStringdalamnya setTitle. `` WordWrapping '' melakukan ini untuk Anda!
Alex Cio
Bagi saya, saya harus membagi string di dalam set judul. Tanpa itu itu tidak berhasil
user1960169
9

Untuk menghindari sepenuhnya kebutuhan untuk mengedit kode, dan dengan demikian kebutuhan untuk subclass tampilan Anda, di Xcode5 dan yang lebih baru, Anda dapat mengikuti saran Borut Tomazin:

Di Interface Builder (atau storyboard), atur Line Break ke Word Wrap. Daripada Anda dapat memasukkan beberapa baris judul. Cukup tekan tombol Option+ Returnuntuk membuat baris baru.

lalu, di Atribut Waktu Proses yang Ditentukan Pengguna Anda dapat menambahkan

Jalur kunci: titleLabel.textAlignment
Jenis: Number
Nilai:1

Catatan: ini mungkin tidak sepenuhnya "bukti masa depan" karena kami sedang menerjemahkan UITextAlignmentCenterkonstanta ke dalam nilai numeriknya (dan konstanta tersebut dapat berubah saat versi iOS baru dirilis), tetapi tampaknya aman dalam waktu dekat.

furins
sumber
1

Anda dapat mengubah nilai yang dibutuhkan langsung dari Storyboard. Pilih tombol, buka inspektur identitas dan tambahkan pasangan nilai kunci berikut di bagian "Atribut waktu proses yang ditentukan pengguna":

masukkan deskripsi gambar di sini

Arik Segal
sumber