Android 滑动悬浮置顶指南

Android 滑动悬浮置顶效果的新实现（有完整的xml代码）
Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar （有比较详细的说明xml的属性的意思，同时介绍了TabLayout）
android CoordinatorLayout使用（详细的说明了CoordinatorLayout使用的例子）
Android CoordinatorLayout + AppBarLayout(向上滚动隐藏指定的View) （就是看它终于明白了，如果想实现滑动悬浮置顶，必须要有CoordinatorLayout + AppBarLayout）
android 控件 NestedScrollView （解释了为什么一定要用NestedScrollView）

我自己的xml代码，加上一些理解后的注释

需要注意的有几点：
1.CollapsingToolbarLayout必须设置app:layout_scrollFlags=”scroll”，他才可以滑动。
2.NestedScrollView必须设置app:layout_behavior这个属性，他们才会联动。
3.NestedScrollView里面如果嵌套listview等可滑动的布局时要重写listview的onmeasures方法（网上一大堆）。

新项目中仿支付宝的浮动效果
计算距离添加淡入淡出效果
滑动卡顿就当recyclerView滑动到第一个的时候打开appBarLayout

fragment_fish.xml

ele_title_bar.xml

ele_title_bar_collapse.xml

FishFragment.kt

package com.example.administrator.tempdemo.fragment

import android.app.Activity
import android.content.Context
import android.graphics.Color
import android.os.Bundle
import android.support.design.widget.AppBarLayout
import android.support.v4.content.ContextCompat
import android.support.v7.widget.LinearLayoutManager
import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.MotionEvent
import android.view.View
import android.view.ViewGroup
import com.example.administrator.tempdemo.BaseFragment
import com.example.administrator.tempdemo.R
import com.example.administrator.tempdemo.adapter.FishPondInfoAdapter
import com.example.administrator.tempdemo.model.FishPondInfo
import com.example.administrator.tempdemo.presenter.FishPresenter
import com.example.administrator.tempdemo.view.FishView
import com.github.jdsjlzx.ItemDecoration.DividerDecoration
import com.github.jdsjlzx.recyclerview.LRecyclerViewAdapter
import com.github.jdsjlzx.recyclerview.ProgressStyle
import kotlinx.android.synthetic.main.ele_title_bar.*
import kotlinx.android.synthetic.main.ele_title_bar_collapse.*
import kotlinx.android.synthetic.main.fragment_fish.*
import org.jetbrains.anko.onClick
import org.jetbrains.anko.onTouch
import org.jetbrains.anko.support.v4.find
import org.jetbrains.anko.support.v4.toast

/**
 * Created by Administrator on 2017/6/28.
 */
class FishFragment: BaseFragment(), FishView, AppBarLayout.OnOffsetChangedListener {


    lateinit var fishPresenter: FishPresenter
    lateinit var fishListener: FishListener
    lateinit var fishPondInfoList: MutableList

    lateinit var mFishPondInfoAdapter: FishPondInfoAdapter
    lateinit var mLRecyclerViewAdapter: LRecyclerViewAdapter
    lateinit var layoutManager: LinearLayoutManager

    var mMaskColor: Int = 0

    interface FishListener{

    }

    companion object{
        fun newInstance(): FishFragment{
            return FishFragment()
        }
    }

