2025年4月19日土曜日

Android そういえば Kotlin Coroutine ってどう使うのが良いの?

どうも。どっことです。今回はKotlinCoroutineのテーマです。

Kotlin Coroutine

Kotlin Coroutineは非同期処理などのコールバック地獄を解消してくれたり、可読性の高いコードを実装できるようになる便利な機能ですが、「実際のところ、どう使うのが良いの?」と考えました。今回はそんな使うと便利だけど実際どう使うかイマイチ分からない人向けに、ベストプラクティスのページの内容を簡単に紹介したいと思います。

TL;DR(結論)

ViewModelを実装してviewModelScope.launch/View側ではlifecycleScope.launchを使うのがよさそうです。

Google開発者サイトでコルーチンに関するベストプラクティスが紹介されています。コルーチンにフォーカスしたものだと、以下が挙げられています。

  1. Dispatcherを外から注入できるようにする
  2. ViewModelでコルーチンを作成する
  3. GlobalScopeは使わない
  4. コルーチンをキャンセルできるようにする

Dispatcherを外から注入できるようにする

withContextなどで引数に設定するDispatcher(どのスレッドで処理するかの指定)は、ハードコードせず外から注入できる形にした方が良いです。テストコードを実装するときにテストが容易にできるようになります。

// OK:処理するDispatcherを外から指定する
class SampleRepository(private val ioDispatcher: CoroutineDispatcher =  Dispatchers.IO) {
    suspend fun veryHeavyTask() = withContext(ioDispatcher) {
        // very heavy task
    }
}
class SampleRepository() {
    // NG: Dispatcherをハードコード(直接指定)しない
    suspend fun veryHeavyTask() = withContext(Dispatchers.IO) {
        // very heavy task
    }
}

ViewModelでコルーチンを作成する

ViewModelを作成し、そこでコルーチンを作成→非同期処理を実装するのがよいとのことです。

そして画面側に非同期処理が必要なことを意識させることがないよう、suspend関数として公開しないよう実装するのが良いとのことです。

class SampleViewModel(): ViewModel() {
    private val repository = SomeRepository()

    // NG:UI側にsuspend関数(=非同期処理)として公開しない
    suspend fun badSample() = repository.veryHeavyTask()

    // OK:ViewModel内でコルーチンを生成し非同期処理を実行する
    fun sample() {
        viewModelScope.launch {
            repository.veryHeavyTask()
        }
    }
}

GlobalScopeを使わない

テストコードの実装しにくさ、GlobalScopeをハードコードしていることによりDispatcherもハードコードされやすくなる点などから、GlobalScopeを利用しないことを推奨しています。

class SampleRepository() {
    fun veryHeavyTask() {
        // NG:GlobalScopeをハードコードしない
        GlobalScope.launch {
            // very heavy task
        }
    }
}

GlobalScopeの利用が正当であるケースはかなり稀で、アプリが生存期間中にアクティブな状態を維持しなければいけない状態とのことです。また、現在のスコープより長い生存期間が必要な処理であれば、CoroutineScopeを外部から指定するような構成とすることを検討すべきとのことです。

コルーチンをキャンセル可能にする

コルーチンはキャンセル可能ですが、実際コルーチン内でキャンセルされたか確認したり、停止したりするまではコルーチンはキャンセルされないとのことです。ensureActiveを使用することでキャンセルの確認ができます。

class SampleViewModel(): ViewModel() {
    private val repository = SampleRepository()

    fun sample(value: Int) {
        viewModelScope.launch { 
            val result = repository.validateValue(value)
            // キャンセルできるタイミングでアクティブか確認
            ensureActive()
            if (result) {
                repository.submit(value)
            }
        }
    }
}

まとめ

今回はKotlinCoroutineのベストプラクティスについて紹介しました。より詳しい内容は参考に記載したGoogleのベストプラクティスの記事からさまざまなページにアクセスできるので、ぜひ参考にしてください。

参考

2025年4月12日土曜日

Android BottomSheetDialogFragmentの実装方法を解説

