web-dev-qa-db-ja.com

グラデーションの背景を持つUITableViewCellsのスタイル

IPhoneアプリケーションの全体的な魅力を改善する方法を探していました。機能の大部分はUITableViewで発生します。 UITableViewCellsに微妙なグラデーションを追加することから始めることができると思います。これにより、アプリの感触が一桁向上するようです。適切なフォント/サイズを選択すると、非常に役立ちます。このフォーラムに対する私の質問は、UITableViewCellsにグラデーションを追加する最良の戦略は何ですか？ Core Graphics/Quartzを使用していますか？ 1x1ピクセルの画像を使用して拡大していますか？ Tumblr iPhoneアプリの次のスクリーンショットのラインに沿ったものに興味があります： http://dl-client.getdropbox.com/u/57676/screenshots/tumblr.jpg

あなたのUITableViewCellを目立たせる方法の良い例は誰にもありますか？

また、パフォーマンス上の理由から、Quartzで画像を使用するか描画する方が良いでしょうか？ Quartzの場合、人々がグラデーションをセルに描画する方法のサンプルコードをいくつか見てみたいと思います。

ありがとう。

iphonecocoa-touchuser-interface
35
anon

私はTumblrで働いており、iPhoneアプリを作成していませんが（ 彼が作成しました ）、ソースがあり、それがどのように行われるかを教えてくれます。

-tableView:cellForRowAtIndexPath:

cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"postCellBackground.png"]];
cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"postCellBackgroundSelected.png"]];

非常に単純な、本当に：セルの背景ビューとしてのUIImageViewのPNG画像。

2つの画像は、UIKitがセルの幅に合わせて水平方向に自動的に拡大する1x61の垂直方向のグラデーションです。

62
Marco

IPhone SDK 3.0以降、 新しいCAGradientLayerに依存し、サブクラス化や画像を必要としない、はるかに単純なソリューション があります。

31
Mirko Froehlich

マルコの答えは、プレーンテーブルビューセルと、テーブルビューの中央にあるグループ化されたテーブルビューセルに最適ですが、グループ化されたテーブルの最初/最後のセルに背景ビューを設定しようとすると、丸い角。これを修正するには、セルの背景色をIColor colorWithPatternImageに設定します。例：

cell.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"Gradient.png"]];
2
Dmitry Sokurenko

カスタムセルでUITableViewを処理する最も簡単な方法は、Interface Builderを使用することです。純粋なコアを使用するよりも、UIデザインの作業がはるかに簡単になります。 ここにあります これを行う方法に関する素晴らしいチュートリアル（ビデオ付き！）。強くお勧めします。従ったので、UITableViewコーディングの他のメソッドを使用していません。

そうは言っても、セルにグラデーションを追加するのは非常に簡単です。 InterfaceBuilderを使用して、グラデーションを含む画像をセルビューに追加するだけです。 CocoaTouchのコンポーネントは画像の表示などの単純なタスクを実行するために非常に最適化されているため、Quartzについて心配する必要はなく、パフォーマンスについても同様の結果が得られます。

0
Pablo Santa Cruz

UITableViewCellは、背景と選択された背景の別々のビューをサポートしているため、これらのプロパティを利用することは理にかなっています。これを行うには、セルのフルサイズの画像を思い付く必要があります（UIImageViewは画像を拡大しません）。そのため、デスクトップマシンで一度作成して保存することもできます。画像を引き伸ばしたり動的に作成したりするために費やさなければならない電話のサイクル。ただし、ユーザーがグラデーションの色を変更できるようにする場合は、動的に一度作成する必要があります。

0
HitScan

これにはQuartz 2Dを使用しますが、Photoshopでの画像の設定も完全に有効です。

パフォーマンスについては、タイプ別にセルを再利用している場合は問題ないと思いますが、ボトルネックが見つかった場合は、ビットマップコンテキストに一度描画し、そこから画像を取得して使用することができます。どこでも-一種のハイブリッドソリューション。

0
philsquared

ミルコの答え は、画像を使用したくない場合に適した選択肢です。ただし、UITableViewcell自体ではなくbackgroundViewにグラデーションを追加することをお勧めします。これにより、セルを選択したときにハイライト効果が失われません

0
wL_