September 10, 2011

กำหนดขนาดให้ UILabel มีขนาดพอดีกับข้อความ

Developer หลายคนมักเคยเจอปัญหาในเรื่องของการกำหนดข้อความยาวๆ ให้กับ UILabel แล้วก็ไม่รู้ว่าจะต้องกำหนดขนาดให้ UILabel เป็นเท่าไหร่ดี? เนื่องจาก UILabel นั้นมันไม่ยอมขยายขนาดให้ฟิตพอดีกับปริมาณของข้อความ หรือ text ที่เราจะเอามากำหนดค่าให้มัน

จริงๆ แล้วที่เห็นปัญหาได้ชัดเจนกว่า UILabel ก็คือการกำหนดขนาดให้กับ Cell ในตารางของ UITableView ที่เรามักจะน้ำข้อมูลมาใส่ในตาราง และแต่ละ cell ของตารางก็บังเอิญมีขนาดเท่าๆ กันหมดด้วยสิ ทำให้การหาขนาดความสูงของ cell ให้มีขนาดเหมาะสมกับ content ที่จะวางลงไปในตารางจึงเป็นเรืองที่หลีกเลี่ยงแทบไม่ได้เลย

ดังนั้นเราจำเป็นต้องกำหนดขนาดให้กับ UILabel ให้พอดีกับปริมาณข้อความเอง ซึ่งวิธีหาขนาดที่เหมาะสมให้กับ UILabel สามารถหาได้ดังนี้


CGSize size = [label.text sizeWithFont: label.font 
                         constrainedToSize: CGSizeMake(300, 5000
                             lineBreakMode: UILineBreakModeWordWrap];


ถ้าโค๊ดเต็มๆ สำหรับนำไปใช้งานก็จะมีหน้าตาประมาณนี้


UILabel *label = [[UILabel alloc] init];
    label.text = @"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).";
    

    label.numberOfLines = 0;
    label.backgroundColor = [UIColor whiteColor];
    label.font = [UIFont fontWithName:@"Helvetica"size:14];
    
    CGSize size = [label.text sizeWithFont: label.font 
                         constrainedToSize: CGSizeMake(300, 5000
                             lineBreakMode: UILineBreakModeWordWrap];
    
    label.frame = CGRectMake(10, 10, 300, size.height);
    
    [self.view addSubview:label];
    [label release];


เท่านี้เราก็จะได้ UILabel ที่มีขนาดเปลี่ยนไปตามปริมาณของข้อความแล้ว

ปล. text ตัวอย่างเอามาจากเว็บนี้