import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast; import com.titlebargradient.R;
import com.titlebargradient.widget.ObservableScrollView; import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick; public class ScrollViewActivity extends AppCompatActivity { @BindView(R.id.iv_back)
ImageView ivBack;
@BindView(R.id.toolbar)
Toolbar toolbar;
@BindView(R.id.scrollView)
ObservableScrollView scrollView;
@BindView(R.id.lv_bottom)
LinearLayout lvBottom;
@BindView(R.id.iv_more)
ImageView ivMore;
@BindView(R.id.iv_shopping_cart)
ImageView ivShoppingCart;
@BindView(R.id.content)
LinearLayout content;
@BindView(R.id.spite_line)
View spiteLine;
@BindView(R.id.iv_header)
ImageView ivHeader;
@BindView(R.id.lv_header)
LinearLayout lvHeader; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scrollview);
ButterKnife.bind(this);
initView();
} private void initView() { //获取dimen属性中 标题和头部图片的高度
final float title_height = getResources().getDimension(R.dimen.title_height);
final float head_height = getResources().getDimension(R.dimen.head_height); //滑动事件回调监听(一次滑动的过程一般会连续触发多次)
scrollView.setOnScrollListener(new ObservableScrollView.ScrollViewListener() {
@Override
public void onScroll(int oldy, int dy, boolean isUp) { float move_distance = head_height - title_height;
if (!isUp && dy <= move_distance) {//手指往上滑,距离未超过200dp
//标题栏逐渐从透明变成不透明
toolbar.setBackgroundColor(ContextCompat.getColor(ScrollViewActivity.this, R.color.color_orange));
TitleAlphaChange(dy, move_distance);//标题栏渐变
HeaderTranslate(dy);//图片视差平移 } else if (!isUp && dy > move_distance) {//手指往上滑,距离超过200dp
TitleAlphaChange(1, 1);//设置不透明百分比为100%,防止因滑动速度过快,导致距离超过200dp,而标题栏透明度却还没变成完全不透的情况。 HeaderTranslate(head_height);//这里也设置平移,是因为不设置的话,如果滑动速度过快,会导致图片没有完全隐藏。 ivBack.setImageResource(R.mipmap.ic_back_dark);
ivMore.setImageResource(R.mipmap.ic_more_dark);
ivShoppingCart.setImageResource(R.mipmap.ic_shopping_dark);
spiteLine.setVisibility(View.VISIBLE);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
getWindow().setStatusBarColor(Color.RED);
} } else if (isUp && dy > move_distance) {//返回顶部,但距离头部位置大于200dp
//不做处理 } else if (isUp && dy <= move_distance) {//返回顶部,但距离头部位置小于200dp
//标题栏逐渐从不透明变成透明
TitleAlphaChange(dy, move_distance);//标题栏渐变
HeaderTranslate(dy);//图片视差平移 ivBack.setImageResource(R.mipmap.ic_back);
ivMore.setImageResource(R.mipmap.ic_more);
ivShoppingCart.setImageResource(R.mipmap.ic_shopping_cart);
spiteLine.setVisibility(View.GONE); }
}
});
} private void HeaderTranslate(float distance) {
lvHeader.setTranslationY(-distance);
ivHeader.setTranslationY(distance/2);
} private void TitleAlphaChange(int dy, float mHeaderHeight_px) {//设置标题栏透明度变化
float percent = (float) Math.abs(dy) / Math.abs(mHeaderHeight_px);
//如果是设置背景透明度,则传入的参数是int类型,取值范围0-255
//如果是设置控件透明度,传入的参数是float类型,取值范围0.0-1.0
//这里我们是设置背景透明度就好,因为设置控件透明度的话,返回ICON等也会变成透明的。
//alpha 值越小越透明
int alpha = (int) (percent * 255);
toolbar.getBackground().setAlpha(alpha);//设置控件背景的透明度,传入int类型的参数(范围0~255) ivBack.getBackground().setAlpha(255 - alpha);
ivMore.getBackground().setAlpha(255 - alpha);
ivShoppingCart.getBackground().setAlpha(255 - alpha);
} @OnClick({R.id.iv_back, R.id.iv_shopping_cart, R.id.iv_more})
public void OnClick(View v) {
switch (v.getId()) {
case R.id.iv_back:
Toast.makeText(this, "点击了返回按键", Toast.LENGTH_SHORT).show();
break;
case R.id.iv_shopping_cart:
Toast.makeText(this, "点击了加入购物车", Toast.LENGTH_SHORT).show();
break;
case R.id.iv_more:
Toast.makeText(this, "点击了更多按键", Toast.LENGTH_SHORT).show();
break;
}
} @Override
protected void onDestroy() {
// ButterKnife.unbind(this);
super.onDestroy();
}
}
import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView; /**
* 自定义监听滑动的ScrollView */ public class ObservableScrollView extends ScrollView { private ScrollViewListener scrollViewListener = null; public ObservableScrollView(Context context) {
super(context);
} public ObservableScrollView(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
} public ObservableScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
} public void setOnScrollListener(ScrollViewListener scrollViewListener) {
this.scrollViewListener = scrollViewListener;
} @Override
protected void onScrollChanged(int x, int y, int oldx, int oldy) {
super.onScrollChanged(x, y, oldx, oldy);
if (scrollViewListener != null) { if (oldy < y ) {// 手指向上滑动,屏幕内容下滑
scrollViewListener.onScroll(oldy,y,false); } else if (oldy > y ) {// 手指向下滑动,屏幕内容上滑
scrollViewListener.onScroll(oldy,y,true);
} }
} public interface ScrollViewListener{//dy Y轴滑动距离,isUp 是否返回顶部
void onScroll(int oldy,int dy,boolean isUp);
}
}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <LinearLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <com.titlebargradient.widget.ObservableScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"> <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="250dp"> <TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp"
android:textSize="20sp"
android:lineSpacingExtra="10dp"
android:text="@string/TextContent"
android:gravity="center"/>
</LinearLayout>
</com.titlebargradient.widget.ObservableScrollView>
</LinearLayout> <LinearLayout
android:id="@+id/lv_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"> <ImageView
android:id="@+id/iv_header"
android:layout_width="match_parent"
android:layout_height="@dimen/head_height"
android:scaleType="centerCrop"
android:layout_gravity="center"
android:src="@mipmap/bg_header"/>
</LinearLayout> <include layout="@layout/layout_toolbar"/> <LinearLayout
android:id="@+id/lv_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true"> <include layout="@layout/layout_bottom"/> </LinearLayout> </RelativeLayout>

