最新のIT技術を駆使して音楽関連サービスを展開しています。日々の活動内容から得た知識をお届けする開発ブログです。KotlinB!はじめにこんにちは。今回はAndroidアプリのUIの実装について記事を書きます。Androidには現在2種類のUI構築方法があります。Composeによる実装を推奨しています。推奨の最新ツールキットです。Composeによる宣言的アプローチへと進化しました。XMLを使用した方法では、レイアウトを視覚的に構築しやすい一方で、動的なUI変更やカスタムビューの作成においては冗長なコードが必要でした。ComposeはUIをコードで直接記述し、状態に応じて自動的に更新されるため、柔軟で保守性の高いUI開発が可能です。この変遷により、開発者はよりシンプルで効率的な方法でモダンなUIを構築できるようになっています。Composeを使った開発を推奨しています。Composeでの構築に移行することがしばしばあります。Composeの一番最初の安定版ライブラリが出てから、3年が経ちました。作れるUIの幅も広がってきたのですが、まだライブラリとしてサポートされていない機能もいくつか存在します。Bar)が変形するレイアウトのことComposeではTopAppBarとしているつい最近追加されて可能になったものあるくらいです。ドロップ(リスト上でのものとは少し異なる)ViewPager横にスワイプで画面全体を切り替えられるUIのことまだ対応されていないが、どうしても実装しないといけないUIに関しては自前で実装する必要が出てきます。ドロップについて書いていきます。実現したい機能についてまず、今回Composeで実現したいUIについて細かく説明していきます。XMLではRecyclerViewとItemTouchHelperを合わせて使うことで、リスト上での並び替えの実装が可能でした。以下が実際にRecyclerViewとXMLで実装した場合の動きです。前述したように、Composeでの並び替えはまだ正式なライブラリが出てません。したがって、自前で実装していく必要があります。(非公式のライブラリは、探せば割と見つけることができます。)達成したいポイントComposeにする際に達成しておきたい点は以下になります。ドラッグ&ドロップで楽曲の並び替えができるただし、楽曲以外の要素が並び替わることがないようにする並び替えようとしているアイテムが画面の端に来たときはスクロールをする上記を達成できれば、並び替えに関してはXMLからComposeへの移行ができたことになります。上記で話した達成したいポイントがクリアできるようなアプリを実装します。実装する上でやることは以下です。長押しによるドラッグ&ドロップアイテムの並び替えオーバースクロール(ドラッグしたアイテムが画面端に来た時にスクロールさせる)長押しによるドラッグ&ドロップ長押しによって、アイテムをドラッグ&ドロップできるようにするために、Modifierの修飾子で設定する必要があります。pointerInputにはPointerInputScopeを渡すことで特定のジェスチャーを検出できます。今回は長押しの際のジャスチャーを検出したいため、detectDragGesturesAfterLongPressを使用します。実際にコードは以下の様になります。draggedItem.index}},・・・)}・・・)visibleItemsInfoは、LazyColumnで表示しているアイテムの情報を取得できます。itemsスコープ内で指定したアイテムは、すべてこのリストの中に情報が格納される様になっています。今回はリスト内に含まれる全てのアイテムの位置を、1つずつ確認していきます。タップした位置がリスト内のどのアイテムの位置になるかを検出することで、ドラッグするアイテムを検知できます。図で表すと下記のような感じです。上記コードでは、赤いタップした箇所とそれぞれのアイテムの枠内に含まれるかをチェックして、タップした箇所があるアイテムの枠内に含まれた場合は、そのアイテムをドラッグするアイテムとする処理になります。2つ目のアイテムの枠内に含まれる場合は、以下の式で含まれているか否かを判定します。