UITableViewCell cell中圖片文字的自適應高度

首先定義一個tableView
效果圖:
這裏寫圖片描述

這裏寫圖片描述

在這裏需要用到自己定義的cell,和系統的cell不同

在創建tableView之前要先初始化圖片和文字的數組

-(instancetype )initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil{
    [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        self.picArr=[NSMutableArray arrayWithObjects:@"tara1.jpg",@"tara2.jpg",@"tara3.jpg",@"tara4.jpg", nil];
        self.ziArr=[NSMutableArray arrayWithObjects:@"中國共產黨新聞網北京4月1日電 (萬鵬)3月28日,習近平主席出席2015年博鰲論壇年會開幕式並發表了題爲《邁向命運共同體 開創亞洲新未來》的主旨演講,他強調,“亞洲是世界的亞洲。亞洲要邁向命運共同體、開創亞洲新未來,必須在世界前進的步伐中前進、在世界發展的潮流中發展。習主席的演講傳遞了哪些重要信息?國務院參事室特邀研究員保育鈞,中國國際問題研究院研究員楊希雨做客人民網時談到,習主席主旨演講展現出“五大亮點”,再次提出“亞洲方式”的新命題,開幕式本身可謂“一帶一路”的各國大合唱,讓人印象深刻", @"牀前明月光,疑是地上霜.舉頭望明月,低頭思故鄉", @"NBA常規賽強強對話,勇士在一度落後17分的情況下,客場以110-106逆轉快船,終結對手7連勝的同時豪取10連勝。庫裏全場轟下27分,並在第二節運球晃倒保羅,技驚四座。快船格里芬40分,外加12籃板5助攻",@"tara巡迴演唱會", nil];
    }
    return self;
}

1.在viewController中定義一個tableView

1.設置背景顏色
 self.view.backgroundColor =[UIColor redColor];
2. 把透明度去掉
self.navigationController.navigationBar.translucent=NO;   
3. 把tableView設置成屬性,建一個tableView
  self.tableView=[[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, HEIGHT-64) style:UITableViewStylePlain]; 
[self.view addSubview:self.tableView];
[self.tableView release];
4.在上面簽訂兩個協議:並設置各自的代理人
@interface MainViewController ()<UITableViewDelegate,UITableViewDataSource>
self.tableView.delegate =self;
self.tableView.dataSource=self;

2.實現簽訂的兩份協議

第一個協議是返回行數

代碼:
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return self.picArr.count;
}

第二個協議,設置cell,這個cell用自定義cell:MyCell

代碼:

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return self.picArr.count;
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *reuse=@"reuse";
    MyCell *cell=[tableView dequeueReusableCellWithIdentifier:reuse];
    if (!cell) {
        cell=[[[MyCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:reuse] autorelease];
    }
    添加圖片
    cell.leftImageView.image=[UIImage imageNamed:self.picArr[indexPath.row]];
   添加文字
    cell.myLabel.text =self.ziArr[indexPath.row];
    return cell;
}

3.計算圖片和文字的自適應高度

  `(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{`
// 根據圖片的尺寸,設置行高
UIImage *image= [UIImage imageNamed:self.picArr[indexPath.row]];

// 通過CGSize找到image裏面的圖片的尺寸
CGSize picSize= image.size;
// 計算行高
CGFloat rowHeight =picSize.height*self.view.frame.size.width/picSize.width;

// 計算label的高度
// 根據對應的文字求出cell上label顯示的高度
NSDictionary *fontDic =[NSDictionary dictionaryWithObjectsAndKeys:[UIFont systemFontOfSize:14 ],NSFontAttributeName, nil];

// 根據字的大小 ,計算出文本的尺寸
// 還需要執行一個尺寸(375, 0)
// 第三個參數:計算高度需要的依據字體的哪個特徵來確定
CGRect rect=[self.ziArr[indexPath.row] boundingRectWithSize:CGSizeMake(375, 0) options:NSStringDrawingUsesLineFragmentOrigin attributes:fontDic context:nil];

// 最後把結果作爲返回值返回

return rowHeight+rect.size.height;
}

這個方法是tableView的delegate所提供的協議方法,主要是用來設置每一行的高度

4.創建MyCell

(1). 在MyCell.h定義兩個屬性.視圖,和字符串
注意:他們的名不能和系統的已有的屬性名重複,包括imageView,textLabel,detailTextField

@property(nonatomic ,retain)UIImageView *leftImageView;
@property(nonatomic ,retain)UILabel *myLabel;

(2.).重寫cell的初始化方法

代碼:

-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
    self =[super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
       // 完成對屬性視圖的創建,但是一般創建之後不給屬性視圖frame
        [self createView];
    }

    return self;
}

(3.).屬性視圖進行創建(實現重寫cell中的創建視圖的方法)
代碼:

-(void)createView{
    self.leftImageView=[[UIImageView alloc] init];
    [self.contentView addSubview:self.leftImageView];
    [self.leftImageView release];

    self.myLabel =[[UILabel alloc] init];
    // 指定label的字體大小,默認字體是17號
    self.myLabel.font =[UIFont systemFontOfSize:14];
    // 0 是最大行數
    self.myLabel.numberOfLines =0;
    [self.myLabel sizeToFit];
  [self.contentView addSubview:self.myLabel];
    [_myLabel release];
    }

注意,在創建view視圖時,一般不設置尺寸

(4).根據之前算出的自適應高度設置圖片(imageView)和文字(label)的尺寸

代碼:

   -(void)layoutSubviews{
    [super layoutSubviews];
    // 讓imageView的尺寸和cell的圖片大小相同
    // 因爲這個方法是最後一個被執行的,所以執行到這個方法的時候,已經對cell的各個屬性進行完賦值操作,所以可以通過imageView.image找到圖片的尺寸

    CGSize picSize =self.leftImageView.image.size;
    CGFloat height =picSize.height*self.contentView.frame.size.width/picSize.width;
    self.leftImageView.frame =CGRectMake(0, 0, self.contentView.frame.size.width, height);

     NSDictionary *fontDic =[NSDictionary dictionaryWithObjectsAndKeys:[UIFont systemFontOfSize:14 ],NSFontAttributeName, nil];
    CGRect rect=[self.myLabel.text boundingRectWithSize:CGSizeMake(375, 0) options:NSStringDrawingUsesLineFragmentOrigin attributes:fontDic context:nil];
    self.myLabel.frame =CGRectMake(0, height, self.contentView.frame.size.width, rect.size.height);
    }
發佈了73 篇原創文章 · 獲贊 3 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章