android - 标题栏随ScrollView滚动变色(仿知乎)

参考:android标题栏颜色渐变效果的实现(标题栏随着scrollview的滚动而变化)

效果图:

核心类:ObservableScrollView

package com.jukopro.titlebarcolor;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;

/**
 * 带滚动监听的scrollview
 */
public class ObservableScrollView extends ScrollView {

    public interface ScrollViewListener {
        void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy);
    }

    private ScrollViewListener scrollViewListener = null;

    public ObservableScrollView(Context context) {
        super(context);
    }

    public ObservableScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ObservableScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }


    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);
        }
    }

}

MyListview

解决ScrollView嵌套Listview的滑动冲突:

public class MyListview extends ListView {

    public MyListview(Context context) {
        super(context);
    }

    public MyListview(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyListview(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);
        super.onMeasure(widthMeasureSpec, expandSpec);
    }
}  

MainActivity

package com.jukopro.titlebarcolor;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.ViewTreeObserver;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

import com.jukopro.titlebarcolor.ObservableScrollView.ScrollViewListener;

public class MainActivity extends Activity implements ScrollViewListener {
    private ObservableScrollView scrollView;
    private ListView listView;
    private ImageView imageView;
    private TextView textView;
    private int imageHeight;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        scrollView = (ObservableScrollView) findViewById(R.id.scrollview);
        listView = (ListView) findViewById(R.id.listview);
        imageView = (ImageView) findViewById(R.id.imageview);
        textView = (TextView) findViewById(R.id.textview);
        initListeners();
        initData();
    }

    private void initListeners() {
        // 获取顶部图片高度后,设置滚动监听
        ViewTreeObserver vto = imageView.getViewTreeObserver();
        vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                imageView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                imageHeight = imageView.getHeight();

                scrollView.setScrollViewListener(MainActivity.this);
            }
        });
    }


    private void initData() {
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.this, 
            android.R.layout.simple_list_item_1, getResources().getStringArray(R.array.data));
        listView.setAdapter(adapter);
    }


    /**
     * ScrollView滚动监听
     *
     * @param scrollView:滚动控件
     * @param x:x轴坐标
     * @param y:y轴坐标
     * @param oldx:上一个x轴坐标
     * @param oldy:上一个y轴坐标
     */
    @Override
    public void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy) {
        if (y <= 0) {
            textView.setBackgroundColor(Color.argb((int) 0, 227, 29, 26));//AGB由相关工具获得,或者美工提供
        } else if (y > 0 && y <= imageHeight) {
            float scale = (float) y / imageHeight;
            float alpha = (255 * scale);
            // 只是layout背景透明(仿知乎滑动效果)
            textView.setBackgroundColor(Color.argb((int) alpha, 227, 29, 26));
        } else {
            textView.setBackgroundColor(Color.argb((int) 255, 227, 29, 26));
        }
    }
}

布局:

<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">

    <com.jukopro.titlebarcolor.ObservableScrollView
        android:id="@+id/scrollview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imageview"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@drawable/ic_launcher" />

            <com.jukopro.titlebarcolor.MyListview
                android:id="@+id/listview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </com.jukopro.titlebarcolor.ObservableScrollView>

    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="#00000000"
        android:gravity="center"
        android:text="我是标题"
        android:textColor="@android:color/white"
        android:textSize="18sp" />

</RelativeLayout>
Android-ObservableScrollView Build Status Coverage Status Maven Central API Android Arsenal Android library to observe scroll events on scrollable views. It's easy to interact with the Toolbar introduced in Android 5.0 Lollipop and may be helpful to implement look and feel of Material Design apps. Examples Download from Google Play Get it on Google Play Please note that the app on the Play store is not always the latest version. Download from wercker If you are a wercker user, you can download the latest build artifact. See here for details. wercker status Install manually Just clone and execute installDevDebug task with Gradle. See here for details. Usage Add com.github.ksoichiro:android-observablescrollview to your dependencies in build.gradle. Add ObservableListView or other views you'd like to use. Write some animation codes to the callbacks such as onScrollChanged, onUpOrCancelMotionEvent, etc. See the quick start guide for details, and the documentation for further more. Reference Supported widgets Environment Release notes FAQ Apps that use this library Badge Jair Player by Akshay Chordiya My Gradle by Erick Chavez Alcarraz ThemeDIY by Darkion Avey {Soft} Skills by Fanatic Devs If you're using this library in your app and you'd like to list it here, please let me know via email or pull requests or issues. Contributions Any contributions are welcome! Please check the FAQ and contributing guideline before submitting a new issue. Developed By Soichiro Kashima - soichiro.kashima@gmail.com Thanks Inspired by ObservableScrollView in romannurik-code. License Copyright 2014 Soichiro Kashima Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值