ObservableScrollView实现

最新推荐文章于 2024-03-29 10:00:03 发布
最新推荐文章于 2024-03-29 10:00:03 发布
阅读量1.7k 收藏 1
点赞数 1
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26296197/article/details/51393845
版权




ObservableScrollView github上有源码，非常的丰富，如果根据自己的项目需要修改的话，需要花一定的功夫，在java文件中需要改变渐变颜色rgb值,其实就是androidstudio中

16进制#ffffff表示的，在这里补充一个知识点：





，同时要改变布局的显示，我在布局的调试中花了很多时间，在这里需要提醒的是多研究别人代码中的布局。





ScrollView布局 


package com.example.testscrollheaderhide;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewTreeObserver;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.view.WindowManager;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ImageView;

import com.example.testscrollheaderhide.srcoll.ObservableScrollView;
import com.example.testscrollheaderhide.srcoll.ObservableScrollView.ScrollViewListener;

public class SrcollActivity extends Activity implements ScrollViewListener {

	private View layoutHead;
	private ObservableScrollView scrollView;
	private ImageView imageView;
	private WebView webView;

	private int height;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_srcoll);
		
		initView();
	}

	private void initView() {
		webView = (WebView) findViewById(R.id.webview1);
		scrollView = (ObservableScrollView) findViewById(R.id.scrollview);
		layoutHead = findViewById(R.id.view_head);
		imageView = (ImageView) findViewById(R.id.imageView1);
		layoutHead.setBackgroundColor(Color.TRANSPARENT);

		// 初始化webview
		// 启用支持javascript
		WebSettings settings = webView.getSettings();
		settings.setJavaScriptEnabled(true);
		webView.loadUrl("http://www.topit.me/");
		// 覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为，使网页用WebView打开
		webView.setWebViewClient(new WebViewClient() {
			@Override
			public boolean shouldOverrideUrlLoading(WebView view, String url) {
				// 返回值是true的时候控制去WebView打开，为false调用系统浏览器或第三方浏览器
				view.loadUrl(url);
				return true;
			}
		});

		// 获取顶部图片高度后，设置滚动监听
		ViewTreeObserver vto = imageView.getViewTreeObserver();
		vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
			@SuppressWarnings("deprecation")
			@Override
			public void onGlobalLayout() {
				imageView.getViewTreeObserver().removeGlobalOnLayoutListener(
						this);
				height = imageView.getHeight();
				imageView.getWidth();

				scrollView.setScrollViewListener(SrcollActivity.this);
			}
		});

	}

	@Override
	public void onScrollChanged(ObservableScrollView scrollView, int x, int y,
			int oldx, int oldy) {

		// Log.i("TAG","y--->"+y+"    height-->"+height);
		if (y <= height) {
			float scale = (float) y / height;
			float alpha = (255 * scale);
			// Log.i("TAG","alpha--->"+alpha);

			// layout全部透明
			// layoutHead.setAlpha(scale);

			// 只是layout背景透明(仿知乎滑动效果)
			layoutHead.setBackgroundColor(Color.argb((int) alpha, 0xfd, 0x91,
					0x5b));

//			Log.d("ScrollActivity",""+Color.argb((int) alpha);
		}

	}
}