底部布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"> <TextView
android:layout_width="48dp"
android:layout_height="48dp"
android:background="@drawable/bg_square"
android:gravity="center"
android:padding="8dp"
android:layout_gravity="center"
android:drawableTop="@mipmap/ic_help"
android:drawablePadding="2dp"
android:text="客服"
android:textSize="11sp" /> <TextView
android:layout_width="48dp"
android:layout_height="48dp"
android:background="@drawable/bg_square"
android:gravity="center"
android:padding="8dp"
android:layout_gravity="center"
android:drawableTop="@mipmap/ic_market"
android:drawablePadding="2dp"
android:text="店铺"
android:textSize="11sp"/> <TextView
android:layout_width="48dp"
android:layout_height="48dp"
android:background="@drawable/bg_square"
android:gravity="center"
android:padding="8dp"
android:layout_gravity="center"
android:drawableTop="@mipmap/ic_collection"
android:drawablePadding="2dp"
android:text="收藏"
android:textSize="11sp"/> <TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="48dp"
android:background="@color/color_orange"
android:gravity="center"
android:text="加入购物车"
android:textColor="@android:color/white"/> <TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="48dp"
android:background="@color/color_red"
android:gravity="center"
android:text="立即购买"
android:textColor="@android:color/white"/> </LinearLayout>

标题栏布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:orientation="vertical"> <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="@dimen/title_height"
android:background="@color/color_transparent"> <!--返回按钮-->
<ImageView
android:id="@+id/iv_back"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@drawable/bg_circle"
android:padding="8dp"
android:src="@mipmap/ic_back" /> <ImageView
android:id="@+id/iv_more"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="right"
android:layout_marginRight="8dp"
android:background="@drawable/bg_circle"
android:padding="10dp"
android:src="@mipmap/ic_more" /> <ImageView
android:id="@+id/iv_shopping_cart"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="right"
android:layout_marginRight="8dp"
android:background="@drawable/bg_circle"
android:padding="8dp"
android:src="@mipmap/ic_shopping_cart" /> </android.support.v7.widget.Toolbar> <View
android:id="@+id/spite_line"
android:layout_width="match_parent"
android:layout_height="0.8dp"
android:background="@color/color_light_gray"
android:visibility="gone" /> </LinearLayout>

效果:

