仙台からこんにちは。MIRAILのiOS/Androidアプリを担当しておりますasmzです。 はじめに さて今回ですが、2ヶ月前くらいに「Sendai Frontend Meetup #2」という仙台のWebフロントエンド技術関連勉強会に登壇させていただいたので、そこで発表した内容をブログ用に再編集してご紹介いたします。 sfeug.connpass.com 私はアプリエンジニアということで、そもそもWebフロントエンド勉強会で何を話すんだ？となるわけですが、本エントリのタイトルにも書いた通り、今回はアプリの話ではなくApple Human Interface Guidelines（以下HIG）についてです。 HIGというもの自体は、iOSアプリ開発者以外の人でもどこかで耳にすることはあるかと思いますが、実際にちゃんと中身まで読む人はあまり多くないかなと思います。 ただ、実はiOSアプリ

はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想

Androidが登場したときから、UIを作るにはXMLを使うのが普通でした。理屈ではJavaを使ってUIをプログラムできますが、あまり実用的ではありません。最近、ジェットブレインズがJava仮想マシンをターゲットとした近代的な言語Kotlinを開発しましたが、AndroidのUIプログラミングに役立ちそうです。 ジェットブレインズはより高速で使いやすいAndroidの開発スタイルとしてAnkoを発表しました。KotlinはAndroidの画面をデザインするために、DSL（ドメイン固有言語）としてAnkoライブラリーを提供しています。簡単な例を示します。 imageViewとButtonからなる簡単なAndroidのUIを次に示します。 Ankoのコードは次のようになります。 verticalLayout{ imageView(R.drawable.anko_logo). lparams(w

UITableViewの上にUIButtonをスクロールせず固定して表示する方法！ こんにちわ！ Railsエンジニアの @hbd225 です。 最近は仕事のあとswift書いてたりですので、swiftネタです！ 初めてAirbnbのアプリを見たときは細かいところまでUIが作り込まれててすごいなーと感動したものですが、Airbnbの検索アイコンやメルカリの出品ボタンなど、UITableViewの上にボタンがスクロールされず固定されて表示されてる感じの素敵なUIをよく見かけますので、実装方法について調べてみました！ 先に結論 UITableView のセル上に直接ボタンを追加しても、スクロールすると画面外に消えてしまいますので、ContainerView を配置して Embed segue で UITableView を繋いで実装することで、ContainerView の上に固定されてスクロ

[Swift][OSS] iOS 9以上でAuto Layoutの制約が簡潔に書けるTinyConstraintsを試してみた はじめに 最近、離乳食でハチミツを食べていた男の子が乳児ボツリヌス症で亡くなったニュースに心を痛めている加藤です。悲しすぎますね... さて、今回は記事執筆時点でStarの数が1400を超えているTinyConstraintsというSwiftのライブラリが良さげだったので試してみました。 検証環境 本記事は以下の環境で検証を行っています。 macOS Sierra バージョン 10.12.4 Xcode Version 8.3 (8E162) iPhone 7シミュレータ iOS 10.3（14E269） Swift 3.1 CocoaPods バージョン 1.2.0 TinyConstraintsとは TinyConstraints is the syntact

[iOS] 遷移元の画像が遷移先にズームイン・アウトするような画面遷移(UITableView及びUICollectionViewの場合) 2 画面遷移のカスタマイズ present modallyで画面遷移をカスタマイズする手順は、下記のとおりです。 遷移を表現するクラスを作成　UIViewControllerAnimatedTransitioning 1.を指定するdelegateクラスを作成　UIViewControllerTransitioningDelegate 遷移先ビューのtransitioningDelegateに、2.を設定する 今回は、1.及び2.を実装したクラスCustomTransitionを作成しました。 class CustomTransition: NSObject, UIViewControllerTransitioningDelegate, UIViewC

1 はじめに iOS 8以降で利用可能な、UIPresentationControllerを使用すると、ViewControllerのモーダルのような画面を自由に表示することが可能です。 [iOS 8] UIPresentationController でカスタムのモーダル表示を実装する 今回は、あえて、UIPresentationControllerを使用せず、通常の画面遷移の実装を修正していくことで、このようなバックを透過させたモーダルビューを幾つか試してみたいと思います。 題材としては、次のようなUICollectionViewから選択した画像を、モーダルビューで拡大表示するというような、簡単なサンプルを用意しました。 2 半透明 バックを半透明にして、遷移元のビューが見えるような表現と言うことで、とりあえず、遷移先のビューのbackgroundColorのalpha値を変更します。

クラスの準備 管理元クラス(ButtonBarPagerTabStripViewController) ViewControllerたちを管理するButtonBarPagerTabStripViewControllerを継承したクラスを用意します。 import UIKit import XLPagerTabStrip class MainViewController: ButtonBarPagerTabStripViewController { override func viewDidLoad() { super.viewDidLoad() } override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] { //管理されるVie