自定义ViewGroup_标题栏的悬浮吸顶渐变效果
2019-07-11 本文已影响585人
BraveJoy
之前帮朋友写了这样的一个效果：标题栏中的元素随着屏幕的滑动发生渐变的效果，有文字大小的渐变也有透明度和距离的渐变等，后面没有及时更新上来，今天补一下。效果图如下：
思路 + 原理
OK，先来说下思路，很容易就能想到图中渐变的效果是根据滑动监听一点点动态变化的，这里我们就可以监听NestedScrollView的滚动(or其他，我这里主页用的是NestedScrollView)。
原理：在FrameLayout中放一个LinearLayout，置于底部，然后设置LinearLayout距离顶部一段距离，假设marginTop是50dp，只要在监听滚动的时候动态改变这个marginTop的值就好了，这是整体LinearLayout上移的效果实现，至于文字的大小和透明度的改变，也是同样的原理，根据滚动距离做出同步修改即可。为了容易理解，我画了一张示意草图，看了即可一目了然。
OK，接下来放出xml的布局代码：
布局：
<?xml version="1.0" encoding="utf-8"?>
<com.zhuyong.dogdemo.CustomFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/coordinator_root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:id="@+id/sc"
android:layout_width="match_parent"
android:layout_height="match_parent">
********//省略
</android.support.v4.widget.NestedScrollView>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:gravity="bottom"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/child_root_marginTop"
android:gravity="center_vertical"
android:minHeight="50dp"
android:paddingLeft="12dp"
android:paddingTop="5dp"
android:paddingRight="12dp"
android:paddingBottom="5dp">
<TextView
android:id="@+id/tv_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="标题"
android:textColor="#FFFFFF"
android:textSize="@dimen/text_size_30sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:onClick="scanCode"
android:orientation="vertical">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/icon_scan" />
<TextView
android:id="@+id/tv_scan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/text_right_marginTop"
android:text="扫一扫"
android:textColor="#FFFFFF"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:gravity="center"
android:onClick="invitationCode"
android:orientation="vertical">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/icon_invinte" />
<TextView
android:id="@+id/tv_invitation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/text_right_marginTop"
android:text="邀请码"
android:textColor="#FFFFFF"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
</com.zhuyong.dogdemo.CustomFrameLayout>
接下来就是自定义最外层的FrameLayout了，前戏不多说了，直接上主要代码：
1、获取子控件，初始化相关变量
/**
* 获取第一个childView转化为NestedScrollView
*/
NestedScrollView mSestedScrollView = (NestedScrollView) getChildAt(0);
/**
* 获取第二个childView,也就是我们的Toolbar部分
*/
final ViewGroup mViewToolbarRoot = (ViewGroup) getChildAt(1);
final ViewGroup mViewChildRoot = (ViewGroup) mViewToolbarRoot.getChildAt(0);
final TextView mTvTitle = mViewChildRoot.findViewById(R.id.tv_title);
final TextView mTvScan = mViewChildRoot.findViewById(R.id.tv_scan);
final TextView mTvInvitation = mViewChildRoot.findViewById(R.id.tv_invitation);
/**
* 获取整个状态栏的高度，用来控制一些其他变量
*/
final int mHeaderHeight = mViewToolbarRoot.getMeasuredHeight();
/**
* 设置NestedScrollView的paddingTop值防止被mViewToolbarRoot遮盖
*/
mSestedScrollView.setPadding(getPaddingLeft(), getPaddingTop() + mHeaderHeight, getPaddingRight(), getPaddingBottom());
final FrameLayout.LayoutParams paramsChildRoot = (FrameLayout.LayoutParams) mViewChildRoot.getLayoutParams();
final LinearLayout.LayoutParams paramsChildTv = (LinearLayout.LayoutParams) mTvInvitation.getLayoutParams();
2、根据scrollY动态更新LayoutParams、透明度、文字大小等值
还记得我们那个50dp的topMaginHeight吧，这里就根据它的大小和scrollY作比较判断滚动距离，来确定是否需要渐变。
如果滑动距离大于topMaginHeight，状态固定，不做改变。
mTvScan.setAlpha(0);
mTvInvitation.setAlpha(0);
mTvTitle.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize / 2);
paramsChildRoot.topMargin = 0;
mViewChildRoot.setLayoutParams(paramsChildRoot);
/**
* 控制右边文字的移动
*/
paramsChildTv.topMargin = -mHeaderHeight;
mTvScan.setLayoutParams(paramsChildTv);
mTvInvitation.setLayoutParams(paramsChildTv);
当scrollY <= topMaginHeight时：
float scale = (float) scrollY / topMaginHeight;
/**
* 控制右边文字的透明度
*/
mTvScan.setAlpha(1 - offset * scale);
mTvInvitation.setAlpha(1 - offset * scale);
/**
* 控制标题文字的大小
*/
scale = (1 - scale) > 0.5f ? (1 - scale) : 0.5f;
mTvTitle.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize * scale);
/**
* 控制整个头布局的高度
*/
paramsChildRoot.topMargin = topMaginHeight - scrollY;
mViewChildRoot.setLayoutParams(paramsChildRoot);
/**
* 控制右边文字的移动
*/
paramsChildTv.topMargin = (int) (-scrollY * offset + textMaginTop);
mTvScan.setLayoutParams(paramsChildTv);
mTvInvitation.setLayoutParams(paramsChildTv);
源码
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.widget.NestedScrollView;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.TextView;
/**
* 自定义FrameLayout实现自定义伸缩及悬浮效果
* 作者：zhuyong on 2019/3/31 20:21
* 邮箱：99305919@qq.com
* 希望每天叫醒你的不是闹钟而是梦想
*/
public class CustomFrameLayout extends FrameLayout {
private Context mContext;
public CustomFrameLayout(@NonNull Context context) {
this(context, null);
}
public CustomFrameLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public CustomFrameLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mContext = context;
}
private void initView() {
/**
* 获取第一个childView转化为NestedScrollView
*/
NestedScrollView mSestedScrollView = (NestedScrollView) getChildAt(0);
/**
* 获取第二个childView,也就是我们的Toolbar部分
*/
final ViewGroup mViewToolbarRoot = (ViewGroup) getChildAt(1);
final ViewGroup mViewChildRoot = (ViewGroup) mViewToolbarRoot.getChildAt(0);
final TextView mTvTitle = mViewChildRoot.findViewById(R.id.tv_title);
final TextView mTvScan = mViewChildRoot.findViewById(R.id.tv_scan);
final TextView mTvInvitation = mViewChildRoot.findViewById(R.id.tv_invitation);
/**
* 获取整个状态栏的高度，用来控制一些其他变量
*/
final int mHeaderHeight = mViewToolbarRoot.getMeasuredHeight();
/**
* 设置NestedScrollView的paddingTop值防止被mViewToolbarRoot遮盖
*/
mSestedScrollView.setPadding(getPaddingLeft(), getPaddingTop() + mHeaderHeight, getPaddingRight(), getPaddingBottom());
final FrameLayout.LayoutParams paramsChildRoot = (FrameLayout.LayoutParams) mViewChildRoot.getLayoutParams();
final LinearLayout.LayoutParams paramsChildTv = (LinearLayout.LayoutParams) mTvInvitation.getLayoutParams();
final int textMaginTop = (int) mContext.getResources().getDimension(R.dimen.text_right_marginTop);//文字距离图标的距离
final int topMaginHeight = (int) mContext.getResources().getDimension(R.dimen.child_root_marginTop);//标题距离顶部距离
final float textSize = (int) mContext.getResources().getDimension(R.dimen.text_size_30sp);//标题文字大小
if (topMaginHeight <= 0) {
return;
}
//梯度值，用来调整相关的速度
final float offset = 1.7f;
mSestedScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
@Override
public void onScrollChange(NestedScrollView nestedScrollView, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
if (scrollY <= topMaginHeight) {
float scale = (float) scrollY / topMaginHeight;
/**
* 控制右边文字的透明度
*/
mTvScan.setAlpha(1 - offset * scale);
mTvInvitation.setAlpha(1 - offset * scale);
/**
* 控制标题文字的大小
*/
scale = (1 - scale) > 0.5f ? (1 - scale) : 0.5f;
mTvTitle.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize * scale);
/**
* 控制整个头布局的高度
*/
paramsChildRoot.topMargin = topMaginHeight - scrollY;
mViewChildRoot.setLayoutParams(paramsChildRoot);
/**
* 控制右边文字的移动
*/
paramsChildTv.topMargin = (int) (-scrollY * offset + textMaginTop);
mTvScan.setLayoutParams(paramsChildTv);
mTvInvitation.setLayoutParams(paramsChildTv);
} else {
/**
* 当滑动距离大于topMaginHeight，状态固定
*/
mTvScan.setAlpha(0);
mTvInvitation.setAlpha(0);
mTvTitle.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize / 2);
paramsChildRoot.topMargin = 0;
mViewChildRoot.setLayoutParams(paramsChildRoot);
/**
* 控制右边文字的移动
*/
paramsChildTv.topMargin = -mHeaderHeight;
mTvScan.setLayoutParams(paramsChildTv);
mTvInvitation.setLayoutParams(paramsChildTv);
}
}
});
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
/**
* 在ViewGroup位置摆放完成之后，开始处理
*/
initView();
}
}
