CoordinatorLayout、AppBarLayout实现上滑隐藏图片,下滑显示图片

时间不会辜负每一个平静努力的人!

欢迎来到周建的博客: 共同致力于技术分享与交流

仿keep个人中心界面,实现上滑隐藏图片,下滑显示图片

activity_mode.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?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"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="240dp"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/splash"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="keep"
app:titleTextColor="@color/white"
app:navigationIcon="@mipmap/back"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="@+id/id_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

ModeActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
package com.zhoujian.mykeep.activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
import com.zhoujian.mykeep.R;
import com.zhoujian.mykeep.adapter.MainAdapter;
import com.zhoujian.mykeep.bean.Person;
import java.util.ArrayList;
/**
* Created by zhoujian on 2017/3/14.
*/
public class ModeActivity extends AppCompatActivity
{
public static final String TAG = "ModeActivity";
private RecyclerView mRecyclerView;
private ArrayList<Person> personList;
private MainAdapter adapter;
@Override
protected void onCreate( Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mode);
initData();
initView();
}
private void initData()
{
personList = new ArrayList<Person>();
Person mPerson0= new Person("林黛玉");
personList.add(mPerson0);
Person mPerson1= new Person("薛宝钗");
personList.add(mPerson1);
Person mPerson2= new Person("贾元春");
personList.add(mPerson2);
Person mPerson3= new Person("贾迎春");
personList.add(mPerson3);
Person mPerson4= new Person("贾探春");
personList.add(mPerson4);
Person mPerson5= new Person("贾惜春");
personList.add(mPerson5);
Person mPerson6= new Person("史湘云");
personList.add(mPerson6);
Person mPerson7= new Person("王熙凤");
personList.add(mPerson7);
Person mPerson8= new Person("秦可卿");
personList.add(mPerson8);
Person mPerson9= new Person("贾宝玉");
personList.add(mPerson9);
}
private void initView()
{
final Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
toolbar.setTitleTextColor(Color.TRANSPARENT);
toolbar.inflateMenu(R.menu.menu_search);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.item_search:
//点击设置
Toast.makeText(ModeActivity.this, "按钮被点击了", Toast.LENGTH_SHORT).show();
break;
}
return false;
}
});
AppBarLayout app_bar_layout = (AppBarLayout)findViewById(R.id.app_bar_layout);
final CollapsingToolbarLayout collapsing_toolbar_layout = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar_layout);
collapsing_toolbar_layout.setTitle("");
collapsing_toolbar_layout.setCollapsedTitleTextColor(getResources().getColor(R.color.white));
collapsing_toolbar_layout.setExpandedTitleColor(getResources().getColor(R.color.white));
collapsing_toolbar_layout.setExpandedTitleColor(Color.TRANSPARENT);
app_bar_layout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
Log.e(TAG,"appBarLayoutHeight:"+appBarLayout.getHeight()+" getTotalScrollRange:"+appBarLayout.getTotalScrollRange()+" offSet:"+verticalOffset);
if(Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()){
toolbar.setTitleTextColor(getResources().getColor(R.color.white));
collapsing_toolbar_layout.setTitle("keep");
}else{
collapsing_toolbar_layout.setTitle("");
}
}
});
mRecyclerView =(RecyclerView) findViewById(R.id.id_recyclerview);
adapter = new MainAdapter(ModeActivity.this, personList);
mRecyclerView.setLayoutManager(new LinearLayoutManager(ModeActivity.this));
mRecyclerView.addItemDecoration(new DividerItemDecoration(ModeActivity.this,DividerItemDecoration.VERTICAL));
// 设置item动画
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
mRecyclerView.setAdapter(adapter);
}
}

实现效果

这里写图片描述

源码下载

源码下载:https://github.com/zeke123/MyKeep