In this post, I’ll describe how to build UICollectionView with snapping and scaling like Smart Stack in iOS 14.

Image for post
Image for post

At the end, you’ll have the following:

Image for post
Image for post

The finished project is available on GitHub.

Appearance

So first, create a custom collection view cell and register it to the collection view. I won’t explain everything in detail but you can browse all code on GitHub. Override collectionView(_:layout:sizeForItemAt:) and return the size of the collection view to display only one cell at the time.

In this step, you’ll get the following:

Image for post
Image for post

Custom Layout

We’ll get snapping and scaling effects by a custom layout class. Create a subclass of UICollectionViewFlowLayout and change the layout of the collection view to it. …


本記事では、SwiftUIを用いた “ミュージック” アプリUIの実装と、SwiftUIを用いてアプリ開発を行った場合の利点と課題を考察します。

Image for post
Image for post
Photo by Travis Yewell on Unsplash

再生中バーの実装

タブの上にあり、再生中の曲が表示されているバーを指します。タップでプレイヤーの画面がモーダルで表示されます。

Image for post
Image for post
SwiftUIで再現した再生中バー

今回は再生中バーを含むカスタムタブを実装し、ZStackでViewの上に重ねています。

Tabのselected表示は、@Bindingを用いて連動させます。

背景のBlurは、UIViewRepresentableプロトコルでUIVisualEffectViewを用いて実装しています。

はじめはデフォルトのTabViewを実装し、その上にoverlayでNowPlayingViewを重ねる方法を取っていましたが、以下の2つの理由から上記の実装に変更し …


本記事では、UIScrollViewのプロパティであるadjustedContentInsetの挙動について解説します。

UIScrollView

UIScrollViewは、内部にスクロール可能なコンテンツ(= contentView)を持つ部品です。UIScrollViewは言い換えれば「窓」であり、その窓をスクロールさせて中にあるコンテンツを見ているような仕組みです。窓の大きさはUIScrollViewのサイズで、窓の移動可能領域はcontentViewのサイズです。

Image for post
Image for post
引用: Scroll View Programming Guide for iOS

contentInsetとはcontentViewに挿入される余白で、窓の移動可能領域を増やしたり減らしたりすることができます。以下は、左右に50px分のcontentInset を追加した例です。

Image for post
Image for post

adjustedContentInset

iOS 11より、UIScrollViewはconte …


本記事では、URLリンクを含むUITextViewについて解説します。

NSAttributredString

.linkキーを用いることで、リンク箇所が青文字で表示されます。また、.linkキーを持つUITextViewが選択可能かつ編集不可の時、そのリンクはインタラクティブになり、タップ時にブラウザを開く・長押し時にプレビュー表示などの挙動が有効化されます。

textView(_:shouldInteractWith:in:interaction:)

リンクに対してジェスチャを受け取った際に呼ばれるメソッドで、インタラクションを許可するかどうかを返します。trueを返した場合、タップ時は、有効なURLの場合はデフォルトブラウザが開かれます。長押し時はプレビューとその他のアクションが表示されます。

Image for post
Image for post
UITextView内のリンク長押し時のプレビューとアクションリスト

Safariで開く以外の挙動を行いたい場合などは、このメソッド内に行いたい処理を記述し、falseを返すことで実現します。引数のUI …


私は普段iOS開発をしていますが、インターンシップでWeb開発のチームに配属されたり、大学でFlutterのプロジェクトを任されたりしたこともあります。それぞれ締切が存在し、短期間で技術を学びプロジェクトを遂行する必要がありました。本記事では、そうした状況で行う自分なりの新しい技術の学び方をまとめます。

Image for post
Image for post
Photo by Jerry Zhang on Unsplash

前提

  • クライアントサイドの技術
  • 他の技術を習得している(プログラミング経験者)

クライアントサイドの新しい技術を習得するにあたって、一番に学ぶべきはUIの扱い方です。すでに他の技術を習得していれば、ロジックの部分は問題なく書ける、もしくは検索が容易にできると思います。一方でUIはフレームワーク独自の概念や単語が多く、初めは調べることすら非常に難しいです。ガイドラインを読むこともできますが、量が多く求める機 …


