自定义控件实现-今日头条Android APP图集效果
2017-12-06 12:07
513 查看
前提
产品有个新需求,类似今日头条的图集效果大致看了下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相关文章推荐
- Android仿今日头条APP实现下拉导航选择菜单效果
- android实现高仿新版今日头条app1(框架部分)
- Fragment 实现android项目主流APP Tab (微博,今日头条等等),解决横竖屏切换重叠,以及切换回调。
- 【Android进阶】自定义控件实现底部扇形展开菜单效果
- Android自定义控件 -Canvas绘制折线图(实现动态报表效果)
- Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么
- android 实现listview 的item 出现在屏幕有个动画效果 类似于知乎的那个app
- SlidingMenu和ActionBarSherlock结合做出出色的App布局,Facebook 和 Path 2.0 滑动式菜单都可以实现(android页面布局效果)
- Android用户首次打开APP的使用教学蒙板效果实现
- ScrollView + viewpager实现android的app主界面效果
- Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么
- android自定义控件系列教程----继承ViewGroup实现带阻力效果的可回弹的SrollView
- Android 实现自定义控件效果1
- Android之仿今日头条标题栏效果
- Android 自定义控件实现刮刮卡效果
- android实现home键效果、将当前app推到后台
- SlidingMenu和ActionBarSherlock结合做出出色的App布局,Facebook 和 Path 2.0 滑动式菜单都可以实现(android页面布局效果)
- Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么
- Android数字动态显示,仿支付宝app效果简单的实现。字数从0-x!!!
- Android自定义控件系列六:自定义ViewGroup(一)实现ViewPager效果