android 一个很漂亮的控件ObservableScrollView（含片段代码和源码）

转自：http://www.eoeandroid.com/thread-577241-1-1.html

最近看到最美等应用里面有一个特效，自己上网查了下，写了个demo如下：   在写这个demo之前，查了很多资料，主要是参考github上面的一个例子： https://github.com/ksoichiro/Android-ObservableScrollView 这个例子里面写了很多特效，但是下载下来后，导入Studio里面很多错误，无法跑起来，所以，自己抠了其中的一个特效，修改了一些代码，效果如上图所示。 主要代码片段：（后面会有解释） import android.content.res.TypedArray; import android.graphics.Color; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.support.v7.widget.Toolbar; import android.util.TypedValue; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.TextView; import com.nineoldandroids.view.ViewHelper; public class MainActivity extends ActionBarActivity implements ObservableScrollViewCallbacks{     private static final float MAX_TEXT_SCALE_DELTA = 0.3f;     private static final boolean TOOLBAR_IS_STICKY = true;     private View mToolbar;     private View mImageView;     private View mOverlayView;     private ObservableScrollView mScrollView;     private TextView mTitleView;     private View mFab;     private int mActionBarSize;     private int mFlexibleSpaceShowFabOffset;     private int mFlexibleSpaceImageHeight;     private int mToolbarColor;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         setSupportActionBar((Toolbar) findViewById(R.id.toolbar));         mFlexibleSpaceImageHeight = getResources().getDimensionPixelSize(R.dimen.flexible_space_image_height);         mActionBarSize = getActionBarSize();         mToolbarColor = getResources().getColor(R.color.primary);         mToolbar = findViewById(R.id.toolbar);         if (!TOOLBAR_IS_STICKY) {             mToolbar.setBackgroundColor(Color.TRANSPARENT);         }         mImageView = findViewById(R.id.image);         mOverlayView = findViewById(R.id.overlay);         mScrollView = (ObservableScrollView) findViewById(R.id.scroll);         mScrollView.setScrollViewCallbacks(this);         mTitleView = (TextView) findViewById(R.id.title);         mTitleView.setText(getTitle());         setTitle(null);         ScrollUtils.addOnGlobalLayoutListener(mScrollView, new Runnable() {             @Override             public void run() {                 mScrollView.scrollTo(0, mFlexibleSpaceImageHeight - mActionBarSize);             }         });     }     @Override     public boolean onCreateOptionsMenu(Menu menu) {         // Inflate the menu; this adds items to the action bar if it is present.         getMenuInflater().inflate(R.menu.menu_main, menu);         return true;     }     @Override     public boolean onOptionsItemSelected(MenuItem item) {         // Handle action bar item clicks here. The action bar will         // automatically handle clicks on the Home/Up button, so long         // as you specify a parent activity in AndroidManifest.xml.         int id = item.getItemId();         //noinspection SimplifiableIfStatement         return super.onOptionsItemSelected(item);     }     protected int getActionBarSize() {         TypedValue typedValue = new TypedValue();         int[] textSizeAttr = new int[]{R.attr.actionBarSize};         int indexOfAttrTextSize = 0;         TypedArray a = obtainStyledAttributes(typedValue.data, textSizeAttr);         int actionBarSize = a.getDimensionPixelSize(indexOfAttrTextSize, -1);         a.recycle();         return actionBarSize;     }     @Override     public void onScrollChanged(int scrollY, boolean firstScroll, boolean dragging) {         float flexibleRange = mFlexibleSpaceImageHeight - mActionBarSize;         int minOverlayTransitionY = mActionBarSize - mOverlayView.getHeight();         ViewHelper.setTranslationY(mOverlayView, ScrollUtils.getFloat(-scrollY, minOverlayTransitionY, 0));         ViewHelper.setTranslationY(mImageView, ScrollUtils.getFloat(-scrollY / 2, minOverlayTransitionY, 0));         // Change alpha of overlay         ViewHelper.setAlpha(mOverlayView, ScrollUtils.getFloat((float) scrollY / flexibleRange, 0, 1));         // Scale title text         float scale = 1 + ScrollUtils.getFloat((flexibleRange - scrollY) / flexibleRange, 0, MAX_TEXT_SCALE_DELTA);         ViewHelper.setPivotX(mTitleView, 0);         ViewHelper.setPivotY(mTitleView, 0);         ViewHelper.setScaleX(mTitleView, scale);         ViewHelper.setScaleY(mTitleView, scale);         // Translate title text         int maxTitleTranslationY = (int) (mFlexibleSpaceImageHeight - mTitleView.getHeight() * scale);         int titleTranslationY = maxTitleTranslationY - scrollY;         if (TOOLBAR_IS_STICKY) {             titleTranslationY = Math.max(0, titleTranslationY);         }         ViewHelper.setTranslationY(mTitleView, titleTranslationY);         if (TOOLBAR_IS_STICKY) {             // Change alpha of toolbar background             if (-scrollY + mFlexibleSpaceImageHeight <= mActionBarSize) {                 mToolbar.setBackgroundColor(ScrollUtils.getColorWithAlpha(1, mToolbarColor));             } else {                 mToolbar.setBackgroundColor(ScrollUtils.getColorWithAlpha(0, mToolbarColor));             }         } else {             // Translate Toolbar             if (scrollY < mFlexibleSpaceImageHeight) {                 ViewHelper.setTranslationY(mToolbar, 0);             } else {                 ViewHelper.setTranslationY(mToolbar, -scrollY);             }         }     }     @Override     public void onDownMotionEvent() {     }     @Override     public void onUpOrCancelMotionEvent(ScrollState scrollState) {     } } 复制代码 activity_main.xml文件 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:layout_width="match_parent"     android:layout_height="match_parent">     <ImageView         android:id="@+id/image"         android:layout_width="match_parent"         android:layout_height="@dimen/flexible_space_image_height"         android:scaleType="centerCrop"         android:src="@mipmap/ic_pic" />     <View         android:id="@+id/overlay"         android:layout_width="match_parent"         android:layout_height="@dimen/flexible_space_image_height"         android:background="?attr/colorPrimary" />     <com.picasso.observablescrollviewdemo.ObservableScrollView         android:id="@+id/scroll"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:overScrollMode="never"         android:scrollbars="none">         <LinearLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:orientation="vertical">             <View                 android:layout_width="match_parent"                 android:layout_height="@dimen/flexible_space_image_height"                 android:background="@android:color/transparent" />             <TextView                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:background="@android:color/white"                 android:paddingBottom="@dimen/activity_vertical_margin"                 android:paddingLeft="@dimen/activity_horizontal_margin"                 android:paddingRight="@dimen/activity_horizontal_margin"                 android:paddingTop="@dimen/activity_vertical_margin"                 android:text="@string/desc" />         </LinearLayout>     </com.picasso.observablescrollviewdemo.ObservableScrollView>     <android.support.v7.widget.Toolbar         android:id="@+id/toolbar"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:background="?attr/colorPrimary"         android:minHeight="?attr/actionBarSize"         app:popupTheme="@style/Theme.AppCompat.Light.DarkActionBar"         />     <LinearLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="vertical"         >         <TextView             android:id="@+id/title"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:ellipsize="end"             android:gravity="center_vertical"             android:maxLines="1"             android:minHeight="?attr/actionBarSize"             android:textColor="@android:color/white"             android:text="Make Attractive"             android:paddingLeft="@dimen/activity_vertical_margin"             android:textSize="20sp" />         <View             android:layout_width="match_parent"             android:layout_height="@dimen/flexible_space_image_height"             android:background="@android:color/transparent" />     </LinearLayout> </FrameLayout> 复制代码 其实，效果实现很简单，控件ObservableScrollView主要是继承了ScrollView并实现了Scrollable接口，在MainActivity中，重写onScrollChanged方法，在方法中，主要做了这几部操作： 1、随着滑动，让图片mImageView上移 2、随着滑动，让盖在图片上的view上移，长度是imageView上移的2倍 3、随着滑动，让盖在图片上的view的alpha值逐渐变大（就是那个渐渐变绿的效果） 4、随着滑动，让Title的字体逐渐变小并让title上移到ToolBar的位置 5、当滑动到ToolBar的位置时，让ToolBar显示 下载源码如下：   ObservableScrollViewDemo.rar