どうも。どっことです。今回はBottomSheetDialogFragmentについて解説します。

BottomSheetDialogFragmentについて解説

BottomSheetDialogFragmentは通常のダイアログから派生したクラスで、下からスライドインで生えてくるような見え方が印象的です。最初に表示するダイアログの高さや、スクロールの制御もでき、通常のダイアログよりカスタマイズ性が高い点も特徴的です。

実装

最小構成で実装する場合は以下の手順です。

  1. BottomSheetDialogFragment用のstyleを追加する。
  2. BottomSheetDialogFragmentのサブクラスを実装する。

順番に解説していきます。

styleを追加する

<style name="BottomSheetDialogTheme" parent="@style/Theme.Design.Light.BottomSheetDialog"/>

BottomSheetDialogThemeというstyleを追加します。

サブクラスを実装する

BottomSheetDialogFragmentを継承したCustomBottomSheetDialogFragmentクラスを追加します。

class CustomBottomSheetDialogFragment :
    BottomSheetDialogFragment(R.layout.fragment_bottom_sheet_dialog) {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        return BottomSheetDialog(requireContext(), R.style.BottomSheetDialogTheme)
    }
}

ダイアログ内で表示するためのコンテンツもレイアウトファイル(fragment_bottom_sheet_dialog.xml)として追加しておきましょう。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:gravity="center"
        android:padding="16dp"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="hello_world!!"/>

</FrameLayout>

これだけ実装すれば、BottomSheetDialogFragmentを表示することができます。

class MainActivity : AppCompatActivity() {
  
  ...
  
  fun showDialog() {
   val dialog = CustomBottomSheetDialogFragment()
   dialog.show(supportFragmentManager, null)
  }
}

実際に表示すると、以下のようになります。

その他

ナビゲーションバーの表示を格好良くしたい

styleをカスタマイズします。

<style name="BottomSheetDialogTheme" parent="@style/Theme.Design.Light.BottomSheetDialog">
  <item name="android:windowIsFloating">false</item>
</style>

windowIsFloating:falseを設定することで、以下のようにナビゲーションバーの表示が不透明になり比較的自然な表示になります。

さらにダイアログとナビゲーションバーの表示を同じにしたい場合は、以下のようにBottomSheetというスタイルを追加し、BottomSheetDialogThemeのスタイルに追加してください。

<style name="BottomSheet" parent="@style/Widget.Design.BottomSheet.Modal">
    <item name="android:background">@android:color/darker_gray</item>
</style> <style name="BottomSheetDialogTheme" parent="@style/Theme.Design.Light.BottomSheetDialog"> <item name="android:windowIsFloating">false</item> <item name="android:navigationBarColor">@android:color/darker_gray</item> <item name="bottomSheetStyle">@style/BottomSheet</item> </style>

ダイアログの背景色を指定したい場合は BottomSheet スタイルの 背景色(background)を変更して下さい。このときBottomSheetDialogThemenavigationBarColorを同じ色になるように注意してください。

最初に表示される高さを調整したい

いくつか注意が必要です。

まず、BottomSheetDialogFragmentの呼び出し元のレイアウトがCoordinatorLayoutである必要があります。これは、高さ調整をするためのBottomSheetBehaviorクラスの制約となります。

ここではActivityがダイアログを表示するサンプルなので、Activityのレイアウトを調整します。

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ダイアログを表示"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

次に、ダイアログが表示されるタイミングでBottomSheetBehaviorを生成しますが、この時に渡すViewをcom.google.android.material.R.id.design_bottom_sheetでfindViewByIdで参照する必要があります。これもBottomSheetBehaviorクラスの制約です。

class CustomBottomSheetDialogFragment :
    BottomSheetDialogFragment(R.layout.fragment_bottom_sheet_dialog) {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        return BottomSheetDialog(requireContext(), R.style.BottomSheetDialogTheme)
            .also { dialog ->
                dialog.setOnShowListener {
                    dialog.findViewById<View>(com.google.android.material.R.id.design_bottom_sheet)
                        ?.let {
                            BottomSheetBehavior.from(it).also {
                                // 後述
                            }
                        }
                }
            }
    }
}

