翻淘宝的时候注意到物品详情页面,页面上推的时候,标题栏会随着上推进行颜色渐变,网上搜了一下,发现了这篇博客,于是就仿照着写了一个。
参考博客地址:http://blog.youkuaiyun.com/lyhhj/article/details/52107851
我自己写的时候只是简单的敲了上推渐变。
自定义的ScrollView文件如下:
public class MyScrollerView extends ScrollView { public interface ScrollViewListener { void onScrollChanged(MyScrollerView scrollView, int x, int y, int oldx, int oldy); } private ScrollViewListener scrollViewListener = null; public MyScrollerView(Context context) { super(context); } public MyScrollerView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public MyScrollerView(Context context, AttributeSet attrs) { super(context, attrs); } public void setScrollViewListener(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) { scrollViewListener.onScrollChanged(this, x, y, oldx, oldy); } } }
xml文件如下:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns: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" tools:context="com.pistol.viewtest.MainActivity"> <com.pistol.viewtest.MyScrollerView 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"> <TextView android:id="@+id/tv_banner" android:layout_width="match_parent" android:layout_height="200dp" android:background="@color/colorAccent"/> <View android:layout_width="match_parent" android:layout_height="1000dp"> </View> </LinearLayout> </com.pistol.viewtest.MyScrollerView> <TextView android:id="@+id/tv_title" android:layout_width="match_parent" android:layout_height="40dp" android:background="#00000000" android:gravity="center" android:padding="10dp" android:text="title" android:textColor="#00000000"/> </RelativeLayout>
Activity文件如下:
public class MainActivity extends AppCompatActivity implements MyScrollerView.ScrollViewListener { private TextView tvBanner; //默认展示的banner private TextView tvTitle; //上推到最后要展示的title private MyScrollerView scrollView; //自定义的控件,覆写了onScrollChanged private int height; //需要计算的banner的高度 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getWindow().requestFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); scrollView = (MyScrollerView) findViewById(R.id.scrollView); tvBanner = (TextView) findViewById(R.id.tv_banner); tvTitle = (TextView) findViewById(R.id.tv_title); measure(); } //onCreate中获取控件高度 private void measure() { ViewTreeObserver vto = tvBanner.getViewTreeObserver(); vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override public void onGlobalLayout() { //防止二次测量 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { tvBanner.getViewTreeObserver().removeOnGlobalLayoutListener(this); } else { tvBanner.getViewTreeObserver().removeGlobalOnLayoutListener(this); } height = tvBanner.getHeight(); //添加监听 scrollView.setScrollViewListener(MainActivity.this); } }); } @Override public void onScrollChanged(MyScrollerView scrollView, int x, int y, int oldx, int oldy) { if (y <= 0) { //设置标题的背景颜色 tvTitle.setBackgroundColor(Color.argb((int) 0, 144, 151, 166)); } else if (y > 0 && y <= height) { //滑动距离小于banner图的高度时,设置背景和字体颜色颜色透明度渐变 float scale = (float) y / height; float alpha = (255 * scale); tvTitle.setTextColor(Color.argb((int) alpha, 0, 0, 0)); tvTitle.setBackgroundColor(Color.argb((int) alpha, 255, 255, 0)); } else { //滑动距离大于banner时,设置标题的背景颜色 tvTitle.setBackgroundColor(Color.argb((int) 255, 255, 255, 0)); } } }