LoginSignup
0
0

IrisでのUI作成方法の紹介記事一覧

Last updated at Posted at 2024-01-23

目次

  1. はじめに
  2. 記事紹介
  3. 最後に

はじめに

Irisでアプリの画面を作る際、各ウィジェットを使ってどのようにUI実装を行えば良いか迷う場面があるかと思います。
そこで今回は、UIを作成する際に参考になりそうな記事の一覧をまとめてみました!

初めてIrisを使ってアプリデザインを作る方など是非参考にしてみてくださいね!

また、初心者向けの学習コンテンツも用意しています。

3章の「Exercise1 デザインを元にモバイルで画面を作ってみよう」では、UIの作成方法も学ぶことができますので、基礎から学びたい方はこちらもご参考ください:writing_hand_tone1:

記事紹介

各項目でUIを実装するための方法を書いた記事のリンクを貼っておきます。
実装したいUIの例を確認して、興味のある記事を参考にしてみてください👀

画像付きのボタンを作成する方法

このようなUIを作成することができるようになります。
ezgif-1-f803112d7a.gif

画像ファイルを使わずにデフォルトアイコンを使ってUIを作成してみた

画像ファイルを使わずに、以下のようなステータスバーを作成することができるようになります。

ezgif-4-d2ce24bdc1.gif

フッターメニューを作成する方法

このようなUIを作成することができるようになります。

リッチテキストを使って簡単な商品紹介ページを作成

RichText Widgetを使ってこのようなUIを作成することができるようになります。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3539323236342f63373763623330652d666338632d356362612d616661322d6666373836313131616334372e706e67.png

Visualaizerでアコーディオンメニューを作ってみる

このようなUIを作成することができるようになります。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3539323236342f63653530376437662d363362662d393638372d623961382d3935663461363266313664632e676966.gif

VisualizerでTabPane Widgetを利用する方法

このようなUIを作成することができるようになります。

最後に

新しい記事が更新されたら随時更新していきます!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0