Android自定义view仿QQ的Tab按钮动画效果(示例代码)

话不多说 先上效果图

实现其实很简单，先用两张图

一张是背景的图，一张是笑脸的图片，笑脸的图片是白色，可能看不出来。实现思路：主要是再触摸view的时候同时移动这两个图片，但是移动的距离不一样，造成的错位感，代码很简单：

import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View
import com.example.dawnmvvm.R
import com.example.dawnmvvm.util.LogUtil

class MyDrawBitmap @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0, defStyleRes: Int = 0) : View(context, attrs, defStyleAttr, defStyleRes) {
 private var dx = 0f
 private var dy = 0f
 private var dx1 =0f
 private var dy1 = 0f
 private val bitmap: Bitmap by lazy {
  BitmapFactory.decodeResource(resources, R.drawable.bg_tab);//背景
 }
 private val bitmap2: Bitmap by lazy {
  BitmapFactory.decodeResource(resources, R.drawable.img_smile);//笑脸
 }

 override fun draw(canvas: Canvas?) {
  super.draw(canvas)

  LogUtil.e("MyDrawBitmap===x===${dx}")
  LogUtil.e("MyDrawBitmap===y===${dy}")
  if(dx<0){
   dx=0f
  }
  if(dy<0){
   dy=0f;
  }

  canvas?.drawBitmap(bitmap, dx, dy, null);//移动背景
  canvas?.drawBitmap(bitmap2, dx1, dy1, null);//移动笑脸
 }

 override fun onTouchEvent(event: MotionEvent): Boolean {

  when (event.action) {

   MotionEvent.ACTION_UP-> {

    dx = 0f
    dy = 0f
    dx1 = 0f
    dy1 = 0f
   }
   else->{
    dx = event.x/20f
    dy = event.y/20f
    dx1 = event.x/10f
    dy1 = event.y/10f
   }

  }
  invalidate()

  return true;
 }

}

是不是很简单，不过不是很完美