Viewを参照するIDがSDK側のものなので、正直あまりいい実装とは言えないという所感です。より適切な実装がみつかりましたら、この記事を更新しようと思います。

ここまでを調整した上で、生成するBottomSheetBehaviorに対してpeekHeightstateを設定することで、最初に表示されるダイアログの高さを調整することができます。

class CustomBottomSheetDialogFragment :
    BottomSheetDialogFragment(R.layout.fragment_bottom_sheet_dialog) {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        return BottomSheetDialog(requireContext(), R.style.BottomSheetDialogTheme)
            .also { dialog ->
                dialog.setOnShowListener {
                    dialog.findViewById<View>(com.google.android.material.R.id.design_bottom_sheet)
                        ?.let {
                            BottomSheetBehavior.from(it).also {
                                it.peekHeight =
                                    resources.getDimensionPixelSize(R.dimen.bottom_sheet_dialog_initial_height)
                                it.state = BottomSheetBehavior.STATE_COLLAPSED
                            }
                        }
                }
            }
    }
}

peekHeightには最初に表示する高さを、stateにはBottomSheetBehavior.STATE_COLLAPSEDを指定してください。

まとめ

今回はBottomSheetDialogFragmentについて解説しました。通常のDialogFragmentより実装が必要なポイントが多いですが、見せ方のカスタマイズできる点や元の画面表示の邪魔をしない点では、ユーザに優しい表示方法の一つと言えます。使い所を意識して使いこなせるようになりたいですね。

参考

2025年4月6日日曜日

Android CustomTab(ChromeCustomTab)の使い方を紹介

どうも。どっことです。今回はCustomTab(ChromeCustomTab)の使い方を紹介します。

CustomTabについて

CustomTabはアプリ内で利用できるブラウザ機能です。CustomTabが登場する前はWebViewという機能がアプリでのブラウザとしての役目を果たしておりましたが、セキュリティや表示速度などの観点から現在はCustomTabを使うことが推奨されています。

実装

実装手順は以下の通りです。

  1. app/build.gradleに依存関係を追加する。
  2. CustomTabIntent.Builderを使ってCustomTabIntentを生成する。
  3. CustomTabIntent.launchUrlを実行する。

順番に解説していきます。

app/build.gradleを実装する

まずはapp/build.gradleに依存関係を追加します。

dependencies {
    // 既存にある dependencies に以下を追加する
    implementation "androidx.browser:browser:1.8.0"
}

CustomTabIntent.Builderを生成する

次にCustomTabIntent.Builderを使ってCustomTabIntentを生成します。

val builder = CustomTabsIntent.Builder()
val customTabIntent = builder.build()

CustomTabIntent.launchUrlを実装する

最後にCustomTabIntentにあるlaunchUrl関数を使って、アクセスしたいWebページを表示します。

customTabIntent.launchUrl(this@MainActivity, Uri.parse("https://www.google.co.jp/"))

その他

CustamTabの表示をカスタマイズしたい

CustomTabIntent.Builderに対して、パラメータを設定することでカスタマイズすることができます。今回は参考欄に詳細の項目のページを記載する程度で割愛。

認証に利用したい

現在2025/4時点ではまだalpha版ですが、AuthTabIntentが将来的に利用できるようです。

良くある認証フローでは、認証が完了したタイミングでアプリに戻るためのリダイレクトURLを発火してもらうことが一般的ですが、そのハンドリングの一部をAuthTabIntentで制御してくれるようです。

ChromeCustomTabから戻ってきたことを検知したい

activityResultLauncherを利用すれば実現できます。参考はこちら

ただ前述したように、CustomTabIntentlaunchUrlのインターフェースが実装されている点から、これは推奨される利用方法ではない印象です。