自动隐藏布局


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"

        >
        <com.jydev.myn.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="0dp"
                android:orientation="vertical"
                android:weightSum="1"

                >

                <ImageView
                    android:id="@+id/imageView1"
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:scaleType="fitXY"
                    android:src="@mipmap/viewpager_first" />

                <LinearLayout
                    android:id="@+id/ll_product"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_below="@+id/iv_product_detail"
                    android:layout_marginTop="20dp"
                    android:orientation="vertical">

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="15dp">


                        <TextView
                            android:id="@+id/tv_product_title"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="玫瑰莹润透肌护理"
                            android:textColor="@color/color_2c2c2c"
                            android:textSize="12sp"
                            android:textStyle="bold" />


                        <TextView
                            android:id="@+id/tv_product_declare"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_below="@+id/tv_product_title"
                            android:layout_marginTop="17dp"
                            android:text="渗透皮肤 改善皮肤 增加水分"
                            android:textColor="@color/color_333333"
                            android:textSize="9sp"

                            />


                        <TextView
                            android:id="@+id/tv_product_price"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentRight="true"
                            android:layout_marginRight="18dp"
                            android:drawableLeft="@mipmap/rmb"
                            android:text="148"
                            android:textColor="@color/color_f90202"
                            android:textSize="17sp" />


                    </RelativeLayout>


                    <View
                        android:layout_width="match_parent"
                        android:layout_height="0.5dp"
                        android:layout_marginTop="10dp"
                        android:background="@color/color_b9b6b6" />

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="15dp">


                        <TextView
                            android:id="@+id/tv_service_time"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="服务时长 :"
                            android:textColor="@color/color_6e6d6d"
                            android:textSize="9dp" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="5dp"
                            android:layout_toRightOf="@+id/tv_service_time"
                            android:text="90分钟"
                            android:textColor="@color/color_6e6d6d"
                            android:textSize="9dp" />

                    </RelativeLayout>

                    <TextView
                        android:id="@+id/tv_product_indroduce"
                        android:layout_width="match_parent"
                        android:layout_height="20dp"
                        android:layout_marginTop="10dp"
                        android:background="@color/color_b9b6b6"
                        android:gravity="center_vertical"
                        android:paddingLeft="15dp"
                        android:text="项目介绍"
                        android:textColor="@color/color_fff"
                        android:textSize="9dp"

                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="15dp"
                        android:layout_marginTop="9dp"
                        android:drawableLeft="@mipmap/first"
                        android:gravity="center"
                        android:text="项目功效"
                        android:textColor="@color/color_929191"
                        android:textSize="10dp"

                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:layout_marginTop="9dp"
                        android:text="玫瑰莹润透肌护理  玫瑰莹润透肌护理 "
                        android:textColor="@color/color_4c4b4b"
                        android:textSize="10dp"

                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:layout_marginTop="9dp"
                        android:text="玫瑰莹润透肌护理  玫瑰莹润透肌护理 "
                        android:textColor="@color/color_4c4b4b"
                        android:textSize="10dp"

                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:layout_marginTop="9dp"
                        android:text="玫瑰莹润透肌护理  玫瑰莹润透肌护理 "
                        android:textColor="@color/color_4c4b4b"
                        android:textSize="10dp"

                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:layout_marginTop="9dp"
                        android:text="玫瑰莹润透肌护理  玫瑰莹润透肌护理 "
                        android:textColor="@color/color_4c4b4b"
                        android:textSize="10dp"

                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:layout_marginTop="9dp"
                        android:text="玫瑰莹润透肌护理  玫瑰莹润透肌护理 "
                        android:textColor="@color/color_4c4b4b"
                        android:textSize="10dp"

                        />

                    <View
                        android:layout_width="match_parent"
                        android:layout_height="1dp"
                        android:layout_marginTop="10dp"
                        android:background="@color/color_b9b6b6" />


                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="15dp"
                        android:layout_marginTop="9dp"
                        android:drawableLeft="@mipmap/second"
                        android:gravity="center"
                        android:text="项目功效"
                        android:textColor="@color/color_929191"
                        android:textSize="10dp"

                        />


                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:layout_marginTop="9dp"
                        android:text="适应所有人 "
                        android:textColor="@color/color_4c4b4b"
                        android:textSize="10dp" />

                    <TextView
                        android:id="@+id/tv_consume_comment"
                        android:layout_width="match_parent"
                        android:layout_height="20dp"
                        android:layout_marginTop="10dp"
                        android:background="@color/color_b9b6b6"
                        android:gravity="center_vertical"
                        android:paddingLeft="15dp"
                        android:text="消费评价"
                        android:textColor="@color/color_fff"
                        android:textSize="9dp"

                        />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="38dp"
                        android:layout_marginLeft="15dp"
                        android:gravity="center_vertical"
                        android:orientation="horizontal">

                        <TextView
                            android:layout_width="94dp"
                            android:layout_height="24dp"
                            android:background="@color/color_f1b13b"
                            android:drawableLeft="@mipmap/good"
                            android:drawablePadding="3dp"
                            android:gravity="center_vertical"
                            android:paddingLeft="5dp"
                            android:text="非常满意（20）"
                            android:textColor="@color/color_fff"
                            android:textSize="9sp" />

                        <TextView
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"

                            />

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:layout_marginRight="16dp"
                            android:src="@mipmap/arrow_right" />

                    </LinearLayout>

                    <View
                        android:layout_width="match_parent"
                        android:layout_height="0.5dp"
                        android:background="@color/color_b9b6b6" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="38dp"
                        android:layout_marginLeft="15dp"
                        android:gravity="center_vertical"
                        android:orientation="horizontal">

                        <TextView
                            android:layout_width="94dp"
                            android:layout_height="24dp"
                            android:background="@color/color_f1b13b"
                            android:drawableLeft="@mipmap/good"
                            android:drawablePadding="3dp"
                            android:gravity="center_vertical"
                            android:paddingLeft="5dp"
                            android:text="满意（20）"
                            android:textColor="@color/color_fff"
                            android:textSize="9sp" />

                        <TextView
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"

                            />

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:layout_marginRight="16dp"
                            android:src="@mipmap/arrow_right" />

                    </LinearLayout>

                    <View
                        android:layout_width="match_parent"
                        android:layout_height="0.5dp"
                        android:background="@color/color_b9b6b6" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="38dp"
                        android:layout_marginLeft="15dp"
                        android:gravity="center_vertical"
                        android:orientation="horizontal">

                        <TextView
                            android:layout_width="94dp"
                            android:layout_height="24dp"
                            android:background="@color/color_f1b13b"
                            android:drawableLeft="@mipmap/good"
                            android:drawablePadding="3dp"
                            android:gravity="center_vertical"
                            android:paddingLeft="5dp"
                            android:text="一般（20）"
                            android:textColor="@color/color_fff"
                            android:textSize="9sp" />

                        <TextView
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"

                            />

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:layout_marginRight="16dp"
                            android:src="@mipmap/arrow_right" />

                    </LinearLayout>

                    <View
                        android:layout_width="match_parent"
                        android:layout_height="0.5dp"
                        android:background="@color/color_b9b6b6" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="38dp"
                        android:layout_marginLeft="15dp"
                        android:gravity="center_vertical"
                        android:orientation="horizontal">

                        <TextView
                            android:layout_width="94dp"
                            android:layout_height="24dp"
                            android:background="@color/color_f1b13b"
                            android:drawableLeft="@mipmap/bad"
                            android:drawablePadding="3dp"
                            android:gravity="center_vertical"
                            android:paddingLeft="5dp"
                            android:text="不好（20）"
                            android:textColor="@color/color_fff"
                            android:textSize="9sp" />

                        <TextView
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"

                            />

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center_vertical"
                            android:layout_marginRight="16dp"
                            android:src="@mipmap/arrow_right" />

                    </LinearLayout>

                    <View
                        android:layout_width="match_parent"
                        android:layout_height="0.5dp"
                        android:background="@color/color_b9b6b6" />


                </LinearLayout>

            </LinearLayout>


        </com.jydev.myn.widget.ObservableScrollView>

        <RelativeLayout
            android:id="@+id/view_head"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="#6600a1"


            >

            <ImageView
                android:id="@+id/city_back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:padding="8dp"
                android:src="@mipmap/back" />


            <TextView
                android:id="@+id/txt_topbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:gravity="center"
                android:text="项目详情"
                android:textColor="#fff"
                android:textSize="18sp" />


            <ImageView
                android:id="@+id/iv_search"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerInParent="true"
                android:layout_marginRight="25dp"
                android:src="@mipmap/search_little" />

        </RelativeLayout>

    </RelativeLayout>


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_alignParentBottom="true"
        android:background="@color/color_6600a1">

        <TextView
            android:id="@+id/detail_order"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="立即预约"
            android:textColor="@color/color_fff"
            android:textSize="18sp" />

    </RelativeLayout>

