Cannot change the size of UITextView - uitableview

I added some tableViewCells to a tableView via Interface Builder, one of them is containing a UITextView.
The tableView is reloaded as an Button gets clicked:
- (void)updateViewWithMessage:(NSString *)message
{
self.someMessage = message;
[self.tableView reloadData];
}
In my cellForRowAtIndexPath method I check for this cell and do the following:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
CellIdentifier = kMyCustomCell;
MyCustomCell *contentCell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
CGRect textViewFrame = contentCell.contentTextView.frame;
textViewFrame.size.height = [self heightForContentView];
NSLog(#"%f, %f, %f, %f\n", textViewFrame.origin.x,
textViewFrame.origin.y,
textViewFrame.size.width,
textViewFrame.size.height);
contentCell.contentTextView.frame = textViewFrame;
contentCell.contentTextView.text = self.someMessage;
return contentCell;
}
In heightForContentView() I calculate the height:
- (CGFloat)heightForContentView
{
CGSize boundingRectSize = CGSizeMake(kCustomCellWidth - 20, CGFLOAT_MAX);
CGRect textViewRect = [self.someMessage boundingRectWithSize:boundingRectSize
options:NSStringDrawingUsesLineFragmentOrigin
attributes:nil
context:nil];
return textViewRect.size.height + 20;
}
The cell, if I set the row Height to something, resizes properly. But the textView in it does not.
If I click my button twice (the updateViewWithMessage: method gets called again) and then it resizes - that's weird!
By the way: NSLog prints the correct sizes, so they are definitely set, but why does this TextView not resize then?
Can someone help me to solve this problem quickly please?

EDIT after comments :
I think you don't resize your UITextView, add this code before to resize contentCell:
contentTextView.frame = CGRectMake(CGRectGetMinX(contentTextView.frame), CGRectGetMinY(contentTextView.frame), CGRectGetWidth(contentTextView.frame), textViewFrame.size.height);
Old Answer :
Maybe you forgot to pass attributes to calculate the new size :
CGRect textViewRect = [self.someMessage boundingRectWithSize:boundingRectSize
options:(NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading)
attributes:#{NSFontAttributeName:FONT}
context:nil];
With FONT is your current font.
Have a look here.

Related

iOS Objective-C dynamic cell height iOS 7 issue

