スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーをはてなブックマークに追加

iOS Objective-c 扇形のViewを作成するにはCAShapeLayerを使う。

こんにちは、主夫ひろしです。

円グラフの中に扇形のUIViewを作りたくて、いろいろ試行錯誤してました。
結論から言うと、どうやらCAShapeLayerというのを使うといいらしい。CAShapeLayerというのは、図形を描画するメソッドを持ったクラス。なので、正確にはViewではなくてLayerで表現します。

さてさて、さっそくソースコードを。
まずはプロジェクト作成で「Single View Application」を選択してViewControllerクラスを作成します。

そして、できたViewControllerクラスに2つメソッドを追加。(自分のやりやすいようにメソッド数は調整してください。)

// 扇形を描画するメソッド
- (void) drawFunShapeWithCenter:(CGPoint)center
radius:(CGFloat)radius
startAngle:(CGFloat)startAngle
angle:(CGFloat)angle
color:(UIColor*)color
{
// インスタンス生成
UIBezierPath* path = [UIBezierPath bezierPath];


// 終了角度を算出
CGFloat endAngle = startAngle + angle;

[path addArcWithCenter:center
radius:radius
startAngle:startAngle
endAngle:endAngle
clockwise:YES];
// 円弧から中心へ直線を引く
[path addLineToPoint:center];

// 描画実行
CAShapeLayer* l = [CAShapeLayer layer];
l.path = path.CGPath;
if (color) {
l.strokeColor = color.CGColor;
l.fillColor = color.CGColor;
}
[self.view.layer addSublayer:l];

}

// pathに渡す値を作成するメソッド
- (void)drawPathGraph:(CGFloat)setStartAngle
:(CGFloat)setEndAngle
:(UIColor*)setColor{
// 円の中心点
CGFloat centerX = self.view.bounds.size.width / 2;
CGFloat centerY = self.view.bounds.size.height / 2;
CGPoint center = CGPointMake(centerX, centerY);

// 円の半径
CGFloat radius = 100;
// 開始角度
CGFloat startAngle = M_PI*2 * (90-setStartAngle)/360 * (-1);

CGFloat angle = M_PI*2 * setEndAngle/360;
UIColor* color = setColor;
[self drawFunShapeWithCenter:center radius:radius startAngle:startAngle angle:angle color:color];
}

あとは、- (void)viewDidLoadメソッドで pathに渡す値を作成するメソッド を3回呼んでみましょう。

//ViewController起動時に呼ばれるメソッド
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

// 扇形のlayerを3つ追加
[self drawPathGraph:0:30:[UIColor redColor]];
[self drawPathGraph:30:30:[UIColor blueColor]];
[self drawPathGraph:60:60:[UIColor yellowColor]];
}

実行結果:
扇形実行結果

簡単に解説を。。。
① UIBezierPathというクラスからインスタンスpathを生成。
② pathに渡す引数を用意して設定する。
③ CAShapeLayerのインスタンスlayerpathと紐づける。
④ layerをself.view.layerにはりつける。


ランキング参加しています。
↓ポチッと協力していただけると嬉しいです♪

人気ブログランキングへ
にほんブログ村 ライフスタイルブログへ
にほんブログ村
スポンサーサイト


このエントリーをはてなブックマークに追加

コメントの投稿

非公開コメント

博多でオススメのお店
プロフィール

ぽてぴ×ひろし

Author:ぽてぴ×ひろし
訪問ありがとうございます。
しゅふ友2人(主婦&主夫)で始めたブログです。
日々の出来事、つぶやき、お役立ち情報などなど書いていこうと思ってます。

ブログを書いてる人
その①主婦ぽてぴ
 主婦歴:8年
 家族:旦那クンと猫2匹
 得意技:怪しい創作料理
     家事手抜き技の探求
 趣味:アンチエイジング奮闘

その②主夫ひろし
 主婦歴:1か月
 家族:嫁サンと2人暮らし
 得意技:けさ固め、体落とし
 趣味:焼酎を飲みながらプリン
    体と奮闘中

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
楽天
オススメサイト
ブログランキング
↓ポチッ!お願いします♪
iPhoneアプリ
はかたべんももたろう
カテゴリ: 教育, エンターテインメント
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa

Horror Surprised !! 〜どきどきホラー!
カテゴリ: エンターテインメント, ライフスタイル
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa
計画タイマーまねじめん
カテゴリ: ライフスタイル, フード/ドリンク
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa
5文字に思いを込めろ!
カテゴリ: エンターテインメント, ライフスタイル
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa
TOEIC攻略タイマー
カテゴリ: 教育, ビジネス
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa
お買い物べんり電卓〜直感で簡単操作〜
カテゴリ: ライフスタイル, フード/ドリンク
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa


動画:お買い物べんり電卓〜直感で簡単操作〜

脳トレとぅんとぅん
カテゴリ: ゲーム, 教育, 教育, スポーツ
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa


円スケジュール-1日を素早く計画
カテゴリ: ライフスタイル, 仕事効率化
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa


にこにこサッカー
カテゴリ: ゲーム, エンターテインメント, アクション, スポーツ
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa


Todoリスト-優先度で簡単仕分け
カテゴリ: 仕事効率化, ビジネス
価格: 無料 (掲載時)
販売元: Hiroshi Nakagawa


Twitter
食品&飲料
RSSリンクの表示
電子書籍
amazon
ヘルス&ビューティー
リンク
検索フォーム
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。