Diary

Diary

日々学んだことをアウトプットする場として初めてみました

Android-jetpack compose

Jetpack Compose で画像をピンチしてズーム・移動・回転する

こんな感じのことをできるようにします。

Jetpack Compose による Wear OS 開発入門

最近 pixel watch を買ってみたので WearOS を少し触ってみています。 今更ですが『Jetpack Compose で始める WearOS 開発入門』という内容で、Android 開発との違いに焦点を当てて記事を書いてみます。 (Jetpack Compose での wear os 開発の基礎となる an…

Android: coil でアプリ全体の画像キャッシュ戦略を決める

Android の ImageLoader ライブラリとしては Picasso や Glide などがありますが、今回は Compose と相性がいい Coil を使います。 環境 io.coil-kt:coil-compose:2.4.0 compose-bom:2023.06.01

Jetpack Compose の TabRow(material3) で画面を横スクロールで切り替える方法

material3 のドキュメントでいう『Swipe within the content area』を compose で実現する方法が v1.1.1 の compose.material3 にはなさそうだったため、その実装方法のメモです。

Jetpack Compose でカスタム shape を作る

今回は、よくあるチャットメッセージのような吹き出しを作成したので、その方法を簡単に紹介します。 より一般には Text などの compose 関数を、名前のついてない自由な形に変形させることが目標です。 環境 compose_ui_version = '1.4.0-beta01' 作成方法 …

Jetpack Compose の Webview でリダイレクトされなかった

OAuth の連携画面を Jetpack Compose の Webview で表示していて、ログイン後にリダイレクトされないことがありました。 次のように javascript を有効にしてあげることで解決しました。 (リダイレクトに javascript が使われることが多々あるようです。) …

ついに Compose Multiplatform に iOS がきたぞ!

Compose for iOS は KotlinConf23 で発表されました(2023/04/19 現在 α 版)。 KMM において UI コードを共通化する大本命でもあるため注目度は高かったと思いますが、今回ついに公式から説明があったため触ってみました!。 [目次] 触ってみる 前提条件 実…

kdoctor: Xcode requires to perform the First Launch tasks

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 を使う

今回は、Jetpack compose で Material You を使う方法についてメモしておきます。 なお、今回の内容は『Android DevSummit "Material You in Compose apps"』から学んだものとなります。 環境 - kotlinCompilerVersion '1.6' - compose_ui_version = '1.3.0-…

Jetpack Compose をデバッグする方法

今回は 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 をなめらかにする

今回は、Jetpack compose でなめらかに Indicator を表示する方法についてメモしておきます。 なお、今回の内容は『Android DevSummit "5 quick animations to make your Compose app stand out"』から学んだものとなります。 [目次] 環境 実装方法 通常の I…

Android のマルチモジュール化で Preview の高速化

今回は Android のプロジェクトをマルチモジュール化し、Jetpack Compose の Preview を高速化してみました。 [目次] 環境 マルチモジュール化のメリット デメリット マルチモジュール化の方法 プレビュー速度の向上 Links おわりに 環境 - PC - macOS versi…

マルチモジュールでの compose navigation におけるベストプラクティス(Android DevSummit)

Compose の nagitaion における multi module 対応についての内容を youtube で見ました("Type safe, multi-module best practices with Navigation Compose")。 この中で 5 つのベストプラクティスが紹介されていたため、簡単に紹介します。 Compose のス…

Jetpack compose で Back-end (JVM) Internal error

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…

拡張関数を使って Jetpack Compose にカスタム Modifier を作成

Swift, Kotlin などの言語では拡張関数なるものを定義する事が可能で、好きなクラスにメソッドを生やす事が可能です(Int などの基本的なクラスに対してさえ可能)。 今回はこの機能を使って Jetpack Compose でのカスタム Modifier を作成しました。 [目次]…

Jetpack Compose で縦方向のスタック(SwiftUI の ZStack)

Jetpack Compose を触っていて画像の上に画像を重ねたいケースが出てきました。 そこで今回は、SwiftUI での ZStack, CSS での z-index のようなものを実現する方法を紹介します。 実装例 Modifier に zIndex が用意されているので、そちらを使用します。 CS…

Jetpack Compose で横画面に対応する!

『Jetpack Compose で横画面を検知しレイアウトを変更する』ことをやってみたいと思います。 環境 - build:gradle:7.0.4 - compose_version = '1.0.1' レイアウト 次のように、横画面か縦画面かを判断しレイアウトを変更できるようにことがこの記事のゴール…

Jetpack Compose で3点ボタンのドロップダウンメニュー

成果物 今回は、Jetpack Compose で以下のようなものを作りたいと思います。 縦に3つ点の並んだアイコンを表示 MoreVert と言うらしいです More read, vertical ?? クリック時にそこからメニューを表示させる 写真 クリック時の挙動 環境 - build:gradle:7.…

Jetpack Compose でタイマー処理を実装する

タイマーを Android で作りたいことがあり、その際 Jetpack Compose で定期ループみたいなもの実装しました。 Kotlin で実装を行うには Timer や Runnable を用いることが多いそうですが、Jetpack compose では以下のようにLaunchedEffect と delay を用いて…

Jetpack Glance で遊んでみた

前回の記事では Jetpack Glance を使って Widget を実際に表示させるところまで行いました。 今回はGlanceAppWidgetを継承させたクラスをいじって、色々と表示を変えて遊んでみようと思います! [目次] 環境 サイズによって内容を変更する exact Responsive …

Jetpack で Widget を作成

「Jetpack Glance が α 版になったらしい」という記事を見て早速遊んでみました。 予想以上に文章が長くなってしまったので、色々といじってみるのは次回にし、今回は『widget を表示させるところまで』をゴールにします。 [目次] 環境 Widget 作成手順 1. …

Jetpack Compose で正しい R の import がされない!

環境 - compose_version = '1.0.1' - targetSdk 26 - kotlinCompilerVersion '1.5.21' 問題点 以下のように composable 関数の中で string リソースファイルの文言を使いたいケースを考えます。 Text( text = stringResource(id = R.string.your_feet) ) こ…

jetpack compose の alertDialog でボタンをいい感じに配置する

今回は、jetpack compose の alertDialog を使って、以下のようにボタンを中央から均等に配置させる方法について紹介したいと思います。 環境 - compose_version = '1.0.1' - targetSdk 26 - kotlinCompilerVersion '1.5.21' 実装方法 「compose alertDialog…

Text ではなく TextButton に testTag をつける

今回は compose のテストに使用する testTag のつける場所についてハマった話をしようと思います。 環境 - compose_version = '1.0.1' - targetSdk 26 - kotlinCompilerVersion '1.5.21' Text に testTag をつけたら失敗した話 TextButton を使って compose …

”正しいはず”の URL が WebView で開けない

ブラウザで開ける”正しいはず”の URL が WebView で開けない症状に遭遇しました。 結論としては「渡した URL に最後のスラッシュが抜けていた」という単純なものでしたが、今まで意識したことがなかったので発見が遅れてしまいました。 [目次] 環境 忙しい人…

retrofit を使った compose UI testing で could not find any node が出た

以下のような状況で compose の UI のテストをしていたら、なかなか希望の node が取れませんでした。 自分の探す方向性が悪くなかなか解決できなかったので、その反省を兼ねて記録しておきます。 公式の compose Test 記事を参考に compose の UI テストを…

JetPack Compose の文脈で Action Bar を変更する

JetPack Compose を使い簡単にアクションバーを変更する方法があったのでその紹介です。 環境 - compose_version = '1.0.1' - targetSdk 31 - kotlinCompilerVersion '1.5.21' 実装 Action Bar アクションバーとは、端末上部の時間などが表示されている部分…

【JetPack Compose】Image で長方形の写真を正円にカットする方法

元の形が長方形の画像を正円に切り取る際に、地味に調べるのに時間がかかったのでメモしておこうと思います。 [目次] 環境 うまくいかなかった例 その時の写真 改善策 上部分を用いて正円を作る おわりに 環境 - compose_version = '1.0.1' - targetSdk 31 -…