1

このようなテーブルビューを作成しようとしています

ここに画像の説明を入力してください

どうすればいいのかわかりませんが。UITableViewCellをサブクラス化しており、セル用に別の.xibファイルがあります。これはそれを行うための最もクリーンな方法のようです。

問題は、側面/上部/下部にマージンを作成する方法、破線を追加する方法、および境界線/半径/シャドウを作成する方法です。

アイデア1： セル全体を画像として追加し、実際のセルを灰色にします。私のセルはすべて同じ寸法になるので、動作するはずです。（しかし、それほど楽しいことではありません;））

アイデア2： セルを灰色にし、画像の実際のボックスである新しいUIViewを追加し、ビューを白にし、プログラムでこれに境界線、境界線半径、および影を追加します（これは可能だと思いますか？）。では、どうすれば破線を作成できますか？プログラムで、または単に画像を使用しますか？

それが問題なら、私はiOS6を使用しています。

任意のアイデアや入力をいただければ幸いです。

4

4 に答える 4

2

いくつかの考え：

UITableViewCellまず、ストーリーボードを使用すると、サブクラス化がさらに簡単になると思います。NIB をロードするためのコードは必要ありません。サブクラス化されたセルをその場で設計します。

次に、Quartz 2Dを使用して、セルの内側の境界線をプログラムで構成することを検討します。Quartz 2D には、破線、影などの機能があります。

基本的に、ユーザー インターフェイスはプログラムで微調整できます。したがって、QuartzCore.frameworkプロジェクトに を追加し、セルの内側の境界線のサブクラスを作成します。おそらく次のようになります。

#import <QuartzCore/QuartzCore.h>

@interface CellInnerBorderView ()

@property (nonatomic, strong) CAShapeLayer *shapeLayer;

@end

@implementation CellInnerBorderView

// this adds shadow and border to the cell

- (void)configureBackgroundView
{
    self.layer.shadowColor = [UIColor blackColor].CGColor;
    self.layer.shadowRadius = 2.0;
    self.layer.shadowOpacity = 0.8;
    self.layer.shadowOffset = CGSizeMake(0.0, 2.0);

    self.layer.borderColor = [UIColor blackColor].CGColor;
    self.layer.borderWidth = 1.0;
}

// this adds a dashed line, half way down, inset by 5 points left and right

- (void)addDashedSeparator
{
    UIBezierPath *path = [UIBezierPath bezierPath];

    CGPoint startPoint = CGPointMake(5.0, self.frame.size.height / 2.0);
    CGPoint endPoint = CGPointMake(self.frame.size.width - 10.0, self.frame.size.height / 2.0);

    [path moveToPoint:startPoint];
    [path addLineToPoint:endPoint];

    if (self.shapeLayer)
        [self.shapeLayer removeFromSuperlayer];

    self.shapeLayer = [CAShapeLayer layer];
    self.shapeLayer.path = path.CGPath;
    self.shapeLayer.strokeColor = [UIColor blackColor].CGColor;
    self.shapeLayer.lineDashPattern = @[@1, @1];
    self.shapeLayer.fillColor = [UIColor blackColor].CGColor;
    self.shapeLayer.lineWidth = 1.0;
    self.shapeLayer.strokeStart = 0.0;
    self.shapeLayer.strokeEnd = 1.0;

    [self.layer addSublayer:self.shapeLayer];
}

- (void)layoutSubviews
{
    [super layoutSubviews];

    [self configureBackgroundView];
    [self addDashedSeparator];
}

@end

UITableViewCell次に、Interface Builder で内側の境界線を表すビューを追加し、そのクラスCellInnerBorderView(または呼び出し方を選択したもの) を指定すると、この動作が得られます。

于 2012-12-02T20:55:18.787 に答える
0

これは私がそれを行う方法です。

セルのbackgroundViewを影のある白い領域にします。
(そのビューは、backgroundColor がクリアに設定されたルート ビューを持つ完全なビュー階層になるため、余裕を持たせることができます)
形状と影に一致する selectedBackgroundView を提供する必要があります。
そこにテキストを配置するには、clearColor の背景を持つコンテンツ ビューを作成します。

破線は、セルを選択したときの表示動作に応じて、コンテンツ ビューまたは背景ビューに配置するのが適切な場合があります。

灰色の背景を提供するように TableView を設定する必要があります。

それがロジックです。実装の詳細はお任せします。

于 2012-12-02T19:23:51.793 に答える
0

セルのデザインは非常にシンプルですが、一方で見栄えも良いです (私はシンプルだが効果的なデザインのファンです)。

そのため、どちらの方法でも達成できると思います。最も効率的で簡単な方法は、画像 (影と点線を含む) を事前にレンダリングし、たとえばカスタム実装のbackgroundViewプロパティに割り当てることです。UITableViewCell

「背景」を完全にコードで (つまり、プログラムで) 描画する場合は、UITableView の背景の影に対する私の回答をご覧ください。

私の現在の観点からは、Photoshop などで設計された事前にレンダリングされた画像を含むソリューションを選択します。

于 2012-12-02T19:24:20.957 に答える
0

背景に画像を使用することもできます。2 つの日付コンポーネントに 2 つの別々の UILabels を使用します。ラベルの背景を透明にすることもできますが、透明にする必要がない場合は、パフォーマンスが向上します。マージンは、単にラベルの x、y 座標です。

背景画像の代わりに Core Graphics を使用することもできますが、これには学習曲線がかなり急です。

于 2012-12-02T19:23:39.500 に答える