使用结构
效果图
bili.gif
实现逻辑
1.布局文件
参考资料：
FloatingActionButton的使用
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#FA7199"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- 只是用于展示-->
<ImageView
android:id="@+id/iv"
android:layout_width="match_parent"
android:layout_height="160dp"
android:scaleType="centerCrop"
android:src="@mipmap/timg"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
app:layout_collapseMode="pin">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/title_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="仿哔哩哔哩界面"
android:textColor="#ffffff" />
<LinearLayout
android:id="@+id/ll_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:visibility="visible">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center_vertical"
android:src="@android:drawable/ic_media_play" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="立即播放"
android:textColor="#ffffff" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<!--滑动完成，最终停在顶部的部分 -->
<TextView
android:id="@+id/text_id"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#ffffff"
android:gravity="start|center_vertical"
android:textColor="#FA7199"
android:paddingLeft="10dp"
android:text="最新" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/app_bar"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!-- 滑动部分view，此处省略-->
</android.support.v4.widget.NestedScrollView>
<!--悬浮按钮-->
<android.support.design.widget.FloatingActionButton
android:id="@+id/float_id"
android:layout_width="wrap_content"
android:layout_height="139dp"
android:src="@android:drawable/ic_dialog_email"
app:backgroundTint="#FA7199"
android:layout_marginRight="10dp"
app:layout_anchor="@+id/text_id"
app:layout_anchorGravity="top|right" />
</android.support.design.widget.CoordinatorLayout>
2.滑动事件
参考资料：
如何监听CollapsingToolbarLayout的展开与折叠
我在其代码基础上做了更改，由于悬浮按钮需要在滑动的中间位置消失与显示，所以我只监听了“全部展开”、“收缩到顶部”、“折叠到半截”这三个位置。
public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {
public enum State {
EXPANDED,
COLLAPSED,
IDLE
}
private State mCurrentState = State.IDLE;
@Override
public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
if (i == 0) {
if (mCurrentState != State.EXPANDED) {
onStateChanged(appBarLayout, State.EXPANDED);
}
mCurrentState = State.EXPANDED;
} else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
if (mCurrentState != State.COLLAPSED) {
onStateChanged(appBarLayout, State.COLLAPSED);
}
mCurrentState = State.COLLAPSED;
} else if(Math.abs(i) >= appBarLayout.getTotalScrollRange()*1/2){
if (mCurrentState != State.IDLE) {
onStateChanged(appBarLayout, State.IDLE);
}
mCurrentState = State.IDLE;
}
}
public abstract void onStateChanged(AppBarLayout appBarLayout, State state);
}
3.activity的使用
动画只是利用简单的缩放动画，所以就不展示了。再有，当折叠到中间位置时，向上滑是按钮消失，向下滑是按钮展现，因为没有找到监听上滑还是下滑的方法，所以设置了一个标志位，当上滑的时候为1，下滑的时候为2，逻辑如下：
public class BliBliActivity extends AppCompatActivity {
private AppBarLayout layout;
private TextView title_id;
private LinearLayout ll_title;
private FloatingActionButton float_id;
private int scroll_up = 1;
private Animation animation;
private Animation animation2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_bli_bli);
layout = (AppBarLayout) findViewById(R.id.app_bar);
title_id = (TextView) findViewById(R.id.title_id);
ll_title = (LinearLayout) findViewById(R.id.ll_title);
float_id = (FloatingActionButton) findViewById(R.id.float_id);
layout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
@Override
public void onStateChanged(AppBarLayout appBarLayout, State state) {
if (state == State.EXPANDED) {
//展开状态
title_id.setVisibility(View.VISIBLE);
ll_title.setVisibility(View.INVISIBLE);
} else if (state == State.COLLAPSED) {
//折叠状态
title_id.setVisibility(View.INVISIBLE);
ll_title.setVisibility(View.VISIBLE);
float_id.setVisibility(View.GONE);
} else if (state == State.IDLE) {
//中间状态
if (scroll_up == 1) {
animation = AnimationUtils.loadAnimation(BliBliActivity.this, R.anim.video_icon);
float_id.startAnimation(animation);
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
float_id.clearAnimation();
float_id.setVisibility(View.GONE);
scroll_up = 2;
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
} else {
float_id.setVisibility(View.VISIBLE);
animation2 = AnimationUtils.loadAnimation(BliBliActivity.this, R.anim.video_icon2);
float_id.startAnimation(animation2);
animation2.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
float_id.clearAnimation();
scroll_up = 1;
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
}
}
}
});
～～喵印
网友评论