web-dev-qa-db-ja.com

UITableViewの角丸

StocksとSpotlightで見られるように、UITableView全体で角を丸くする最良の方法は何ですか？グループ化されたスタイルでは、丸い角がセルとともにスクロールされるため、問題は解決しません。ビューをクリップして、スクロール位置に関係なく角が常に丸くなるようにしています。

別の画像でマスクすることを提案するUIImageに対してこれを行うことに関する別の議論を見ました。テーブルにパススルーするにはタップが必要なので、これがうまくいくかどうかはわかりません。背景パターンを隅々まで透けて見せたいので、これは私にとって理想的ではありません。

iphoneuitableview
33
Scrollwheelie

それは古い質問ですが、おそらくあなたはまだこれを行う方法を知りたいです。

Stocks/SpotlightのようなtableViewを再現しました。トリックは

view.layer.cornerRadius = 10;

これが機能するには、そのプロパティを呼び出すクラスにQuartzCoreを含める必要があります。

#import <QuartzCore/QuartzCore.h>

これはOS 3.0以降でのみ機能すると聞いた。しかし、私のアプリケーションはコアデータを使用しているため、既にOS 3.0およびhight用であったため、問題はありませんでした。

CornerRadius 10とサブビューを持つカスタムUIViewを作成し、

view.backgroundColor = [UIColor clearColor];

次に、そのサブビューにUITableViewグループ化スタイルを配置する必要があります。 backgroundColorをclearColorに、separatorColorをclearColorに設定する必要があります。次に、丸みを帯びたコーナービューの内側にテーブルビューを配置する必要があります。これは、フレームサイズと原点を設定することによって行われます。カスタムUIViewのloadViewクラスは次のようになります。

self.view = [[UIView alloc] init];
self.view.backgroundColor = [UIColor clearColor];

CustomUIViewClass *scherm = [[CustomUIViewClass alloc] init];

CGRect frame;
frame.Origin.x = 10;
frame.Origin.y = 50;
frame.size.width = 300;
frame.size.height = 380;

scherm.frame = frame;
scherm.clipsToBounds = YES;
scherm.layer.cornerRadius = 10;

[self.view addSubview:scherm];

CustomUITableViewClass *table = [[CustomUITableViewClass alloc] initWithStyle:UITableViewStyleGrouped];

frame.Origin.y = -10;
frame.Origin.x = -10;
frame.size.width = 320;
frame.size.height = 400;

table.tableView.frame = frame;
[scherm addSubview:table.tableView];

あなたが私の英語を理解してくれることを願っています。多分私はサンプルプロジェクトでこのテクニックに関する短いブログ記事を書き、準備ができたらここにリンクを投稿します。

65
HansPinckaers

これを行う簡単な方法は、QuartzCoreフレームワークをプロジェクトにインポートすることです。 #import <QuartzCore/QuartzCore.h>をtableViewControllerに設定して

myTableView.layer.cornerRadius=5;

これにより、tableviewをsuperViewに追加したり、クリッピングしたりすることなく、角を丸くすることができます。

56
rajomato

コードをハックする代わりに、グループ化されたスタイルを簡単に模倣できます。これは、1つのセクションだけが必要な場合に機能します。

Interface Builderで：

  • UITableViewのスタイルを「プレーン」に設定し、おそらくx = 10およびwidth = 300のように、左右にいくつかのパディングがあるフレームを作成します。

次に、角の半径を設定して、自分で色を付けます。

 #import <QuartzCore/QuartzCore.h>

 self.tableView.layer.borderColor = [UIColor colorWithWhite:0.6 alpha:1].CGColor;   
 self.tableView.layer.borderWidth = 1;
 self.tableView.layer.cornerRadius = 4;
13
noobular

私は最近この問題に出会い、別の方法で解決しました。結果をみんなと共有したいと思った。

角の丸い内部を備えた長方形のUIViewを作成し、UITableViewの上に配置しました。完全な説明は my programming blog にあります。

それは私が望むように正確に動作します。

2
Derrick Schneider

さて、この問題を解決するアプローチはたくさんあります。

ただし、私の場合、すべてが正しく機能しません。テーブルがテーブルサイズよりも小さいことがあります。

私がやった方法を共有します。私は、上記のいくつかのオプションよりもずっと簡単で速いと信じています。

最初と最後のアイテムを丸めます。

  • Top（left | right）およびbottom（left | right）にCAShapeLayerを作成します。

    shapeTop = [CAShapeLayer layer];
shapeTop.path = [UIBezierPath 
bezierPathWithRoundedRect:CGRectMake( 0.0f, 0.0f, 306.0f, 58.0f )
byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
cornerRadii:CGSizeMake( 6.0f, 6.0f )].CGPath;

shapeBottom = [CAShapeLayer layer];
shapeBottom.path = [UIBezierPath 
bezierPathWithRoundedRect:CGRectMake( 0.0f, 0.0f, 306.0f, 58.0f )
byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight
cornerRadii:CGSizeMake( 6.0f, 6.0f )].CGPath;

  • テーブルはclearColorである必要があります。

  • セルは色付きの背景でなければなりません。

  • そのlayer.maskを設定します

    UIView* backgroundView = [[UIView alloc] initWithFrame:CGRectZero];
backgroundView.backgroundColor = [UIColor whiteColor];
cell.backgroundView = backgroundView;

  • #import <QuartzCore/QuartzCore.h>を忘れないでください

2
Ratata Tata

「グループ化された」テーブルビュースタイルを試しましたか？

self.tableView.style = UITableViewStyleGrouped;

詳細については、 Table View Programming Guide を参照してください。 「テーブルビューについて」の章には、さまざまなスタイルを説明する素敵なスクリーンショットがあります。

2
Daniel Rinser

Swift versionのコードの下：

 let redColor = UIColor.redColor()
 self.tableView.layer.borderColor = redColor.colorWithAlphaComponent(0.9).CGColor
 self.tableView.layer.borderWidth = 1;
 self.tableView.layer.cornerRadius = 4;

インポートセクションにimport QuartzCoreがあることを確認してください。

1
Jayprakash Dubey

ここにSwift extension：があります

extension UITableView {
     public var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = true
        }
    }
}

この方法で使用

  tableView.cornerRadius = 7.5
0
Nazmul Hasan