val intent = customTabIntent.intent.also {
    it.setData(Uri.parse("https://www.google.co.jp/"))
}
// registerForActivityResult で生成したactivityResultLauncherを使って呼び出し
launcher.launch(intent) 

まとめ

今回はCustomTabについて解説しました。WebViewよりも優れている点が多く、シンプルに使う分には簡単に実装できるためぜひ活用してみてください。

参考

2025年4月5日土曜日

Android Admobのためのライブラリ UMPの実装方法を解説

どうも。どっことです。今回はAdmobを利用するためのUMP(UserMessagingPlatform)ライブラリについて解説します。

UMPライブラリ

Androidアプリ内に広告を表示するためには、Admobライブラリを使って広告表示用のViewを組み込む必要がありますが、それと合わせてユーザに許諾を得る処理も必要です。

今回はユーザに許諾を得るためのUMP(UserMessagingPlatform)ライブラリの使い方について解説します。

実装概要

実装の手順は以下の通りです。

  1. app/build.gradledependenciesに依存関係を追加
  2. AndroidManifest.xmlmeta-dataを追加
  3. ユーザから許諾を得る処理を実装

順番に解説していきます。

依存関係の追加

app/build.gradledependenciesに依存関係を追加します。

dependencies { 
    ... 
    // 既存のdependenciesスコープに以下を追加
    implementation("com.google.android.ump:user-messaging-platform:2.0.0")
}

meta-dataの追加

AndroidManifest.xmlmeta-dataを追加します。valueに設定する値はAdmobのページから取得してください。

<!--Sample app ID: ca-app-pub-3940256099942544~3347511713-->
<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID"
           android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>

ユーザから許諾を得る処理を実装

ここからは広告を表示するにあたってユーザから許諾を得るための処理を実装します。

同意情報のオブジェクトを取得し更新する

UserMessagingPlatform.getConsentInformationconsentInformationを取得します。

取得したconsentInformationに対して同意情報を更新します。その後、処理終了が非同期に通知されます。

val params = ConsentRequestParameters.Builder()
    .setTagForUnderAgeOfConsent(false)
    .build()
val consentInformation = UserMessagingPlatform.getConsentInformation(activity)
consentInformation.requestConsentInfoUpdate(activity, params, {
    // 処理終了。後述。
}, { error ->
    // Handle the error.
})

表示が必要なフォーム(許諾情報)があるかチェックし、更新する

処理終了の通知を受けてフォームの利用可否をチェックし、可能であればフォーム更新処理に進みます。

val params = ConsentRequestParameters.Builder()
    .setTagForUnderAgeOfConsent(false)
    .build()
val consentInformation = UserMessagingPlatform.getConsentInformation(activity)
consentInformation.requestConsentInfoUpdate(activity, params, {
    // 処理終了。
    if (consentInformation.isConsentFormAvailable) {
        // 同意フォーム利用可能。
        // 更新処理へ。後述。
        loadForm(activity, consentInformation)
    } else {
        // 同意フォーム利用不可。
        // 設定、フォーム更新中など。
        // 再更新を促すのが無難。
    }
}, { error ->
    // Handle the error.
})

同意フォームを更新し、同意フォームを表示、ユーザに許諾を得る

UserMessagingPlatform.loadConsentFormで同意フォームを更新します。これはメインスレッドで実施するよう、サンプルにコメントされています。

更新処理が終了すると非同期に通知されるので、それを契機に許諾状態を確認しましょう。その結果、未許諾(REQUIRED)であればフォームオブジェクトに表示を依頼します。これにより、ユーザに同意フォームが表示されるはずです。

ユーザ操作を契機にフォームが非表示になったことがアプリに通知されますので、これを契機に許諾状態を再度取得してください。これでユーザに許諾してもらえていれば、晴れてアプリ内で広告表示可能という状態になります。