    override fun onAttach(activity: Activity?) {
        super.onAttach(activity)
        if(activity is FishListener){
            fishListener = activity
        }
    }

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var view = inflater!!.inflate(R.layout.fragment_fish, null)
        fishPresenter = FishPresenter(this)
        return view
    }

    override fun onViewCreated(view: View?, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        initView()
        initListener()
        if(savedInstanceState == null){
            this.fishPresenter.loadDataList()
        }
    }

    override fun renderFishPondInfoList(fishPondInfoList: MutableList) {
        if(fishPondInfoList != null){
            mFishPondInfoAdapter.fishPondInfoList = fishPondInfoList
            mLRecyclerViewAdapter.notifyDataSetChanged()
            lv_fish_pond_info.refreshComplete(fishPondInfoList.size)
        }
    }

    fun initView(){
        mFishPondInfoAdapter = FishPondInfoAdapter(context)
        mLRecyclerViewAdapter = LRecyclerViewAdapter(mFishPondInfoAdapter)
        tv_title.text = getString(R.string.main_fish)
        lv_fish_pond_info.adapter = mLRecyclerViewAdapter
        var divider = DividerDecoration.Builder(context)
                .setHeight(R.dimen.fish_pond_info_divider)
                .setColorResource(R.color.white)
                .build()
        lv_fish_pond_info.addItemDecoration(divider)
        layoutManager = LinearLayoutManager(context)
        lv_fish_pond_info.layoutManager = layoutManager
        //RecyclerView添加Header
        var header = LayoutInflater.from(context).inflate(R.layout.item_fish_now_text_view, activity.findViewById(android.R.id.content) as ViewGroup, false)
        mLRecyclerViewAdapter.addHeaderView(header)
        //下拉刷新样式
        lv_fish_pond_info.setRefreshProgressStyle(ProgressStyle.LineSpinFadeLoader);
        lv_fish_pond_info.setArrowImageView(R.drawable.ic_pulltorefresh_arrow);
        //禁止上拉加载
        lv_fish_pond_info.setLoadMoreEnabled(false)

        mMaskColor = ContextCompat.getColor(context, R.color.blue)
        abl_bar.addOnOffsetChangedListener(this)
    }

    fun initListener(){
        rl_top_fish_info.onTouch { _, event ->
            when(event!!.action){
                MotionEvent.ACTION_DOWN -> {
                    iv_top_fish_info.background = ContextCompat.getDrawable(activity, R.drawable.top_icon_big_fish_pressed)
                    tv_top_fish_info.setTextColor(ContextCompat.getColor(activity, R.color.blue_pressed))
                }
                MotionEvent.ACTION_UP -> {
                    iv_top_fish_info.background = ContextCompat.getDrawable(activity, R.drawable.top_icon_big_fish)
                    tv_top_fish_info.setTextColor(ContextCompat.getColor(activity, R.color.white))
                }
                MotionEvent.ACTION_CANCEL -> {
                    iv_top_fish_info.background = ContextCompat.getDrawable(activity, R.drawable.top_icon_big_fish)
                    tv_top_fish_info.setTextColor(ContextCompat.getColor(activity, R.color.white))
                }
            }
            false
        }
        rl_top_device_info.onTouch { _, event ->
            when(event!!.action){
                MotionEvent.ACTION_DOWN -> {
                    iv_top_device_info.background = ContextCompat.getDrawable(activity, R.drawable.top_icon_device_pressed)
                    tv_top_device_info.setTextColor(ContextCompat.getColor(activity, R.color.blue_pressed))
                }
                MotionEvent.ACTION_UP -> {
                    iv_top_device_info.background = ContextCompat.getDrawable(activity, R.drawable.top_icon_device)
                    tv_top_device_info.setTextColor(ContextCompat.getColor(activity, R.color.white))
                }
                MotionEvent.ACTION_CANCEL -> {
                    iv_top_device_info.background = ContextCompat.getDrawable(activity, R.drawable.top_icon_device)
                    tv_top_device_info.setTextColor(ContextCompat.getColor(activity, R.color.white))
                }
            }
            false
        }
        rl_top_data_list.onTouch { _, event ->
            when(event!!.action){
                MotionEvent.ACTION_DOWN -> {
                    iv_top_data_info.background = ContextCompat.getDrawable(activity, R.drawable.top_icon_data_pressed)
                    tv_top_data_info.setTextColor(ContextCompat.getColor(activity, R.color.blue_pressed))
                }
                MotionEvent.ACTION_UP -> {
                    iv_top_data_info.background = ContextCompat.getDrawable(activity, R.drawable.top_icon_data)
                    tv_top_data_info.setTextColor(ContextCompat.getColor(activity, R.color.white))
                }
                MotionEvent.ACTION_CANCEL -> {
                    iv_top_data_info.background = ContextCompat.getDrawable(activity, R.drawable.top_icon_data)
                    tv_top_data_info.setTextColor(ContextCompat.getColor(activity, R.color.white))
                }
            }
            false
        }
        rl_top_fish_info.onClick {
            toast("fish")
        }
        rl_top_device_info.onClick {
            toast("device")
        }
        rl_top_data_list.onClick {
            toast("data")
        }
        //下拉刷新监听
        lv_fish_pond_info.setOnRefreshListener {
            loadDataList()
        }
        //RecyclerView滑动监听
        lv_fish_pond_info.addOnScrollListener(object: RecyclerView.OnScrollListener(){
            override fun onScrollStateChanged(recyclerView: RecyclerView?, newState: Int) {
                super.onScrollStateChanged(recyclerView, newState)
                if (newState == RecyclerView.SCROLL_STATE_IDLE) {
                    var firstVisiblePosition = layoutManager.findFirstCompletelyVisibleItemPosition();
                    if (firstVisiblePosition == 0) {
                        abl_bar.setExpanded(true, true);
                    }
                }
            }
        })
    }

    fun loadDataList(){
        this.fishPresenter.loadDataList()
    }

    override fun showLoading() {
    }

    override fun hideLoading() {
    }

    override fun context(): Context {
        return context.applicationContext
    }

    override fun onOffsetChanged(appBarLayout: AppBarLayout?, verticalOffset: Int) {
        var offset = Math.abs(verticalOffset)
        var total = appBarLayout!!.totalScrollRange
        var alphaIn = offset
        var alphaOut = 0
        if((200 - offset) > 0){
            alphaOut = 200 - offset
        }
        var maskColorIn = Color.argb(alphaIn, Color.red(mMaskColor), Color.green(mMaskColor), Color.blue(mMaskColor))
        var maskColorInDouble = Color.argb(alphaIn*2, Color.red(mMaskColor), Color.green(mMaskColor), Color.blue(mMaskColor))
        var maskColorOut = Color.argb(alphaOut*2, Color.red(mMaskColor), Color.green(mMaskColor), Color.blue(mMaskColor))
        if(offset <= total/2){
            tl_expand.visibility = View.VISIBLE
            tl_collapse.visibility = View.GONE
            v_expand_mask.setBackgroundColor(maskColorInDouble)
        }else{
            tl_expand.visibility = View.GONE
            tl_collapse.visibility = View.VISIBLE
            v_collapse_mask.setBackgroundColor(maskColorOut)
        }
        v_pay_mask.setBackgroundColor(maskColorIn)
    }
}

完美

好好学习，天天向上。<(￣oo,￣)/

Potato_zero.jpg

Android 滑动悬浮置顶指南

fragment_fish.xml

ele_title_bar.xml

ele_title_bar_collapse.xml

FishFragment.kt

你可能感兴趣的:(Android 滑动悬浮置顶指南)