Android 監聽ScrollView滑動 實作布局背景、文本顔色漸變

    在浏覽App頁面的時候，發現随着頁面上下滑動，上面導航欄的背景顔色和TextView文字逐漸發生變化，這種效果非常多，開始感覺很神奇，查閱相關資料後，發現實作起來還是比較簡單的，現實作過程如下：

一、activity_main.xml檔案中

<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="match_parent"
    tools:context="com.chen.lianxidemo.MainActivity">
<!--滑動部分-->
<ScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    <TextView
        android:id="@+id/tv01"
        android:layout_width="match_parent"
        android:layout_height="@dimen/textView_height"
        android:text="@string/String01"
        android:layout_gravity="center"
        android:gravity="center"/>

    <TextView
        android:id="@+id/tv02"
        android:layout_width="match_parent"
        android:layout_height="@dimen/textView_height"
        android:text="@string/String02"
        android:gravity="center"/>

     <TextView
         android:layout_width="match_parent"
         android:layout_height="1dp"
         android:background="#000"/>

    <TextView
        android:id="@+id/tv03"
        android:layout_width="match_parent"
        android:layout_height="@dimen/textView_height"
        android:text="@string/String03"
        android:layout_gravity="center"
        android:gravity="center"/>

    <TextView
        android:id="@+id/tv04"
        android:layout_width="match_parent"
        android:layout_height="@dimen/textView_height"
        android:text="@string/String04"
        android:layout_gravity="center"
        android:gravity="center"/>
    <TextView
        android:id="@+id/tv05"
        android:layout_width="match_parent"
        android:layout_height="@dimen/textView_height"
        android:text="@string/String05"
        android:layout_gravity="center"
        android:gravity="center"/>
    <TextView
        android:id="@+id/tv06"
        android:layout_width="match_parent"
        android:layout_height="@dimen/textView_height"
        android:text="@string/String06"
        android:layout_gravity="center"
        android:gravity="center"/>
    <TextView
        android:id="@+id/tv07"
        android:layout_width="match_parent"
        android:layout_height="@dimen/textView_height"
        android:text="@string/String07"
        android:layout_gravity="center"
        android:gravity="center"/>
    <TextView
        android:id="@+id/tv08"
        android:layout_width="match_parent"
        android:layout_height="@dimen/textView_height"
        android:text="@string/String08"
        android:layout_gravity="center"
        android:gravity="center"/>
    </LinearLayout>
</ScrollView>

<!--标題欄部分-->
   <LinearLayout
       android:id="@+id/line_title"
       android:layout_width="match_parent"
       android:layout_height="@dimen/line_height"
       android:background="#00000000"
       android:orientation="horizontal">
      <TextView
          android:id="@+id/tv_title"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:textSize="@dimen/textSize"
          android:background="#00000000"
          android:layout_gravity="center"
          android:gravity="center"/>
   </LinearLayout>

</RelativeLayout>
           

二、MainActivity.java中

public class MainActivity extends AppCompatActivity {
    //滑動布局ScrollView
    private ScrollView mScrollView;
    private TextView tv01,tv02,tvTitle;
    //标題欄布局LinearLayout
    private LinearLayout mLinearLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        setOnClickListener();
    }
    private void initView() {
        mScrollView = (ScrollView) findViewById(R.id.scrollView);
        tv01 = (TextView) findViewById(R.id.tv01);
        tv02 = (TextView) findViewById(R.id.tv02);
        tvTitle = (TextView) findViewById(R.id.tv_title);
        mLinearLayout = (LinearLayout) findViewById(R.id.line_title);
    }
    @TargetApi(Build.VERSION_CODES.M)
    private void setOnClickListener() {
        //mScrollView滑動監聽
        mScrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
            @Override
            public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                tvTitle.setText(R.string.title);
                //擷取tv01、tv01控件的高度
                int height = tv01.getMeasuredHeight()+tv02.getMeasuredHeight();
                if (scrollY <= 0){
                    //滑動之前，标題欄布局背景顔色為完全透明，标題文字完全透明
                    mLinearLayout.setBackgroundColor(Color.argb(0,0,0,0));
                    tvTitle.setTextColor(Color.argb(0,255,255,255));
                    //讓mScrollView滑動的距離在0~height之間時顔色發生漸變
                }else if(scrollY >0 && scrollY <= height){
                    //擷取漸變率
                    float scale = (float) scrollY / height;
                    //擷取漸變數值
                    float alpha = (255 * scale);
                    //布局文本顔色逐漸發生變化
                    mLinearLayout.setBackgroundColor(Color.argb((int) alpha,0,0,0));
                    tvTitle.setTextColor(Color.argb((int) alpha,255,255,255));
                }else {
                    //當滑動距離超過height，布局文本顔色完全不透明
                    mLinearLayout.setBackgroundColor(Color.argb(255,0,0,0));
                    tvTitle.setTextColor(Color.argb(255,255,255,255));
                }
            }
        });
    }
}
           

運作效果如下：

以上是以ScrollView為例，其它如ListView、RecycleView等實作方法類似。