private fun loadForm(consentInformation: ConsentInformation) {
  // Loads a consent form. Must be called on the main thread.
  UserMessagingPlatform.loadConsentForm(activity, { consentForm ->
    if (consentInformation.consentStatus == ConsentInformation.ConsentStatus.REQUIRED) {
      // 同意フォームを表示しユーザに許諾を得る。
      consentForm.show(activity) {
        if (consentInformation.consentStatus == ConsentInformation.ConsentStatus.OBTAINED) {
          // 無事にユーザから許諾を得られた!
        } else {
          // 同意を得られなかった...
          // 同意をもらえなかったことによる制御へ
        }
      }
    }
  }, { error ->
    // Handle the error.
  })
}

まとめ

今回はAdmobを利用するための UMPライブラリについて解説しました。広告をアプリ内に組み込むためにはAdmobによる広告表示処理と合わせてユーザに同意を得る処理も必要不可欠ですので、参考にしていただけると幸いです。

参考

2025年4月2日水曜日

Blogger 自分のアクセスを追跡しない設定を紹介

どうも。どっことです。今回はBloggerで自分のアクセスを追跡しない設定を紹介します。

自分のアクセスを追跡しない

完全に自分自身の備忘録のためだけのページです。参考ページの方、とても助かっています。本当にありがとうございます。

1. 以下をコピーする。日付は適当。

document.cookie = "_ns=2; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";

2. F12をして developer tools を表示する。

3. Consoleタブをクリックする。

4. コピーした文字列を貼り付けて実行する。

まとめ

以上です。

参考

2025年3月30日日曜日

Android Studio VCS Operations Popupをカスタマイズする方法を解説

どうも。どっことです。今回はAndroid StudioにあるVCS Operations Popupにカスタマイズ方法ついて解説します。

VCS Operations Popopとは

VCS Operations PopupはAndroid Studioでバージョン管理ツールの操作するときのポップアップです。control+vのショートカットで表示することができます。メニューから操作する手間が省けるので、多用している人もいるかと思いますが、今回はこのポップアップをカスタマイズする方法を解説します。

VCS Operations Popopのカスタマイズ

カスタマイズですが、実はAndroid Studioがカスタマイズするための設定項目を用意してくれています。なので謎の設定ファイルの書き換えや、ターミナルなどでの謎のコマンド操作は不要です。(地味に嬉しい)

Android StudioのSettings | Appearance & Behavior | Menus and Toolbarsにアクセスしてください。プロジェクトにGitを利用している場合は以下のようなポップアップが表示されると思います。

この画面で項目をカスタマイズすることができます。一覧の中にあるVCS Operations PopupからVCS.Operations.Popup.VcsAwareを選択している状態で+ボタンをクリックしましょう。

ここから項目を追加することができます。たとえば、Update projectをリストに追加してみましょう。一覧からUpdate projectを探してOKをクリックしてください。それで完了です。

それではVCS Operations Popupを表示してみましょう。control+vを入力すると...


追加したUpdate projectがポップアップに追加されていることを確認できました!これでいちいちVCSメニューまでマウス移動させる手間が省けますね!

まとめ

今回はAndroid StudioにあるVCS Operations Popupのカスタマイズ方法について解説しました。Android Studioや、そのベースとなっているIntellij IDEAでは、このポップアップに限らず、さまざまな項目をカスタマイズする設定画面を提供しているので、作業効率がより良くなるようどんどんカスタマイズしていきたいですね。

参考

2025年3月29日土曜日

GitHub ライブラリをGithubに公開する方法を解説(GitHub Packages)

どうも。どっことです。今回はGitHub Packagesを使って自作ライブラリを簡単に公開する方法を解説したいと思います。

プライベートで資格試験などに向けた問題集アプリを不定期に作るのですが、毎回データクラスや画面を一から作っているので「そろそろ標準化しよう。。。」と思いました。ただ標準化したはいいものの、いい感じに使い回すためにはどうしたらいいか、というところで調べた結果、GitHub Packagesのサービスに行き着いたので今回はこちらを紹介し、実際に公開する方法を解説したいと思います。

GitHubPackagesとは

