8

ここに画像の説明を入力

このアプリ (FoodSpotting) がカスタム セクション ヘッダーを作成する方法を誰か説明してもらえますか? 半透明の黒い背景、ユーザーの画像、およびいくつかの素敵なテキスト (サーバーからロードされたことは間違いありません) があります。ここでの私の2つの大きな質問は次のとおりです。

1. アプリはどのようにしてセクション ヘッダーの黒の半透明を取得しますか? 2. ヘッダーに小さな三角形の矢印を付けるにはどうすればよいですか?

セクション ヘッダーのカスタム ビューを使用することに基づいて、他のすべてをほぼ把握できます。

4

2 に答える 2

22

セクション ヘッダーは、他のヘッダーと同様にUIViewです。必要に応じてInterface Builderなどを使用して、美しく、複雑に、または精巧に作成できます。テーブルデリゲートtableView:viewForheaderInSectionは、他のセル行の場合と同様に、それを返す責任があります。

小さな三角形について: ええ、これは少し私たちを悩ませました (私たちのアプリでも似たようなものが欲しかったのです)、ビューを行の高さについて「嘘をつく」ことで重ねることができることを発見するまで: つまりtableView:heightForHeaderInSection:、よりわずかに小さい値を返しますそれは実際にあります。「正しい」方法ではないかもしれませんが、私たちにとっては非常にうまく機能しました。このような：

ここに画像の説明を入力

したがって、ヘッダーは実際には完全な長方形で、ほとんどが下部で透けて見え、小さな三角形が「覗き見」ています。

ここに画像の説明を入力

次のように、ヘッダーの高さが 80px であることを iOS に伝えます。

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

そして、80px で「food」行の描画を開始します。ヘッダーが上にあり、ヘッダーの下部のほとんどが矢印を除いて透明であるため、この効果が得られるはずです。

于 2012-04-24T23:58:15.170 に答える
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 には 2 つのファイル (following-captionbubble-dark.png と following-captionbubble-dark@2x.png) があり、上記の質問の矢印とまったく同じように見えます。したがって、彼らは同様の手法を使用した可能性があると思います。Foodspotting チームへの称賛。

于 2012-05-04T13:16:28.050 に答える