</LinearLayout>

下载链接 https://yunpan.cn/cSsBDetFRyHYk  访问密码 ae2e


参考链接 https://github.com/ksoichiro/Android-ObservableScrollView

http://www.devstore.cn/code/info/1532.html

https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F（rgb知识扩展）

http://www.sioe.cn/yingyong/yanse-rgb-16/(颜色转换)

http://tool.oschina.net/commons?type=3(颜色转换)


stevenzqzq
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ObservableScrollView
06-13
Android-ObservableScrollView 用于观察可滚动视图上的滚动事件的 Android 库。 与 Android 5.0 Lollipop 中引入的 Toolbar 进行交互很容易，并且可能有助于实现 Material Design 应用程序的外观和感觉。 样品您可以...
Android-ObservableScrollView
07-11
与 Android 5.0 Lollipop 中引入的 Toolbar 进行交互很容易，并且可能有助于实现 Material Design 应用程序的外观和感觉。 安装dependencies { compile ' ...
Android-ObservableScrollView(一)
热门推荐
AnalyzeSystem的博客
06-27 1万+
Base相关方法 FillGap2 FillGap3 FlexibleSpace 本篇主要根据官方提供的simple结合源码理解上面这四块的相关知识，最后在这个基础上进行一个拓展，由于Activity都是根据基类构建出来的，我们先来了解基类构建以及涉及到的BaseActivity基类内部提供的方法。 BaseActivity提供了ActionBar的高度获取方法根据actionBar
探索 `ObservableScrollView`：让滚动更智能、更可控
最新发布
gitblog_00081的博客
03-29 385
探索 ObservableScrollView：让滚动更智能、更可控 项目地址:https://gitcode.com/Lichenwei-Dev/ObservableScrollView 本文将带你深入了解一款名为 ObservableScrollView 的开源项目，它提供了一种在 Android 开发中监听和控制 ScrollView 滚动的新方式。该项目由开发者 Lichenwei-Dev...
ObservableScrollView滑动头部颜色从透明渐变成白色
scottma211的博客
07-24 997
ObservableScrollView，控制滑动距离来改变头部导航栏渐变颜色，Android上观察滚动的视图，可以监听滚动视图的滚动状态。它可以很简单地与Toolbar进行交互，并且很方便地创建Material Design的app，以下是我项目中所用到的，在此做个笔记，有需要的同学可以参考一下。 效果图如下： 1  xml文件中进行声明 <......Observable
android 一个很漂亮的控件ObservableScrollView（含片段代码和源码）
aoshiwenrou的专栏
06-26 5259
转自：http://www.eoeandroid.com/thread-577241-1-1.html 最近看到最美等应用里面有一个特效，自己上网查了下，写了个demo如下：   在写这个demo之前，查了很多资料，主要是参考github上面的一个例子： https://github.com/ksoichiro/Android-ObservableScr
Android-ObservableScrollView(二)
AnalyzeSystem的博客
06-29 5229
本篇主要根据官方提供的simple结合源码理解，由于Activity都是根据基类构建出来的，我们先来了解基类构建以及涉及到的BaseActivity基类内部提供的方法。 BaseActivity提供了ActionBar的高度获取方法根据actionBar
observablescrollview
04-07
利用Android的动画框架，ObservableScrollView可以实现丰富的滚动动画，比如淡入淡出、缩放、平移等，提升用户体验。 综上所述，ObservableScrollView是Android开发中的一个重要工具，它扩展了滚动视图的功能，...
Android代码-ObservableScrollView
08-06
直接复制ObservableScrollView类到项目里，然后让Activity去实现ObservableScrollView.OnObservableScrollViewListener接口并实现对应的方法即可（如果布局里嵌套的是带滑动属性的控件如ListView，注意解决滑动冲突...
Android-ObservableScrollView-master
07-13
监听滚动视图滚动事件的库，帮助与Toolbar的交互动效处理与Material Design的实现
商城首页使用组件ObservableScrollView.zip
01-06
商城首页使用组件ObservableScrollView.zip，类似各类商城的ui效果
ScrollView增加标题控制显示和隐藏
06-25
ScrollView增加标题控制显示和隐藏
【android】仿知乎ScrollView滚动改变标题栏透明度
止水
01-20 6806
刷知乎的时候看到，专题栏里面 往下滚动标题栏会由透明逐渐变蓝色，觉得这个效果不错，就想自己写一下 这是自己实现的效果图： 说下实现思路： 1、先获取顶部图片的高度height，这个有3种方式获取，我用的是监听onGlobalLayout方法的回调 2、监听scrollview的滚动坐标，原生的没有这个监听，需要我们自己写个view继承scrollview，然后重写onScrol
[MD][仿煎蛋]observablescrollview下拉隐藏actionbar
S.H.的部落格林
12-21 1292
煎蛋是这个样子的： 下来隐藏actionbar是个很好的用户体验，特别是对于使用屏幕比较小的用户，下面我们自己来做这个功能。伟大的开源已经帮我们提供了这样的方法，我们只要站在巨人的肩膀上开发就可以了，这里我们引用的是 ksoichiro的Android-ObservableScrollView  我们只引用开源工程中的几个文件 然后在activity_main.xml中添加
ObservableScrollView 实现粘性头部
a454193977的博客
03-09 1789
public class ObservableScrollView extends ScrollView { private Callbacks mCallbacks; public ObservableScrollView(Context context, AttributeSet attrs) { super(context, attrs); }
android 布局滑动监听,Android中实现监听ScrollView滑动事件
weixin_35765731的博客
05-26 354
时候我们需要监听ScroView的滑动情况，比如滑动了多少距离，是否滑到布局的顶部或者底部。可惜的是SDK并没有相应的方法，不过倒是提供了一个protected void onScrollChanged(int x, int y, int oldx, int oldy)方法，显然这个方法是不能被外界调用的，因此就需要把它暴露出去，方便使用。解决方式就是写一个接口，package com.examp...
Android ScrollView用法实例汇总
极致的专注 无限的热情
02-27 7584
有时候我们需要监听ScroView的滑动情况，比如滑动了多少距离，是否滑到布局的顶部或者底部。可惜的是SDK并没有相应的方法，不过倒是提供了一个protected void onScrollChanged(int x, int y, int oldx, int oldy)   方法，显然这个方法是不能被外界调用的，因此就需要把它暴露出去，方便使用。解决方式就是写一个接口，package com.t
Android ScrollView 粘性标题
06-08
要实现 Android ScrollView 粘性标题的效果，可以使用两种方法： 1. 使用 CoordinatorLayout 和 AppBarLayout 在布局文件中使用 CoordinatorLayout 和 AppBarLayout，并将要固定的标题放在 AppBarLayout 中的 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值