Android-jetpack compose
こんな感じのことをできるようにします。
最近 pixel watch を買ってみたので WearOS を少し触ってみています。 今更ですが『Jetpack Compose で始める WearOS 開発入門』という内容で、Android 開発との違いに焦点を当てて記事を書いてみます。 (Jetpack Compose での wear os 開発の基礎となる an…
Android の ImageLoader ライブラリとしては Picasso や Glide などがありますが、今回は Compose と相性がいい Coil を使います。 環境 io.coil-kt:coil-compose:2.4.0 compose-bom:2023.06.01
material3 のドキュメントでいう『Swipe within the content area』を compose で実現する方法が v1.1.1 の compose.material3 にはなさそうだったため、その実装方法のメモです。
今回は、よくあるチャットメッセージのような吹き出しを作成したので、その方法を簡単に紹介します。 より一般には Text などの compose 関数を、名前のついてない自由な形に変形させることが目標です。 環境 compose_ui_version = '1.4.0-beta01' 作成方法 …
OAuth の連携画面を Jetpack Compose の Webview で表示していて、ログイン後にリダイレクトされないことがありました。 次のように javascript を有効にしてあげることで解決しました。 (リダイレクトに javascript が使われることが多々あるようです。) …
Compose for iOS は KotlinConf23 で発表されました(2023/04/19 現在 α 版)。 KMM において UI コードを共通化する大本命でもあるため注目度は高かったと思いますが、今回ついに公式から説明があったため触ってみました!。 [目次] 触ってみる 前提条件 実…
kmm のセットアップ時、kdoctor を叩いたらタイトルのエラーが発生しました。 ❯ kdoctor Environment diagnose (to see all details, use -v option): ─╯ [✓] Operation System [✓] Java [✓] Android Studio [✖] Xcode ✖ Xcode requires to perform the Firs…
今回は、Jetpack compose で Material You を使う方法についてメモしておきます。 なお、今回の内容は『Android DevSummit "Material You in Compose apps"』から学んだものとなります。 環境 - kotlinCompilerVersion '1.6' - compose_ui_version = '1.3.0-…
今回は Android Studio の Layout Inspector Jetpack Compose のを使ってみていくことになります。 環境 - Android Studio: Android Studio Dolphin | 2021.3.1 - kotlinCompilerVersion '1.6' - compose_ui_version = '1.2.1' 確認方法 右下の方に Layout I…
今回は、Jetpack compose でなめらかに Indicator を表示する方法についてメモしておきます。 なお、今回の内容は『Android DevSummit "5 quick animations to make your Compose app stand out"』から学んだものとなります。 [目次] 環境 実装方法 通常の I…
今回は Android のプロジェクトをマルチモジュール化し、Jetpack Compose の Preview を高速化してみました。 [目次] 環境 マルチモジュール化のメリット デメリット マルチモジュール化の方法 プレビュー速度の向上 Links おわりに 環境 - PC - macOS versi…
Compose の nagitaion における multi module 対応についての内容を youtube で見ました("Type safe, multi-module best practices with Navigation Compose")。 この中で 5 つのベストプラクティスが紹介されていたため、簡単に紹介します。 Compose のス…
Jetpack compose で開発中、以下のようなエラーが出ました。 Caused by: org.jetbrains.kotlin.codegen.CompilationException: Back-end (JVM) Internal error: Couldn't inline method call: CALL 'public final fun Column (modifier: androidx.compose.ui…
Swift, Kotlin などの言語では拡張関数なるものを定義する事が可能で、好きなクラスにメソッドを生やす事が可能です(Int などの基本的なクラスに対してさえ可能)。 今回はこの機能を使って Jetpack Compose でのカスタム Modifier を作成しました。 [目次]…
Jetpack Compose を触っていて画像の上に画像を重ねたいケースが出てきました。 そこで今回は、SwiftUI での ZStack, CSS での z-index のようなものを実現する方法を紹介します。 実装例 Modifier に zIndex が用意されているので、そちらを使用します。 CS…
『Jetpack Compose で横画面を検知しレイアウトを変更する』ことをやってみたいと思います。 環境 - build:gradle:7.0.4 - compose_version = '1.0.1' レイアウト 次のように、横画面か縦画面かを判断しレイアウトを変更できるようにことがこの記事のゴール…
成果物 今回は、Jetpack Compose で以下のようなものを作りたいと思います。 縦に3つ点の並んだアイコンを表示 MoreVert と言うらしいです More read, vertical ?? クリック時にそこからメニューを表示させる 写真 クリック時の挙動 環境 - build:gradle:7.…
タイマーを Android で作りたいことがあり、その際 Jetpack Compose で定期ループみたいなもの実装しました。 Kotlin で実装を行うには Timer や Runnable を用いることが多いそうですが、Jetpack compose では以下のようにLaunchedEffect と delay を用いて…
前回の記事では Jetpack Glance を使って Widget を実際に表示させるところまで行いました。 今回はGlanceAppWidgetを継承させたクラスをいじって、色々と表示を変えて遊んでみようと思います! [目次] 環境 サイズによって内容を変更する exact Responsive …
「Jetpack Glance が α 版になったらしい」という記事を見て早速遊んでみました。 予想以上に文章が長くなってしまったので、色々といじってみるのは次回にし、今回は『widget を表示させるところまで』をゴールにします。 [目次] 環境 Widget 作成手順 1. …
環境 - compose_version = '1.0.1' - targetSdk 26 - kotlinCompilerVersion '1.5.21' 問題点 以下のように composable 関数の中で string リソースファイルの文言を使いたいケースを考えます。 Text( text = stringResource(id = R.string.your_feet) ) こ…
今回は、jetpack compose の alertDialog を使って、以下のようにボタンを中央から均等に配置させる方法について紹介したいと思います。 環境 - compose_version = '1.0.1' - targetSdk 26 - kotlinCompilerVersion '1.5.21' 実装方法 「compose alertDialog…
今回は compose のテストに使用する testTag のつける場所についてハマった話をしようと思います。 環境 - compose_version = '1.0.1' - targetSdk 26 - kotlinCompilerVersion '1.5.21' Text に testTag をつけたら失敗した話 TextButton を使って compose …
ブラウザで開ける”正しいはず”の URL が WebView で開けない症状に遭遇しました。 結論としては「渡した URL に最後のスラッシュが抜けていた」という単純なものでしたが、今まで意識したことがなかったので発見が遅れてしまいました。 [目次] 環境 忙しい人…
以下のような状況で compose の UI のテストをしていたら、なかなか希望の node が取れませんでした。 自分の探す方向性が悪くなかなか解決できなかったので、その反省を兼ねて記録しておきます。 公式の compose Test 記事を参考に compose の UI テストを…
JetPack Compose を使い簡単にアクションバーを変更する方法があったのでその紹介です。 環境 - compose_version = '1.0.1' - targetSdk 31 - kotlinCompilerVersion '1.5.21' 実装 Action Bar アクションバーとは、端末上部の時間などが表示されている部分…
元の形が長方形の画像を正円に切り取る際に、地味に調べるのに時間がかかったのでメモしておこうと思います。 [目次] 環境 うまくいかなかった例 その時の写真 改善策 上部分を用いて正円を作る おわりに 環境 - compose_version = '1.0.1' - targetSdk 31 -…