iPhoneアプリにスクロール可能なグリッドをどのように実装しますか？

StackOverflow https://stackoverflow.com/questions/820570

質問

50 x 50ピクセルサイズの画像が約50個あります。ユーザーにそのうちの1つを選択してほしい。そこで、最初にUITableViewについて考えましたが、それは正しいことではありません。それは多くの画面スペースを無駄にします。すべての画像を上下に並べるよりも、たとえば6列とn行のグリッドを表示した方が良いでしょう。

UIScrollViewを使用して、UIViewオブジェクトを埋め、それらをグリッドのように自動的に配置します。それが道ですか？または他の提案？

役に立ちましたか？

解決

アプリで非常によく似た処理を行っています。下に画像があるNxNグリッド、およびUIScrollViewが所有する「線」を描画するための別のサブビューです。画像を描画するには、次のような別のビューを用意することをお勧めします。

-(void) drawRect(CGRect rect) {
    CGRect smallerRect = CGRectMake(x, y, width, height);
    [yourImage drawRect: smallerRect];
    // repeat as needed to draw the grid
 }

別のポスターは、ビューがUIScrollViewによって所有されている場合、タッチイベントを取得できないと述べました。これは単に真実ではありません。動作しています。ただし、次の設定が必要になる場合があります。

[yourScrollView setUserInteractionEnabled: YES]
[yourGridView setUserInteractionEnabled: YES]

他のヒント

three20ライブラリには、これを行うクラスがあります。

お勧めのとおり、テーブルビューでは必ずしも行ごとに1つの画像が表示されるわけではありません。テーブルセルはカスタマイズでき、6つの50x50 UIImageViewを持つセルサブクラスは非常に単純です。スクロールビューよりも柔軟性は低いかもしれませんが、行ごとに6つの画像を目標とする場合は、テーブルビューを使用するのが最も簡単です。

three20は恐ろしいので、使用しました。推奨しません...グリッドの表示は簡単です... 

    - (void) reloadGridView
    {

        scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(5, 54, scrollViewWidth, scrollViewHeight8)];
        scrollView.delegate = self;
        scrollView.showsVerticalScrollIndicator = NO;
        scrollView.showsVerticalScrollIndicator = NO;
        scrollView.userInteractionEnabled = YES;
        scrollView.scrollEnabled = YES;

        [self.view addSubview:scrollView];


        int x = 10;
        int y = 10;

        divisor = 1;

        for (int i = 0; i < [self.photosArray count]; i++) {

            int buttonTag = divisor;

            UIImage *thumb = [UIImage imageWithContentsOfFile:[self thumbPathAtIndex:i]];
            //********* CREATE A BUTTON HERE **********
            //********* use the thumb as its backgroundImage *******


            if(divisor%4==0){
                y+=70; 
                x = 10;

            }else{
               x += 70;
            }

            divisor++;
        }
        [scrollView setContentSize:CGSizeMake(scrollViewWidth, ([self.photosArray count]%4 == 0) ? y : y+100)];

}

また、横向きのときに6つの画像が必要な場合-isLandscapeのBOOLを設定します

if (isLandscape) {
    //change the divisor to change @ 6 instead of 4
}

より高度なgridViewが必要な場合は、AQGridView（Google it）をご覧ください

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top