android滑动标题栏渐变实现的更多相关文章

  1. Android 滑动效果入门篇(一)—— ViewFlipper

    ViewFilpper 是Android官方提供的一个View容器类,继承于ViewAnimator类,用于实现页面切换,也可以设定时间间隔,让它自动播放.又ViewAnimator继承至于Frame ...

  2. 十六、Android 滑动效果汇总

    Android 滑动效果入门篇(一)—— ViewFlipper Android 滑动效果入门篇(二)—— Gallery Android 滑动效果基础篇(三)—— Gallery仿图像集浏览 And ...

  3. Android 滑动效果汇总

    Android 滑动效果入门篇(一)—— ViewFlipper Android 滑动效果入门篇(二)—— Gallery Android 滑动效果基础篇(三)—— Gallery仿图像集浏览 And ...

  4. android ——可折叠式标题栏

    CollapsingToolbarLayout是一个作用于Toolbar上的布局,可以让Toolbar的效果变得更加丰富: 但是CollapsingToolbarLayout是不能独立存在的,它这能作 ...

  5. Android滑动动画ViewFlipper和视频播放VideoView的使用

    Android滑动动画,可以用ViewPager或者ViewFlipper实现. ViewPager自带触摸滑动功能,结合Fragment使用很好,来自补充组件android-support-v4.j ...

  6. Android 滑动效果进阶篇(六)—— 倒影效果

    上篇介绍了使用Animation实现3D动画旋转翻页效果,现在介绍图片倒影实现,先看效果图 本示例主要通过自定义Gallery和ImageAdapter(继承自BaseAdapter)实现 1.倒影绘 ...

  7. android滑动基础篇 - 触屏显示信息

    效果图: 代码部分: activity类代码: package com.TouchView; /* * android滑动基础篇 * */ import android.app.Activity; i ...

  8. Android滑动菜单框架完全解析,教你如何一分钟实现滑动菜单特效

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8744400 之前我向大家介绍了史上最简单的滑动菜单的实现方式,相信大家都还记得.如 ...

  9. [置顶] xamarin android自定义标题栏(自定义属性、回调事件)

    自定义控件的基本要求 这篇文章就当是自定义控件入门,看了几篇android关于自定义控件的文章,了解了一下,android自定义控件主要有3种方式: 自绘控件:继承View类,所展示的内容在OnDra ...

随机推荐

  1. web server

    嵌入式的:boa  thttpd wn 网站的: iis apache tomcat ngnix python 的  ruby的 自定的 windows  w3mfc c#自定义的1对1 webser ...

  2. eclipse跳转到exitCurrentThread

    1.在使用Eclipse时,用Debug模式运行springboot项目,结果总是在项目快启动成功的时候,跳转到exitCurrentException这个地方 2.方法:Eclipse->[P ...

  3. 获取历史K线数据的几个方法

    1.通过已有的股票交易软件下载数据,如果他们是开源结构的,就可以解析他们的K线数据. 2.在互联网上抓取数据 int iStockCode;CString strUrl; 通过OpenUrl.Read ...

  4. 【安卓笔记】Android保持Session

    简介: Session的概念在Android开发中遇到概率还是比较少,之前遇到一个项目的登陆接口返回不是Token,而且自己需要和服务端保持是Session,虽然这种情景很少,但是有时候后端有这种要求 ...

  5. sql server set赋值和select 赋值的区别以及使用方法

    sqlserver存储过程中SELECT 与 SET 对变量赋值的区别   (备注:虽然变量赋值使用方法已经不是问题,但是,了解一下select和set赋值的区别,还是提高了不少认识.应该有很多人并不 ...

  6. Neo4j 在Linux下的安装登录

    第一步:安装JDK https://blog.csdn.net/qq_33951308/article/details/82933535 第二步:下载并安装neo4j 下载地址   或者直接用wget ...

  7. 数据库删除数据 truncate 与 delete

    delete from table where 直接删除表中的某一行数据,并且同时将该行的删除操作作为事务记录在日志中保存以便进行进行回滚操作.所以delete相比较truncate更加占用资源,数据 ...

  8. wepy小程序项目

    # 安装(更新) wepy 命令行工具. cnpm install wepy-cli -g # 安装依赖包 cnpm install # 开发实时编译. npm run dev WePY开发文档参考 ...

  9. 简单python脚本,将jupter notebook的ipynb文件转为pdf(包含中文)

    直接执行的python代码ipynb2pdf.py 主要思路.将ipynb文件转成tex文件,然后使用latex编译成pdf.由于latex默认转换不显示中文,需要向tex文件中添加相关中文包. 依赖 ...

  10. Tkinter 之Canvas画布

    一.参数说明 参数 作用 background(bg) 指定 Canvas 的背景颜色 borderwidth(bd) 指定 Canvas 的边框宽度 closeenough 指定一个距离,当鼠标与画 ...