создание хорошего пользовательского UITableViewCell

Question

Я пытаюсь создать табличное представление с макетом, похожим на то, что есть у yobongo:

и то, что я сейчас имею, действительно дерьмовое, где UIImage имеет другой размер, и т. Д., И т. Д ... Как мне исправить это, чтобы получилось что-то хорошее? Я попытался переставить через IB, но мой выглядит так:

Я хотел создать UIImage в ячейке, которая имеет фиксированный размер (мой изменяет размеры здесь и там). Как мне установить это? Я также хочу закругленный край вокруг UIIMage ... Я играл с пружиной и распорками через IB, и я думаю, что, возможно, испортил что-то, что я не могу исправить снова ...

Я также хочу, чтобы между строками и рамкой был промежуток, как на рисунке ниже

Я также хотел реализовать окно чата, как показано ниже, где оно расширяется, если текст больше его предела. Как я могу это сделать?

Answer 1

Фиксированный размер изображения

Вы должны установить рамку UIImageView для всех видов изображений.И затем вам нужно поиграть со свойством contentIIode UIImageView - где вы можете масштабировать изображение, чтобы оно соответствовало кадру, заполнить кадр, сохранить соотношение сторон и т. Д. И также вам нужно установить для clipsToBounds значение YES, чтобы обрезать «перекрывающиеся» части изображения.

Круглые углы

Для этого вы можете использовать CALayer, который также доступен в UIImageView.Это вопрос четырех строк ...

imageView.layer.cornerRadius = 3.0;
imageView.layer.masksToBounds = YES;
imageView.layer.borderColor = [UIColor blackColor].CGColor;
imageView.layer.borderWidth = 1.0;

Пример:

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
  self = [super initWithStyle:style reuseIdentifier];
  if ( self ) {
    ...
    self.imageView.layer.cornerRadius = 3.0;
    self.imageView.layer.masksToBounds = YES;
    self.imageView.layer.borderColor = [UIColor blackColor].CGColor;
    self.imageView.layer.borderWidth = 1.0;
    ...
  }
  return self;
}

Расширяемый ввод текста

Вы должны подготовить хорошее фоновое изображениеза это.И затем вы можете создать растягиваемое изображение с помощью метода класса UIImage: – stretchableImageWithLeftCapWidth:topCapHeight:

Каждая строка будет иметь подкласс UITableViewCell, где вы можете обрабатывать все эти вещи.Растягиваемый фон и т. Д. Изменение размера с помощью делегата UITextView (textViewDidChange :) и т. Д.

Google для некоторых примеров или поиска SO.

Gaps

UITableViewDelegateимеет метод ...

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

... где вы можете указать высоту строки.Чтобы создать пробел, добавьте это в свою пользовательскую ячейку ...

Заголовок:

UIImageView *__backgroundImageView;

Инициализатор:

__backgroundImageView = [[UIImageView alloc] initWithImage:...stretchableImage...];
[self.contentView addSubview:__backgroundImageView];
[self.contentView sendSubviewToBack:__backgroundImageView];

Расположение:

- (void)layoutSubviews {
  [super layoutSubviews];

  // This draws background image over the whole cell and adds 5px gap top/bottom
  CGRect rect = self.contentView.bounds;
  rect.origin.y += 5; // Draw background image 5 pixels below cell top
  rect.size.height -= 2 * 5; // Remove top/bottom gap from background image height
  __backgroundImageView.frame = rect;

  ...
}

Управление памятью:

- (void)dealloc {
  [super dealloc];
  [__backgroundImageView release]; __backgroundImage = nil;
  ...
}

Answer 2

Создание пользовательского класса, который наследуется от UIView.Добавить ivar UIImageView* _img_v Override setFrame:

-(void) setFrame:(CGRect) r {
    [super setFrame: r];

    if( _img_v.image && r.size.width*r.size.height ) {
        CGSize isz = _img_v.image.size;

        float sx = r.size.width/isz.width;
        float sy = r.size.height/isz.height;
        if( sx > sy ) {
            sx = sy;
        } else {
            sy = sx;
        }

        CGRect img_frame = CGRectMake(0, 0, isz.width*sx, isz.height*sy);
        img_frame.origin = CGPointMake((r.size.width - img_frame.size.width)/2.0, (r.size.height - img_frame.size.height)/2.0);
        [_img_v setFrame: img_frame];
    }
}

Это не обрезает изображения, но вы также можете использовать scaleToFill для этого.

Answer 3

• Если вы хотите, чтобы все изображения (потенциально разных размеров источника) отображались в UITableViewCell одинакового размера, вам необходимо настроить размеры изображений.Самый простой способ сделать это - использовать ScaleToFill contentMode вашего UIImageView, который затем сделает всю работу за вас.

• Вы можете получить закругленные / граничные / цветные углы на любом виде, выполнив следующие действия:

#import <QuartzCore/QuartzCore.h>      // for layer.cornerRadius
...
self.comboTextView.layer.cornerRadius = 10.0;
self.comboTextView.layer.borderColor = [[UIColor grayColor] CGColor];
self.comboTextView.layer.borderWidth = 2;

• Расширение TextView: я бы, вероятно, сделал это: реализую функцию UITextViewDelegate

- (void)textViewDidChange:(UITextView *)textView

, затем в этом методе получим свойство textView.contentSize и установите textView.свойство кадра до этого размера.