swift マテリアルデザイン ボタン

完成形

f:id:happy_teeth_ago:20191109091442g:plain

マテリアルデザインを読み込む

マテリアルデザインのios版の資料 github.com

podファイルに記載

 pod 'MaterialComponents'

その後

pod install

これでマテリアルデザインが利用できるようになります。
例えば下記のように、ストーリボードからマテリアルデザインのカスタムクラスを選択できます。

ボタン選択時にカスタムクラスを設定しておく

f:id:happy_teeth_ago:20191109090859p:plain

あとは、色、背景色を記載していきます。

公式サイトのドキュメント

material.io

//ライブラリを読み込みます。
import MaterialComponents


//普通にストーリボードと接続します。
  @IBOutlet weak var mybutton: MDCButton!
    
    @IBOutlet weak var raisedButton: MDCRaisedButton!
   
    @IBOutlet weak var floatingButton: MDCFloatingButton!


//一番上のフラットボタン
mybutton.setTitleFont(UIFont.boldSystemFont(ofSize: 21), for: .normal)
        mybutton.setTitle("Flatbutton", for: .normal)
        mybutton.sizeToFit()
        
        //raisedボタン 
        raisedButton.setTitleColor(UIColor.white, for: .normal)
        raisedButton.setTitle("RaiseButton", for: .normal)
        raisedButton.sizeToFit()
        
//floatingボタン
        floatingButton.setTitle("+", for: .normal)
        floatingButton.sizeToFit()

IBOutletで接続しているだけなのに、動きを加えてくれる。

ポイントIBActionを接続する前に、必ずIBOutletを接続しておかないといけない。

インスタンスの生成を読み取っているようだ。