📄
Jetpack compose 1.8.0 から使える <ul> タグを使用してみる
Jetpack compose 1.8.0 がリリース
- AutoFill の追加
- AutoSizeText ができるようになった
- 70個も試験的 API が削減された（安定化した）
など、様々な変更がありました。
更新内容は上記の開発者ブログを見ていただきたいのですが、今回は Jetpack compose 1.8.0 から使える <ul> を使用していきたいと思います。
以前に作った記事を利用
今回は以前作ったものを調整していきます。
PR は こちら
環境
- Android Studio Android Studio Meerkat | 2024.3.1 Patch 2
- Kotlin 2.1.0
- Gradle 8.13
- Jetpack compose BoM 2025.04.01
- androidx.compose.ui:ui-text 1.8.0
HTML の一部差分
term.xml
- <p>1. ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。</p>
- <p>2. ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。</p>
- <p>3. ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。</p>
+ <ul>
+ <li>ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。</li>
+ <li>ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。</li>
+ <li>ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。</li>
+ </ul>
Gradle タスクもちょいと修正
app/build.gradle.kts
val termHtml = termFile.readText()
val term = termHtml
// 改行削除
.replace("""[\n\r]""".toRegex(), "")
// コメント削除
.replace("""<!--.+?-->""".toRegex(), "")
// <body> タグ内のみ抽出
.replace(""".*<body>(.+?)</body>.*""".toRegex(), "$1")
+ // タグ間の空白を削除
+ .replace(""">\s+?<""".toRegex(), "><")
生成されたもの
build/generated/custom/res/values/string.xml
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<string name="term_content"><p>○○○（以下「当社」といいます。）は、当社が運営するスマートフォン用アプリ（以下「本アプリ」といいます。）で提供するサービス（以下「本サービス」といいます。）をお客様にご利用いただくことに関し、ご利用規約（以下、「本規約」といいます。）を定めております。</p><br><h2>第１条（本規約の適用）</h2><ol><li>ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。</li><li>ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。</li></ol><br><h2>第２条（利用規約の改定など）</h2><ul><li>ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。</li><li>ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。</li><li>ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。</li></ul><br><h2>第３条（本アプリの利用）</h2><p>1. ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。ここに規約が入ります。</p></string>
</resources>
実際に表示
| Before | After |
|---|---|
 |
 |
なんか bullet が小さいような気もしますが、実装できたのでよし。
<ol> も使用しているんですが、<ul> と同じ bullet になるようですね。
Jetpack compose 1.8.0 関連の記事
Discussion