仿QQ拖动删除未读消息个数气泡
来源：互联网 发布：淘宝美的官方旗舰店 编辑：程序博客网 时间：2024/04/29 04:10
用过手机QQ的应该都看到过，如果有未读消息，在图标的右上角会有一个红色的圆形，里面有未读消息的个数，用手指拖动该数字，到一定距离后，松开手指，该红色的圆形会消失，表示这些消息标记为已读，如果手指只移动了较小的距离，松手会弹回去，先来看下效果图
左边的就是手指拖动的数字，右边的是原始的数字，下面来讲下实现过程：
首先明确两个名词，固定圆和移动圆，固定圆就是进入页面时就显示在界面上的那个数字，如上图中的数字3，移动圆就是用手指去拖动这个圆时，随着手指的位置移动的那个圆，也就是上图中的数字2，在移动的过程中，固定圆的位置不动，但半径随着距离拉大不断变小的，而移动圆的位置随着手指走，但它的半径大小是不变的
第一步，首先这里肯定是用到自定义控件，继承View即可
public class BounceCircle extends View
这个自定义类有两个构造函数
public BounceCircle(Context context, int radius, int circleX, int circleY) { super(context); this.radius = radius; this.circleX = circleX; this.circleY = circleY; initPaint(context); } public BounceCircle(Context context, AttributeSet attrs) { super(context, attrs); initPaint(context); }其中第一个要传入圆的半径以及圆心的坐标，第二个是系统需要的，下面来看这里的initPaint方法private void initPaint(Context context) { mContext = context; circlePaint = new Paint(); circlePaint.setColor(Color.RED); circlePaint.setAntiAlias(true); distanceLimit = Util.dip2px(mContext, distanceLimit); textSize = radius; textPaint = new TextPaint(); textPaint.setAntiAlias(true); textPaint.setColor(Color.WHITE); textPaint.setTextAlign(Paint.Align.CENTER); textPaint.setTextSize(Util.sp2px(mContext, textSize)); textFontMetrics = textPaint.getFontMetrics(); textMove = -textFontMetrics.ascent - (-textFontMetrics.ascent + textFontMetrics.descent) / 2; // drawText从baseline开始，baseline的值为0，baseline的上面为负值，baseline的下面为正值，即这里ascent为负值，descent为正值,比如ascent为-20，descent为5，那需要移动的距离就是20 - （20 + 5）/ 2 path = new Path(); }这里主要是定义了一个Paint和一个TextPaint，其中Paint用来画圆和圆之间的连接，为红色，而TextPaint用来画数字，为白色，这里要注意的一个变量是textMove，之所以用到这个变量，在Android中，setTextAlign可以让所写的内容x轴居中，但y轴的居中需要自己处理，drawText从Baseline开始的，而不是从所写内容的y轴中间开始，baseline上半部的距离为ascent，下半部分的底的距离为descent（其实还有一部分内边距，忽略不计）,所以为了y轴居中，要根据这两个值算出文字正中间的位置，再移动相应的位置，具体算法注释中已经说得很清楚了，如果实在理解不了，就记下来，这不是本文的重点
第二步，实现onTouch方法
@Override public boolean onTouchEvent(MotionEvent event) { switch(event.getAction()) { case MotionEvent.ACTION_DOWN: if (Util.isInCircle(event.getX(), event.getY(), circleX, circleY, radius)) { // 按下的位置必须在圆内才响应后面的操作 return true; } return false; case MotionEvent.ACTION_MOVE: curX = event.getX(); curY = event.getY(); calculateRatio((float) Util.distance(curX, curY, circleX, circleY)); break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: if (ratio > ratioLimit) { // 没有超出最大移动距离，手抬起时需要让移动圆回到固定圆的位置 shakeAnimation(animationTimes); curX = 0; curY = 0; ratio = 1; } else { // 超出最大移动距离 needDraw = false; animStart = true; initAnim(); // 删除后的回调 if (mFinishListener != null) { mFinishListener.onFinish(); } } break; } postInvalidate(); // 刷新界面 return super.onTouchEvent(event); }在ACTION_DOWN中，首先我们需要判断，当前按下的位置是否在固定圆上，比较方法很简单，判断按下点的坐标到圆心的距离是否大于半径即可，如果按下位置不在固定圆之内，就直接return false了，也就是不让自定义控件来处理了，只有按在固定圆上才需要自定义控件继续处理
在ACTION_MOVE中，不断获取当前坐标，完后计算缩放比例，这里的calculateRatio方法定义如下：
/** * 计算固定圆缩放的比例 * @param distance * @return */ private void calculateRatio(float distance) { ratio = (distanceLimit - distance) / distanceLimit; }参数为当前手指坐标到固定圆圆心的距离，而这里的distanceLimit是我们规定的一个距离的限值，因为固定圆和移动圆之间的连接，是随着距离而不断变细的，如果细到最后是一条线还没断，就没意义了，这个限值用来计算固定圆缩放的比例，当固定圆缩放到一定比例后，就将固定圆和移动圆之间的连接断开了
在ACTION_UP和ACTION_CANCEL中，判断比例是否到达限值，如果到达则播放动画（就是手指抬起的时候，移动圆消失，有一个爆炸的效果），并且调用回调方法，这个回调方法是提供给使用该自定义控件的人自己发挥的，比如可以修改数据库，将未读消息数量置为0，如果移动距离没有到限值，松手后，要回到固定圆的位置，而且有一个摇晃的动画，这个动画用shakeAnimation来实现，参数是抖动的次数
public void shakeAnimation(int counts) { // 避免动画抖动的频率过大，所以除以2，另外，抖动的方向跟手指滑动的方向要相反 Animation translateAnimation = new TranslateAnimation((circleX - curX) / 2, 0, (circleY - curY) / 2, 0); translateAnimation.setInterpolator(new CycleInterpolator(counts)); translateAnimation.setDuration(animationTime); startAnimation(translateAnimation); }这里要注意的是抖动的方向是跟移动的方向相反的，因为这是一个反弹的效果，再就是抖动的范围我这里除以2了，避免抖动过大第三步，实现onDraw方法
上面第二步中，在最后调用了postInvalidate，这用来刷新界面，也就是会执行onDraw方法
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (needDraw) { // 画固定圆 if (ratio >= ratioLimit) { canvas.drawCircle(circleX, circleY, radius * ratio, circlePaint); } // 画移动圆和连线 if (curX != 0 && curY != 0) { canvas.drawCircle(curX, curY, radius, circlePaint); if (ratio >= ratioLimit) { drawLinePath(canvas); } } // 数字要最后画，否则会被连线遮掩 if (curX != 0 && curY != 0) { // 移动圆里面的数字 canvas.drawText(message, curX, curY + textMove, textPaint); } else { // 只有初始时需要绘制固定圆里面的数字 canvas.drawText(message, circleX, circleY + textMove, textPaint); } } if (animStart) { // 动画进行中 if (curAnimNumber < animNumber) { canvas.drawBitmap(explosionAnim[curAnimNumber], curX - animWidth / 2, curY - animHeight / 2, null); curAnimNumber++; if (curAnimNumber == 1) { // 第一帧立即执行 postInvalidate(); } else { // 其余帧每隔固定时间执行 postInvalidateDelayed(animInterval); } } else { // 动画结束 animStart = false; curAnimNumber = 0; recycleBitmap(); } } }在onDraw中，我们要画的有这么几个部分，固定圆，固定圆中的数字，移动圆，移动圆中的数字，还有固定圆和移动圆之间的连接，这里要注意几个限定条件，首先，移动距离超过限值时，是不用再绘制固定圆和里面的数字的，而手指没有移动时，是不用画移动圆，里面数字以及连接的，最后，数字要放在最后面画，否则会被两个圆之间的连接所遮掩，这里我们需要特别关注的是，drawLinePath(canvas);方法，它的实现如下：
/** * 画固定圆和移动圆之间的连线 * @param canvas */ private void drawLinePath(Canvas canvas) { path.reset(); float distance = (float) Util.distance(circleX, circleY, curX, curY); // 移动圆和固定圆圆心之间的距离 float sina = (curY - circleY) / distance; // 移动圆圆心和固定圆圆心之间的连线与X轴相交形成的角度的sin值 float cosa = (circleX - curX) / distance; // 移动圆圆心和固定圆圆心之间的连线与X轴相交形成的角度的cos值 path.moveTo(circleX - sina * radius * ratio, circleY - cosa * radius * ratio); // A点坐标 path.lineTo(circleX + sina * radius * ratio, circleY + cosa * radius * ratio); // AB连线 path.quadTo((circleX + curX) / 2, (circleY + curY) / 2, curX + sina * radius, curY + cosa * radius); // 控制点为两个圆心的中间点，二阶贝塞尔曲线，BC连线 path.lineTo(curX - sina * radius, curY - cosa * radius); // CD连线 path.quadTo((circleX + curX) / 2, (circleY + curY) / 2, circleX - sina * radius * ratio, circleY - cosa * radius * ratio); // 控制点也是两个圆心的中间点，二阶贝塞尔曲线，DA连线 canvas.drawPath(path, circlePaint); }这里先说明，如果想简单一点，是不用这样去画连接的，完全可以用setStrokeWidth去动态改变画笔的宽度，这也可以，不过这种连接，没有我们这里用多边形加贝塞尔曲线效果好，下面来说说这个连接怎么画：
首先，用一条直线连接固定圆和移动圆的圆心，假设这条直线为line，完后，在固定圆和移动圆之内，分别画一条直线和line垂直，完后和圆相交，这样一来，两条和line垂直的直线，就和两个圆有了4个交点，记为ABCD。
完后我们将这4个点连起来，就会得到一个梯形，这4条边组成的梯形就是一个Path，我们画出这个Path，就是我们的移动圆和固定圆之间的连接。我们首先计算移动圆圆心和固定圆圆心之间的距离，完后根据x轴和y轴的差，算出一个正弦和余弦值，完后根据这个值去算出ABCD四个点的坐标，具体坐标怎么算出来的，这里我就不讲了，因为需要画图蛮麻烦，但计算的过程其实挺简单的，只要学过初中数学，明白正弦和余弦的意思，拿个纸画一下，相信马上可以得出来
另外，这里还用到了二阶贝塞尔曲线，关于贝塞尔曲线的定义，大家自己搜，网上很多，这里简单说就是二阶的贝塞尔曲线，就是在起点和终点之间有一个控制点，完后根据这个控制点的移动，来画起点和终点之间的连线，这样画出来的连线是有弧度的，效果更好，我们这里选择的控制点就是起点和终点之间的中点，取x轴和y轴坐标相加的一半
完后这里还有另外一个动画，是松手后移动圆消失的动画，这里用的是帧动画，一个Bitmap数组，依次播放动画帧，每帧之间有一个间隔，最后要记得回收Bitmap数组，这个比较简单，没有什么好过多说的
第四步，使用该控件
回到最开始的图，我们在界面的底部放了一个菜单栏，完后放了两个自定义的控件，这里需要注意的是，我一开始将自定义控件是放在布局xml里面的，但后来发现这样一来，我移动它就只能在它本身的大小范围内，而不能全屏移动，无奈，我改成动态添加了，即在界面加载后，根据我要放的位置，用addView来添加
int[] position = new int[2]; messageIcon.getLocationOnScreen(position); messageCount = new BounceCircle(this, radius, position[0] + messageIcon.getWidth(), (position[1] - Util.getTopBarHeight(this))); messageCount.setNumber("2"); messageCount.setFinishListener(new BounceCircle.FinishListener() { @Override public void onFinish() { Toast.makeText(MainActivity.this, "message count dismiss", Toast.LENGTH_LONG).show(); } }); root.addView(messageCount); contactIcon.getLocationOnScreen(position); contactCount = new BounceCircle(this, radius, position[0] + contactIcon.getWidth(), (position[1] - Util.getTopBarHeight(this))); contactCount.setNumber("3"); contactCount.setFinishListener(new BounceCircle.FinishListener() { @Override public void onFinish() { Toast.makeText(MainActivity.this, "contract count dismiss", Toast.LENGTH_LONG).show(); } }); root.addView(contactCount);这里的root是我的根布局，messageIcon和contactIcon是那个两个Android的图标，我相当于，先获取ImageView图标的位置，完后再在其右上角addView自定义控件，其实我个人觉得这种方式并不是太好，我想QQ应该是在xml中定义的自定义控件，但这样弄不知道如何解决移动范围的问题，如果有人知道还请告知
最后给出完整源码
MainActivity.java
public class MainActivity extends Activity { private RelativeLayout root; private BounceCircle messageCount; private BounceCircle contactCount; private ImageView messageIcon; private ImageView contactIcon; private int radius = 15; // 圆形半径 private boolean init = true; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); root = (RelativeLayout) findViewById(R.id.root); messageIcon = (ImageView) findViewById(R.id.message_icon); contactIcon = (ImageView) findViewById(R.id.contact_icon); } @Override public void onWindowFocusChanged(boolean hasFocus) { super.onWindowFocusChanged(hasFocus); // 只需执行一次，在onWindowFocusChanged方法中才能获取到控件在屏幕中的坐标 if (init) { init = false; int[] position = new int[2]; messageIcon.getLocationOnScreen(position); messageCount = new BounceCircle(this, radius, position[0] + messageIcon.getWidth(), (position[1] - Util.getTopBarHeight(this))); messageCount.setNumber("2"); messageCount.setFinishListener(new BounceCircle.FinishListener() { @Override public void onFinish() { Toast.makeText(MainActivity.this, "message count dismiss", Toast.LENGTH_LONG).show(); } }); root.addView(messageCount); contactIcon.getLocationOnScreen(position); contactCount = new BounceCircle(this, radius, position[0] + contactIcon.getWidth(), (position[1] - Util.getTopBarHeight(this))); contactCount.setNumber("3"); contactCount.setFinishListener(new BounceCircle.FinishListener() { @Override public void onFinish() { Toast.makeText(MainActivity.this, "contract count dismiss", Toast.LENGTH_LONG).show(); } }); root.addView(contactCount); } }}activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/root" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#CCC" > <LinearLayout android:id="@+id/bottom_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#FFF" android:padding="5dp" android:layout_alignParentBottom="true" > <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center"> <RelativeLayout android:layout_width="60dp" android:layout_height="match_parent" > <ImageView android:id="@+id/message_icon" android:layout_width="50dp" android:layout_height="50dp" android:layout_centerInParent="true" android:background="@mipmap/ic_launcher"/> </RelativeLayout> </LinearLayout> <RelativeLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" > <ImageView android:id="@+id/contact_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:background="@mipmap/ic_launcher"/> </RelativeLayout> <RelativeLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:background="@mipmap/ic_launcher"/> </RelativeLayout> </LinearLayout></RelativeLayout>
BounceCircle.java
public class BounceCircle extends View { private Context mContext; private Paint circlePaint; // 圆形/连线画笔 private TextPaint textPaint; // 文字画笔 private Paint.FontMetrics textFontMetrics; // 字体 private Path path; private int radius; // 移动圆形半径 private float textMove; // 为了让文字居中，需要移动的距离 private float curX; // 当前x坐标 private float curY; // 当前y坐标 private float circleX; // 固定圆的圆心x坐标 private float circleY; // 固定圆的圆心y坐标 private float ratio = 1; // 圆缩放的比例，随着手指的移动，固定的圆越来越小 private float ratioLimit = 0.2f; // 固定圆最小的缩放比例，小于该比例时就直接消失 private int distanceLimit = 100; // 固定圆和移动圆的圆心之间距离的限值，单位DP（配合ratioLimit使用） private int textSize; // 字体大小，单位SP private int animationTime = 200; // 抖动动画执行的时间 private int animationTimes = 1; // 抖动动画执行次数 private boolean needDraw = true; // 是否需要执行onDraw方法 private FinishListener mFinishListener; // 自定义接口，用来回调 private String message = "1"; // 显示的数字的初始值 private Bitmap[] explosionAnim; // 爆炸动画 private boolean animStart; // 动画开始 private int animNumber = 5; // 动画帧的个数 private int curAnimNumber; // 动画播放的当前帧 private int animInterval = 200; // 动画帧之间的间隔 private int animWidth; // 动画帧的宽度 private int animHeight; // 动画帧的高度 public BounceCircle(Context context, int radius, int circleX, int circleY) { super(context); this.radius = radius; this.circleX = circleX; this.circleY = circleY; initPaint(context); } public BounceCircle(Context context, AttributeSet attrs) { super(context, attrs); initPaint(context); } /** * 初始化Paint * @param context */ private void initPaint(Context context) { mContext = context; circlePaint = new Paint(); circlePaint.setColor(Color.RED); circlePaint.setAntiAlias(true); distanceLimit = Util.dip2px(mContext, distanceLimit); textSize = radius; textPaint = new TextPaint(); textPaint.setAntiAlias(true); textPaint.setColor(Color.WHITE); textPaint.setTextAlign(Paint.Align.CENTER); textPaint.setTextSize(Util.sp2px(mContext, textSize)); textFontMetrics = textPaint.getFontMetrics(); textMove = -textFontMetrics.ascent - (-textFontMetrics.ascent + textFontMetrics.descent) / 2; // drawText从baseline开始，baseline的值为0，baseline的上面为负值，baseline的下面为正值，即这里ascent为负值，descent为正值,比如ascent为-20，descent为5，那需要移动的距离就是20 - （20 + 5）/ 2 path = new Path(); } /** * 初始化爆炸动画 */ private void initAnim() { explosionAnim = new Bitmap[animNumber]; explosionAnim[0] = BitmapFactory.decodeResource(getResources(), R.mipmap.explosion_one); explosionAnim[1] = BitmapFactory.decodeResource(getResources(), R.mipmap.explosion_two); explosionAnim[2] = BitmapFactory.decodeResource(getResources(), R.mipmap.explosion_three); explosionAnim[3] = BitmapFactory.decodeResource(getResources(), R.mipmap.explosion_four); explosionAnim[4] = BitmapFactory.decodeResource(getResources(), R.mipmap.explosion_five); // 动画每帧的长宽都是一样的，取一个即可 animWidth = explosionAnim[0].getWidth(); animHeight = explosionAnim[0].getHeight(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (needDraw) { // 画固定圆 if (ratio >= ratioLimit) { canvas.drawCircle(circleX, circleY, radius * ratio, circlePaint); } // 画移动圆和连线 if (curX != 0 && curY != 0) { canvas.drawCircle(curX, curY, radius, circlePaint); if (ratio >= ratioLimit) { drawLinePath(canvas); } } // 数字要最后画，否则会被连线遮掩 if (curX != 0 && curY != 0) { // 移动圆里面的数字 canvas.drawText(message, curX, curY + textMove, textPaint); } else { // 只有初始时需要绘制固定圆里面的数字 canvas.drawText(message, circleX, circleY + textMove, textPaint); } } if (animStart) { // 动画进行中 if (curAnimNumber < animNumber) { canvas.drawBitmap(explosionAnim[curAnimNumber], curX - animWidth / 2, curY - animHeight / 2, null); curAnimNumber++; if (curAnimNumber == 1) { // 第一帧立即执行 postInvalidate(); } else { // 其余帧每隔固定时间执行 postInvalidateDelayed(animInterval); } } else { // 动画结束 animStart = false; curAnimNumber = 0; recycleBitmap(); } } } /** * 回收Bitmap资源 */ private void recycleBitmap() { if (explosionAnim != null && explosionAnim.length != 0) { for (int i = 0; i < explosionAnim.length; i++) { if (explosionAnim[i] != null && !explosionAnim[i].isRecycled()) { explosionAnim[i].recycle(); explosionAnim[i] = null; } } } } /** * 画固定圆和移动圆之间的连线 * @param canvas */ private void drawLinePath(Canvas canvas) { path.reset(); float distance = (float) Util.distance(circleX, circleY, curX, curY); // 移动圆和固定圆圆心之间的距离 float sina = (curY - circleY) / distance; // 移动圆圆心和固定圆圆心之间的连线与X轴相交形成的角度的sin值 float cosa = (circleX - curX) / distance; // 移动圆圆心和固定圆圆心之间的连线与X轴相交形成的角度的cos值 path.moveTo(circleX - sina * radius * ratio, circleY - cosa * radius * ratio); // A点坐标 path.lineTo(circleX + sina * radius * ratio, circleY + cosa * radius * ratio); // AB连线 path.quadTo((circleX + curX) / 2, (circleY + curY) / 2, curX + sina * radius, curY + cosa * radius); // 控制点为两个圆心的中间点，二阶贝塞尔曲线，BC连线 path.lineTo(curX - sina * radius, curY - cosa * radius); // CD连线 path.quadTo((circleX + curX) / 2, (circleY + curY) / 2, circleX - sina * radius * ratio, circleY - cosa * radius * ratio); // 控制点也是两个圆心的中间点，二阶贝塞尔曲线，DA连线 canvas.drawPath(path, circlePaint); } @Override public boolean onTouchEvent(MotionEvent event) { switch(event.getAction()) { case MotionEvent.ACTION_DOWN: if (Util.isInCircle(event.getX(), event.getY(), circleX, circleY, radius)) { // 按下的位置必须在圆内才响应后面的操作 return true; } return false; case MotionEvent.ACTION_MOVE: curX = event.getX(); curY = event.getY(); calculateRatio((float) Util.distance(curX, curY, circleX, circleY)); break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: if (ratio > ratioLimit) { // 没有超出最大移动距离，手抬起时需要让移动圆回到固定圆的位置 shakeAnimation(animationTimes); curX = 0; curY = 0; ratio = 1; } else { // 超出最大移动距离 needDraw = false; animStart = true; initAnim(); // 删除后的回调 if (mFinishListener != null) { mFinishListener.onFinish(); } } break; } postInvalidate(); // 刷新界面 return super.onTouchEvent(event); } /** * 计算固定圆缩放的比例 * @param distance * @return */ private void calculateRatio(float distance) { ratio = (distanceLimit - distance) / distanceLimit; } /** * 抖动动画 * @param counts */ public void shakeAnimation(int counts) { // 避免动画抖动的频率过大，所以除以2，另外，抖动的方向跟手指滑动的方向要相反 Animation translateAnimation = new TranslateAnimation((circleX - curX) / 2, 0, (circleY - curY) / 2, 0); translateAnimation.setInterpolator(new CycleInterpolator(counts)); translateAnimation.setDuration(animationTime); startAnimation(translateAnimation); } public interface FinishListener { void onFinish(); } public void setFinishListener(FinishListener finishListener) { mFinishListener = finishListener; } /** * 设置显示的数字 * @param message */ public void setNumber(String message) { this.message = message; }}下载地址：http://download.csdn.net/detail/gesanri/9098837，注意，我是用Android Studio开发的，如果想在Eclipse中运行，请新建目录并把相关文件拷贝到对应位置，如果自己建的项目包名跟我不一样，要记得在xml中改成自己的包名，另外Eclipse没有mipmap，代码中mipmap要改成drawable，并将动画资源放入drawable
最新：动态添加自定义控件的问题已解决，参考仿QQ拖动删除未读消息个数气泡之二
1 0
- 仿QQ拖动删除未读消息个数气泡
- 仿QQ拖动删除未读消息个数气泡之二
- 高仿QQ未读消息气泡拖拽黏连效果
- 高仿QQ未读消息气泡拖拽黏连效果
- 类似QQ拖动气泡删除消息的气泡实现
- 仿QQ小红点未读消息拖动删除
- android 仿qq5.0 消息气泡拖动删除效果
- Android开源BezierView：仿QQ未读消息99+条的红色气泡
- Android开源BezierView：仿QQ未读消息99+条的红色气泡
- Android开源BezierView：仿QQ未读消息99+条的红色气泡
- BezierView：仿QQ未读消息99+条的红色气泡
- 57.贝赛尔曲线初步（二） - 高仿QQ未读消息气泡拖拽黏连效果
- 贝赛尔曲线初步（二） - 高仿QQ未读消息气泡拖拽黏连效果
- 仿QQ未读消息拖拽删除粘性效果
- 仿qq未读消息
- 仿QQ未读消息
- 仿手机QQ消息数拖动删除效果
- 《仿QQ未读消息粘性按钮》
- 安卓 socket简单使用
- sql优化
- python中str和basestring
- HDU 2845 Beans（最大不连续子序列）
- codeforces 577B Modulo Sum
- 仿QQ拖动删除未读消息个数气泡
- UE4使用第三方库
- 剑指offer：二叉搜索树的后序遍历序列（判断一个数组是否是二叉搜索树的后续遍历序列）
- Unity3D主程修炼之路
- MySQL联合索引实例
- <input type="file"/> 文件上传
- 编译原理：文法类型判断C++实现
- 在11.2RAC上如何恢复全部丢失的OCR和VotingDisk（存储在集群文件系统）
- Android为String中部分文字设置TTF字体
