UiableView с боковым разрезным заголовком изображения

Question

Музыкальное приложение на iPad довольно много интересных пользовательских функций пользовательских пользовательских интерфейсов, одна из которых является представление таблицы, отображаемое при рассмотрении Альбомы конкретного художника.

Он имеет изображения по бокам каждой секции, почти выступая в очень похожем моде для раздела видов заголовка. Если я прокручиваю вниз, топ-изображение остается там до тех пор, пока следующий образ не придет, чтобы ударить его, и наоборот.

Первоначально это кажется совсем невозможным, не переоценивая UiableView все еще раз, но я думаю, что это полуизмеренные, просто подклассация UiableView, чтобы нарисовать эти раздел изображения на стороне, за пределами UiableView, когда это называет layoutSubviews (то есть всякий раз, когда это прокручивает). С этим возникают небольшие проблемы: потому что он рисует за пределами UiableView, любая автосалона, вероятно, бросит всю макет. И я действительно просто не уверен в целесообразности все это.

Есть предположения?

---

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

Answer 1

Подумав об этом случайным образом в середине ночи, я наконец понял реальное решение.

Вставьте UiableView в UIScrollView, и когда пользователь прокручивает вид, ощущения проходят через родительский ScrollView, а не сам таблицу. Почти все, что вам нужно сделать, лежит в методе LayoutsubViews; Поскольку LayoutSubViews ScrollView вызывается всякий раз, когда пользователь прокручивает вид, просто измените кадр таблицы, чтобы оставаться неподвижным на экране, и измените ContendOffset TableView, чтобы соответствовать тому, что ScrollView.

Пример кода:

- (void) layoutSubviews{
    tableView.frame = CGRectMake(self.contentOffset.x, self.contentOffset.y, tableView.frame.size.width, tableView.frame.size.height);
    tableView.contentOffset = self.contentOffset;   
}

На данный момент вы можете настроить таблицу на одну сторону и делать все, что вы хотите с другой.

Answer 2

Вы можете проверить, в какой раздел вы находитесь в TablView (или самого верхнего и т. Д.) Как-то, просто есть UIView, который обновляется всякий раз, когда раздел меняется, моя идея немного сложно объяснить, но это не пришлось делать с Вообще повторить UiableView, просто имейте еще один вид рядом с видом на таблицу, чтобы сделать изображения вместо того, чтобы пытаться встроить эту функциональность.

Другим способом сделать это, возможно, является немного более сложным, но вы можете попробовать отступить отступить к вашим ячейкам, чтобы они не начнут на самом левой части таблицы, сделайте TableView очень широко и иметь пользовательский вид в заголовке раздела, который содержит, что Изображение слева и надеюсь сделало бы это правильно? Хороший вопрос и веселый, с которыми можно играть.

Answer 3

Хорошо, я сделал что-то похожее на то, что делает музыкальное приложение и поиск прожектора.

Я не подклассировал UiableView, я только что отслеживал разделы через метод ScrollViewDiDIDIDIDIDIDSCROLL, и добавил вид заголовка слева от таблицы (так что вам придется поставить таблицу справа в режиме ViewController, что означает, что вы можете ' T использовать UiableViewController).

Этот метод должен быть вызван в ScrollViewDIDSCROLL, ViewDidload и в DidrotateFrominterfaceSorentation: (если вы поддерживаете вращение)

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

-(void)updateHeadersLocation
{
for (int sectionNumber = 0; sectionNumber != [self numberOfSectionsInTableView:self.tableView]; sectionNumber++)
{
    // get the rect of the section from the tableview, and convert it to it's superview's coordinates
    CGRect rect = [self.tableView convertRect:[self.tableView rectForSection:sectionNumber] toView:[self.tableView superview]];

    // get the intersection between the section's rect and the view's rect, this will help in knowing what portion of the section is showing
    CGRect intersection = CGRectIntersection(rect, self.tableView.frame);

    CGRect viewFrame = CGRectZero; // we will start off with zero

    viewFrame.size = [self headerSize]; // let's set the size

    viewFrame.origin.x = [self headerXOrigin];

    /*

     three cases:

     1. the section's origin is still showing -> header view will follow the origin
     2. the section's origin isn't showing but some part of the section still shows -> header view will stick to the top
     3. the part of the section that's showing is not sufficient for the view's height -> will move the header view up

     */

    if (rect.origin.y >= self.tableView.frame.origin.y)
    {
        // case 1
        viewFrame.origin.y = rect.origin.y;
    }
    else
    {
        if (intersection.size.height >= viewFrame.size.height)
        {
            // case 2
            viewFrame.origin.y = self.tableView.frame.origin.y;
        }
        else
        {
            // case 3
            viewFrame.origin.y = self.tableView.frame.origin.y + intersection.size.height - viewFrame.size.height;
        }
    }

    UIView* view = [self.headerViewsDictionary objectForKey:[NSString stringWithFormat:@"%i", sectionNumber]];

    // check if the header view is needed
    if (intersection.size.height == 0)
    {
        // not needed, remove it
        if (view)
        {
            [view removeFromSuperview];
            [self.headerViewsDictionary removeObjectForKey:[NSString stringWithFormat:@"%i", sectionNumber]];
            view = nil;
        }
    }
    else if(!view)
    {
        // needed, but not available, create it and add it as a subview

        view = [self headerViewForSection:sectionNumber];

        if (!self.headerViewsDictionary && view)
            self.headerViewsDictionary = [NSMutableDictionary dictionary];

        if (view)
        {
            [self.headerViewsDictionary setValue:view forKey:[NSString stringWithFormat:@"%i", sectionNumber]];

            [self.view addSubview:view];
        }
    }


    [view setFrame:viewFrame];
}
}

Также нам нужно объявить свойство, которое будет сохранять вид, которые видны:

@property (nonatomic, strong) NSMutableDictionary* headerViewsDictionary;

Эти методы возвращают размер и оси X представлений заголовка:

-(CGSize)headerSize
{
return CGSizeMake(44.0f, 44.0f);
}

-(CGFloat)headerXOrigin
{
return 10.0f;
} 

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

-(UIView*)headerViewForSection:(NSInteger)index
{
UIImageView* view = [[UIImageView alloc] init];

if (index % 2)
{
    [view setImage:[UIImage imageNamed:@"call"]];
}
else
{
    [view setImage:[UIImage imageNamed:@"mail"]];
}

return view;
}

Вот как это будет выглядеть:

Как это будет выглядеть в Lanscape, я использовал разоблачение, чтобы дать 44Px слева от таблицы

надеюсь это поможет :).