到此这篇关于Android自定义view仿QQ的Tab按钮动效效果(示例代码)的文章就介绍到这了,更多相关Android仿QQ的Tab按钮动效内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Android自定义View实现拖动选择按钮

    Android自定义View实现拖动选择按钮

    本文为大家分享了Android实现拖动选择按钮的具体代码,供大家参考,具体内容如下 效果图 View代码 第一步:自定义属性 <declare-styleable name="DragView"> <attr name="icon_drag" format="reference"/> <attr name="color_circle" format="color"/> &

  • Android自定义View制作动态炫酷按钮实例解析

    Android自定义View制作动态炫酷按钮实例解析

    普通按钮也就那么几种样式,看着都审美疲劳,先放效果图: 你会不会以为这个按钮是集结了很多动画的产物,我告诉你,并没有.所有的实现都是基于自定义View,采用最底层的onDraw一点一点的画出来的.没有采用一丁点的动画.虽然演示时间很短,但是要完成这么多变化,还是挺吃力. 首先讲解用法: public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState)

  • Android 自定义View结合自定义TabLayout实现顶部标签滑动效果

    最近需要做一个app,需要用到tablayout实现顶部的滑动,用到了自定义item,不过没有用到tabitem,贴出来供大家学习,先看图吧,觉得满意的继续往下面看 具体代码实现: 我直接贴啦,能说的不多 主布局: fragment_message.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.c

  • Android自定义View之圆形进度条式按钮

    Android自定义View之圆形进度条式按钮

    介绍 今天上班的时候有个哥们问我怎么去实现一个按钮式的进度条,先来看看他需要实现的效果图. 和普通的圆形进度条类似,只是中间的地方有两个状态表示,未开始,暂停状态.而且他说圆形进度的功能已经实现了.那么我们只需要对中间的两个状态做处理就行了. 先来看看实现的效果图: 上面说了我们只需要处理中间状态的变化就可以了,对于进度的处理直接使用了弘洋文章中实现: http://blog.csdn.net/lmj623565791/article/details/43371299 下面开始具体实现. 具体实

  • Android自定义View实现开关按钮

    Android自定义View实现开关按钮

    前言:Android自定义View对于刚入门乃至工作几年的程序员来说都是非常恐惧的,但也是Android进阶学习的必经之路,平时项目中经常会有一些苛刻的需求,我们可以在GitHub上找到各种各样的效果,能用则用,不能用自己花功夫改改也能草草了事.不过随着工作经验和工作性质,越来越觉得自定义View是时候有必要自己花点功夫研究一下. 一.经过这两天的努力,自己也尝试着写了一个Demo,效果很简单,就是开关按钮的实现. 可能有的人会说这效果so easy,找UI切三张图就完事了,何必大费周折自定义.

  • Android自定义view仿QQ的Tab按钮动画效果(示例代码)

    Android自定义view仿QQ的Tab按钮动画效果(示例代码)

    话不多说 先上效果图 实现其实很简单,先用两张图 一张是背景的图,一张是笑脸的图片,笑脸的图片是白色,可能看不出来.实现思路:主要是再触摸view的时候同时移动这两个图片,但是移动的距离不一样,造成的错位感,代码很简单: import android.content.Context import android.graphics.* import android.util.AttributeSet import android.view.MotionEvent import android.vi

  • Android自定义View 仿QQ侧滑菜单的实现代码

    Android自定义View 仿QQ侧滑菜单的实现代码

    先看看QQ的侧滑效果 分析一下 先上原理图(不知道能否表达的清楚 ==) -首先这里使用了 Android 的HorizontalScrollView 水平滑动布局作为容器,当然我们需要继承它自定义一个侧滑视图 - 这个容器里面有一个父布局(一般用LinerLayout,本demo用的是),这个父布局里面有且只有两个子控件(布局),初始状态菜单页的位置在Y轴上存在偏移这样可以就可以形成主页叠在菜单页的上方的视觉效果:然后在滑动的过程程中 逐渐修正偏移,最后菜单页和主页并排排列.原理搞清了实现起来

  • Android自定义View仿QQ健康界面

    Android自定义View仿QQ健康界面

    最近一直在学习自定义View相关的知识,今天给大家带来的是QQ健康界面的实现.先看效果图: 可以设置数字颜色,字体颜色,运动步数,运动排名,运动平均步数,虚线下方的蓝色指示条的长度会随着平均步数改变而进行变化.整体效果还是和QQ运动健康界面很像的. 自定义View四部曲,一起来看看怎么实现的. 1.自定义view的属性: <?xml version="1.0" encoding="utf-8"?> <resources> //自定义属性名,定

  • Android自定义View仿QQ运动步数效果

    Android自定义View仿QQ运动步数效果

    本文实例为大家分享了Android QQ运动步数的具体代码,供大家参考,具体内容如下 今天我们实现下面这样的效果: 首先自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="MyQQStep"> <attr name="out_color" format="colo

  • Android自定义View仿QQ等级天数进度

    Android自定义View仿QQ等级天数进度

    最近一直都在看自定义View这一块.差不多一个星期了吧.这个星期坚持每天更新博客,感觉自己的技术也有点突破,对自定义View的计算也有了更深的认识. 今天看到手机一个成长天数进度的控件,觉得挺有意思的,于是想自己也写一个.效果如下: 由图可以知道,这里面有很多个元素,首先是背景的矩形区域,其次就是两个环形,然后三个Text文本.其实不复杂,我们一点一点的去实现. 首先呢,画矩形背景.这里用到一个RectF的类,这个类包含一个矩形的四个单精度浮点坐标.矩形通过上下左右4个边的坐标来表示一个矩形.这

  • Android自定义View仿探探卡片滑动效果

    Android自定义View仿探探卡片滑动效果

    Android自定义View仿探探卡片滑动这种效果网上有很多人已经讲解了实现思路,大多都用的是RecyclerView来实现的,但是我们今天来换一种实现思路,只用一个自定义的ViewGroup来搞定这个实现. 下面我们先看一下实现的效果: 这个自定义View用法也很简单,首先从github上下载或者fork这个项目,在布局中添加: <com.liyafeng.view.swipecard.SwipeCardLayout android:id="@+id/scl_layout" a

  • Android 自定义view仿微信相机单击拍照长按录视频按钮

    Android仿微信相机的拍照按钮单击拍照,长按录视频.先上效果图. 项目地址:https://github.com/c786909486/PhotoButton2/tree/v1.0 添加依赖 allprojects { repositories { ... maven { url 'https://jitpack.io' } } } dependencies { compile compile 'com.github.c786909486:PhotoButton2:v1.1' } 长按效果分

  • Android自定义View仿支付宝输入六位密码功能

    Android自定义View仿支付宝输入六位密码功能

    跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码.效果图如下: 自定义view布局效果图及代码如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/

  • Android自定义view仿iOS弹出框效果

    Android自定义view仿iOS弹出框效果

    本文实例为大家分享了Android自定义view仿iOS弹出框的具体代码,供大家参考,具体内容如下 运行效果图 自定义对话框的使用,仿照ios.从底部弹出,类似pop窗口.包括消息.图片.列表及对话框. 好了,用法都会,直接贴上代码 1.layout布局文件 view_actionsheet.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="ht

  • Android自定义SwipeLayout仿QQ侧滑条目

    Android自定义SwipeLayout仿QQ侧滑条目

    Android自定义SwipeLayout仿QQ侧滑条目,供大家参考,具体内容如下 先看动图 看布局文件 activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent

随机推荐