[Android]SwipeRefreshLayoutを使わず引っ張って更新を作成した

はじめに
実装
失敗談
1. 失敗その１
2. 失敗その２
さいごに

はじめに

なんでSwipeRefreshLayoutを使わなかったの？うん。使いたかったよ？とっても使いたかったよ？pull to refreshがとっても楽に実装できるし、デザインガイドにもあってるし、Androidの標準装備だし使いたかったよ？（しつこい

なんで使わなかったかって言うと、お客さんにデザインが違うよって言われたから。まぁ、正確にはまだ言われてないんだけど、 SwipeRefreshLayout を使うとデザインが違うからお客さんと交渉をしなくてはならないらしく、面倒くさいなぁって思ったからｗ

ということで初めて引っ張って更新処理を自作した。

ただこれから載せる実装はとてもとても汎用性がないものなので参考程度に見てもらえたら嬉しいです。

実装

レイアウト

ScrollViewで引っ張って更新処理を作成した。プログレス部分にマイナスマージンを指定して、上のView部分にめり込ませるという荒業ｗ

<ScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/pullRefreshImageView"
            android:layout_width="?android:attr/actionBarSize"
            android:layout_height="?android:attr/actionBarSize"
            android:layout_gravity="center"
            android:layout_marginTop="-56dp"
            android:padding="14dp"
            app:lottie_loop="true"
            app:lottie_rawRes="@raw/loading" />
 </ScrollView>

プログレス部分にlottie使ってるのは気にしちゃいけない。lottieって何よ？ってなるから一応GitHubのリンクだけおいて置きます。素敵アニメーションが作れるライブラリです。

GitHub - airbnb/lottie-android: Render After Effects animations natively on Android and iOS, Web, and React Native

Render After Effects animations natively on Android and iOS, Web, and React Native - airbnb/lottie-android

コード

ScrollViewのタッチイベントでScrollViewが一番上にいるときに下方向にスワイプしたらScrollViewのMarginTopをスワイプ分増やすっていう作戦。もりもりずらしています。

//
var scrollY: Int = 0
var oldMoveY: Float = 0f
var newMoveY: Float = 0f
var isRefresing = false

private fun initPullRefresh() {
    scrollView.setOnScrollChangeListener { v, scrollX, scrollY, oldScrollX, oldScrollY ->
        this.scrollY = scrollY
    }

    scrollView.setOnTouchListener { v, event ->

        if (scrollY > 0 || isRefresing) return@setOnTouchListener false

        val marginTop = resources.getDimensionPixelSize(R.dimen.margin_56dp)

        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                oldMoveY = event.y
            }
            MotionEvent.ACTION_MOVE -> {
                newMoveY = event.y - oldMoveY
                pullRefreshImageView.progress = newMoveY / 1000
                if (newMoveY > 0) {
                    setPullRefreshImageViewMargin(newMoveY.toInt() - marginTop)
                    return@setOnTouchListener true
                }
            }
            MotionEvent.ACTION_UP -> {
                oldMoveY = 0f
                // プログレスが全部表示されていたら更新する
                if (newMoveY > marginTop) {
                    setPullRefreshImageViewMargin(0, true, newMoveY.toInt() - marginTop)
                    isRefresing = true
                    pullRefreshImageView.playAnimation()

                    // API通信処理とか

                } else {
                    setPullRefreshImageViewMargin(marginTop * -1, true, newMoveY.toInt() - marginTop)
                }
            }

        }
        return@setOnTouchListener false

    }
}

マージンでもりもりずらしているメソッド。

else文で何をやっているかって言うと、更新処理後にプログレス部分を消す際に何も気にせずにマイナスマージンを指定するといきなりプログレス部分がいきなり消えて目が痛かったので対処した。

やってることは似非アニメーション。アニメーションでやろうかなって思ったんだけど、なんか面倒になったのでHandlerで定期実行してアニメーションさせてやったｗ

//
val handler = Handler()
var runnableCode: Runnable? = null
private fun setPullRefreshImageViewMargin(marginTop: Int, isHide: Boolean = false, nowMargin: Int = 0) {


    if (!isHide) {
        val layoutParams = pullRefreshImageView.layoutParams as ViewGroup.MarginLayoutParams
        layoutParams.topMargin = marginTop
        pullRefreshImageView.layoutParams = layoutParams
    } else {
        var margin = nowMargin

        handler.removeCallbacks(runnableCode)
        runnableCode = object : Runnable {
            override fun run() {
                margin -= if (marginTop == 0) {
                    60
                } else {
                    30
                }
                if (margin <= marginTop) {
                    setPullRefreshImageViewMargin(marginTop)
                    return
                }
                setPullRefreshImageViewMargin(margin)
                handler.postDelayed(this, 1)
            }
        }
        handler.post(runnableCode)
    }
}