CoordinatorLayout+CollapsingToolbarLayout实现仿美团外卖，京东，安居客等搜索框上推及筛选项悬停（二）

概述CoordinatorLayout+CollapsingToolbarLayout实现仿美团外卖，京东，安居客等搜索框上推及筛选项悬停（二）如图：上一篇介绍了用NestedScrollView+TabLayout+RecyclerView方案实现搜索框上推，但是是以牺牲RecyclerView的性能为代价的，因此不是一个完美的方案。本文介绍使用系统的Coordi

CoordinatorLayout+CollapsingToolbarLayout实现仿美团外卖，京东，安居客等搜索框上推及筛选项悬停（二）

如图：上一篇介绍了用nestedScrollVIEw+TabLayout+RecyclerVIEw方案实现搜索框上推，但是是以牺牲RecyclerVIEw的性能为代价的，因此不是一个完美的方案。本文介绍使用系统的CoordinatorLayout+AppbarLayout+CollapsingToolbarLayout+TabLayout+RecyclerVIEw来实现相同的功能，且可以用于正式项目。

思路分析：因为CollapsingToolbarLayout本身就是折叠布局，可以折叠内容。因此我们只需要实现搜索框的上推。而上一篇搜索框的上推是通过监听nestedScrollVIEw的垂直方向滑动距离实现的。本篇通过监听AppbarLayout的滑动距离来实现。代码几乎可以一字不改的用上一篇的的代码就能实现搜索框上推，更加的简单。由于此篇太简单了，直接上代码

实现区域折叠，直接通过CollapsingToolbarLayout就可以实现，所以直接用xml就可以了，代码如下：

<?xml version="1.0" enCoding="utf-8"?><androID.support.design.Widget.CoordinatorLayout    androID:ID="@+ID/coordinator"    androID:layout_wIDth="match_parent"    androID:layout_height="match_parent"    xmlns:app="http://schemas.androID.com/apk/res-auto"    xmlns:androID="http://schemas.androID.com/apk/res/androID">    <androID.support.design.Widget.AppbarLayout        androID:ID="@+ID/appbar"        androID:layout_wIDth="match_parent"        androID:layout_height="wrap_content"        androID:background="#00000000"        app:elevation="0dp">        <!--  app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" snap表示必须滑动到收缩或折叠否则会自动回d-->        <androID.support.design.Widget.CollapsingToolbarLayout            androID:layout_wIDth="match_parent"            androID:layout_height="wrap_content"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <linearLayout                androID:ID="@+ID/top"                androID:layout_wIDth="match_parent"                androID:layout_height="200dp"                androID:layout_margintop="100dp"                androID:gravity="center"                androID:background="#ccc"                app:layout_collapseMode="parallax">                <TextVIEw                    androID:layout_wIDth="wrap_content"                    androID:layout_height="wrap_content"                    androID:text="这里是顶部可以折叠的内容区域"                    androID:textSize="16sp" />            </linearLayout>            <androID.support.v7.Widget.Toolbar                androID:ID="@+ID/toolbar"                androID:layout_wIDth="match_parent"                androID:layout_height="wrap_content"                androID:padding="0dp"                app:contentInsetEnd="0dp"                app:contentInsetleft="0dp"                app:contentInsetStart="0dp"                app:layout_collapseMode="pin"                androID:background="#fff"                app:Titlemargin="0dp">                <relativeLayout                    androID:layout_wIDth="match_parent"                    androID:layout_height="wrap_content">                    <linearLayout                        androID:ID="@+ID/Title_bar"                        androID:layout_wIDth="match_parent"                        androID:layout_height="50dp"                        androID:gravity="center_vertical">                        <TextVIEw                            androID:ID="@+ID/city_tv"                            androID:layout_wIDth="wrap_content"                            androID:layout_height="wrap_content"                            androID:layout_marginStart="16dp"                            androID:layout_marginleft="16dp"                            androID:layout_marginEnd="16dp"                            androID:drawablepadding="16dp"                            androID:text="重庆"                            androID:textStyle="bold" />                        <VIEw                            androID:ID="@+ID/mainTitle"                            androID:layout_wIDth="0dp"                            androID:layout_height="35dp"                            androID:layout_weight="1"/>                        <TextVIEw                            androID:ID="@+ID/map_iv"                            androID:layout_wIDth="wrap_content"                            androID:layout_height="wrap_content"                            androID:layout_marginStart="16dp"                            androID:layout_marginleft="16dp"                            androID:paddingRight="16dp"                            androID:text="展开"                            androID:textStyle="bold" />                    </linearLayout>                    <linearLayout                        androID:ID="@+ID/search_lin"                        androID:layout_wIDth="match_parent"                        androID:layout_height="40dp"                        androID:layout_marginleft="16dp"                        androID:layout_marginRight="16dp"                        androID:layout_margintop="50dp"                        androID:layout_marginBottom="10dp"                        androID:background="@drawable/main_search_bg"                        androID:layout_alignParentleft="true">                        <TextVIEw                            androID:layout_wIDth="wrap_content"                            androID:layout_height="wrap_content"                            androID:layout_marginleft="18dp"                            androID:paddingtop="8dp"                            androID:paddingBottom="8dp"                            androID:text="找好铺"                            androID:textcolor="#AFB4B9"                            androID:singleline="true"                            androID:ellipsize="end" />                    </linearLayout>                </relativeLayout>            </androID.support.v7.Widget.Toolbar>        </androID.support.design.Widget.CollapsingToolbarLayout>        <androID.support.design.Widget.TabLayout            androID:ID="@+ID/tablayout_real"            androID:layout_wIDth="match_parent"            androID:layout_height="50dp"            androID:background="#ff0000"            app:tabIndicatorcolor="@color/colorPrimary"            app:tabMode="scrollable"            app:tabSelectedTextcolor="@color/colorPrimary" />    </androID.support.design.Widget.AppbarLayout>    <androID.support.v7.Widget.RecyclerVIEw        androID:ID="@+ID/recyclerVIEw"        androID:layout_wIDth="match_parent"        androID:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_vIEw_behavior"/></androID.support.design.Widget.CoordinatorLayout>

