实现淘宝和QQ ToolBar透明渐变效果
来源:互联网 发布:php记录浏览次数 编辑:程序博客网 时间:2024/05/02 08:42
哎,好久都没写博客了,最近有点懒惰了,今天端午节,在学校也是无聊的蛋疼啊,正好今天玩玩一些在其他app中常见的一些功能。
来看看效果图吧!
这个是人家的图,我懒得自己弄一个,就copy他的了,顺便帮你宣传一下你的简书,不算为过吧^-^. sou,传送门
之前是在简书上面看了一篇实现的这种功能,他是重写CoordinatorLayout的Behavior类来达到效果,也确实理解到了CoordinatorLayout的强大之处啊,但是自己跟着他的效果走的时候 ,感觉好像不是太理想的样子。
今天我来自己 写个
来看看我的效果图:
哇塞,好牛逼的样子,额,其实也就那么回事。
来讲讲思路吧
草稿画。。。。这个应该看的懂吧,就是一些控件的分布
自己用画图软件画的,自己看的都心醉心醉的。
从图中我们应该就能了解到,其实这些好像就那么回事,拿到高度,然后设置透明度就行了,其实,是这个样子的
首先,我们要知道设置View的透明度的代码
toolbar.getBackground().setAlpha(Interger);
参数设置的是透明度的变化值为0~255,颜色数嘛是吧。
然后看看获取变化距离区间的代码
headHeight= headView.getMeasuredHeight()-toolbar.getMeasuredHeight();
这样,我们就拿到距离的代码了,现在两样都齐全了,怎样才能将他们关联起来呢,我们想想,当前滚动的ScrollView的Y值去减去这个headHeight,这个相差值只允许他在headHeight的高度去变化,如果ScrollView滑动的距离超出这个高度的话,那么我们直接设置alpha为255直接显示变透明,如果这个ScrollView滑动的到顶部时,我们直接设置alpha为0为透明,我们首先拿到这个变化的距离,然后去除以这个headHeight高度拿到这个百分比,然后去乘上255拿到同等比例中的透明度的值,记得这个数值都得是float类型,高度也是,要是int的话这样相除的话就变成0了。
alpha=((float)(getScrollY()-headHeight)/headHeight)*255
拿到这个透明度后就可以设置进去了,思路就是这么简单,现在来贴下代码。
MainActivity.class
public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); AlphaTitleScrollView scroll = (AlphaTitleScrollView) findViewById(R.id.scrollview); LinearLayout title = (LinearLayout) findViewById(R.id.title); ImageView head = (ImageView) findViewById(R.id.head); scroll.setTitleAndHead(title, head); title.getBackground().setAlpha(0); }}
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <view.AlphaTitleScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/scrollview" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" ><!-- 显示的head为ImageView --> <ImageView android:id="@+id/head" android:layout_width="match_parent" android:layout_height="500px" android:scaleType="fitXY" android:src="@drawable/a" /> <TextView android:layout_width="match_parent" android:layout_height="100dp" android:gravity="center" android:text="haha" /> <TextView android:layout_width="match_parent" android:layout_height="100dp" android:gravity="center" android:text="haha" /> <TextView android:layout_width="match_parent" android:layout_height="100dp" android:gravity="center" android:text="haha" /> <TextView android:layout_width="match_parent" android:layout_height="100dp" android:gravity="center" android:text="haha" /> <TextView android:layout_width="match_parent" android:layout_height="100dp" android:gravity="center" android:text="haha" /> <TextView android:layout_width="match_parent" android:layout_height="100dp" android:gravity="center" android:text="haha" /> <TextView android:layout_width="match_parent" android:layout_height="100dp" android:gravity="center" android:text="haha" /> <TextView android:layout_width="match_parent" android:layout_height="100dp" android:gravity="center" android:text="haha" /> <TextView android:layout_width="match_parent" android:layout_height="100dp" android:gravity="center" android:text="haha" /> <TextView android:layout_width="match_parent" android:layout_height="100dp" android:gravity="center" android:text="haha" /> </LinearLayout> </view.AlphaTitleScrollView><!-- title标题栏--> <LinearLayout android:id="@+id/title" android:layout_width="match_parent" android:layout_height="50dp" android:background="#FCFCFC" android:gravity="center_vertical" android:orientation="horizontal" > <ImageView android:layout_width="20dp" android:layout_height="20dp" android:layout_marginLeft="20dp" android:gravity="center_vertical" android:src="@drawable/arrow" android:textColor="#fff" /> </LinearLayout></RelativeLayout>
AlphaTitleScrollView.class
public class AlphaTitleScrollView extends ScrollView { public static final String TAG = "AlphaTitleScrollView"; private int mSlop; private LinearLayout toolbar; private ImageView headView; public AlphaTitleScrollView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(context); } public AlphaTitleScrollView(Context context, AttributeSet attrs) { this(context, attrs, 0); // TODO Auto-generated constructor stub } public AlphaTitleScrollView(Context context) { this(context, null); } private void init(Context context) { // mSlop = ViewConfiguration.get(context).getScaledDoubleTapSlop(); mSlop = 10; Log.i(TAG, mSlop + ""); } /** * * @param headLayout * 头部布局 * @param imageview * 标题 */ public void setTitleAndHead(LinearLayout toolbar, ImageView headView) { this.toolbar = toolbar; this.headView = headView; } @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { float headHeight = headView.getMeasuredHeight() - toolbar.getMeasuredHeight(); int alpha = (int) (((float) t / headHeight) * 255); if (alpha >= 255) alpha = 255; if (alpha <= mSlop) alpha = 0; toolbar.getBackground().setAlpha(alpha); super.onScrollChanged(l, t, oldl, oldt); }}
主要呢还是重写ScrollView,将需要变化的布局传递给他,然后重写ScrollView的onScrollChanged方法,里面的参数看看应该明白了,那是当前ScrollView的坐标距离顶部的top距离和左边left距离,和之前分析的一样,只不过getScrollY()的值变成了t而已,方法中的高度都给传给你了,那就更简单了。
来说说做的时候的误区和不解。
①、之前来改变这个透明度的时候我是重写了onTouchEvent方法,手指在滑动的时候来获取距离差来设置透明度,这样做确实是能做出来,但是在手指离开屏幕,scrollview还在滑动的时候,就不走move方法,这个比例值也就不再变化了,到达顶部的时候透明度都没有什么变化,所以,不能从这里入手,我上面说那位简书哥们给的方法,我体验的就是这样的,所以不是太好。
②、 mSlop=ViewConfiguration.get(context).getScaledDoubleTapSlop();
这个值好坑爹啊,之前看大神们写说是触动滑动事件最好是超过这个距离再来触发,我就用了这个,发现不对,log出来一下mSlop是300px,总共这个头部才没多少,所以就不用他了,直接自己定义为10px就差不多了,设这个主要是为了到达这个值的时候直接设置为全透明了,免得还要使劲滑到0才设置透明度的话,那样体验就不好了,给个缓冲值会更好点。
③、喜欢给距离设置dp的我也是醉了,200dp被我log出来是600,要好好注意点了,虽然这个没什么,不影响代码,但是还是要注意的。
- 实现淘宝和QQ ToolBar透明渐变效果
- 自定义CoordinatorLayout的Behavior(2):实现淘宝和QQ ToolBar透明渐变效果
- 自定义CoordinatorLayout的Behavior(2):实现淘宝和QQ ToolBar透明渐变效果
- 写出高效清晰Layout布局文件的一些技巧--------自定义CoordinatorLayout:实现淘宝和QQ ToolBar透明渐变效果-------自定义Coordi快速返回效果
- 实现淘宝商品详情页toolbar 渐变、状态栏沉浸
- Android CoordinatorLayout+AppBarLayout实现toolbar背景渐变透明
- CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar实现渐变透明的状态栏
- Android精仿淘宝/QQ空间标题栏渐变效果
- Toolbar随着ScrollView滑动透明度渐变效果实现
- Android5.0+(CollapsingToolbarLayout)实现上划toolbar渐变效果
- Toolbar随着ScrollView滑动透明度渐变效果实现
- iOS实现UIView渐变效果及实现透明功能
- 实现一个引导页的透明渐变效果
- navigationBar 的渐变透明效果
- android渐变Toolbar的实现
- Android UI设计之<十>自定义ListView,实现QQ空间阻尼下拉刷新和渐变菜单栏效果
- Android UI设计之<十>自定义ListView,实现QQ空间阻尼下拉刷新和渐变菜单栏效果
- Android UI设计之<十三>自定义ScrollView,实现QQ空间阻尼下拉刷新和渐变菜单栏效果
- (补)虚数的运算一(成员函数中的函数运算符重载)
- c语言小知识点总结
- 小白笔记-------------------------openssl(ca)
- 第十二周项目三-数组类运算的实现
- ubuntu12.04 putty的安装
- 实现淘宝和QQ ToolBar透明渐变效果
- 虚表探索
- eclipse导入外部java程序时,中文部分出现乱码
- IOS开发收集整理(经典)
- ubuntu 12.04 桌面启动器
- fastJSON使用(一)——对象转换成json
- IOS xib封装自定义view 的封装步骤
- TCP协议学习总结
- Visual Studio Code