ios - 画像なしで iOS7 に円ボタンを作成する

Question

時計アプリにある円形のボタンを iOS7 で再現したいと考えています。ボタンは基本的に円で、ボタンの状態 (緑の境界線、赤の境界線、灰色の塗りつぶし) によって外観が異なります。

もちろん、さまざまな状態の画像を含む単純な UIButton を使用してこれを実現できます。

ただし、円をプログラムで描画するソリューションを探しているので、半径やストローク幅などを簡単に変更できます。

私が見る限り、UIButton では状態ごとに UIImage を定義することしかできないため、状態ごとにレイヤーを直接変更することはできません (たとえば、レイヤーに cornerRadius を指定します)。別の方法はありますか？

score 11 · Accepted Answer

これを実現する方法はたくさんあります。たとえば、次のようになります。

CAShapedLayerを使用
UIViewをサブクラス化し、 drawRect:メソッドを使用して円を描画します
正方形のUIViewを用意して、 layer.cornerRadius プロパティを使用するだけです。

必要に応じて、通常の UIButton を作成して呼び出すだけの簡単なもの

myButton.layer.cornerRadius = myButton.bounds.size.width / 2.0;

動作する可能性があります ( Quartz Frameworkを含める必要があります)

score 4 · Accepted Answer

迅速な拡張機能を使用したソリューション:

extension UIView{
    func asCircle(){
        self.layer.cornerRadius = self.frame.size.width / 2;
        self.layer.masksToBounds = true
    }
}

電話するだけ

myView.asCircle()

ボタンだけでなく、あらゆる種類のビューで動作可能

score 4 · Accepted Answer

この種のことを達成するために私が使用したパターンは次のとおりです。

サブクラスUIButton化して実装し、必要に応じてボタンを描画し、ボタンのおよびプロパティにdrawRect基づいて色をカスタマイズします。selectedhighlighted

次にオーバーライドsetSelectedしsetHighlightedて、次のように再描画を強制します。

-(void)setHighlighted:(BOOL)highlighted {
    [super setHighlighted:highlighted];
    [self setNeedsDisplay];
}

score 4 · Accepted Answer

このコードを追加

imagePreview.layer.cornerRadius = (imagePreview.bounds.size.height/2);

imagePreview は UIview/UIimageview/UIButton です

追加することを忘れないでください

#import <QuartzCore/QuartzCore.h>

score 0 · Accepted Answer

このコントロールを使用できます。これは UIButton のサブクラスです。 https://github.com/alvaromb/AMBCircularButton

score 0 · Accepted Answer

私はそれがうまくいくと思います。

override func viewDidLoad() {
    super.viewDidLoad()

    var button = UIButton.buttonWithType(.Custom) as UIButton
    button.frame = CGRectMake(160, 100, 50, 50)
    button.layer.cornerRadius = 0.5 * button.bounds.size.width
    button.setImage(UIImage(named:"thumbsUp.png"), forState: .Normal)
    button.addTarget(self, action: "thumbsUpButtonPressed", forControlEvents: .TouchUpInside)
    view.addSubview(button)
}

func thumbsUpButtonPressed() {
    println("thumbs up button pressed")
}

ios - 画像なしで iOS7 に円ボタンを作成する

8 に答える 8

Related

Reference