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

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

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

【iOS Swift入門 #276】UITabBarの真ん中のボタンを強調表示する方法のサンプル

この記事を読んでわかること

  • UITabBarの真ん中のボタンを強調表示する方法

はじめに

タブバーの真ん中だけ大きく表示されていたり、
真ん中以外のボタンとは表示が異なるようなデザインを見かける。

例えば、Money Forwardという家計簿アプリでは、 真ん中のボタンを強調して表示するようになってる。 f:id:fjswkun:20160326114401p:plain

どのように実現するのか考えてみた。
方法はいくつもあるのだろうけど、
最もシンプルな方法はUITabBarの上にUIButtonを置く方法です。

下記、その実装を書いてみました。

実装

1. UITabBarControllerのサブクラスを作成します

「BigCenterTabBarController」という名前で作成しました。

import UIKit

class BigCenterTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

2. UITabBarの真ん中に置くUIButtonを作成します

BigCenterTabBarControllerにUIButtonを作成する処理を書きます

// タブ真ん中のボタン作成
private func setupBigCenterButton(){
    let button = UIButton(type: .Custom)
    button.setBackgroundImage(UIImage(named: "center_button") , forState: .Normal)   // TODO:画像の用意
    button.sizeToFit()
    button.center = CGPoint(x: tabBar.bounds.size.width / 2, y: tabBar.bounds.size.height - (button.bounds.size.height/2))
    button.addTarget(self, action: "tapBigCenter:", forControlEvents: .TouchUpInside)
    tabBar.addSubview(button)
}

// タブ真ん中を選択する
func tapBigCenter(sender:AnyObject){
    selectedIndex = 2;
}

3. 作成したUIButtonを表示する

BigCenterTabBarControllerにUIButtonを作成する処理を書きます
viewDidLayoutSubviewsをオーバーライドして、その中に書きます。
※UITabBarが描画されたあとでないと思った通りの表示になりません。

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    
    // タブ真ん中にボタンを置く
    setupBigCenterButton()
}

上記手順1と2、3を終えた後のBigCenterTabBarController

import UIKit

class BigCenterTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        
        // タブ真ん中にボタンを置く
        setupBigCenterButton()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    // タブ真ん中のボタン作成
    private func setupBigCenterButton(){
        let button = UIButton(type: .Custom)
        button.setBackgroundImage(UIImage(named: "center_button") , forState: .Normal)   // TODO:画像の用意
        button.sizeToFit()
        button.center = CGPoint(x: tabBar.bounds.size.width / 2, y: tabBar.bounds.size.height - (button.bounds.size.height/2))
        button.addTarget(self, action: "tapBigCenter:", forControlEvents: .TouchUpInside)
        tabBar.addSubview(button)
    }
    
    // タブ真ん中を選択する
    func tapBigCenter(sender:AnyObject){
        selectedIndex = 2;
    }
}

実行

上記手順以外にもStoryboardなどを使って画面を構成する必要があります。
そこは省略します。 詳しくはサンプルを↓に保存していますのでそちらを確認してください。
SampleTab.zip - Google ドライブ 以下サンプルを実行してみます。

1. アプリ起動

f:id:fjswkun:20160326123032p:plain

2. 真ん中のボタンをタップ

f:id:fjswkun:20160326123049p:plain


参考情報

Swift

iOSアプリ開発未経験の人向け
iOSアプリ開発をはじめたとき最初に買った書籍 【アプリ作成未経験の人向け】
Storyboardを使って画面を作成していく。
手順にしたがって操作していくと、ボタンの作成やWebViewの作成などができる。
アプリって、こんな感じで作るんだというのを体験できる。

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】


・わかりやすくていい、と聞いた本
立ち読みした感じだと【アプリ作成未経験の人向け】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】

絶対に挫折しない iPhoneアプリ開発「超」入門【Swift & iOS8.1以降 完全対応】


②を終えたくらいの知識の方向け
・アプリ開発独学中に2冊めに購入した書籍
プログラミング知識はなくても、若干理解するのに時間がかかる程度で、
読み進められるわかりやすさがある。

iPhoneアプリ開発塾

iPhoneアプリ開発塾


③中級者、上級者向け

詳解 Swift

詳解 Swift

詳解 Swift 改訂版

詳解 Swift 改訂版