Toolbar滚动渐显类似Google+用户界面滑动效果(一)

Toolbar滚动渐显类似Google+用户界面滑动效果(一)

@(Blog)[马克飞象|Markdown|Android]

最终效果

先来张效果图，不过还没有实现标题Tab向上滑时可以贴合Toolbar的效果，只是实现了渐显的效果

实现

1. 实现这个效果主要需要Toolbar、SlidingTabLayout、ScrollView、ViewPager。
2. 如果这些控件之前没接触的话可以看下我之前博客，除了ScrollView另外3个都由介绍。
3. 主要会遇到的问题有2个，一个ViewPager在此图的这种效果中可能会出现Fragment不显示的问题，还有一个就是ScrollView竟然没有滚动监听事件。

布局

布局方面不多说了，直接上代码

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.focus.androidnote.toolbar.ToolbarFadeInActivity">

    <ScrollView
        android:id="@+id/main_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@drawable/mat5"
                android:scaleType="centerCrop"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_tab"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#B6B6B6">

                <com.example.focus.androidnote.toolbar.SlidingTabLayout
                    android:id="@+id/tab_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </android.support.v7.widget.Toolbar>

            <com.example.focus.androidnote.viewpager.AutoHeightViewPager
                android:id="@+id/page"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

        </LinearLayout>
    </com.example.focus.androidnote.toolbar.MyScrollView>

    <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:theme="@style/Base.ThemeOverlay.AppCompat"
            android:minHeight="?attr/actionBarSize"
            android:background="@android:color/transparent">
    </android.support.v7.widget.Toolbar>

</FrameLayout>

这里用到两个Toolbar，一个用于替换ActionBar，还有个是用来绑定Tag

代码

onCreate代码

mToolbar = (Toolbar) findViewById(R.id.toolbar);
mToolbarTab = (Toolbar) findViewById(R.id.toolbar_tab);
mTabLayout = (SlidingTabLayout) findViewById(R.id.tab_layout);
mPager = (ViewPager) findViewById(R.id.page);
mMainLayout = (MyScrollView) findViewById(R.id.main_layout);

mBackgrounds = new String[] {"#616161", "#9E9E9E", "#F5F5F5"};
mFragmentList = new ArrayList<>();

setSupportActionBar(mToolbar);
//显示回退按钮
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

for (int i = 0; i < mBackgrounds.length; i++) {
    Fragment fragment = TextFragment.newInstance("Fragment" + i, mBackgrounds[i]);
    mFragmentList.add(fragment);
}

mPager.setAdapter(new TagPageAdapter(getSupportFragmentManager()));
mTabLayout.setViewPager(mPager);

mMainLayout.setScrollViewListener(new MyScrollView.ScrollViewListener() {
    @Override
    public void onScrollChanged(int x, int y, int oldxX, int oldY) {
        if (y >=0 && y <= 255) {
            mToolbar.setBackgroundColor(Color.argb(y, 0, 0, 255));
        }
    }
});

特别注意Fragment的高度要设高一点，否则会没有足够的高度让ScrollView滚动。
我之前提到，ScrollView和ViewPager使用的时候可能会遇到问题，当在ScrollView中嵌套ViewPager会出现ViewPager无法显示的问题，解决这个问题可以看SrollView 嵌套ViewPager会出现ViewPager不显示的问题 ，还有一个就是ScrollView没有滚动事件监听的问题，这个其实也可以通过onTouchListener来替代，不过我觉得利用滚动监听事件会更好。

提示
有一个约定：在覆写onMeasure方法的时候，必须调用 setMeasuredDimension(int,int)来存储这个View经过测量得到的measured width and height。
http://www.cnblogs.com/mengdd/p/3332882.html