本記事では、スクロール可能でinvisibleになりうるFormFieldの取り扱いについて解説します。

Image for post
Image for post
Photo by Tobias Keller on Unsplash

以下のような登録画面を作るとします。「利用規約」を開くと長い文章が表示されます。

Image for post
Image for post

この画面は以下のように実装されています。

ExpansionTileを開いた状態の時、上部のTextFormFieldは画面外に出ます。この状態で起こりうる問題を解説します。

再描画時に値が書き換えられてしまう

非表示にされたり、ListViewの要素が画面外にスクロールされたりした時、つまりInvisibleな状態になると、そのwidgetはdisposeされます。再び表示される際には初期化されるため、それまでの値が書き換えられてしまいます。

Image for post
Image for post
スクロールすると、TextFormFieldに入力していた値が消える

この問題は、下記の方法で解決することができます。

  • 変更を保存し、initialValueに設定する
    Fo …

本記事では、iOS向けのライブラリを自作するにあたり、はじめに知っておきたいポイントをまとめています。

Image for post
Image for post

NewYorkAlert

Alert / Action sheetを表示するiOS向けライブラリを公開しました。主に以下の特徴があります。

  • Alert / Action sheetの両方に対応
  • シンプルなデザイン
  • Text fields / 画像を簡単に追加できる
  • ダークモード対応

自作ライブラリの作成・公開を通して、はじめに知っておきたかったポイントをまとめます。

プロジェクト構成

ライブラリ作成のプロジェクト構成には

  • ライブラリのソースコードとデモアプリのproject
  • ライブラリのprojectとデモアプリのproject

など様々ありますが、最終的には

  • 1 projectにライブラリのFramework+デモアプリのTarget

を採用しました。

Image for post
Image for post

理由は …


本記事では、UIPercentDrivenInteractiveTransitionを用いてインタラクティブな遷移を実装する方法を解説します。

トランジションのカスタマイズ方法

1. 遷移先のVIewControllerのサイズをカスタマイズする / 遷移時のアニメーションを簡易的にカスタマイズする→ こちら
2. 遷移時のアニメーションをカスタマイズする → こちら
3. 遷移をインタラクティブにする → 本記事

インタラクティブ・トランジション

インタラクティブな遷移とは、ユーザの操作に合わせて遷移のアニメーションが追従するものです。例えば、純正の写真アプリで見られるズームイン・ズームアウトによる遷移もインタラクティブなものです。

Image for post
Image for post

また、ナビゲーションバーに実装されているスワイプバックもインタラクティブな遷移の一つです。このよ …


本記事では、UIViewControllerAnimatedTransitioningを用いてView Controllerをカスタムアニメーションで遷移させる方法を解説します。

トランジションのカスタマイズ方法

1. 遷移先のVIewControllerのサイズをカスタマイズする / 遷移時のアニメーションを簡易的にカスタマイズする→ こちら
2. 遷移時のアニメーションをカスタマイズする → 本記事
3. 遷移をインタラクティブにする → こちら

UIViewControllerAnimatedTransitioning

NSObjectに継承させるプロトコルで、View Controllerの遷移に対するカスタムアニメーションを実装することができます 。前回の記事で解説したUIPresentationControllerでは遷移中に利用するカスタムビューしかアニメー …


本記事では、UIPresentationControllerとその実装について解説します。

トランジションのカスタマイズ方法

1. 遷移先のVIewControllerのサイズをカスタマイズする / 遷移時のアニメーションを簡易的にカスタマイズする→ 本記事
2. 遷移時のアニメーションをカスタマイズする → こちら
3. 遷移をインタラクティブにする → こちら

UIPresentationController

UIPresentationControllerは、遷移のアニメータとViewControllerの表示を管理するオブジェクトです。アラートやハーフモーダルなどのようなUIを実装することができます 。

表示プロセス

UIPresentationControllerによるViewControllerの表示プロセスは次の3つのフェーズに分けられます。

  1. 表示:遷移アニメーションを通して新しいViewControllerに画面上に移動させ …

About

Satsuki Hashiba

iOS Engineer 🍋 Master’s Student 🌄 Japan ⛩

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store