I am creating an application with iOS 7 devices. This application contains UITableView with dynamic cell height.
To create this I have a custom cell which contains methods:
- (CGFloat)heightWithModel:(Model *)model
{
CGFloat height = 0.0f;
height = self.contentLabel.frame.origin.y + [self contentHeightWithModel:model] + CellBottomOffset;
return height;
}
and...
- (CGFloat)contentHeightWithModel:(Model *)model
{
CGFloat height = 0.0;
NSDictionary *attributes = [NSDictionary dictionaryWithObject:[UIFont systemFontOfSize:14.0f] forKey:NSFontAttributeName];
NSString *string = model.content;
NSStringDrawingContext *context = nil;
NSStringDrawingOptions options = NSStringDrawingUsesLineFragmentOrigin;
CGSize size = CGSizeMake(self.contentLabel.bounds.size.width, CGFLOAT_MAX);
CGRect frame = [string boundingRectWithSize:size options:options attributes:attributes context:context];
height = frame.size.height;
return height;
}
In my view controller, I have implemented UITableViewDelegate protocol method:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
CGFloat height;
static Cell *cell;
if (!cell)
{
cell = [tableView dequeueReusableCellWithIdentifier:CellReuseIdentifier];
}
height = [cell heightWithModel:[self.dataSource.models objectAtIndex:indexPath.row]];
return height;
}
As far as I understand, this should be enough to create a table view with dynamic cell height. Despite this, I have a table view like this:
As you see, part of text are hidden, because label (red one) height is too small. Cell height is set dynamically by using Auto Layout (10 px from the bottom).
Can anyone see where is the problem?
First take a variable
CGFloat height;
put this lines in viewdidload method
in that set estimated height of cell and for that label set lines to 0 in inspector panel and change its height = to >= and give constraint from all side
[self.tbl_rating layoutIfNeeded];
[self.tbl_rating setNeedsLayout];
if (NSFoundationVersionNumber > NSFoundationVersionNumber_iOS_7_1 )
{
self.tbl_rating.estimatedRowHeight=153.0f;
self.tbl_rating.rowHeight=UITableViewAutomaticDimension;
}
Now put this two method for finding label height and dynamic cell height increment
In this method set your label text that you retriving from like array or web service
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
// 7.1>
if (NSFoundationVersionNumber <= NSFoundationVersionNumber_iOS_7_1 ) {
height=[self findHeightForText:[NSString stringWithFormat:#"%#",[[arr_review valueForKey:#"desc"]objectAtIndex:indexPath.row]] havingWidth:self.view.frame.size.width andFont:[UIFont systemFontOfSize:12.0f]].height;
return 153+height;
}
return UITableViewAutomaticDimension;
}
-(CGSize)findHeightForText:(NSString *)text havingWidth:(CGFloat)widthValue andFont:(UIFont *)font {
CGSize size = CGSizeZero;
if (text) {
CGRect frame = [text boundingRectWithSize:CGSizeMake(widthValue, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin attributes:#{ NSFontAttributeName:font } context:nil];
size = CGSizeMake(frame.size.width, ceil(frame.size.height));
}
return size;
}
NOTE: In tableview method heightForRowAtIndexPath I recommand you pass text from array value. If this thing doesnt work then check your constraints.
This thing works for me Hope it will work.
Thank you.

UITableViewCell misses loading some local images/text

I have a custom Table View Cell that loads a thumbnail, text and text's background image. I am developing a chat app and the Cell is in the Send/Receive Message screen. This cell basically shows the sent/received. Below are more details regarding the project and problem.
I have two background images. One is for sender and the other is for receiver and these images are automatically resized based on the size of the text.
When I am sending/receiving small messages (1 line), the messages are displayed correctly.
However, when I try to send/receive multiple line messages, sometime the background images are missing and sometimes the text is missing (for some images) and when I scroll, those images/text appears some times.
I am using [UIImage imagedNamed:] to load the background images each time.
In my point of view, the issue is due to Memory as around 6-8 cells are visible all the times. Kindly help me in resolving the issue.
EDIT
Adding some code
-(UITableViewCell *)tableView:(UITableView *)tblView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
MyCell *cell = [tblView dequeueReusableCellWithIdentifier:#"myCell"];
//Setting background image view of cell
[cell.bgImageView setImage:[[UIImage imageNamed:#"chat_box2.png"] stretchableImageWithLeftCapWidth:0 topCapHeight:40]];
String message = ........;
CGSize textSize = CGSizeMake(250, 1000);
CGSize size = [message sizeWithFont:[UIFont systemFontOfSize:12] constrainedToSize:textSize];
size.width += 9;
[cell.messageText setText:message];
[cell.messageText sizeToFit];
[cell.messageText setText:message];
//Setting frames of background Image View and message Text to our desired frame (**size** is calculated in the above lines)
[cell.bgImageView setFrame:CGRectMake(79,5, cell.bgImageView.frame.size.width, size.height+18)];
[cell.messageText setFrame:CGRectMake(98, 13, size.width, size.height)];
return cell;
}
Note: The size calculation is also done in -(CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath so that the cell is resized accordingly.
Yup, The issue is due to cell reusability. When you deque Tableviewcells the contents become mixup as the system tries to Re-use the old tableviewCells. What you should do is to set all the values for your cell in cellForRowAtIndexPath delegate as:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
//All Initialization code
.
.
.
//Set all the values of your Custom Table View Cell here
cell.image = yourImage;
cell.text = "your text";
cell.backGroundImage = yourBackGroundImage;
cell.TimeLabel.Text = "time value";
}
Hope this should help. Free feel to ask if you have further queries.
If the cell is being displayed and the image and text are not, then the problem is related to the frame of textView and frame of the imageView.
You can try to tick clip subviews at your views (especially imageViews) and check if that makes the trick.
Anyway I suggest you to use autolayout either then defining the frame of your views.
Finally, I am able to resolve the issue myself. Below is a detailed response highlighting the cause as well as the solution for the problem.
Cause of Problem
The items [bgImageView (UIImageView) and messageText(UILabel)] were IBOutlets defined inside the Custom Cell class and connected to Cell in the Storyboard.
Whenever, we try to change frame of such elements (defined inside storyboard), the cell is not updated which was the root cause of the problem.
Solution
In order to resolve the issue, I removed the elements from storyboard and defined them inside the -initWithCoder:. Please Note that this function is called for Cells of storyboard prototype cells (instead of -initWithStyle:reuseIdentifier).
initWithCoder: This method is to be defined inside the custom UITableViewCell Class (in my case, the name of the class is MyCell
-(id)initWithCoder:(NSCoder *)aDecoder
{
self = [super initWithCoder:aDecoder];
if(self)
{
//Settings sizes to zero as they will be changed in cellForRowAtIndexPath
_bgImageView = [[UIImageView alloc] initWithFrame:CGRectZero];
[self.contentView addSubview:_bgImageView];
_messageText = [[UILabel alloc] initWithFrame:CGRectZero];
_messageText.backgroundColor = [UIColor clearColor];
[_messageText sizeToFit];
[_messageText setFont:[UIFont systemFontOfSize:12]];
[_messageText setNumberOfLines:0];
[self.contentView addSubview:_messageText];
}
return self;
}
The heightForRowAtIndexPath* and *cellForRowAtIndexPath: are also given for reference.
heightForRowAtIndexPath:
-(CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSString *message = .......;
CGSize size = [self getSize:message]; //look below for getSize:
size.height += 18 + 15; //to cater for padding (top & bottom).
return height;
}
cellForRowAtIndexPath:
-(UITableViewCell *)tableView:(UITableView *)tblView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
MyCell *cell = [tblView dequeueReusableCellWithIdentifier:#"msgCell"];
NSString *message = ......;
CGSize size = [self getSize:message]; //look below for getSize:
cell.messageText.text = message;
[cell.messageText setFrame:CGRectMake(98, 13, size.width, size.height)];
[cell.bgImageView setFrame:CGRectMake(79,5, CELL_MESSAGE_WIDTH+32, size.height+18)]; //write #define CELL_MESSAGE_WIDTH 200 at the top of the file (below include statements)
[cell.bgImageView setImage:[[UIImage imageNamed:#"img.png"] stretchableImageWithLeftCapWidth:11 topCapHeight:23]];
return cell;
}
getMaxSize:
-(CGSize)getSize:(NSString*)str
{
CGSize maxSize = CGSizeMake(CELL_MESSAGE_WIDTH, 1000);
CGSize size = [str sizeWithFont:[UIFont systemFontOfSize:12] constrainedToSize:maxSize lineBreakMode:NSLineBreakByWordWrapping];
return size;
}
Try to set the image, text and all the content inside of MyCell not in -tableView: cellForRowAtIndexPath: delegate method.
I can see you mark yourself as solved. If it works that's great. However there are couple of thing you should definitely improve and change. There are my suggestions.
I don't think you have to do anything in initWithCoder:. You can leave to storyboard to handle. Here is the code how I think you should do:
MyCell.h
// define enum for type of cell
typedef NS_ENUM(NSInteger, MyCellType) {
MyCellTypeSender,
MyCellTypeReceiver
};
#interface MyCell : UITableViewCell
#property (nonatomic, assign) MyCellType cellType;
#property (nonatomic, strong) NSString *message;
- (void)fitToSize:(CGSize)size;
#end
MyCell.m
#implementation MyCell
// As you can see image is implemented inside the cell in setter of cellType
-(void)setCellType:(MyCellType)cellType {
if (_cellType != cellType) {
_cellType = cellType;
UIImage *bgImage = [UIImage imageNamed:(cellType == MyCellTypeReceiver) ? #"receiverImg" : #"senderImg"];
self.bgImageView.image = [bgImage stretchableImageWithLeftCapWidth:11 topCapHeight:23];
}
}
-(void)setMessage:(NSString *)message {
if (![message isEqualToString:_message]) {
_message = message;
self.messageLabel.text = _message;
}
}
-(void)fitToSize:(CGSize)size {
self.messageLabel.frame = CGRectMake(98, 13, size.width, size.height);
self.bgImageView.frame = CGRectMake(79,5, size.width+32, size.height+18);
}
#end
In your file where you implement delegate and data source method for table use following code:
-(CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSString *message = #"some message ....";
CGSize size = [self sizeForText:message];
return size.height;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
MyCell *cell = (MyCell *)[tableView dequeueReusableCellWithIdentifier:#"myCell"];
CGRect cellFrame = [tableView rectForRowAtIndexPath:indexPath]; // Do not calculate the size again. Just grab cell frame from current indexPath
[cell fitToSize:cellFrame.size]; // You set the content of the cell in MyCell by passing size of cell
cell.cellType = MyCellTypeRecever; // Or MyCellTypeSender whichever you decide
cell.message = #"some message ....";
return cell;
}
-(CGSize)sizeForText:(NSString*)str {
NSDictionary *attributes = #{NSFontAttributeName: [UIFont systemFontOfSize:18.f]};
CGSize maxSize = CGSizeMake(CELL_MESSAGE_WIDTH, 1000);
// This is the method you should use in order to calculate the container size
// Avoid using -sizeWithFont:constrainedToSize:lineBreakMode: as it is depracated in iOS7
CGRect rect = [str boundingRectWithSize:maxSize
options:NSStringDrawingUsesLineFragmentOrigin
attributes:attributes
context:NULL];
return rect.size;
}
Some lines are commented. As you can see most of the important code landed in MyCell subclass of UITableVieCell.
Also please note -sizeWithFont:constrainedToSize:lineBreakMode: is deprecated and use -boundingRectWithSize:options:attributes:context:

UILabel's inside UITableViewCell not resizing when orientation changes

I'm populating my UITableView with cells that contain two UILabel's: one of them being the title and the other one being the content. I'm calculating their sizes in heightForRowAtIndexPath: and everything seems cool until I change the orientation. When I change the orientation, the size of each label doesn't seem to change. For example if I'm changing from portrait to landscape, the expected behaviour is to see label's with smaller height (assuming it's a multi-line label). However, the labels' heights remain the same and I get an ugly, disoriented view. The code I've written for this is as follows:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
CGFloat tableWidth = [tableView bounds].size.width;
ListItem* glossaryItem;
if ([tableView isEqual:self.searchDisplayController.searchResultsTableView])
{
glossaryItem =(ListItem*)[self.searchResults objectAtIndex:indexPath.row];
}
else
{
glossaryItem =(ListItem*)[self.glossary objectAtIndex:indexPath.row];
}
NSString* name = [NSString stringWithFormat:#"<p><b>%#</b> :</p>", glossaryItem.name];
NSString* content = glossaryItem.details[0];
NSAttributedString* nameWithStyle = [HTMLParser parseText:name withFontSize:16 withFontType:#"Light"];
NSAttributedString* contentWithStyle = [HTMLParser parseText:content withFontSize:16 withFontType:#"Light"];
CGRect nameRect = [nameWithStyle boundingRectWithSize:CGSizeMake(screenWidth - 40, CGFLOAT_MAX) options:(NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading) context:NULL];
CGRect contentRect = [contentWithStyle boundingRectWithSize:CGSizeMake(screenWidth - 40, CGFLOAT_MAX) options:(NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading) context:NULL];
return nameRect.size.height + contentRect.size.height + 33;
}
HTMLParser is a class I wrote to parse text's in HTML format into attributed strings. I'm guessing the problem here is the label's sizes are not recalculated after orientation change. If I add the following code, everything looks fine but this takes too much time for tables with a lot of cells.
- (void) didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation{
[self.tableView reloadData];
}
How can I work around this? I can provide the constraints of my labels if needed.
Setup autoLayout constraints
or, continue to call the reloadData the way you are doing on didRotate...
but size the labels in cellForRow... like below
Set the height for row only in heightForRowAtIndexPath
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
//Some identifier and recycling stuff
if (UIInterfaceOrientationIsPortrait(self.interfaceOrientation)) {
//Make labels smaller
}
else {
//Make them longer
}
// save the calculated height for the label
//and size your tableviewrow height accordingly in heightForRowAtIndexPath
}

Resize text view and table view cell dynamically in static table view

I have a static table view that I am using as a sot of data entry for my app. One of those cells has a UITextView in it, which needs to grow and shrink dynamically as the user types, as well as the cell growing/shrinking logically with it. I read a bunch of posts on this but I think I am getting thrown because I am using a STATIC table view.
Here is my resizing attempt (its pretty much a total fail):
- (void)textViewDidChange:(UITextView *)textView
{
self.numberOfLines = (textView.contentSize.height / textView.font.lineHeight) - 1;
float height = 44.0;
height += (textView.font.lineHeight * (self.numberOfLines - 1));
CGRect textViewFrame = [textView frame];
textViewFrame.size.height = height - 10.0; //The 10 value is to retrieve the same height padding I inputed earlier when I initialized the UITextView
[textView setFrame:textViewFrame];
[self.tableView beginUpdates];
[self.tableView endUpdates];
[self.messageTextView setContentInset:UIEdgeInsetsZero];
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
float height = 44.0;
if (self.messageTextView) {
height += (self.messageTextView.font.lineHeight * (self.numberOfLines - 1));
}
return height;
}
I'll take any tips! Thanks.
You don't have to do anything just go through this code:-
There is a new function to replace sizeWithFont, which is boundingRectWithSize.
Add the following function to my project, which makes use of the new function on iOS7 and the old one on iOS lower than 7. It has basically the same syntax as sizeWithFont:
-(CGSize)text:(NSString*)text sizeWithFont:(UIFont*)font constrainedToSize:(CGSize)size{
if(IOS_NEWER_OR_EQUAL_TO_7){
NSDictionary *attributesDictionary = [NSDictionary dictionaryWithObjectsAndKeys:
font, NSFontAttributeName,
nil];
CGRect frame = [text boundingRectWithSize:size
options:(NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading)
attributes:attributesDictionary
context:nil];
return frame.size;
}else{
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wdeprecated-declarations"
return [text sizeWithFont:font constrainedToSize:size];
#pragma clang diagnostic pop
}
}
You can add that IOS_NEWER_OR_EQUAL_TO_7 on your prefix.pch file in your project as:
#define IOS_NEWER_OR_EQUAL_TO_7 ( [ [ [ UIDevice currentDevice ] systemVersion ] floatValue ] >= 7.0 )
I have referred from this link:-
UITableViewCell with UITextView height in iOS 7?
Please check my answer.
Calculate UITableViewCell height to fit string
Here label is used to calculate the height of cell.
When you done with editing of Text in textfield - (void)textViewDidEndEditing:(UITextView *)textView call the tableview reloadData function to update the cell as per text entered in textview
Your will need to manually calculate new size of you textView, and manually call update for your tableView.
static CGFloat cellHeight = 85;//from story board height to
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [super tableView:tableView cellForRowAtIndexPath:indexPath];
if (indexPath.row == 0) {
return cellHeight + [self appendTextViewNewHeight];
}
return cell.bounds.size.height;
}
-(CGFloat) appendTextViewNewHeight {
return _appendHeightForTextView;
}
static CGFloat textViewHeightStartHeight = 33;//from storiboard height
- (void)textViewDidChange:(UITextView *)textView;
{
CGFloat fixedWidth = textView.frame.size.width;
CGSize newSize = [textView sizeThatFits:CGSizeMake(fixedWidth, MAXFLOAT)];
CGRect newFrame = textView.frame;
newFrame.size = CGSizeMake(fmaxf(newSize.width, fixedWidth), newSize.height);
if (newFrame.size.height >= textViewHeightStartHeight) {
CGFloat newAppend = newFrame.size.height - textViewHeightStartHeight;
if (newAppend != self.appendHeightForTextView) {
self.appendHeightForTextView = newAppend;
[self.tableView beginUpdates];
[self.tableView endUpdates];
}
}
}
Also you need to set delegates on storyboards on in the code.
in viedDidLoad you need to do next things:
self.appendHeightForTextView = 0;
And finally set constraints in storyboard for your cell. Do not set bottom constraint of your textView. Only set right, left, and top.

How to set height of label which is inside of UITableViewcell?

When I try to set height of label in cell which is set in Storyboard then it works, but when I try to set height of label which has it own .xib file then it's not working.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = #"MainArticleCell";
MainArticleCell *cell = (MainArticleCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
cell.mainArticleTitleLabel.frame = CGRectMake(0, 0, 320, 30); // NOT WORKING
...
I connect to label successfully because whn I try to add text it works.
cell.mainArticleTitleLabel.text = #"lorem ipsum text";
Where is the problem?
UPDATE (improved explanation):
When I check before setting height is like is set over IB and after seting in code is like I set but visualy in Simulator is same.
NSLog(#"%f", cell.mainArticleTitleLabel.frame.size.height);
cell.mainArticleTitleLabel.frame = CGRectMake(0, 117, 320, 48);
NSLog(#"%f", cell.mainArticleTitleLabel.frame.size.height);
UPDATE 2
I even can change backogrund color (but seting height is not)
cell.mainArticleTitleLabel.backgroundColor = [UIColor redColor];
cell.mainArticleTitleLabel.frame = CGRectMake(0, 117, 320, 48); // NOT WORKING
The problem is that you cannot do it in the
cellForRowAtIndexPath
you have to to it in the heightForRowAtIndexPath
here is a code sample
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
//in my case i get the text of the cell in an array
NSString* theText = [anArray objectAtIndex:indexPath.row];
//then calculate the texte size with standard text
CGSize textSize = [theText sizeWithFont:[UIFont systemFontOfSize:14] constrainedToSize:CGSizeMake(300, MAXFLOAT) lineBreakMode:NSLineBreakByWordWrapping];
return textSize.height;
}
if using attributed text in iOS 6 use
CGRect rectSize = [theText boundingRectWithSize:CGSizeMake(labelWidth, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin context:NULL];
and return
return rectSize.size.height;
I am using this in my code and it's working for dynamic cell height.
EDIT
I read the different commentaries. It seems my answer is useless as your problem is not in returning a value in heightForRowAtIndexPath as you are already doing it. Your problem is that it's working in storyboard and not in single xib. At that point I am of no help.
After many and many triesI give up from that way and I try to add one more cell through TableView on storyboard and add custom class and it works.

Resources