タグ

UIStackViewに関するnabeatsu1のブックマーク (4)

  • UIStackViewを使った詳細ページ実装のすすめ - ZOZO TECH BLOG

    こんにちは。 iOSエンジニアの遠藤です。 最近ユーザー詳細ページのリニューアルをすることになり、UIStackViewで実装しました。 UIStackViewを使ってとてもシンプルに実装できたので、UIStackViewで詳細ページを実装するメリットと実装について紹介します。 はじめに このような表示コンテンツの多い詳細ページを実装する際に、みなさんは何を使用していますか? UIStackViewはiOS 9から追加されたクラスですが、 まだUITableViewやUICollectionViewで詳細ページを実装されている人も多いのではないでしょうか? IQONも詳細ページをUITableViewやUICollectionViewを使って実装してきました。 しかし、UITableView、UICollectionViewは同じモジュールの繰り返しを表示するのには適していますが、詳細ペー

    UIStackViewを使った詳細ページ実装のすすめ - ZOZO TECH BLOG
  • Auto Layoutの静的な制約で実現するカラム幅が可変のテーブル - 24/7 twenty-four seven

    次に示すような見出しと各カラムが右寄せ、ラベルの文字数によってカラムの幅が伸縮し、広くなった場合は隣の列を押し出し、短くなった場合は少なくとも見出しの幅に収まり、各列の間には一定のマージンを置くというテーブルレイアウトを、静的なAuto Layoutの制約だけで作ることを考えます。 このような、UIコンポーネントが持つコンテンツの大きさによって隣接するコンポーネントを押し出すような場面ではAuto Layoutがとても効果的に働きます。 Auto Layoutなしで実現しようとすると、列ごとの各行の文字幅を計算し、最大の幅に合わせて再配置する、という処理をコンテンツが変わるたびに行うということになりますが、Auto Layoutの制約を使用する場合ではそもそもレイアウトの再計算を自分でやる必要はないので、コンテンツの変わったタイミングなどを気にする必要はありません。 ただデータを再代入する

    Auto Layoutの静的な制約で実現するカラム幅が可変のテーブル - 24/7 twenty-four seven
  • UIStackViewの5つのdistributionを理解する - Qiita

    iOS 9から導入されたUIStackViewは、複雑になりがちなレイアウトを簡単に組むことができます。 導入から3年近くたった今、すでに使ったことのあるエンジニアさんも多くいらっしゃるのでないでしょうか。 しかし、使ってみると案外うまく使えなかったり、コンフリクトに遭遇してしまうことがありました。 そこで、UIStackViewの中でも最も重要なプロパティのdistributionについて調べた結果をまとめました。 この記事の内容 この記事では、5種類のあるUIStackViewDistributionの全てでレイアウト例を示し、そのレイアウトがどのような制約によって成り立っているか解説します。 注意して書いたつもりですが、もし内容に間違いや不備があればご指摘よろしくおねがいします .fill まずは、最も基の.fillでのレイアウト例を確認してみましょう。 各プロパティは以下のように

    UIStackViewの5つのdistributionを理解する - Qiita
  • iOS10とiOS11で比較するUIStackViewのhiddenとConstraintエラー - Takahiro Octopress Blog

    はじめに この記事はiOS2 Advent Calendar 2017の10日目の記事です。 記事では今年発表されたiOS11で改善された UIStackView 周りの Constraint 対応について紹介したいと思います。 UIStackView はiOS8以前に、開発者が AutoLayout を駆使して View と View 間のマージンやパディングを設定していた状況を一変させました。 そんな便利な存在である一方で使い方に慣れるまでに時間がかかったり、なぜかうまくいかないと悩んだりすることもしばしばあることと思います。 その中でも厄介だったのが、 UIStackView の子要素に UIStackView があり、元の UIStackView を非表示にすると Constraint エラーが発生するパターンです。 iOS10で発生するConstraintエラー 例えば、下図の

  • 1