UITableView пользовательский заголовок (как Foodspotting приложение)

Question

Может кто-нибудь объяснить, как это приложение (Foodspotting), создает свой собственный заголовок раздела? Он имеет полупрозрачный черный фон, изображение пользователя и некоторый приятный текст (без сомнения, загружен с сервера). Мои два больших вопроса:

1. Как приложение получает приятную черную полупрозрачность в заголовке раздела? 2. Как они получают эту маленькую стрелку треугольника, прикрепленную к заголовку?

Я могу в значительной степени определить все остальное на основе использования пользовательского представления для заголовка раздела.

Answer 1

Section header is a UIView как и любой другой. Вы можете создать его как красивую, сложную или как elaboarate по своему усмотрению, используя Interface Builder, если хотите, и т. Д. Ответ на его делегию делегата tableView:viewForheaderInSection вашего стола, как и для других строк ячеек.

Что касается маленького треугольника: да, это немного нас отбросило (мы хотели что-то подобное в нашем приложении), пока не обнаружили, что вы можете перекрывать представление с помощью строки, «лежащей» относительно ее высоты: т.е. возвращается tableView:heightForHeaderInSection: значение немного меньше, чем на самом деле. Не может быть «правильным» способом, но для нас очень приятно. Как это:

Таким образом, заголовок на самом деле идеальный прямоугольник, в основном, сквозной в нижней части, с небольшим треугольником «выглядывает» из:

Говори IOS, что заголовок имеет высоту 80 пикселей, например:

- (CGFloat) tableView:(UITableView *) tableView 
    heightForHeaderInSection:(NSInteger) section { 
    return 80; 
    } 

и он начнет рисовать «продовольственный» ряд на 80 пикселей. Поскольку заголовки находятся сверху, и потому что большая часть нижней части заголовка прозрачна, за исключением стрелки, вы должны получить этот эффект.

Answer 2

Я достиг желаемого результата по-другому. Вместо того, чтобы использовать tableView:viewForheaderInSection: (который не работает для меня), я добавил вид изображения, который содержит изображение стрелки в качестве подвида в представлении заголовка, и установить рамки, чтобы быть чуть ниже заголовок:

// Inside HeaderView.m 

UIImageView *arrowImageView = [[UIImageView alloc] initWithImage:self.arrowImage]; 
arrowImageView.frame = CGRectMake(arrowX, frame.size.height, self.arrowImage.size.width, self.arrowImage.size.height); 
[self addSubview:arrowImageView]; 
[arrowImageView release]; 

Если вы внимательно смотрите, в Foodspotting.app есть два файла (следующий-captionbubble-dark.png и следующий-captionbubble-dark@2x.png), которые выглядят точно так же, как стрелка, показанная выше в вопросе. Поэтому я предполагаю, что они использовали подобную технику. Престижность команды Foodspotting.