2015年8月7日金曜日

Swiftではじめるアプリ作成　storyboardでUIViewに影や角丸を設定する

  • 公開日：2015年08月07日

記事概要

Swiftを使ったアプリ作成で、storyboardでUIViewに角丸や影を設定する方法をまとめました

開発環境

  • Xcode 6.4
  • Swift 1.2

難易度

★★☆☆☆(易しい)

プロジェクトのひな形の作成

まず最初にiphoneプロジェクトのひな形から作成していきます。
今回は、AutoLayoutの記事で利用したプロジェクトをそのまま利用します。

UIViewに角丸を設定する

次に、Main.storyboradで画面UIを作成します。

上記の画面はUIViewを表示しています。このUIViewを角丸に設定します。
User-Defined Runtime Attributesの欄にkey Pathを設定します。
角丸を設定するにはlayer.cornerRadiusとlayer.masksToBoundsを設定します。

ビルドしてiphoneシュミレーターを立ち上げて画面を確認します。

UIViewが角丸になって表示されています。

UIViewに影を設定する

角丸の設定と同じで、User-Defined Runtime Attributesの欄にkey Pathを設定します。

影を設定するには、layer.shadowIBColor,layer.shadowOpacity,layer.shadowOffset,layer.shadowRadiusを設定します。

ここで大切なのは、上記で設定したlayer.masksToBoundsをfalseにすることです。
layer.masksToBoundsは、viewの境界をはみ出すかはみ出さないかを設定します。trueではみ出さないようにし、falseではみ出しますようにします。
影はviewの外側に表示します。なので、layer.masksToBoundsはfalseにする必要があります。

ビルドしてiphoneシュミレーターを立ち上げて画面を確認します。

UIViewの外側に影が表示されました。成功です。

storyboradを使ったほうがコードで書くよりも、バグの混入する確率が減ります。storyboradは積極的に利用していきたいですね。

以上です

Swiftでのiphoneアプリ開発にオススメの本

詳細swiftよりこちらの本をオススメします。
objective-cの経験がある人や、初心者から中級者までの開発者はこの本のほうが役に立ちます。
ただし、swiftはバージョンアップの速度が早いので、購入するときは自分が利用しているswiftのバージョンでも役に立つことを確認してから購入するように注意してください。

他のswiftに関する記事 参考サイト

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加
投稿者 時刻:
ラベル: ,

2 件のコメント:

登録: コメントの投稿 (Atom)
Related Posts Plugin for WordPress, Blogger...