仿QQ5.0缩放式侧滑栏的实现

最新推荐文章于 2019-03-12 15:28:49 发布

Sogoe_谁用了我的昵称

最新推荐文章于 2019-03-12 15:28:49 发布

阅读量598

点赞数

分类专栏： Android开发之路

本文链接：https://blog.csdn.net/sogoe12345/article/details/38361257

版权

Android开发之路专栏收录该内容

3 篇文章 0 订阅

订阅专栏

有人跟我说，QQ5.0的侧滑栏动画很有趣。有趣的东西当然不能放过，于是就来模仿一下。

个人比较支持官方的东西，侧滑栏就使用了v4包里的SlidingPaneLayout。动画是使用Property Animation实现的，不考虑3.0以下，如要支持，请使用NineOldAndroids。

好了，废话不多说。直接上效果图：

下面来讲实现的过程，思路就是实现一个SlidingPaneLayout，并在PanelSlideListener的onPanelSlide函数中设置当前动画播放的位置即可。

SlidingPanelLayout的布局文件：

<span style="font-size:18px;"><android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/slidingpane"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.sogoe.slidingpane.MainActivity" >

    <RelativeLayout
        android:id="@+id/back_view"
        android:layout_width="160dp"
        android:layout_height="match_parent" >

        <include layout="@layout/menu" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/main_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/hello_world" />
    </RelativeLayout>

</android.support.v4.widget.SlidingPaneLayout></span>

在Activity中为两个View创建动画：

<span style="font-size:18px;">private void initAnimations() {
	PropertyValuesHolder scaleX = PropertyValuesHolder.ofFloat("scaleX", 1.0f, 0.75f);
	PropertyValuesHolder scaleY = PropertyValuesHolder.ofFloat("scaleY", 1.0f, 0.75f);
	mainAnim = ObjectAnimator.ofPropertyValuesHolder(main, scaleX, scaleY).setDuration(DURATION);
	
	PropertyValuesHolder fade = PropertyValuesHolder.ofFloat("alpha", 0.2f, 1.f);
	PropertyValuesHolder scaleX_back = PropertyValuesHolder.ofFloat("scaleX", 0.75f, 1.f);
	PropertyValuesHolder scaleY_back = PropertyValuesHolder.ofFloat("scaleY", 0.75f, 1.f);
	PropertyValuesHolder translationX_back = PropertyValuesHolder.ofFloat("translationX", -100.f, 0.f);
	backAnim = ObjectAnimator.ofPropertyValuesHolder(back, scaleX_back, scaleY_back, translationX_back, fade).setDuration(DURATION);
	
}</span>

最后给SlidingPaneLayout设置PenelSlideLinstener，PenelSlideLinstener有三个函数onPanelSlide，onPanelOpened，onPanelClosed。onPanelSlide会在滑动的过程中调用，第二参数传进来是0到1之间的一个浮点数，代表滑动过程的阶段。

<span style="font-size:18px;">@Override
public void onPanelSlide(View view, float offset) {
	mainAnim.setCurrentPlayTime((long) (offset * DURATION));
	backAnim.setCurrentPlayTime((long) (offset * DURATION));
}
</span>