仿支付宝首页头部折叠效果以及二级应用列表点击效果（上）
最近在使用支付宝的时候看了一下首页效果以及二级应用页面的点击效果，觉得很酷炫，因此自己做了一个demo尝试一下效果，先看一下效果图。 
这边实现头部折叠效果是采用了CollapsingToolbarLayout，这个是谷歌推出的design library中的新型控件，它继承FrameLayout，直接看看怎么使用吧。
先在build.gradle中进行依赖
implementation fileTree(include: ['*.jar'], dir: 'libs') implementation 'com.android.support:appcompat-v7:27.1.1' implementation 'com.android.support:design:27.1.1'
这是布局代码：
xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".view.ScrollingActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="@dimen/app_bar_height" > <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbar_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:titleEnabled="false" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" app:toolbarId="@+id/toolbar" > <include layout="@layout/toolbarone">include> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:title="" app:popupTheme="@style/AppTheme.PopupOverlay"> <include layout="@layout/toolbartwo" android:visibility="gone">include> android.support.v7.widget.Toolbar> android.support.design.widget.CollapsingToolbarLayout> android.support.design.widget.AppBarLayout> <include layout="@layout/content_scrolling" /> android.support.design.widget.CoordinatorLayout>
很简单的布局，toolbarone的布局xml
xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/toolbarone" > <RelativeLayout android:id="@+id/navigation_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/first_shape_search" android:gravity="center|start" android:layout_margin="8dp" android:layout_toLeftOf="@id/imper" android:orientation="horizontal"> <TextView android:id="@+id/toolbar_search" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="4dp" android:drawableLeft="@drawable/ic_search_black_24dp" android:gravity="center|start" android:layout_centerVertical="true" android:text="外卖" android:textColor="#fff" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:src="@drawable/ic_keyboard_voice_black_24dp" /> RelativeLayout> <ImageView android:id="@+id/imper" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="8dp" android:src="@drawable/ic_person_black_24dp" android:layout_toLeftOf="@id/imd"/> <ImageView android:id="@+id/imd" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="8dp" android:layout_marginRight="4dp" android:src="@drawable/ic_add_black_24dp" android:layout_alignParentRight="true"/> <LinearLayout android:layout_below="@+id/navigation_layout" android:orientation="horizontal" android:layout_width="match_parent" android:layout_marginTop="12dp" android:layout_height="wrap_content" android:id="@+id/toolbarheader"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="8dp" android:layout_weight="1"> <ImageView android:id="@+id/scan" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="@dimen/dp_4" android:layout_centerHorizontal="true" android:src="@drawable/notify_scan" /> <TextView android:layout_below="@+id/scan" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/dp_4" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="扫一扫"/> RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="8dp" android:layout_weight="1"> <ImageView android:id="@+id/payment" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:padding="@dimen/dp_4" android:src="@drawable/notify_payment"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/payment" android:layout_marginTop="@dimen/dp_4" android:layout_centerVertical="true" android:layout_centerHorizontal="true" android:text="付钱"/> RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="8dp" android:layout_weight="1"> <ImageView android:id="@+id/transfer" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:padding="@dimen/dp_4" android:src="@drawable/notify_transfer"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/transfer" android:layout_marginTop="@dimen/dp_4" android:layout_centerHorizontal="true" android:text="收钱"/> RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="8dp" android:layout_weight="1"> <ImageView android:id="@+id/yuebao" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:padding="@dimen/dp_4" android:src="@drawable/notify_yuebao"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/yuebao" android:layout_centerHorizontal="true" android:layout_marginTop="@dimen/dp_4" android:text="卡包"/> RelativeLayout> LinearLayout> RelativeLayout>
toolbartwo的xml布局
xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/toolbartwo"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_toLeftOf="@+id/add_" android:padding="@dimen/dp_8" android:layout_marginRight="@dimen/dp_72" android:orientation="horizontal"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/notify_scan_light"/> RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/notify_payment_light"/> RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/notify_transfer_light"/> RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/ic_search_black_24dp"/> RelativeLayout> LinearLayout> <RelativeLayout android:id="@+id/add_" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_marginRight="@dimen/dp_12" android:layout_alignParentRight="true" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_add_black_24dp"/> RelativeLayout> RelativeLayout>
布局很简单就是两个布局嵌套其中，当默认打开时显示其中的toolbarone界面隐藏toolbartwo界面，当上拉时隐藏toolbarone显示toolbartwo布局就可以，这其中也可以加入动画使这个转换更流畅，下面是activity中主代码：
public class ScrollingActivity extends AppCompatActivity { private static final String TAG = "ScrollingActivity"; private CollapsingToolbarLayoutState state; private RecyclerView recyclerViewist; AppBarLayout appBarLayout; RelativeLayout toolbarone; CollapsingToolbarLayout collapsingToolbarLayout; RelativeLayout toolbartwo; List这就是整个实现的流程，其中上拉判断是用了appbar的 addOnOffsetChangedListener 监听，然后判断上拉的各个状态，很简单吧，头部折叠暂时就写到这里，敬请期待下篇list = new ArrayList<>(); private ShowMyAdapter showMyAdapter; private enum CollapsingToolbarLayoutState { EXPANDED, COLLAPSED, INTERNEDIATE } public static final int ACCOUNT_TYPE = 792; //sdk appid 由腾讯分配 public static final int SDK_APPID = 1400001533; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_scrolling); appBarLayout = findViewById(R.id.app_bar); collapsingToolbarLayout = findViewById(R.id.toolbar_layout); recyclerViewist = findViewById(R.id.recycle_list); initIm();//腾讯云im即时通讯初始化 initView(); toolbarone = findViewById(R.id.toolbarone); toolbartwo = findViewById(R.id.toolbartwo); try { initData(); } catch (Exception e) { e.printStackTrace(); } } private void initIm() { //初始化 SDK 基本配置 TIMSdkConfig config = new TIMSdkConfig(SDK_APPID) .enableCrashReport(false) .enableLogPrint(true) .setLogLevel(TIMLogLevel.DEBUG) .setLogPath(Environment.getExternalStorageDirectory().getPath() + "/justfortest/"); //初始化 SDK TIMManager.getInstance().init(getApplicationContext(), config); } private void initData() throws Exception { list = CommonTool.addFooter(CommonTool.getdatas(this));//初始化默认展示7个 getAdaptermy().setNewData(list); SharedPref.getInstance(this).putString("myapplication", new Gson().toJson(CommonTool.getdatas(this))); } private void initView() { GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 4); recyclerViewist.setLayoutManager(gridLayoutManager); recyclerViewist.setNestedScrollingEnabled(false); state = CollapsingToolbarLayoutState.EXPANDED; collapsingToolbarLayout.setTitleEnabled(false); appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { if (verticalOffset == 0) { //全展开 if (state != CollapsingToolbarLayoutState.EXPANDED) { state = CollapsingToolbarLayoutState.EXPANDED;//修改状态标记为展开 toolbartwo.setVisibility(View.GONE); toolbarone.setVisibility(View.VISIBLE); } } else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) { if (state != CollapsingToolbarLayoutState.COLLAPSED) { state = CollapsingToolbarLayoutState.COLLAPSED;//修改状态标记为折叠 toolbarone.setVisibility(View.GONE); toolbartwo.setVisibility(View.VISIBLE); } } else { if (state != CollapsingToolbarLayoutState.INTERNEDIATE) { if (state == CollapsingToolbarLayoutState.COLLAPSED) { //由折叠变为中间状态时隐藏播放按钮 } state = CollapsingToolbarLayoutState.INTERNEDIATE;//修改状态标记为中间 toolbartwo.setVisibility(View.GONE); toolbarone.setVisibility(View.VISIBLE); } } } }); } private BaseQuickAdapter getAdaptermy() throws Exception { if (showMyAdapter == null) { showMyAdapter = new ShowMyAdapter(R.layout.item_content, list, this); recyclerViewist.setAdapter(showMyAdapter); } showMyAdapter.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() { @Override public void onItemClick(BaseQuickAdapter adapter, View view, int position) { if (showMyAdapter.getData().get(position).getApplication() == 111) { //点击更多跳转 Intent intent = new Intent(); intent.setClass(ScrollingActivity.this, SecondLevelActivity.class); startActivityForResult(intent, 100); } else { //应用跳转 Toast.makeText(ScrollingActivity.this, showMyAdapter.getData().get(position).getContent(), Toast.LENGTH_SHORT).show(); } } }); return showMyAdapter; } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); if (resultCode == 300 && CommonTool.getTopData(SharedPref.getInstance(this).getString("myapplication", ""), this).size() != 1) { showMyAdapter.getData().clear(); showMyAdapter.notifyDataSetChanged(); Log.d(TAG, SharedPref.getInstance(this).getString("myapplication", "222")); list = CommonTool.getTopData(SharedPref.getInstance(this).getString("myapplication", ""), this); showMyAdapter.setNewData(list); } } }