NotBoringActionBar项目的思路解析

NotBoringActionBar项目实现方式十分巧妙。
从外表上看，ListView向上滚动时，ListView的头部会缩小，logo图标从中间不断缩小移向标题栏的左上角，并且标题栏逐渐显示出来。

<FrameLayout
 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=".NoBoringActionBarActivity">
<ListView
 android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white" />
<FrameLayout
 android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="@dimen/header_height">
<com.flavienlaurent.notboringactionbar.KenBurnsView
 android:id="@+id/header_picture"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/picture0" />
<ImageView
 android:id="@+id/header_logo"
android:layout_width="@dimen/header_logo_size"
android:layout_height="@dimen/header_logo_size"
android:layout_gravity="center"
android:src="@drawable/ic_header_logo" />
</FrameLayout>
</FrameLayout>

布局文件中的FragmentLayout实际上就是我们看到的背景图片和Logo图标的区域。它们与ListView是重叠在一起的。那么问题来了，重叠在一起？那为什么ListView的内容不会被遮盖，或者背景图片和Logo图标的区域被遮盖呢？
源码中，ListView实际上被设置了ListView头部，看Activity文件中的setupListView方法，其中有以下代码段：

        mPlaceHolderView = getLayoutInflater().inflate(R.layout.view_header_placeholder, mListView, false);
        mListView.addHeaderView(mPlaceHolderView);

ListView被添加了ListView头部，并且ListView头部的高度与“背景图片和Logo图标的区域”的高度是一样的，这就是为什么ListView和“背景图片和Logo图标的区域”不会互相遮挡的原因。
不过等等，这样的话，屏幕一上滑或下滑，“背景图片和Logo图标的区域”会一直不动，ListView则会滚动，那这不乱套了吗？
同样看Activity文件中的setupListView方法，其中设置了ListView的滑动监听：

mHeader.setTranslationY(Math.max(-scrollY, mMinHeaderTranslation));

只要一滑动，“背景图片和Logo图标的区域”就会通过setTranslationY方法设置高度，这样看起来就像它会随着屏幕上滑而上滑，并且最终固定在标题栏的高度大小。
说到标题栏，实际上，它一直都在，只是刚开始它被设置为透明的。逐渐显示出来的效果实际上是标题栏文本（前景）的逐渐显示，Activity文件中的setupActionBar方法：

    private void setupActionBar() {
        ActionBar actionBar = getActionBar();
//设置标题栏透明
        actionBar.setIcon(R.drawable.ic_transparent);
//getActionBarTitleView().setAlpha(0f);
    }

那么它是怎样随着屏幕上滑逐渐显示出来的呢？秘密还在在ListView的滑动监听中：

setTitleAlpha(clamp(5.0F * ratio - 4.0F, 0.0F, 1.0F));

setTitleAlpha方法不断改变标题栏文本的透明度，这就出现了标题栏逐渐显示出来的效果。
最后一点，当屏幕上滑时，Logo图标会逐渐缩小并向左上移动，实现的方法是Activity文件中的interpolate：

    private void interpolate(View view1, View view2, float interpolation) {
//获取Logo图片的Rect
        getOnScreenRect(mRect1, view1);
//获取view2图片的Rect
        getOnScreenRect(mRect2, view2);
//缩放比例
float scaleX = 1.0F + interpolation * (mRect2.width() / mRect1.width() - 1.0F);
float scaleY = 1.0F + interpolation * (mRect2.height() / mRect1.height() - 1.0F);
//位移比例
float translationX = 0.5F * (interpolation * (mRect2.left + mRect2.right - mRect1.left - mRect1.right));
float translationY = 0.5F * (interpolation * (mRect2.top + mRect2.bottom - mRect1.top - mRect1.bottom));
//设置Logo的位移和缩放比例
        view1.setTranslationX(translationX);
        view1.setTranslationY(translationY - mHeader.getTranslationY());
        view1.setScaleX(scaleX);
        view1.setScaleY(scaleY);
    }

秒客网

NotBoringActionBar项目的思路解析

NotBoringActionBar项目的思路解析

相关文章