Turkcell | Geleceği Yazanlar

Soru & Cevap

iOS Chat Bubble

27.06.2014 - 17:28

Merhaba,

Aşağıdaki resim yapısında Chat uygulamasında kullanmak üzere text veya image'ın boyutuna göre esnek olarak değişiklik gösterebilen Chat Bubble' a ihtiyacım var, GitHub' da bazı projelerde open source olarak kodları gördüm fakat olaya tamamen hakim olabilmek adına basitten giderek kendim geliştirmek istiyorum, bu konuda yardımcı olabilirseniz sevirinim.

İyi çalışmalar.

3921 Görüntülenme

2 Cevap

Alper
07.07.2014 - 17:30

Merhabalar

Burada tahmin ettigim uzere tableview kullaniliyor ve her bir bubble bir cell'i temsil ediyor. Girilen yada gelen her text'e gore cell'in boyutu ayarlaniyor. Oncelikle eger .xib ile yaziyorsan projeni, olusturdugun cell'de autolayout'i kapat ve sag taraftan "show the size inspecter" alanindan sola asagi ve yukari dayali hale getir koydugun bubble imajini. Bu sekilde cell'in buyudugu zaman kendiliginden bubble'inin boyu artacaktir. Ama buyulup kuculmelerde bubble imajinin sagi solu oynayacagindan imajda bozulmalar olacaktir. Bunun icin ise; yine imaja tikla ve sag tarafta "show the attributes inspecter" alaninda en asagida strecthing alani var orada su degerleri ver X: 0,5 Y:0,5 width: 0,45 height: 0,45 bu degerlerde tam emin degilim. Deneyerekte yapabilirsin. Bu degerler senin imajinin tam ortadan saga sola yukari ve asagi uzayip kisalmasini saglar. 

Bunlari yaptiktan sonra tableview delegate'i olan cellForRowIndexPath methodunun icerisinde label'inin ve imajinin boyutunu ayarlamak. Asagi yukari ayarlamasini .xib'ten yaptik. Ama sag yada sola dogru uzamasini kod ile yapmamiz lazim.

CGSize size =[@"yazilacak string" sizeWithFont:[UIFont fontWithName:@"Helvetica" size:18] constrainedToSize:CGSizeMake(280, 400) lineBreakMode:NSLineBreakByWordWrapping];

UIImageView *bubbleImageView = (UIImageView *)[cell viewWithTag:1];

CGRect imgFrame = bubbleImageView.frame;

imgFrame.size.width = size.width + 15;

headerBackgroundImageView.frame = imgFrame;

Yukardaki kod imajin sag tarafa dogru max 280 pixel uzamasini sagliyor.

Ayni seyi label icinde yapmak gerekiyor. Ama .xib'te label'in lines'ina 0 vermelisin.

UILabel *label = (UILabel *)[cell viewWithTag:2];

label.text = @"yazilacak string";

CGRect frm = label.frame;

 frm.size.width = size.width;

 label.frame = frm;

Bunlari yaptiktan sonra cell'in height'ini belli bir orana gore buyutmelisin.

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

    float height = 0;

    CGSize size =[@"yazilacak string" sizeWithFont:[UIFont fontWithName:@"Helvetica" size:18] constrainedToSize:CGSizeMake(280, 400) lineBreakMode:NSLineBreakByWordWrapping];

    height = size.height + 30.0f ;

    return height;

}

Cevap biraz gec oldu ama umarim yardimci olabilmisimdir.

Iyi Calismalar Dilerim.

 

 

 

Sitede yorum yapabilmek için giriş yapın ya da üye olun.

Coşkun
27.06.2014 - 17:37

Merhaba Anıl,

Hazır classlar varken kendin yapman bence zaman kaybı.Aşağıda bir iki örnek var projene dahil et ve ilgili yerleri kendine göre düzenle. 

İyi çalışmalar.

 

https://github.com/tkirby/BubbleThingie

http://code4app.net/ios/Bubble-TableView/502c5c446803faea5f000001

Sitede yorum yapabilmek için giriş yapın ya da üye olun.

Anıl SÖZERİ
28.06.2014 - 00:58
Teşekkür ederim, bunlara baktım biraz fazla kompleks bir yapı gibi geldi o nedenle daha basit bir örnek bulmaya çalıştım ama basit birşey bulamayacağım sanırım 2.projeyi incelemeye başladım.

Sitedeki sorulara cevap verebilmek için giriş yapın ya da üye olun.