読者です 読者をやめる 読者になる 読者になる

Swift,Objective-Cプログラミング ~ iOS ~

Objective-C,Swift,Apple Watchなどのプログラミング

【iOS Apple Watch,watchOSプログラミング入 #006】Buttonの中にラベルを入れて使うと便利。短縮表示と全文表示の切り替えをやってみる

はじめに

AppleWatchのラベルやボタンなどのレイアウト部品はiOSアプリのものとは異なる。 ボタンの中にラベルなどのレイアウト部品を入れることができる。

1. プロジェクト作成

下記記事を参考にプロジェクトを作成します。

swift.swift-studying.com

2 画面レイアウトを作成

Interface.storyboardファイルを開きます。

①画面にボタンを配置します

f:id:fjswkun:20151121120638p:plain

②ボタンをGroupに変更します

f:id:fjswkun:20151121120741p:plain

③ボタンの中にあるGroupのLayoutをVerticalに変更します

f:id:fjswkun:20151121120731p:plain

④ボタンの中にあるGroupにLabelを3つ配置します

f:id:fjswkun:20151121121111p:plain

⑤一番上のラベルを設定します

Textの文言を変更しました

f:id:fjswkun:20151121121258p:plain

⑥上から2番めのラベルを設定します
  • Textの文言を変更しました
  • Linesを0に変更しました
  • Hiddenにチェックを入れました

f:id:fjswkun:20151121121529p:plain

⑦上から3番めのラベルを設定します
  • Textの文言を変更しました
  • TextColorをLight Grayに変更しました
  • fontをfootnoteに変更しました
  • HorizontalをRightに変更しました

f:id:fjswkun:20151121121816p:plain

⑧3つのラベルが入っているGroupのColorを変更します

Dark Grayに変更しました

f:id:fjswkun:20151121122005p:plain

⑨作成した3つのラベルをソースにIBOutlet接続します

f:id:fjswkun:20151121122348p:plain

⑩ボタンをソースにIBAction接続します

f:id:fjswkun:20151121122445p:plain

2. ソースを書く

import WatchKit
import Foundation


class InterfaceController: WKInterfaceController {
    var isAll = false
    @IBOutlet var shrinkMessageLabel: WKInterfaceLabel!  // 1番目のラベル
    @IBOutlet var allMessageLabel: WKInterfaceLabel!  // 2番目のラベル
    @IBOutlet var footnoteLabel: WKInterfaceLabel!  // 3番目のラベル

    override func awakeWithContext(context: AnyObject?) {
        super.awakeWithContext(context)
        
        // Configure interface objects here.
    }

    override func willActivate() {
        // This method is called when watch view controller is about to be visible to user
        super.willActivate()
    }

    override func didDeactivate() {
        // This method is called when watch view controller is no longer visible
        super.didDeactivate()
    }

    @IBAction func onExpand() {
        // 短縮表示であれば、全文表示にする。
        // 全文表示であれば、短縮表示にする。
        isAll = !isAll
        shrinkMessageLabel.setHidden(isAll)
        allMessageLabel.setHidden(!isAll)
        
        footnoteLabel.setText(isAll ? "小さくする" : "すべて読む")
    }
}

3. 実行

実行します。

f:id:fjswkun:20151121122622p:plain

ボタンを押すと全文表示されます。
f:id:fjswkun:20151121122628p:plain

おわりに

うまく動かなかった方はこちらからサンプルをダウンロード。

SampleButtonGroup.zip - Google ドライブ

参考情報

サイト

swift-studying.com

swift-studying.com

swift-studying.com

swift.swift-studying.com

Swift

iOSアプリ開発未経験の人向け
iOSアプリ開発をはじめたとき最初に買った書籍

Swiftではじめる iPhoneアプリ開発の教科書 【Swift 2&Xcode 7対応】【特典PDF付き】 (教科書シリーズ)


②中級の日本語書籍はない。英語だけど読むとかなりのレベルアップが期待できます

iOS 8 Swift Programming Cookbook: Solutions & Examples for iOS Apps


③機能を作るだけじゃない。質のいいものを作りたい人は読まないといけない。

詳解 Swift