轉自：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? |
總結
以上是生活随笔為你收集整理的android 一个很漂亮的控件ObservableScrollView（含片段代码和源码）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
