recyclerview+viewpager多分類fragmentインタフェース擬京東分類インタフェースを実現

久しぶりにブログを书きましたが、今日は简単な机能を书くことにしました.
これは私が2018年10月に京東appで録画した彼らの分類インタフェースです.今日は主にこのような分類インタフェースを実現しています.
考えを整理する.
まずは考えを整理しましょう.全体的なインタフェースの実現方式は多いかもしれませんが、できるだけ簡単な方法で、例えば左の分類インタフェースと右のものを一緒に見るとtablayout+viewpagerでも実現できるようですか?彼らはみな垂直で、私たちは普段水平を使っていますが、実現すべきなら問題ではありません.では、この文章は主にrecyclerview+viewpagerを使ってこのインタフェースを実現することを説明しています.まず、新しいプロジェクトを作成して基本的なパッケージをインポートします.

implementation   'com.android.support:recyclerview-v7:27.1.1'

インタフェースのレイアウトの考え方を決定した後、まず私たちのレイアウトファイルを見てみましょう.
トップページのレイアウト

簡単ですね.左のrecyclerview、右のviewpager、次に私たちの論理コードを見てください.
トップページコード
まずここでは、左の分類はインタフェースでデータを得た後に作成されることが多いので、ここでは偽のデータを使用します.

private var mAdapter: CategoryRecyclerAdapter? = null
    private var mPagerAdapter: FragmentPagerAdapter? = null
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        //                    
        var list = mutableListOf()
        for (i in 1..10) {
            list.add("test$i")
        }
        showCategory(list)
    }


    private fun showCategory(list: List) {
        //    recyclerView     adapter
        mAdapter = CategoryRecyclerAdapter()
        follow_category_rv.adapter = mAdapter
        follow_category_rv.layoutManager = LinearLayoutManager(this)
        mAdapter?.setData(list)

        //    viewpager  adapter
        mPagerAdapter = FragmentPagerAdapter(supportFragmentManager, list)
        follow_fragment_viewpager.adapter = mPagerAdapter

        //recyclerView item    
        mAdapter?.listener = { _, position ->
            follow_fragment_viewpager.currentItem = position
        }
    }

MKでブログを書くのは久しぶりですが、なぜコードモジュールが赤いのか.上のコードを見てみると簡単ですが、adapterのコードについてもコメントを追加しました.文末にリンクします.まず効果を見てみましょう.悪くないようですが、viewpagerは左右にスライドしています.しかも左右にスライドしてviewpager左の分類も変わるので、これはちょっとおかしいようです.次に最適化を始めます
まずviewpagerでアニメーションを切り替えます.
viwepagerアニメーションコードの切り替え

/**
 * introduce：     
 * createBy：sunwentao
 * email：[email protected]
 * time: 9/10/18
 */
class DefaultTransformer : ViewPager.PageTransformer {

    override fun transformPage(view: View, position: Float) {
        var alpha = 0f
        if (position in 0.0..1.0) {
            alpha = 1 - position
        } else if (-1 < position && position < 0) {
            alpha = position + 1
        }
        view.alpha = alpha
        view.translationX = view.width * -position
        val yPosition = position * view.height
        view.translationY = yPosition
    }
}

私たちのviewpager設定に効果を見せてください.

follow_fragment_viewpager.setPageTransformer(true, DefaultTransformer())

見た目は悪くないですが、viewpagerのスライドイベントに応答するのはやはり左右で、今のgif図は私が操作している左の分類で、右のviewpager応答で、逆にviewpager切替はやはり左右のスライドが必要で、これはもちろんだめです.ps:viewpagerを必要とせずに手動で切り替える人もいれば、クリックして分類を切り替えるだけです
上下スライドviewpager

/**
 * introduce：     
 * createBy：sunwentao
 * email：[email protected]
 * time: 9/10/18
 */
class VerticalViewPager : ViewPager {

    private var noScroll = false

    constructor(context: Context) : super(context) {}

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {}

    private fun swapTouchEvent(event: MotionEvent): MotionEvent {
        val width = width.toFloat()
        val height = height.toFloat()
        event.setLocation(event.y / height * width, event.x / width * height)
        return event
    }

    override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
        return super.onInterceptTouchEvent(swapTouchEvent(MotionEvent.obtain(event)))
    }

    override fun onTouchEvent(ev: MotionEvent): Boolean {
        return if (noScroll)
            false
        else
            super.onTouchEvent(swapTouchEvent(MotionEvent.obtain(ev)))
    }

    //       viewpager            true      onInterceptTouchEvent  
    fun setNoScroll(noScroll: Boolean) {
        this.noScroll = noScroll
    }

}

まずコードを見てください.これは私がネット上で見つけた他の人の実現方法です.viewpagerのこれらの方法を書き換えることで、次のような上下のviewpagerを得ることができます.同時に私は中にsetNoScrollを追加して、注釈を見てください.これはviewpagerがスライドイベントに応答しないように操作するためのものです.
ここまで悪くないようですが、最後に口を開いてください.右側のfragmentが上引きでもっと多くのネットをロードしている場合は、私はお勧めします.
2つの実装方法1があり、簡単な実装は静止viewpagerスライドであり、左の分類でしか制御できない.右側のfragmentでの操作は全く問題ありませんが、
2、もう一つ、recyclerviewの内部処理を書き直してスライド衝突を処理することで、このようにアップロードに応答することができます.この事件はここまで差が少なくてなくなりました.次はリンクコードの点数が多い人です.直接csdnダウンロードの点数がないgithubダウンロードです.私は本当に彼のmiaoの考えが行き届いています.csdn:https://download.csdn.net/download/qq_15527709/10721472 github:https://github.com/BigSweet/recycler_viewpager