抱歉,你查看的文章不存在

打造狂拽炫酷的主流自定义侧滑控件(仿酷狗和QQ5.0)

前言:自定义侧滑控件是一直是很多在app端的软件用的比较多的方式,本文来自

Mero技术博客授权本公众号独家发布文章,Mero技术博客blog地址:http://blog.csdn.net/qq_21004057,点击“阅读原文”,可看Mero技术博客其他文章。话不多说,我们看正文:

今天咱们来实现一个侧滑效果,简单而又轻巧。大家下载源码,直接参照源码,使用非常简单。我就不上传github,如果大家有需要的话,请在下面留言,给大家打包成类库。

大家知道侧滑菜单非常流行,包括现在的QQ侧滑菜单,酷狗的缩放动画的侧滑菜单,都是非常棒的。这个侧滑控件还是能满足大多数实际项目需求的。如果说简单而又有内涵,是不是霸气呢?我们现在就开始学习如何去自己写一个。效果图如下。

先带大家了解一下题外内容。大家知道什么是子节点,父节点吗?知道的话,本段可以略过了。其实这个说一下,是为了后面做铺垫的。在DDMS工具中,有个工具叫做Hierarchy。

,这个工具在哪呢?其实就在我们的DDMS界面。

大家看右图的右侧,就是这个界面的布局节点。节点的英文单词叫做node。

ok,了解了上面的内容之后,咱们就可以正式开始我们的侧滑项目了。

我们要实现侧滑,那么我们该继承哪个类呢?其实大家可以从View继承,不过太麻烦了。那么我们可以继承一个已经实现了滚动的控件HorizontalScrollView

我们先来看下侧滑的实质是什么样的,请允许我自画一个略显丑陋的图吧。

最外层其实就是一个HorizontalScrollView,里面包含了Menu布局界面和主界面。

1自定义HorizontalScrollView

注意:实现第二个带有2个参数的构造方法,为什么实现第二个呢?当我们不需要定义新的属性的时候,我们只需要实现带有2个参数的构造方法。

public class SlidingMenu extends HorizontalScrollView{

public SlidingMenu(Context context, AttributeSet attrs) {

super(context, attrs);

}

}

2主界面、菜单页布局文件

main.xml就是一个图片,具体的大家根据项目实际写。menu菜单代码如下:

随后,我们可以把这两个界面插入到HorizontalScrollView自身的布局中去,也就是我们项目自动生成的activity_main.xml布局。

大家注意了,menu菜单仅仅是左边的,还有部分显示的是主界面的。这个在后面的代码里会实现。

3得到屏幕宽度并完善SlidingMenu

我们首先得到屏幕的宽度。为了后面的计算Menu菜单和主界面布局宽度作为铺垫。

在拿到了屏幕的宽度之后,我们就可以来计算menu菜单界面和主界面分别在屏幕中的宽度了。

我们很容易想到,总的宽度就是menu菜单加上主界面的宽度。我们可以清楚地看到menu菜单的宽度有个padding边距。这个右边距我设置的是100。感觉还可以。

menu菜单页宽度 = 屏幕宽度 - 右边距

主界面宽度 = 屏幕宽度

上面式子大家应该看懂了吧!看懂了就好办。

4计算并重写onMeasure方法

getChildAt(int index)这个方法可以得到子节点,这里我们先得到父LinearLayout布局,再根据getChildAt方法得到子view的布局。

可能大家会问,为什么要这样得到2个view呢,其实ViewGroup是view的子类。通过上面的DDMS中的树形图可以很好的明白。我们可以知道这2个LinearLayout是同一级别的,都是在父LinearLayout节点的下面。

这样我们就实现了上图的效果,可实际上效果是这样吗?不好意思,到这里,我们虽然可以滑动,但是滑动起来可能不流畅。

怎么办呢?

这个时候,我们需要实现手势动作的监听

当我们向右边滑动的时候,主布局要隐藏大半部分,只留下了右边距宽度的可视,其他的都在不可视范围内。并不代表消失

5初始化渲染布局

最后,我们需要初始化渲染布局位置。请注意了,初始化的时候我们的menu菜单完全隐藏,只留下主界面布局可视。所以我们需要重写onLayout方法。

6SlidingMenu缩放动画及手势监听

在上文中,我们实现了普通的侧滑项目,继续完善上文。这个效果是仿QQ5.0和酷狗侧滑特效的。使用的话大家下载源码看demo,页很简单。同样,不上传github了。使用请下载源码直接复制进你的项目。

请把主界面的背景图片改成你自己的布局xml文件,使用include包含进去。include导入的主界面请使用LinearLayout父布局。

具备非常强的视觉差特效。

