グラデーションの背景を使ったスタイリングUITableViewCells

Question

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

あなたのUITableViewCellのスティックを外す方法の良い例がありますか？

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

ありがとうございました。

Answer 1

私はTumblrのために働く、と私はiPhoneアプリ（he did）を書いていないが、私はソースを持っているし、どのように行うのを伝えることができます。セルの背景ビューなどUIImageViewでPNG画像：-tableView:cellForRowAtIndexPath:

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

かなりシンプルな、本当にでは

。

2枚の画像のUIKitが自動的にセルの幅に合わせて水平に伸びる1x61垂直勾配です。

Answer 2

私はこのためにQuartz 2Dを使用しますが、Photoshopで画像を設定することは完全に有効です。

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

Answer 3

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

Answer 4

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

このように言えば、セルにグラデーションを追加することは非常に簡単です。 InterfaceBuilderを使用してグラデーションを含むイメージをセルビューに追加するだけで完了です。 Quartzについて心配する必要はなく、CocoaTouchのコンポーネントは画像を表示するなどのプレーンな作業を行うために非常に最適化されているので、パフォーマンスは賢明です。

Answer 5

iPhone SDK 3.0以降、much simpler solution that relies on the new CAGradientLayer and doesn't require subclassing or imagesがあります。あなたがイメージを使用しない場合

Answer 6

Mirko's answerは良い選択肢です。ただし、UITableViewcell自体ではなく、backgroundViewにグラデーションを追加することをお勧めします。この方法では、セルの選択時にハイライトエフェクトが失われることはありません

Answer 7

Marcoの答えは、プレーンテーブルビューセルとテーブルビューの中央にあるグループ化テーブルビューセルに適していますが、グループ化された表の最初/最後のセルの背景図を表示すると、丸い角が壊れます。それを修正するには、UIColor colorWithPatternImage、例えばにセルの背景色を設定することができます。

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