*

UIButtonに枠線や角丸を簡単につける方法(Xcode)

公開日: : 最終更新日:2015/12/21 アプリ開発 , , ,

「神は細部に宿る」(God is in the detail)

そんな事を言ったのは1930年代に活躍した、ミース・ファン・デル・ローエという建築家です。合理主義、機能主義を掲げ、バウハウス・デザインを確立した彼は、更に、「Less is more」(少ないほど豊かである)という名言も残してますね。う〜ん、現代のミニマルデザインに共通する考え方ですねぇ。

……と、前置きは置いておいて、今回はUIButtonに関して、私が良くやる小技?を紹介します。もちろん、「こんなの常識だろ!」という人も多いと思いますが、たまには技術的な事も説明していきたいと思います。細部にこだわる事で、もしかしたらあなたのアプリのデザインも豊かになるかもしれません。

ちなみに、今回はXcode(objective-c)の話ですので、Androidはまた別の機会にでも(Androidの方はちょっと面倒くさいかもですが)

後、Xcodeのバージョンは7.1.1です。(未来の人ごめんなさい)

スポンサーリンク

まずはボタンを配置してみる

ボタンをストーリーボードにドラッグ

とりあえずボタンを配置してみましょう。なんとなくグリッド線に沿って真ん中に配置したとします。

ずれたUIButton

配置した後にiPhone6plusのエミュレーターを起動してみると、何となくずれているのがお分かりでしょうか。

はい、実はこれ、AutoLayoutとAutoSizeを切っているからなのです。Storyboardに戻ってサクッと直しちゃいましょう。

左と上に設定されたAutoresizing上下左右に設定されたAutoresizing

ユーティリティーエリアでAutoresizingを右の図のように直して……

真ん中に配置されたUIButton

これで前座が終わり、ようやくボタンが真ん中に来ました。(わかりやすいように赤枠で囲ってます)

でもこれじゃあなんだか退屈ですよね。そもそも背景が透過してるからボタンだっていうのもわかりづらいし……

ユーティリティーエリアを背景透明に

というわけで背景を黒にして、中の文字も「BUTTON」から「TAP」に変えて見ましたが……

黒背景でわかりにくいUIButton

う〜ん……サイズをユーティリティエリアからサイズを変更してみましょう。

適切なサイズの黒背景UIButton

ようやくボタンらしくなりました!

……でも待って下さい。これじゃあ全然ボタンっぽくないですよね? (そもそも色がイケてない……)

というわけで背景を青っぽくしてコードから色々いじって見ましょう!

 

ボタンに枠線をつける

では、ストーリーボードから該当のヘッダーにctrlを押しながらボタンをドラッグしていきましょう。

正式名称は知りませんが、私はこれを「ボタンのIDを登録する」と呼んでいます。ちなみにIDは被らなければ何でもいいです。

 

ボタンにIDをつける

Connectボタンを押すと

紐付けられたボタン

ボタンが紐付けできました!

では、ソースの方をいじってみましょう。Viewを角丸にするのは、以下のコードです。(ViewDidLoadに突っ込むとよし)

 

何かが足りないUIButton

でも何だか足りませんね。単純に枠のサイズが……という話ではなく何かが……

そうだ! 角丸にしよう!

 

ボタンを角丸にして見る

 

というわけで更に角丸にして見ましょう。コードに追記します。

あともう少しのUIButton

だいぶボタンっぽくなりましたね。後は中の文字のサイズと角丸の半径を追加して見ましょう。ついでにフォントなんかも修正したいところですね。

ボタン内のテキストのサイズを変える

フォントをいじったり、cornerRadiusを10にしてみたり、フォントをFuturaにしてみたりして……

完成したUIButton

これで大分オシャレになりましたね。

一つのボタンを角丸にしたら、そのアプリ内では全てのボタンを角丸にする、とか統一感あった方がデザイン的にはグッドだと思います。

