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

时间：2023-02-08 18:40:31

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



最近看到最美等应用里面有一个特效，自己上网查了下，写了个demo如下：

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

在写这个demo之前，查了很多资料，主要是参考github上面的一个例子：
https://github.com/ksoichiro/Android-ObservableScrollView

这个例子里面写了很多特效，但是下载下来后，导入Studio里面很多错误，无法跑起来，所以，自己抠了其中的一个特效，修改了一些代码，效果如上图所示。


主要代码片段：（后面会有解释）
  1. import android.content.res.TypedArray;
  2. import android.graphics.Color;
  3. import android.os.Bundle;
  4. import android.support.v7.app.ActionBarActivity;
  5. import android.support.v7.widget.Toolbar;
  6. import android.util.TypedValue;
  7. import android.view.Menu;
  8. import android.view.MenuItem;
  9. import android.view.View;
  10. import android.widget.TextView;

  12. import com.nineoldandroids.view.ViewHelper;


  15. public class MainActivity extends ActionBarActivity implements ObservableScrollViewCallbacks{

  17.     private static final float MAX_TEXT_SCALE_DELTA = 0.3f;
  18.     private static final boolean TOOLBAR_IS_STICKY = true;

  20.     private View mToolbar;
  21.     private View mImageView;
  22.     private View mOverlayView;
  23.     private ObservableScrollView mScrollView;
  24.     private TextView mTitleView;
  25.     private View mFab;
  26.     private int mActionBarSize;
  27.     private int mFlexibleSpaceShowFabOffset;
  28.     private int mFlexibleSpaceImageHeight;
  29.     private int mToolbarColor;

  31.     @Override
  32.     protected void onCreate(Bundle savedInstanceState) {
  33.         super.onCreate(savedInstanceState);
  34.         setContentView(R.layout.activity_main);
  35.         setSupportActionBar((Toolbar) findViewById(R.id.toolbar));

  37.         mFlexibleSpaceImageHeight = getResources().getDimensionPixelSize(R.dimen.flexible_space_image_height);
  38.         mActionBarSize = getActionBarSize();
  39.         mToolbarColor = getResources().getColor(R.color.primary);

  41.         mToolbar = findViewById(R.id.toolbar);
  42.         if (!TOOLBAR_IS_STICKY) {
  43.             mToolbar.setBackgroundColor(Color.TRANSPARENT);
  44.         }
  45.         mImageView = findViewById(R.id.image);
  46.         mOverlayView = findViewById(R.id.overlay);
  47.         mScrollView = (ObservableScrollView) findViewById(R.id.scroll);
  48.         mScrollView.setScrollViewCallbacks(this);
  49.         mTitleView = (TextView) findViewById(R.id.title);
  50.         mTitleView.setText(getTitle());
  51.         setTitle(null);

  53.         ScrollUtils.addOnGlobalLayoutListener(mScrollView, new Runnable() {
  54.             @Override
  55.             public void run() {
  56.                 mScrollView.scrollTo(0, mFlexibleSpaceImageHeight - mActionBarSize);

  58.             }
  59.         });
  60.     }


  63.     @Override
  64.     public boolean onCreateOptionsMenu(Menu menu) {
  65.         // Inflate the menu; this adds items to the action bar if it is present.
  66.         getMenuInflater().inflate(R.menu.menu_main, menu);
  67.         return true;
  68.     }

  70.     @Override
  71.     public boolean onOptionsItemSelected(MenuItem item) {
  72.         // Handle action bar item clicks here. The action bar will
  73.         // automatically handle clicks on the Home/Up button, so long
  74.         // as you specify a parent activity in AndroidManifest.xml.
  75.         int id = item.getItemId();

  77.         //noinspection SimplifiableIfStatement

  79.         return super.onOptionsItemSelected(item);
  80.     }

  82.     protected int getActionBarSize() {
  83.         TypedValue typedValue = new TypedValue();
  84.         int[] textSizeAttr = new int[]{R.attr.actionBarSize};
  85.         int indexOfAttrTextSize = 0;
  86.         TypedArray a = obtainStyledAttributes(typedValue.data, textSizeAttr);
  87.         int actionBarSize = a.getDimensionPixelSize(indexOfAttrTextSize, -1);
  88.         a.recycle();
  89.         return actionBarSize;
  90.     }

  92.     @Override
  93.     public void onScrollChanged(int scrollY, boolean firstScroll, boolean dragging) {
  94.         float flexibleRange = mFlexibleSpaceImageHeight - mActionBarSize;
  95.         int minOverlayTransitionY = mActionBarSize - mOverlayView.getHeight();
  96.         ViewHelper.setTranslationY(mOverlayView, ScrollUtils.getFloat(-scrollY, minOverlayTransitionY, 0));
  97.         ViewHelper.setTranslationY(mImageView, ScrollUtils.getFloat(-scrollY / 2, minOverlayTransitionY, 0));

  99.         // Change alpha of overlay
  100.         ViewHelper.setAlpha(mOverlayView, ScrollUtils.getFloat((float) scrollY / flexibleRange, 0, 1));

  102.         // Scale title text
  103.         float scale = 1 + ScrollUtils.getFloat((flexibleRange - scrollY) / flexibleRange, 0, MAX_TEXT_SCALE_DELTA);
  104.         ViewHelper.setPivotX(mTitleView, 0);
  105.         ViewHelper.setPivotY(mTitleView, 0);
  106.         ViewHelper.setScaleX(mTitleView, scale);
  107.         ViewHelper.setScaleY(mTitleView, scale);

  109.         // Translate title text
  110.         int maxTitleTranslationY = (int) (mFlexibleSpaceImageHeight - mTitleView.getHeight() * scale);
  111.         int titleTranslationY = maxTitleTranslationY - scrollY;
  112.         if (TOOLBAR_IS_STICKY) {
  113.             titleTranslationY = Math.max(0, titleTranslationY);
  114.         }
  115.         ViewHelper.setTranslationY(mTitleView, titleTranslationY);

  117.         if (TOOLBAR_IS_STICKY) {
  118.             // Change alpha of toolbar background
  119.             if (-scrollY + mFlexibleSpaceImageHeight <= mActionBarSize) {
  120.                 mToolbar.setBackgroundColor(ScrollUtils.getColorWithAlpha(1, mToolbarColor));
  121.             } else {
  122.                 mToolbar.setBackgroundColor(ScrollUtils.getColorWithAlpha(0, mToolbarColor));
  123.             }
  124.         } else {
  125.             // Translate Toolbar
  126.             if (scrollY < mFlexibleSpaceImageHeight) {
  127.                 ViewHelper.setTranslationY(mToolbar, 0);
  128.             } else {
  129.                 ViewHelper.setTranslationY(mToolbar, -scrollY);
  130.             }
  131.         }
  132.     }

  134.     @Override
  135.     public void onDownMotionEvent() {

  137.     }

  139.     @Override
  140.     public void onUpOrCancelMotionEvent(ScrollState scrollState) {

  142.     }
  143. }
