自定义控件实现-今日头条Android APP图集效果

前提

产品有个新需求，类似今日头条的图集效果

大致看了下UI，大致就是ViewPager，横向滑动切换图片，纵向滑动移动图片，纵向超过一定距离，图片飞出，图集淡出动画退出，支持图片的双击放大。

思路

第一个问题就是图集详情页用什么实现？Activity？Fragment？还是一个复杂的View？

我最初打算用Fragment的，因为觉得效率高，Fragment需要自己处理进入退出，

今日头条使用了Activity，因为这个Activity可以显示前一个Activity，所以它一定是一个透明的Activity

这个用自定义的Activity主题就可以实现

用Android的Layout Inspector 工具查看今日头条它的布局，使用到ViewPager

我也打算继承ViewPager，然后处理不同的情况下的触摸事件，实现需求

具体实现

1 定义一个透明的Activity：

AndroidManifest：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.lijian.FloatImage">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name="com.lijian.FloatImage.MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name="com.lijian.FloatImage.ImagesActivity"
            android:theme="@style/ImagesAppDayTheme">

        </activity>
    </application>

</manifest>

可以看到，图集详情页使用了ImagesActivity

它对应的主题是ImagesAppDayTheme,注意里面的几个关键参数，目的就是创建背景透明的Activity：

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="ImagesAppDayTheme" parent="AppTheme">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowBackground">@color/transparent</item>
        <item name="android:colorBackgroundCacheHint">@null</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowAnimationStyle">@android:style/Animation</item>
    </style>

2 继承ViewPager的FloatViewPager

普通的ViewPager不能满足我们的需要，因为它只支持横向滑动切换。我们需要处理其他方向的触摸事件，然后处理。

这里我直接重写了ViewPager的public boolean dispatchTouchEvent(MotionEvent ev) { }方法，

为什么呢？因为这里是ViewPager触摸事件分发的起点，比起使用onTouchEvent方法更灵活，方便。

我们知道一个完整的触摸操作一般

由 ActionDown-》多个ActionMove-》ActionUp组成

我们需要判断这个触摸操作到底是横向的还是纵向的，

如果是横向的，直接调用父类ViewPager

return super.dispatchTouchEvent(ev);，由它处理横向切换即可

对于纵向的触摸：

我们需要计算触摸的 X，Y的距离，然后移动ViewPager，实现跟随手指的效果

如果手指抬起来，判断移动距离，距离大于一个比例，就ViewPager整体移动飞出，图集关闭

具体的实现，代码都有注释，如果你需要参考，清楚上述的思路，自己看代码，修改，符合自己需求是最快的。授人鱼不如授人渔

Github地址

https://github.com/bylijian/FloatImages