ちなみに、この角をクリップする(直訳)

こいつが無かった場合どうなるかと言うと、

クリップがされていないUIButton

ボタンの背景に画像を使うと良くわかりますが、背景画像を丸めてくれません!

なので、ボタンに背景画像を多用する方々は、お気をつけください。

 

まとめ

さて、どうだったでしょうか?

意外とめんどくさく感じますが、慣れれば結構簡単にできるものですので、少しでも見栄えを良くするためにもぜひぜひ検討して下さいませ。

 

スポンサーリンク

コード左

コード左

関連記事

nendロゴ

nendのネイティブアドを初心者でもアプリに実装できる手順(準備編)

※当記事は、nendのネイティブアドをSDKで実装してみたい人のための記事です。  

記事を読む

nendロゴ

nendのネイティブアドを初心者でもアプリに実装できる手順(実装編)

※当記事は、nendのネイティブアドをSDKで実装してみたい人のための記事です。  

記事を読む

iPhoneとキーボード

アプリのダウンロードを増やすために必要な「5感」

かれこれ2年以上もアプリ開発で失敗だらけの私が考える、 「アプリのダウンロード数を伸ばすために

記事を読む

ようこそGoogle商事へ

アプリでplistを使うなら是非とも使いたいエクセルの小技3選

plistファイルは便利ですが、大量の文章や、設定などを書き込む際は非常に大変です。 xcod

記事を読む

草原に立つ木

アプリのマーケットを知ればターゲットは明確になる

「木を見て森を見ない」 仕事をしているとこんな言葉を聞いた事があるでしょうか? (ええ

記事を読む

天を仰ぎ見るビジネスマン

ユーザーにアプリをダウンロードしてもらうための6つの基本(ASO)

せっかくアプリを作ったのにダウンロードされない。そんな経験をした事がある人は多いと思います。

記事を読む

ゲームを遊ぶ女性

アプリ行動心理学〜部分強化効果でユーザーを中毒に〜

作ったアプリを継続してプレイしてもらいたい。アプリを作る人なら誰でも思う事だと思います。そん

記事を読む

電卓とお金

ソシャゲなどの課金ゲームでアプリ内課金をさせたくする方法

人間ってのは本能的に違和感を避けて、統一感を求める生き物だそうです。ええ、そうだと思います。

記事を読む

キンググローリーのログインボーナス画像

ログインボーナスなどでモチベーションが下がってしまう理由

いつも評価されてたビジネスマンが上司が変わって評価されなくなる事ってありますよね。 「

記事を読む

ウザすぎる天使と死んだ僕のアイコン

実話や恋愛を元に泣ける話を作り、ユーザーの心を動かす方法

どこまでも論理的な人など存在せず、ザ・ロジカル人間と言われる人にも感情が宿っています。

記事を読む

Message

メールアドレスが公開されることはありません。

麻婆豆腐
コンビニの麻婆豆腐を食べ比べてみた

では、今回は大手コンビニである ファミリーマート、セブンイレブン、ロ

会議の資料
【仕事術】情報の共有には紙やホワイトボードの方がいい場合もある

お久しぶりです。 今抱えている案件がひとまず落ち着いたので、久しぶり

オートミール
ダイエットの救世主!オートミールの美味しい食べ方について

今回は個人的に最強のダイエット食材であると思われるオートミールをいかに

諸葛亮孔明の出師の表から学ぶ、誰かを説得する文章のコツ

今回は諸葛亮が北伐(魏への遠征)に向かう際に、皇帝の劉禅に向けた書いた

大きく手を丸にして承諾するビジネスマン
日本人がつくづくイエスマンだと思う理由

今日はふとした疑問からひょんなことを思いついたので書いていきます。

→もっと見る

  • 当ページの管理人のShaneです。元コンサルタント。今はしがないフリーランス。アプリ開発をしながら人々の役に立つ駄文を垂れ流してます。
PAGE TOP ↑