自定义Scrollview--实现仿淘宝Toolbar透明度渐变效果

1，上个月做了下电商的项目，本来以为本简单的，但做起来还是遇到了不少的问题，上个周五项目就上线了，不过时间还是很紧，PM给了我两天时间总结总结，然后又要开始一个新的项目和这个项目的迭代，感觉又要开始累死了。不瞎扯了，今天是要实现类似于淘宝Toobar的效果，先看一下淘宝的效果：

再看看我们项目中实现的效果：

2，这里我上面的返回和购物车的图片在渐变的时候没有细节的处理，所以导致切换照片的时候有点突然，不过大体的功能还是差不多的，其实实现这种效果还是挺简单的，就是自营以一个Scrollview监听他的滑动事件，然后更新上面的Toobar透明度，好了，不多说了，直接看代码把。

TranslucentScrollView.java

package com.qianmo.projectfunctionpoint;/*** Created by wangjitao on 2016/8/29 0029.*/import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;public class TranslucentScrollView extends ScrollView {private OnScrollChangedListener mOnScrollChangedListener;public TranslucentScrollView(Context context) {super(context);}public TranslucentScrollView(Context context, AttributeSet attrs) {super(context, attrs);}public TranslucentScrollView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {super.onScrollChanged(l, t, oldl, oldt);if (mOnScrollChangedListener != null) {mOnScrollChangedListener.onScrollChanged(this, l, t, oldl, oldt);}}public void setOnScrollChangedListener(OnScrollChangedListener listener) {mOnScrollChangedListener = listener;}public interface OnScrollChangedListener {void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt);}
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns: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"><include layout="@layout/toolbar"/><com.qianmo.projectfunctionpoint.TranslucentScrollViewandroid:id="@+id/scrollview"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><ImageViewandroid:id="@+id/iv_head"android:layout_width="match_parent"android:layout_height="@dimen/dimen_300"android:scaleType="centerCrop"android:src="@mipmap/bg_image"/><TextViewandroid:layout_width="match_parent"android:layout_height="200dp"android:background="#ff0000"/><TextViewandroid:layout_width="match_parent"android:layout_height="200dp"android:background="#00ff00"/><TextViewandroid:layout_width="match_parent"android:layout_height="200dp"android:background="#0000ff"/><TextViewandroid:layout_width="match_parent"android:layout_height="200dp"android:background="#00ffff"/><TextViewandroid:layout_width="match_parent"android:layout_height="200dp"android:background="#ff00ff"/></LinearLayout></com.qianmo.projectfunctionpoint.TranslucentScrollView></RelativeLayout>

　　MainActivity.java

package com.qianmo.projectfunctionpoint;import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ScrollView;public class MainActivity extends AppCompatActivity implements TranslucentScrollView.OnScrollChangedListener {private TranslucentScrollView scrollView;private Toolbar toolbar;private float headerHeight;//顶部高度private float minHeaderHeight;//顶部最低高度，即Bar的高度@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();}private void initView() {scrollView = (TranslucentScrollView) findViewById(R.id.scrollview);scrollView.setOnScrollChangedListener(this);toolbar = (Toolbar) findViewById(R.id.toolbar);toolbar.setBackgroundColor(Color.argb(0, 18, 176, 242));initMeasure();}private void initMeasure() {headerHeight = getResources().getDimension(R.dimen.dimen_300);minHeaderHeight = getResources().getDimension(R.dimen.abc_action_bar_default_height_material);}@Overridepublic void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt) {//Y轴偏移量float scrollY = who.getScrollY();//变化率float headerBarOffsetY = headerHeight - minHeaderHeight;//Toolbar与header高度的差值float offset = 1 - Math.max((headerBarOffsetY - scrollY) / headerBarOffsetY, 0f);//Toolbar背景色透明度toolbar.setBackgroundColor(Color.argb((int) (offset * 255), 18, 176, 242));//        //header背景图Y轴偏移
//        imgHead.setTranslationY(scrollY / 2);}
}

ok这样的话我们的效果就实现了，看一下抽出来的Demo

补：Demo下载链接 http://download.csdn.net/detail/w543441727/9615978 （对不起，开启骗积分模式 2333）

转载于:https://www.cnblogs.com/wjtaigwh/p/5818371.html

自定义Scrollview--实现仿淘宝Toolbar透明度渐变效果相关推荐

自定义View之仿淘宝详情页
自定义View之仿淘宝详情页转载请标明出处: http://blog.csdn.net/lisdye2/article/details/52353071 本文出自:[Alex_MaHao的博客] 项 ...
android 自定义ViewGroup实现仿淘宝的商品详情页
最近公司在新版本上有一个需要, 要在首页添加一个滑动效果, 具体就是仿照X宝的商品详情页, 拉到页面底部时有一个粘滞效果, 如下图 X东的商品详情页,如果用户继续向上拉的话就进入商品图文描述界面: 刚 ...
使用WEX5移动开发工具制作仿淘宝APP
毕业设计-使用WEX5移动开发工具制作仿淘宝APP 系统设计的意义本课题来源于对日常逛超市.购物的生活体验和指导老师的提示.本系统是基于 WeX5的仿淘宝App系统,它商家们提供了一个更广阔的商品推 ...
百度地图API，改变驾车路线颜色（仿淘宝快递查询，一条路线两个颜色）
想仿淘宝做一个物流查询,分为:寄件点.当前点. 收件点和路线图. 快递已走的路径(寄件点到当前点的颜色)和未走的路径(当前点到收件点)用颜色进行区分. 利用百度地图提供的API(当时遇到了点问 ...
高仿淘宝和聚美优品商城详情页实现《IT蓝豹》
高仿淘宝和聚美优品商城详情页实现 android-vertical-slide-view高仿淘宝和聚美优品商城详情页实现,在商品详情页,向上拖动时,可以加载下一页. 使用ViewDragHelper, ...
Material之Behavior实现支付宝密码弹窗仿淘宝/天猫商品属性选择
版权声明:转载必须注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003 今天的效果在支付宝.淘宝.京东等电商App中很常见.比如支付宝输入密码弹窗.商城下 ...
iOS物理碰撞、唱吧音频处理、仿淘宝联动效果等源码
iOS精选源码物理仿真碰撞陀螺仪使用仿淘宝详情和每日优鲜的一个联动效果 JJNetwork网络库 iOS列表选择弹框网络视频直播类--原生socket音视频实时传输--智能家居 Skele ...
仿淘宝打开app时识别淘口令和解析保存到本地的带二维码图片的网址
实现两个功能 1.仿淘宝淘口令打开app时解析连接(如果复制得到的信息不是可直接使用的数据,那么还需要加一步拿到这些信息去后台获取具体信息,因为项目设计复制完就是一串地址,所以没做二次请求处理) ...
视频教程-仿淘宝客户端电商平台android初级速成-Android
仿淘宝客户端电商平台android初级速成北风网技术总监,在某大型电信设备公司担任架构师,主要从事电信领域的软件开发,经验丰富.对电信计费系统以及核心网软件系统有深入了解,对设计高可靠性,高扩展性的 ...

自定义Scrollview--实现仿淘宝Toolbar透明度渐变效果

自定义Scrollview--实现仿淘宝Toolbar透明度渐变效果相关推荐

最新文章

热门文章