GitHubPackagesはGitHubのサービスの一つで、まさに今回のようなライブラリや、パッケージなどを共有するためのものだそうです。mavenやnpm、NuGetなどの形式で公開することができます。しかも嬉しいことに公開範囲も指定できるようで、一般公開からプライベートやTeam限定など、制御することができるとのこと。とても便利。

今回はJava向けのライブラリを公開するために、Gradleプラグインを使った手順を紹介したいと思います。

GitHubPackagesにライブラリを公開する設定手順

以下の手順で進めます。

  1. app/build.gradleに設定を追加する。
  2. Gradleタスクを実行する。
  3. (任意)GitHub Actionで自動的に更新する。

順番に解説していきます。

app/build.gradleに設定を追加する

app/build.gradleに以下を追加します。

plugins {
  ...
  id 'maven-publish'
}

publishing {
  ...

  repositories {
    maven {
      name = "GitHubPackages"
      url = "https://maven.pkg.github.com/mkt120/sample_repository"
      credentials {
        username = System.getenv("USER_NAME")
        password = System.getenv("ACCESS_TOKEN")
      }
    }
  }
}
  • pluginmaven-publishを追加。ライブラリ公開を簡単に実行してくれるプラグインを組み込む。
  • urlはGitHubのリポジトリURL。
    • GitHubのリポジトリに対応したURLを設定。
  • usernamepasswordはログイン情報。
    • 特にpasswordはログインパスワードだと警告orエラーが発生するので、Githubからアクセストークンを取得しそれを設定する。直書きだとセキュリティ観点でリスクがあるので、Githubの secret and variables に設定しておいて、それを参照するようにしておくのが無難。

Gradleタスクを実行する

前項の設定を追加し、sync gradle を実行すると以下のタスクが追加されます。

publishGprPublicationToGitHubPackagesRepository

これをコマンドラインやGradleペインから実行することで、 GithubPackagesへの登録が行われます。

./gradlew publishGprPublicationToGitHubPackagesRepository

(GithubPackageによると)以下のタスクはGithubPackagesへの登録だけでなく、その前段階のライブラリのビルドなども一緒に実行してくれるようなので、こちらを利用するのが良さそうです。

./gradlew publish

(任意)GitHub Actionで自動的に更新する

ここまでだけでGitHubPackagesにパッケージを登録することができますが、GitHubにコミットをプッシュしたことを契機に、GitHubPackagesに更新を入れるようGitHub Actionで自動登録できるようにしておきます。

#masterブランチにプッシュされたら実行
on:
  push:
    branches: [ "master" ]
  ...

jobs:
  build:
  ...
  
  # name. githubAction のコンソール上で実行内容がわかりやすいように名前付けしておく
  - name: publish library 
    run: ./gradlew publish
    env:
      USER_NAME: ${{ secrets.USER_NAME }}
      ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}

まとめ

今回はGitHubPackagesにライブラリを公開する方法を解説しました。似たようなデータ形式・UIのアプリケーションをたくさん開発している方は、こういった機能を活用することで開発作業の効率化を図りたいですね。また、ライブラリ化したはいいけど、maven repository に登録するほどのものではないんだよなぁ...という方にも、GitHubPackagesという公開範囲を管理できる領域に登録することで適切にスケーリングすることもできるのではないかと思います。

参考

2025年3月22日土曜日

Android/Jetpack Compose Imageに関するパラメータを紹介

どうも。どっことです。今回はJetpack ComposeのImageコンポーサブルについてチートシートを紹介したいと思います。

Imageコンポーサブルとは

Imageコンポーサブルは、名前の通り画像やイメージを表示するコンポーサブルです。まずはAndroidViewのImageViewで実装していたことが、Jetpack Composeでも同様に実現できるのかが気になるところですが、結局ImageViewで重要な設定であったscaleType、つまりイメージの見せ方についての設定がそれに相当するcontentScaleで実現でき、それ以外はModifierを使えば済んでしまうようです。(つまりImageに関する紹介がほとんどない...)

このページではscaleTypeに相当するcontentScaleについて軽く触れ、その設定がどのような見え方をするのかは公式サイトの方にお任せしようと思います。

