見出し画像

【Android】SwipeBackを使ってSlackアプリのリニューアルを再現してみる

hori

こんにちは、エンジニアのほりです。近場の温泉が続々と営業再開されてきました。

さて、slackアプリ、使ってますか？

アプリのUIがリニューアルされ、結構右に左にグングン画面遷移していくので慣れるまで迷子になりがちですが、慣れると親指１つで画面切り替えができてきて楽しいので、ちょっとそれを再現するレシピを備忘録として残そうと思いました。（個人的には好きな動きです）

ライブラリ紹介

今回使うのはこちらのライブラリです。

IOSではおなじみのスワイプで戻る操作を、Androidで実現してくれます。

サンプルアプリの構成

minSdkVersion 21に設定しています。

画面としては、

HomeActivityにBottomNavigationでChannel/DM/Mention/Profileを表示し、

メッセージ画面を想定したTalkActivityを用意しています。

導入

今回はReadmeを参考に、Gradleで依存解決します。

implementation 'com.github.liuguangqiang.swipeback:library:1.0.2@aar'

次にSwipeBackを適用させたい画面のxmlに対して、SwipeBackLayoutを配置します。

今回は、メッセージのやりとりをするTalkActivityで適用したいので、activity_talk.xmlのrootViewに設定します。

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   tools:context=".ui.activity.HomeActivity">

   <com.liuguangqiang.swipeback.SwipeBackLayout
       android:id="@+id/swipe_back"
       android:layout_width="match_parent"
       android:layout_height="match_parent">

       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:background="@android:color/white"
           android:orientation="vertical">

           <androidx.appcompat.widget.Toolbar
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:background="?attr/colorPrimary"
               android:minHeight="?attr/actionBarSize"
               android:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

           <TextView
               android:layout_width="match_parent"
               android:layout_height="0dp"
               android:layout_weight="1"
               android:gravity="center"
               android:text="Hello World!" />

       </LinearLayout>
   </com.liuguangqiang.swipeback.SwipeBackLayout>
</layout>

続いて、TalkActivityの方でSwipeBackLayoutに対して設定をします。

DragEdgeには「画面のどの端をSwipeするか」を指定しますが、今回は左端をSwipeして戻りたいので、LEFTを指定します。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    val binding = DataBindingUtil.setContentView<ActivityTalkBinding>(this, R.layout.activity_talk)
    binding.swipeBack.setDragEdge(SwipeBackLayout.DragEdge.LEFT)
}


TalkActivityのThemeで、背景を半透明にし、ActionBarを非表示にしてホーム画面に覆いかぶさるような画面遷移をしてもらうように設定します。

また同時に、画面遷移時のslideアニメーションを設定します。

transparentDarkGrayのカラーは適当に設定します。（今回は#88000000）

<style name="TalkTheme" parent="AppTheme">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@color/transparentDarkGray</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>

    <item name="android:windowEnterTransition">@android:transition/slide_right</item>
    <item name="android:windowExitTransition">@android:transition/slide_left</item>
</style>

ここまでの設定で以下のような動作になりました。

画像1

なんとなくそれっぽいですね。

検証

〜TalkActivityにRecyclerViewなどを配置しても正しくSwipeBackするのか〜

では、本家Slackのようにメッセージ画面にRecyclerViewのような形で、スクロールできるUIが存在する場合にどのような挙動をするか確認してみます。

結果はこんな感じでした

画像2

思った通りの挙動をしていますね。実機でも大丈夫そうです。

まとめ

それっぽい感じでできた。

今回はSwipeBackで、メッセージ画面から戻る挙動は再現できたが、本家Slackのようにホームから左フリックで再度メッセージ画面をかぶせるというのが難しそう。

今回のサンプルアプリのコードはこちら

最後に

現在採用強化中です！興味があれば、ぜひ一度お話しましょう！


この記事が気に入ったらサポートをしてみませんか？