复制代码activity_main.xml文件
  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:app="http://schemas.android.com/apk/res-auto"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent">

  6.     <ImageView
  7.         android:id="@+id/image"
  8.         android:layout_width="match_parent"
  9.         android:layout_height="@dimen/flexible_space_image_height"
  10.         android:scaleType="centerCrop"
  11.         android:src="@mipmap/ic_pic" />

  13.     <View
  14.         android:id="@+id/overlay"
  15.         android:layout_width="match_parent"
  16.         android:layout_height="@dimen/flexible_space_image_height"
  17.         android:background="?attr/colorPrimary" />

  19.     <com.picasso.observablescrollviewdemo.ObservableScrollView
  20.         android:id="@+id/scroll"
  21.         android:layout_width="match_parent"
  22.         android:layout_height="match_parent"
  23.         android:overScrollMode="never"
  24.         android:scrollbars="none">

  26.         <LinearLayout
  27.             android:layout_width="match_parent"
  28.             android:layout_height="wrap_content"
  29.             android:orientation="vertical">

  31.             <View
  32.                 android:layout_width="match_parent"
  33.                 android:layout_height="@dimen/flexible_space_image_height"
  34.                 android:background="@android:color/transparent" />

  36.             <TextView
  37.                 android:layout_width="match_parent"
  38.                 android:layout_height="wrap_content"
  39.                 android:background="@android:color/white"
  40.                 android:paddingBottom="@dimen/activity_vertical_margin"
  41.                 android:paddingLeft="@dimen/activity_horizontal_margin"
  42.                 android:paddingRight="@dimen/activity_horizontal_margin"
  43.                 android:paddingTop="@dimen/activity_vertical_margin"
  44.                 android:text="@string/desc" />
  45.         </LinearLayout>
  46.     </com.picasso.observablescrollviewdemo.ObservableScrollView>

  48.     <android.support.v7.widget.Toolbar
  49.         android:id="@+id/toolbar"
  50.         android:layout_width="match_parent"
  51.         android:layout_height="wrap_content"
  52.         android:background="?attr/colorPrimary"
  53.         android:minHeight="?attr/actionBarSize"
  54.         app:popupTheme="@style/Theme.AppCompat.Light.DarkActionBar"
  55.         />

  57.     <LinearLayout
  58.         android:layout_width="match_parent"
  59.         android:layout_height="wrap_content"
  60.         android:orientation="vertical"
  61.         >

  63.         <TextView
  64.             android:id="@+id/title"
  65.             android:layout_width="match_parent"
  66.             android:layout_height="wrap_content"
  67.             android:ellipsize="end"
  68.             android:gravity="center_vertical"
  69.             android:maxLines="1"
  70.             android:minHeight="?attr/actionBarSize"
  71.             android:textColor="@android:color/white"
  72.             android:text="Make Attractive"
  73.             android:paddingLeft="@dimen/activity_vertical_margin"
  74.             android:textSize="20sp" />

  76.         <View
  77.             android:layout_width="match_parent"
  78.             android:layout_height="@dimen/flexible_space_image_height"
  79.             android:background="@android:color/transparent" />
  80.     </LinearLayout>

  82. </FrameLayout>
复制代码
其实，效果实现很简单，控件ObservableScrollView主要是继承了ScrollView并实现了Scrollable接口，在MainActivity中，重写onScrollChanged方法，在方法中，主要做了这几部操作：
1、随着滑动，让图片mImageView上移
2、随着滑动，让盖在图片上的view上移，长度是imageView上移的2倍
3、随着滑动，让盖在图片上的view的alpha值逐渐变大（就是那个渐渐变绿的效果）
4、随着滑动，让Title的字体逐渐变小并让title上移到ToolBar的位置
5、当滑动到ToolBar的位置时，让ToolBar显示

下载源码如下：


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

标签：

相关文章