收缩框上推，直接使用上一篇的代码，不清楚的可以看上一篇。这里只需要注意初始化搜索框的位置一定要等appbar绘制完成后， 否则获取的初始值会是0，即 appbar.post必不可少。

package com.tabscroll;import androID.content.Context;import androID.graphics.Point;import androID.os.Build;import androID.os.Bundle;import androID.support.design.Widget.AppbarLayout;import androID.support.design.Widget.CoordinatorLayout;import androID.support.design.Widget.TabLayout;import androID.support.v7.app.AppCompatActivity;import androID.support.v7.Widget.linearlayoutmanager;import androID.support.v7.Widget.RecyclerVIEw;import androID.support.v7.Widget.Toolbar;import androID.util.TypedValue;import androID.vIEw.VIEw;import androID.vIEw.VIEwGroup;import androID.vIEw.WindowManager;import androID.Widget.linearLayout;import androID.Widget.TextVIEw;public class CoodActivity extends AppCompatActivity {    protected linearLayout top;    protected TextVIEw cityTv;    protected VIEw mainTitle;    protected TextVIEw mAPIv;    protected linearLayout Titlebar;    protected linearLayout searchlin;    protected Toolbar toolbar;    protected TabLayout tablayoutReal;    protected AppbarLayout appbar;    protected RecyclerVIEw recyclerVIEw;    protected CoordinatorLayout coordinator;    private linearlayoutmanager manager;    private String[] tabTxt = {"客厅", "卧室", "餐厅", "书房", "阳台", "儿童房"};    @OverrIDe    protected voID onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        super.setContentVIEw(R.layout.activity_cood);        initVIEw();    }    private voID initVIEw() {        top = (linearLayout) findVIEwByID(R.ID.top);        cityTv = (TextVIEw) findVIEwByID(R.ID.city_tv);        mainTitle = (VIEw) findVIEwByID(R.ID.mainTitle);        mAPIv = (TextVIEw) findVIEwByID(R.ID.map_iv);        Titlebar = (linearLayout) findVIEwByID(R.ID.Title_bar);        searchlin = (linearLayout) findVIEwByID(R.ID.search_lin);        toolbar = (Toolbar) findVIEwByID(R.ID.toolbar);        tablayoutReal = (TabLayout) findVIEwByID(R.ID.tablayout_real);        appbar = (AppbarLayout) findVIEwByID(R.ID.appbar);        recyclerVIEw = (RecyclerVIEw) findVIEwByID(R.ID.recyclerVIEw);        coordinator = (CoordinatorLayout) findVIEwByID(R.ID.coordinator);        for (int i = 0; i < tabTxt.length; i++) {            tablayoutReal.addTab(tablayoutReal.newTab().setText(tabTxt[i]));        }        manager = new linearlayoutmanager(this);        recyclerVIEw.setLayoutManager(manager);        recyclerVIEw.setAdapter(new MyAdapter(this, tabTxt, 0));        appbar.post(new Runnable() {            @OverrIDe            public voID run() {                translate();            }        });        mAPIv.setonClickListener(new VIEw.OnClickListener() {            @OverrIDe            public voID onClick(VIEw vIEw) {                recyclerVIEw.smoothScrollToposition(0);                appbar.setExpanded(true);            }        });    }    private voID translate() {        appbar.addOnOffsetChangedListener(new AppbarLayout.OnOffsetChangedListener() {            private VIEwGroup.marginLayoutParams searchLayoutParams = (VIEwGroup.marginLayoutParams) searchlin.getLayoutParams();            private float searchLayoutNewtopmargin = 0f;            private float searchLayoutNewleftmargin = 0f;            private float searchLayoutNewWIDth = 0f;            private float Alpha = 0f;            private float MIN_top_margin = mainTitle.gettop();            private float MAX_top_margin = Titlebar.getBottom();            private float MAX_WIDTH = searchlin.getWIDth();            private float MIN_WIDTH = getScreenWIDth() - cityTv.getRight() - 		 mAPIv.getWIDth() - dp2px(CoodActivity.this,16) * 2;            private float MIN_left_margin = searchlin.getleft();            private float MAX_left_margin = cityTv.getRight() +  dp2px(CoodActivity.this,16) ;            private float mDy;            @OverrIDe            public voID onOffsetChanged(AppbarLayout appbarLayout, int verticalOffset) {                mDy = -verticalOffset;                searchLayoutNewtopmargin = MAX_top_margin - mDy * 0.5f;                if (searchLayoutNewtopmargin < MIN_top_margin) {                    searchLayoutNewtopmargin = MIN_top_margin;                }                if (searchLayoutNewtopmargin > MAX_top_margin) {                    searchLayoutNewtopmargin = MAX_top_margin;                }                searchLayoutNewleftmargin = MIN_left_margin + mDy * 0.5f;                if (searchLayoutNewleftmargin > MAX_left_margin) {                    searchLayoutNewleftmargin = MAX_left_margin;                }                if (searchLayoutNewleftmargin < MIN_left_margin) {                    searchLayoutNewleftmargin = MIN_left_margin;                }                searchLayoutNewWIDth = MAX_WIDTH - mDy * 1.0f;                if (searchLayoutNewWIDth < MIN_WIDTH) {                    searchLayoutNewWIDth = MIN_WIDTH;                }                if (searchLayoutNewWIDth > MAX_WIDTH) {                    searchLayoutNewWIDth = MAX_WIDTH;                }                searchLayoutParams.topmargin = (int) searchLayoutNewtopmargin;                searchLayoutParams.leftmargin = (int) searchLayoutNewleftmargin;                searchLayoutParams.wIDth = (int) searchLayoutNewWIDth;                searchlin.setLayoutParams(searchLayoutParams);            }        });    }    public  int dp2px(Context context, float dpVal) {        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,                dpVal, context.getResources().getdisplayMetrics());    }    public  int getScreenWIDth() {        WindowManager wm = (WindowManager) CoodActivity.this.getApplication().getSystemService(Context.WINDOW_SERVICE);        if (wm == null) return -1;        Point point = new Point();        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {            wm.getDefaultdisplay().getRealSize(point);        } else {            wm.getDefaultdisplay().getSize(point);        }        return point.x;    }}

源码下载：https://download.csdn.net/download/hzmming2008/15433788

总结

以上是内存溢出为你收集整理的CoordinatorLayout+CollapsingToolbarLayout实现仿美团外卖，京东，安居客等搜索框上推及筛选项悬停（二）全部内容，希望文章能够帮你解决CoordinatorLayout+CollapsingToolbarLayout实现仿美团外卖，京东，安居客等搜索框上推及筛选项悬停（二）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。