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

来源：互联网发布：淘宝红包怎么设置编辑：程序博客网时间：2024/05/16 17:55

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

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

Toolbar滚动渐显类似Google用户界面滑动效果一
- 最终效果
- 实现
  - 布局
  - 代码

最终效果

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

实现

实现这个效果主要需要Toolbar、SlidingTabLayout、ScrollView、ViewPager。
如果这些控件之前没接触的话可以看下我之前博客，除了ScrollView另外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

0 0