Imageコンポーサブルを使うときのパラメータチートシート

まずは、必要最小限で設定できるImageのパラメータです。

Image(
  painter = painterResource(id = R.drawable.dog), // リソースから画像表示
  contentDescription = stringResource(id = R.string.dog_content_description) // 説明文
)

contentScale

contentScaleにはいくつかの設定項目があるので、一覧で紹介します。

  • ContentScale.Fit
    • アスペクト比を維持しながら拡大・縮小
    • scaleTypeのfitCenter相当
  • ContentScale.Crop
    • 空きスペースがなくなるように画像を拡大表示(くり抜き)
  • ContentScale.FillHeight
    • アスペクト比を維持しながら、高さに合わせて拡大・縮小
  • ContentScale.FillWidth
    • アスペクト比を維持しながら、幅に合わせて拡大・縮小
  • ContentScale.FillBounds
    • Viewの大きさに合わせて拡大・縮小(画像が歪む)
    • scaleTypeのfitXY相当
  • ContentScale.Inside
    • アスペクト比を維持しながら、縮小(拡大はしない)
  • ContentScale.None
    • 画像に対して何もしない
    • scaleTypeのcenter相当

まとめ

今回はImageコンポーサブルについて紹介しました。正直Image自体には目新しいパラメータがなかったので、contentScaleに関する紹介程度となりましたが、アプリ開発においてイメージの表示は必須機能なので、contentScaleのパラメータについては理解を進ませておきたいところです。

参考


2025年2月22日土曜日

Android/Jetpack Compose Modifierに関するパラメータを紹介

どうも。どっことです。今回はJetpack ComposeのModifierについてチートシートを紹介したいと思います。

前回はTextコンポーサブルを紹介しましたが、「そもそも共通で設定するパラメータってどこで管理するねん」となりまして、調べたらModifierというオブジェクトがあることがわかりました。 今回はこのModifierについて、チートシートとして紹介したいと思います。

Modifierオブジェクトとは

Modifierは、コンポーサブルに対して設定可能な共通のパラメータを管理しているオブジェクトです。 AndroidViewがわかる人なら、Viewに対して設定できる項目くらいの理解で問題ないと思います。

Modifierを使うときのパラメータチートシート

Modifierで設定できるパラメータは(よく使うものは)以下です。

    // ****** 横幅指定関連 ****** // 
Modifier.width(20.dp)                    // 幅指定(layout_width)
    .fillMaxWidth()                      // 幅いっぱい(layout_width="match_parent")
    .widthIn(20.dp, 20.dp)               // 最小・最大幅指定(minWidth,maxWidth)

    //****** 高さ指定関連 ******//
    .height(20.dp)                       // 高さ指定(layout_height)
    .fillMaxHeight()                     // 高さいっぱい(layout_height="match_parent")
    .heightIn(20.dp, 20.dp)              // 最小・最大高さ指定(minHeight, maxHeight)
    
    //****** 縦横まとめて指定 ******//
    .size(20.dp)                         // 縦横指定(layout_width,layout_height) 
    .size(20.dp, 20.dp)                  // 縦横指定(layout_width,layout_height) 
    .fillMaxSize()                       // 縦横幅いっぱい (layout_width="match_parent"/layout_height="match_parent")
    .sizeIn(20.dp, 20.dp, 50.dp, 50.dp)  // 最小・最大縦横指定(minWidth, minHeight, maxWidth, maxHeight) 
    
    //****** background関連 ******//
    .background(Color.Red)               // 背景色指定(background)
    
    //****** padding関連 ******//
    .padding(top = 10.dp)                // 上部余白 (paddingTop)
    .padding(start = 10.dp)              // 左余白 (paddingStart)
    .padding(end = 10.dp)                // 右余白 (paddingEnd)
    .padding(bottom = 10.dp)             // 下部余白 (paddingBottom)
    .padding(horizontal = 10.dp)         // 左右余白 (paddingHorizontal)
    .padding(vertical = 10.dp)           // 上下余白 (paddingVertical)
    .padding(10.dp)                      // 上下左右余白 (padding)
    
    //****** 位置調整関連 ******//
    .align(Alignment.CenterHorizontally) // layout_gravity(左右位置, Columnコンポーネント内などで)
    .align(Alignment.CenterVertically)   // layout_gravity(上下位置, Rowコンポーネント内などで)
    
    //****** タップ処理関連 ******//
    .clickable { /** */ }                // タップ処理(setOnClickListener)
    
    //****** 枠線関連 ******//
    .border(BorderStroke(3.dp, Color.Blue)) // 枠線をつける(witdh, color)

    //****** 角丸関連 ******//
    .background(Color.Red, RoundedCornerShape(10.dp))                  // 角丸背景にする
    .border(BorderStroke(3.dp, Color.Blue), RoundedCornerShape(10.dp)) // 角丸枠線をつけるそ

