明けましておめでとうございます。神トラ2クリアしました。 Facebook iOS Appのように、一覧をスクロールした際にUINavigationBarやUIToolbarを隠してフルスクリーン表示をするためのライブラリを作りました。 https://github.com/ninjinkun/NJKScrollFullScreen スクロールをフックしてフルスクリーン化をdelegateで通知する部分と、フルスクリーン時の動きを定義する部分を分離した設計になっています。 同じようにフルスクリーン化を行うYIFullScreenScrollというライブラリがあったのですが、UINavigationBarの移動などフルスクリーンの動きの部分が一体になっており、Facebook appぽい挙動にカスタマイズし辛かったので、動きを分離した設計のライブラリを別に作ることにしました。all-in-o
社内で書き残していた内容をブログに書き写した内容となります。個人アプリをiOS7に対応させた時に書き残した内容なので掲載画像がアレですが気にしないでください。 ①アイコンの追加対応 iPhoneで1種類、iPadで2種類増加されました。iPhoneが1種類しか必要ないのは対応バージョンに非Retinaが無いためです。 iPhone(120x120) ・Icon-60@2x.png iPad(76x76/152x152) ・Icon-76.png ・Icon-76@2x.png ②storyboardで作成した箇所のレイアウトが崩れる対応方法 Xcode4.6以前で開発していたプロジェクトをXcode5で起動し、初めてstoryboardを開いた時にstoryboardで作成した全レイアウトを自動調整してくれる。もしくは警告にそれっぽいメッセージがあるのでクリックすると自動修正されます。それ
UIAppearanceプロトコル iOS5 から UIAppearance プロトコルが導入された。このプロトコルを使うと UINavigationBar や UISwitch のインスタンスの色を変更することができる。変更の仕方はこんな感じ。 [[UISwitch appearance] setOnTintColor:[UIColor greenColor]];UIAppearance が有用なのは、上記の通りインスタンスではなくクラスに対して色設定ができること。つまりこれを使うと画面上で使われているすべての UISwitch の色を変えることができる。 例えば緑基調の画面があったとして、UIAppearance プロトコルを使うと別の色(例では赤)に変更することができる。 上記の例は1画面だけだが、アプリで使われるすべての画面で色が変わる。 上記例の色変更の箇所のコードはこんな感じ。
UINavigationBar は基本的に左右 (leftBarButtnItem, rightarButtonItem) に一つずつしかボタンを配置することができません。 しかし、ちょっと工夫をするとその制限を突破することができます。 (まあ物理的なスペースの関係でせいぜい2つか3つがやっとなのですけどね) 方法その1. UIToolbar を UIBarButtonItem として配置し、その中に UIBarButtonItem を並べる もっとも見た目がキレイに仕上がる方法です。 UINavigationBar の leftBarButtnItem と rightarButtonItem は UIBarButtonItem のインスタンスをそれぞれ1つずつしか代入できませんが、UIToolbar を UIBarButtonItem として作成することで、その UIToolbar に複
ナビゲーションバーの背景を画像にしたい。そうすることによって、アプリケーションの世界観を前面に押し出したい。たとえば「iBooks」のように。たとえば「メモ」のように。 「そんなの簡単。UIImageView を UINavigationBar に insertSubview: atIndex: すればよいだけの話」と思いきや、そうではありませんでした。ある問題があったのです。 今回は、まずその問題を明らかにし、その問題を踏まえた上で、ナビゲーションバーの背景を画像にする方法を紹介します。 ナビゲーションバーの背景を画像にするとき、真っ先に思いつくのが「UINavigationBar に UIImageView を insertSubview: atIndex: する」という方法ではないでしょうか。 // Get navigationBar UINavigationBar *navigat
iOS/iPhone/iPad/MacOSX プログラミング, Objective-C, Cocoaなど UINavigationItem の API に iOS5 から rightBarButtonItems があることに気がついた。複数形ということは...? 早速試してみた。こうすると。 UIBarButtonItem *item1 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(touched:)]; UIBarButtonItem *item2 = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCamera tar
iPhoneアプリでよく使われる、ナビゲーションバーに配置するボタン UIBarButtonItem の見た目を完全に画像にする時のテクニックです。 参考にしたページはこちら。 http://discussions.apple.com/thread.jspa?threadID=1505647 http://www.iphonedevsdk.com/forum/iphone-sdk-development/13809-uibarbuttonitem-customview-action.html http://discussions.apple.com/thread.jspa?threadID=1546506&tstart=60 ■作戦1:initWithImage てか、 UIBarButtonItem には initWithImage あるからそれでいいんじゃないか、と思ってさっそく以下の
iOS Customizing Navigation Bar and Status Bar in iOS 7 Simon Ng 4th Oct '13 104 Like many of you, I have been very busy upgrading my apps to make them fit for iOS 7. The latest version of iOS introduces lots of visual changes. From a developer’s perspective, the navigation bar and status bar are two noticeable changes that need to cater. The status bar is now transparent, that means the navigation
UINavigationController を使った場合に表示される戻るボタンには、前のビューのタイトルが自動的に表示されます。 戻るボタンの表示に画像を使用したり、任意の文字列に変更するには、遷移前のビューコントローラの navigationItem の backBarButtonItem に設定します。 このボタンが表示されるのは遷移後のビューですが、遷移前のビューコントローラに対して設定するというところに注意が必要です。 ターゲットやアクションは設定しても無視されますが、ドキュメントの通りに nil を指定しましょう。 The target and action of the back bar button item you set should be nil. UINavigationItem Class Reference - (void)tableView:(UITableV
一昨日、conferenceWithDevelopersのLTで、1行で導入するback gestureの話をしてきました。 LTの内容と、やろうとして間に合わなかったことの紹介を書きます。 1行で導入するback gesture iPhone 5が発売されて、UINavigationBarのbackButtonItemに指が届きにくくなったので、 スワイプして戻るという動作を実装するアプリが増えてきたように思います。 これを実装するにはUIGestureRecognizerを使ってあれこれするのですが、 毎回これを書くのはだるいので、UIViewControllerを拡張して 1行で導入できるようにしたライブラリを書きました。 ISBackGesture 使い方 UIViewControllerにbackGestureEnabledというプロパティが追加されているので、 これの値をY
ちょっとマニアックな情報ですが、ドキュメントのどこにも書かれていないとっておきのネタです。 Action Extension、またはShare Extensionを開発していて、UINavigationBarを利用しているという方はぜひご覧ください。 この記事は Cocoa Advent Calendar 2016 6日目の記事です。昨日の記事はnaochi___さんの[iOS] Xibを使って自前のダイアログを作るでした。 この記事では、id:kaniza さんの4日目の記事 第 70 回 Cocoa 勉強会関西に行ってきた - kanizaのブログ で触れられている、 第70回 Cocoa勉強会関西 で私が発表した内容について書きます。 "App Extension 上で UINavigationBar.appearance() が HostApp の影響を受ける問題" とは? このよ
iOS 5からちょっと様子が変わった模様。 メソッドが追加されている。 前までは @implementation UINavigationBar (UINavigationBarCategory) - (void)drawRect:(CGRect)rect { UIImage *image = [UIImage imageNamed: @"NavigationBar.png"]; [image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)]; } @end (これだと色んなところがこの画像に統一されちゃう。のがいい場合にもあるが。) をViewControllerに書き加えてオーバーライドしたりとか UIImage *navBGImage = [UIImage imageNamed:@"
UINavigationBarをUINavigationControllerではなく、UIViewController等に独自に実装する場合、以下のようにします。 // ナビゲーションバーを生成 UINavigationBar* navBarTop = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, 320, 40)]; navBarTop.alpha = 0.7f; // ナビゲーションアイテムを生成 UINavigationItem* title = [[UINavigationItem alloc] initWithTitle:@"Title"]; // 戻るボタンを生成 UIBarButtonItem* btnItemBack = [[UIBarButtonItem alloc] initWithTitle:@"Bac
いろいろと新しいAPIが追加されている。 iOS 7 : NSHipster いくつか紹介する(ソースコードは元サイトから引用)。 NSData (NSDataBase64Encoding) NSString *string = @"Lorem ip...
2012年のiOSアプリ開発の振り返り | Technology-GymでUIAppearanceが便利だということを書いていましたが、実際にナビゲーションバーにUIAppearanceを使った画像の適応例を見て行きたいと思います。 例えば、UIAppearanceを使えばナビゲーションバーの背景画像などを一括で指定することができますが、ナビゲーションバーといってもnavigationItem.promptを設定したりすると高さが変わったりします。 こういう場合に固定サイズの画像のままでは、背景画像を適応しにくいので、resizableImageWithCapInsetsを上手く使い解決していくサンプルです。 azu/AppearanceWithResizableImageWithCapInsets · GitHub 上記のような見た目にカスタマイズするために、ナビゲーションバーの背景やU
サンプルとして UINavigationController の rootViewController に UITableViewController を設定したものを使う。 UINavigationItem に適当にボタンを設定して UITableView の tableViewHeader に UIImageView を aspectToFill で入れて画像を設定。 Storyboardはこんな感じ ビルドするとこうなる 単純に UINavigationBar を非表示にしたい時は [self.navigationController setNavigationBarHidden:YES animated:YES]; 透明にしたい時は空の画像を背景に設定してやる。 [self.navigationController.navigationBar setBackgroundImage:
2011年8月2日 This article is written by Uka. 画面サイズ W320 H480 ステータスバー W320 H20 UINavigationBar W320 H44 UITabBar W320 H48 タブバーのカスタムアイコンサイズは 日本版のiPhoneヒューマンインタ−フェイスガイドラインでは【30×30ピクセル】(高解像度では60×60ピクセル) 海外版では【48×32ピクセル以下】(高解像度では96×64ピクセル以下) となっているみたいです。 SM診断で使ったカスタムアイコンのサイズは30×30ピクセルで作りました。 UIToolbar W320 H44 Keyboard W320 H216 画面サイズ W480 H320 ステータスバー W480 H20 UINavigationBar W480 H32 UIToolbar W480
iOS5以前でUINavigationBarの背景に画像を使用する際には、いくつか方法がありました。 例えば以下の画像(navibar.png)を適用したい場合[navibar.png] よく利用していたパターン2つを参考としてあげます。 【NavigationBarカテゴリでdrawRect】 @implementation UINavigationBar (UINavigationBarCategory) - (void)drawRect:(CGRect)rect { UIImage *image = [UIImage imageNamed:@"navibar.png"]; [image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)]; } @end 【NavigationBarにi
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
For iOS 13: Use the .shadowColor property If this property is nil or contains the clear color, the bar displays no shadow For instance: let navigationBar = navigationController?.navigationBar let navigationBarAppearance = UINavigationBarAppearance() navigationBarAppearance.shadowColor = .clear navigationBar?.scrollEdgeAppearance = navigationBarAppearance For iOS 12 and below: To do this, you shoul
UINavigationControllerを使いたいんだけど、UINavigationBarが邪魔な時。下の一行を追加すればよいです。 `self.navigationController.navigationBar.frame = CGRectZero;`
ナビゲーションバーのタイトルタップを検知する 情報があまりなかったので共有。 ハマりポイントは以下のとおり。 UILabel の userInteractionEnabled はデフォルト false サンプルコード // タイトルを表示するラベルを作成 let label = UILabel() label.text = "Title" label.sizeToFit() // タップジェスチャーを設定 let gestureRecognizer = UITapGestureRecognizer(target: self, action: "tapped:") label.addGestureRecognizer(gestureRecognizer) // チクショー label.userInteractionEnabled = true // ナビゲーションバーの titleView
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
iOS7から画面上部のステータスバーの扱いが微妙に変わって、ステータスバーの後ろにも背景画像などを指定できるようになりました。 こういう感じですね。 方法としては float version = [[[UIDevice currentDevice] systemVersion] floatValue]; if (version >= 7.0) { // iOS7の時 [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"bg_navigation_bar_64.png"] forBarPosition:UIBarPositionTopAttached barMetrics:UIBarMetricsDefault]; }else{ // iOS6以下の時 [self.navigati
iOS5から、ナビゲーションバーやタブバーなどを一括設定で設定できるようになりました。このことで、背景の色や文字色、背景画像を使ったりとバリエーションを簡単に増やすことができるようになっています。 ナビゲーションバーの背景画像を設定全てのビューに適用させたいので、AppDelegate.mに記述して一括設定します。起動直後に動くdidFinishLaunchingWithOptionsの中に設定を記述します。 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { UIImage *image = [UIImage imageNamed:@"back.png"]; [[UINavigationBar appearance] s
こんにちは、@yoheiMuneです。 今日は、NavigationBarのタイトルを2行で表示する作り方をブログに書きたいと思います。 ナビゲーションバーのタイトルを2行で表示するデザイン 色々なiPhoneアプリを使っていて、ナビゲーションバーを2行で表示しているアプリを発見!! 新しいデザインで良いなぁと思ったので、さっそく参考にしながら実装してみました。 通常のナビゲーションバーのタイトルは、1行で以下のように表示されるかと思います。 このタイトルを2行表示したサンプルとして、今回は以下のようなUIを実装します。 タイトル上側がページのタイトル、タイトル下側がタスクの進捗状況を表すラベルを2行で表示しています。 ナビゲーションバーのタイトルをカスタマイズ!! ナビゲーションベース(UINavigationControllerを使ったアプリ)では、通常以下のようにナビゲーションバーの
NavigationItem の BarButtonItem をカスタマイズする Navigation Controller は画面遷移をコードを書かずにサポートしてくれるのでよく使います。 戻る際のボタンも NavgitationItem の title プロパティの値を自動で設定してくれたり便利ではありますが、 title プロパティを設定しない場合、下記のように "Back" と表示されてしまいます。 ここのテキストの内容を変更したい場合、新たに UIBarButtonItem を生成する必要があります。 UIBarButtonItem *barButton = [[UIBarButtonItem alloc] init]; barButton.title = @"戻る"; self.navigationItem.backBarButtonItem = barButton; ポイント
In the new iOS7 Facebook iPhone app, when the user scrolls up the navigationBar gradually hides itself to a point where it completely vanishes. Then when the user scrolls down the navigationBar gradually shows itself. How would you implement this behavior yourself? I am aware of the following solution but it disappears right away and it isn't tied to the speed of the user's scroll gesture at all.
iOS 11で追加されたUINavigationItemのsearchControllerプロパティ iOS 11でUINavigationItemに追加されたsearchControllerプロパティを使用すると簡単にUINavigationBarにSearchBarを統合することができます。 ここで「統合」と表現したのは、「ナビゲーションバーに埋め込まれたように表示することができる」という意味です。 検証環境 本エントリは以下の環境で検証を行っています。 macOS Sierra バージョン 10.12.6 Xcode Version 9.0.1 (9A1004) Swift 4 iPhone X シミュレーター iOS 11.0 こんな見た目になります 先にこのプロパティを使ってSearchBarを表示した結果を載せておきます。 ご覧のようにナビゲーションバーに埋め込まれる形でSea
NavBar demonstrates using UINavigationController and UIViewController classes together as building blocks to your application's user interface. Use it as a reference when starting the development of your new application. The various pages in this sample exhibit different ways of how to modify the navigation bar directly, using the appearance proxy, and by modifying the view controller's UINavigati
iOS iOS Programming 101: How to Customize Navigation Bar and Back Button Simon Ng 29th Dec '12 29 Previously, in our iOS Programming 101 series, we showed you how to customize the appearance of the Tab Bar. In this tutorial, we’ll continue to talk about UI customization and cover how to use Appearance API to make the Navigation Bar more beautiful. Here are what you’ll learn in this tutorial: Custo
UIViewContorollerのnavigationItem.titleViewに、タイトルを2行表示するためのUILabelを設定してから、UINavigationControllerにpushすれば良い。 以下のソースコードをコピーすれば、ラベルのサイズや文字のスタイルを調整する手間が省けます。 UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 480, 44)]; label.backgroundColor = [UIColor clearColor]; label.numberOfLines = 2; label.font = [UIFont boldSystemFontOfSize: 14.0f]; label.shadowColor = [UIColor colorWithWhite:0.0 a
iOS NavigationBarのタイトルにUILabelを配置してカスタマイズする。 2013年9月17日 Tryworks-Design Label, UINavigationController NavigationBarのタイトルが長過ぎたりすると、NavigationBarの中には収まりきらずに最後まで文字が表示されなくなってしまう。そんな時に文字のサイズなどを変更する時は「UILabel」をNavigationBarに配置する方法でカスタマイズするといい。 //ラベルを生成 UILabel* navigationTitle = [[UILabel alloc] init]; //ラベルの大きさと位置を調整 navigationTitle.frame = CGRectMake(0,10,320,25); navigationTitle.text = @"初心者からアプリ開発は
現象 UINavigationBarがあるViewControllerにScrollViewを全画面で置いて、 UIコンポーネントを置いていきました。 しかしStoryBoadの表示位置とビルドした時のiPhoneの画面がどうしてもずれる。 その解決方法を調べました。 UIコンポーネントの階層は View(rootView) ScrollView View(コンテンツビュー) IBコンポーネント(実際に配置するコンポーネント) (20150719日追記) AutoLayoutの設定はVisual Format Languageで表すと H:|-(-16)-[ScrollView]-(-16)| ScrollViewの水平位置はrootViewの左右の端(左右は16ポイントのマージンがあるので-16を指定) V:|-[ScrollView]-| ScrollViewの垂直位置はrootVie
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く