我们来回顾下上文中的内容。

  • 计算屏幕宽度
  • 计算menu菜单界面和主界面宽度
  • 设置触摸事件监听(onTouchEvent)
  • 设置初始布局位置(onLayout)

在了解上文内容之后,咱们现在加以拓展。咱们的目标效果是下面这样。

在上面这个效果图,我们可以看见有缩放动画,有透明度变化,有平移动画。

咱们的思路是怎么样的呢?咱们只需要在上篇基础上加上滚动事件监听。不过需要注意的是,计算缩放的进度技巧。

目前的动画效果的有scale,translate,rotate旋转等,还有透明度Alpha动画以及渐变动画等。咱们今天只用到了scale缩放和translate平移和透明度alpha变化。

我们需要导入一个快捷的View动画的帮助工具类,这个百度可以随便搜到,叫做nineoldandroids.jar。到最后我会提供给大家下载。里面的ViewHelper封装了动画帮助的方法。

ok,我们需要充写的方法是onScrollChanged方法。缩放进度怎么计算呢? 其实很简单,我们首先看到onScrollChanged(int l, int t, int oldl, int oldt);这个方法,这个方法里面的参数

  1. l当前的水平滚动位置
  2. t当前的垂直滚动位置
  3. oldl之前的水平滚动位置
  4. oldt之前的垂直滚动位置

缩放的scale参数最大值是1,那么咱们随着手指的滑动缩放应该是多少好呢?

通过当前水平滚动的位置,我们可以得到缩放进度,即水平滚动的距离 / 总距离。而菜单页的总距离就是mMenuWidth。两者的比值就可以当做一个进度值。那么缩放的比例scale就等于1X进度。我们知道这些,于是我们可以将缩放的比例设置在0.7到1之间,scale缩放比例 = 0.7+0.3X进度比例 。然后透明度呢?我们可以同样采用这种方法进行设置,alpha透明度 = 0.8+0.2X进度比例,这个可以通过实际测试而定。

ViewHelper类是nineoldandroidsjar里面的,从上面看起来使用起来还是非常方便的。

加上上面的onScrollChanded方法,咱们以及实现了缩放等动画效果。那么我们要想更加精确地计算及得到更好体验的滑动效果,还需要在手势监听中计算。

当手势滑动的距离小于屏幕宽度的五分之一时候,我们滑不到预期位置,相反,我们可以滑动到预期位置。那么如何实现呢? 这个地方我采用的方式是通过判断menu菜单界面是否隐藏来作为判断值。

boolean flag = false;//用来标志菜单界面不可见

我们重写一下onTouchEvent方法。首先,我们得到按下的坐标位置,然后再得到松开的坐标位置,假设松开的横坐标为X2,按下时候的横坐标为X1.如果X2 - X1>0,就说明了向右滑动,反之,向左移动。那么我们可以对其绝对值进行判断,如果大于某个定值,就能滑到预期位置。小于就停在原位置

我们先声明一个标志来判断菜单界面是否可视,默认初始化是不可见的,所以设置为false。

具体代码如下:

好了,到这为止,咱们就完成了整个仿酷狗和QQ5.0集成控件。

最后提供给大家源码下载。

源码下载:http://download.csdn.net/detail/qq_21004057/9639121

原文发布于微信公众号 - 何俊林(DriodDeveloper)

原文发表时间:2016-10-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

码农突围

0 篇文章93 人订阅

相关文章

来自专栏卡少编程之旅

css黑魔法简略版

320110
来自专栏Nian糕的私人厨房

WeChat 文章列表页面(一)

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

12040
来自专栏偏前端工程师的驿站

CSS魔法堂:display:none与visibility:hidden的恩怨情仇

 还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而vi...

23030
来自专栏GuZhenYin

C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码

前言 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. .NET core2.0 ...

25190
来自专栏前端杂货铺

翻译:如何使用CSS实现多行文本的省略号显示

本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添...

39860
来自专栏yang0range

html常用标签

title也是有助于SEO搜索引擎优化的 HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。 HTML中所有的文字之间,如果有空格、换行、tab都将被...

54020
来自专栏HTML5学堂

CSS选择器优先级

HTML5学堂:CSS优先级所谓优先级是指CSS样式在浏览器中被解析的先后顺序。 CSS选择器的优先级:id > class > tagname。具体我们来看看...

30730
来自专栏计算机编程

Kotlin 自定义 标签viewgroup

一般在java语言中,constructor直接在继承viewgroup后会报错,然后根据自定义快捷键,默认为alt+enter【博主是用的eclipse 的k...

15030
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(五)Vue的动画

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

19830
来自专栏腾讯NEXT学位

CSS布局解决方案(下)

25870

扫码关注云+社区

领取腾讯云代金券