その他

dimens.xmlに定義した値をpadding/marginの値として使いたい

dimensionResourceを使えばリソース定義を参照できます。以下、参考ページから転記。

// In the res/values/dimens.xml file
// <dimen name="padding_small">8dp</dimen>
// In your Compose code
val smallPadding = dimensionResource(R.dimen.padding_small)
Text(
    text = "...",
    modifier = Modifier.padding(smallPadding)
)

まとめ

今回はModifierオブジェクトで設定できるパラメータについてチートシートとして紹介しました。目を通してみると、角丸の実装がサポートされるようになったのは非常に嬉しいポイントだと思いました。この記事も参考になりそうな項目を見つけたら随時更新していく予定ですので、参考にしていただけますと幸いです。

次回やるとしたら、Imageコンポーネントについて同様に紹介しようと思います。

参考

2025年2月15日土曜日

Android/Jetpack Compose Textに関するパラメータを紹介

どうも。どっことです。今回はJetpack ComposeのTextコンポーサブルについてチートシートを紹介したいと思います。

これまでのAndroidViewから、Jetpack Composeに移行が完了できた人も少なくないのではないでしょうか。私はそんな移行できていない人間の一人なのですが、今回はそんなJetpack Composeで画面を実装する時に「これってどうやって実装するんだっけ!?」となってもすぐに解決できるよう、チートシートとしてこのページに整理したいと思います。

Textコンポーサブルとは

Textコンポーサブルは、AndroidViewでいうところのTextView、つまりキホンのキですね。テキストを表示せずにアプリを作ることはできないので、まずはここから入るのが王道だと思います。

Textコンポーサブルをつかうときのパラメータチートシート

Textコンポーサブルに設定できるパラメータは(よく使うものは)以下です。

Text(
  "Hello World", 
  fontSize = 24.sp,    // テキストサイズ
  lineHeight = 30.sp,  // 行の高さ
  maxLine = 3,         // 最大行数
  minLine = 1,         // 最小行数
  color = Color.Red,   // テキスト色
  fontStyle = FontStyle.Italic, // テキストスタイル(斜体)
  fontWeight = FontWeight.Bold, // テキストスタイル(太字)
  textAlign = TextAlign.Center, // テキストの位置(gravity)
  overflow = TextOverflow.Ellpsis // テキストが収まらない場合の省略表示(ellipsize)
)

その他の使い方

リソースを参照してテキストを表示する

stringResourceを利用すると、リソースのテキストを参照できます。

Text(stringResource(R.string.app_name))

表示テキストを装飾する

buildAnnotatedStringを利用すると、装飾されたテキストを表示することができるらしいです。

今回は割愛。

まとめ

今回はTextコンポーサブルでよく使うであろうパラメータについて紹介しました。AndroidViewがDeprecatedになる前にJetpackComposeを身につけておきたいですね。

移行予定

どうも。どっことです。 タイトルの通りですが、諸事情により GitHubPage に移行予定です。 https://mkt120.github.io/ この備忘録に記載の内容を転記しつつ、今後はこちらのページを更新していく予定です。