web-dev-qa-db-ja.com

iOS 7丸枠ボタン

iOS App Storeには、アプリを購入/ダウンロードするための青い丸いボタンがあります。

私のアプリでは、追加のコンテンツをダウンロードできますが、ユーザーに馴染みがあるため、同様のボタンが必要です。

わからない場合、私が意味すること：これらのボタン、「$ 3.99」のような

enter image description here

これはどのように可能ですか？

iosobjective-ccocoa-touchuibutton
77
h345k34cr

ボタンのCALayerを操作して、これを簡単に行うことができます。

// assuming you have a UIButton or more generally a UIView called buyButton

buyButton.layer.cornerRadius = 2;
buyButton.layer.borderWidth = 1;
buyButton.layer.borderColor = [UIColor blueColor].CGColor;
// (note - may prefer to use the tintColor of the control)

それぞれを微調整して、必要な色と境界線の効果を得ることができます。

また、CALayersを使用するファイルにインポートを追加する必要があります

#import <QuartzCore/QuartzCore.h>
199
Dima

IOSでUIデザインにストーリーボードを使用するのが大好きな場合は、コーナー半径（およびdimaの answer -に記載されている他のパラメーターを設定できますが、残念ながら色ではありません。 CGColorおよびAppleは現在、ポップアップにそのオプションがありません）ここに示すように、ストーリーボードのidentity inspector-> user defined runtime attributesにあります：

enter image description here

ボーナス：UIButtonプレースホルダーテキストの色にランタイム属性を使用し（ here を参照）、UILabel、UITextFieldおよびUIButtonのフォントを変更します同様に（ here を参照）

90
abbood

UIButton、UILabelなどの標準iOSコントロール要素の場合、UIViewtintColorプロパティを使用する必要があります。

buyButton.layer.borderColor = buyButton.tintColor.CGColor;
17
Gideon King

あなたが説明したような単純な境界線については、CALAyerを使用してDimaからの回答を使用します。

さらに必要な場合、たとえば、グラデーション付きの丸い長方形を使用して、このアプローチをベースとして使用します：

角丸長方形を描画するカスタムビューを作成し、ボタンの上に配置します。ここで検索機能を使用して、角丸長方形の描画を検索します。描画は、半径が定義された4つの円弧（角）と4つの直線を描画することで機能します。

FTR、アレックスとブライアンごとに、正しいiOS7の角丸でUIViewを作成する方法は次のとおりです。

CGPathCreateWithRoundedRect does notが「新しい」丸みを帯びた角を与えていると確信しています。 「新しい」コーナーにはbezierPathWithRoundedRectを使用する必要があります。

#import "UIViewWithIOS7RoundedCorners.h"
@implementation UIViewWithIOS7RoundedCorners
-(void)drawRect:(CGRect)rect
    {
    // for a filled shape...

    UIBezierPath* path =
        [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:4];
    [[UIColor blueColor] setFill];
    [path fill];

    // for just a border...

    int thickness=2;
    UIBezierPath* path =
        [UIBezierPath bezierPathWithRoundedRect:
            CGRectInset(self.bounds, thickness/2, thickness/2)
            cornerRadius: 4];
    path.lineWidth = thickness;
    [[UIColor blueColor] setStroke];
    [path stroke];
    }

@end
// ps don't forget to set .backgroundColor=[UIColor clearColor]
// perhaps in initWithCoder/initWithFrame

enter image description here

enter image description here

それが誰かを助けることを願っています

8
AlexWien

参考のために、ここにApp Storeスタイルボタンを実装しました。 AS Button.m

プロジェクトは here です

助けてほしい：]

2
jianpx

@abboodの優れた答えを拡張するために、実際にはIBからビューのレイヤーの境界線の色と背景色を設定することは可能ですが、そうするには少しの準備作業が必要です。

NSViewにCALayer + setUIColor.hのカスタムカテゴリを作成しました。

境界線の色を設定するには、setBorderUIColorというメソッドが1つしかありません。 UIColorを入力として受け取り、UIColorの基になるNSColorを取得し、その色をビューのレイヤーに適用します。

次に、IBで、次のようにユーザー定義のランタイム属性を追加します。

KeyPath layer.borderUIColorタイプcolor値目的の色。

実行時にシステムはメソッドを呼び出し、IBで定義されているUIColorを渡します。カテゴリはUIColorからCGColorを取得し、レイヤーに適用します。

これは、私のgithubプロジェクトの作業プロジェクトで見ることができます。

RandomBlobs

レイヤーの背景色プロパティの設定についても同じことをしましたが、上記のプロジェクトではしません。

2
Duncan C

Swift 5.1/iOS 13では、UIButtonのサブクラスを作成して、iOS AppStoreアプリの青い丸い境界ボタンのように見えるカスタムボタンを作成できます。

次のコードは、色合いの色（UIAlertControllerの淡色表示の後ろにボタンが表示される場合）、タイトルの色、強調表示された背景色、境界線のスタイル、境界線の色、コンテンツのインセットを適切に管理する方法を示しています。

CustomButton.Swift：

import UIKit

class CustomButton: UIButton {

    override init(frame: CGRect) {
        super.init(frame: frame)
        setProperties()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setProperties()
    }

    func setProperties() {
        // Set the layer's properties
        layer.borderColor = tintColor?.cgColor
        layer.borderWidth = 1
        layer.cornerRadius = 4

        // Set colors for title's states
        setTitleColor(tintColor, for: .normal)
        setTitleColor(.white, for: .highlighted)

        // Add some margins between the title (content) and the border
        contentEdgeInsets = UIEdgeInsets(top: 5, left: 10, bottom: 5, right: 10)
    }

    override var isHighlighted: Bool {
        didSet {
            // Toggle the background color according to button's highlighted state
            backgroundColor = super.isHighlighted ? tintColor : nil
        }
    }

    override func tintColorDidChange() {
        super.tintColorDidChange()

        // When the tint color is changed by the system (e.g. when the button appears below the dimmed view of a UIAlertController), we have to manually update border color and title's text color
        layer.borderColor = tintColor?.cgColor
        setTitleColor(tintColor, for: .normal)
    }

}

ViewController.Swift：

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .secondarySystemBackground

        let button = CustomButton()
        button.setTitle("Normal", for: .normal)
        button.setTitle("Highlighted", for: .highlighted)
        button.addTarget(self, action: #selector(presentAlert(_:)), for: .touchUpInside)
        view.addSubview(button)

        // auto layout
        button.translatesAutoresizingMaskIntoConstraints = false
        button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        button.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true
    }

    /// Present alert when button is tapped
    @objc func presentAlert(_ sender: UIButton) {
        let alertController = UIAlertController(title: "Title", message: "Message", preferredStyle: .alert)
        let alertAction = UIAlertAction(title: "OK", style: .default)
        alertController.addAction(alertAction)
        present(alertController, animated: true, completion: nil)
    }

}

以下の画像は、システムtinColorが変更されたとき（UIAlertControllerの淡色表示の背後）およびhighlighted状態で、通常の状態でカスタムボタンがどのように表示されるかを示しています。

enter image description here

0
Imanou Petit

そして、abcandの答えのDuncan Cの拡張のSwiftバージョンについて：

extension CALayer {
    var borderUIColor: UIColor? {
        get {
            if let borderColor = borderColor {
                return UIColor(CGColor: borderColor)
            }
            return nil
        }
        set {
            borderColor = newValue?.CGColor ?? nil
        }
    }
}
0
Aneel