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