ObservableScrollView实现




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(颜色转换)


Android-ObservableScrollView Build Status Coverage Status Maven Central API Android Arsenal Android library to observe scroll events on scrollable views. It's easy to interact with the Toolbar introduced in Android 5.0 Lollipop and may be helpful to implement look and feel of Material Design apps. Examples Download from Google Play Get it on Google Play Please note that the app on the Play store is not always the latest version. Download from wercker If you are a wercker user, you can download the latest build artifact. See here for details. wercker status Install manually Just clone and execute installDevDebug task with Gradle. See here for details. Usage Add com.github.ksoichiro:android-observablescrollview to your dependencies in build.gradle. Add ObservableListView or other views you'd like to use. Write some animation codes to the callbacks such as onScrollChanged, onUpOrCancelMotionEvent, etc. See the quick start guide for details, and the documentation for further more. Reference Supported widgets Environment Release notes FAQ Apps that use this library Badge Jair Player by Akshay Chordiya My Gradle by Erick Chavez Alcarraz ThemeDIY by Darkion Avey {Soft} Skills by Fanatic Devs If you're using this library in your app and you'd like to list it here, please let me know via email or pull requests or issues. Contributions Any contributions are welcome! Please check the FAQ and contributing guideline before submitting a new issue. Developed By Soichiro Kashima - soichiro.kashima@gmail.com Thanks Inspired by ObservableScrollView in romannurik-code. License Copyright 2014 Soichiro Kashima Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值