android 类似iphone关机sos滑动效果

cuckoochun · · 196 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

效果图:



代码比较简单,直接贴出来了。

package sd.read.test.csc.recttest;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.View;
import android.view.WindowManager;

/**
 * Created by csc on 17-11-7.
 */

public class SOSSlideView extends View {
    private Paint mPaint, mRedPaint, mTextPaint;
    private int shutDownRect = 50;
    private RectF oval3, oval4;
    private int rectW = 440;
    private int rectH = 124;
    private int redW_H = 116;
    public int rectArc = 71;
    private Drawable mTurnOff;
    private int shutDownAlpha = 255;
    int width, height;

    public SOSSlideView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mRedPaint = new Paint();
        mTextPaint = new Paint();

        WindowManager wm = (WindowManager) getContext()
                .getSystemService(Context.WINDOW_SERVICE);

        width = wm.getDefaultDisplay().getWidth();
        height = wm.getDefaultDisplay().getHeight();

        /*oval3 = new RectF((width - rectW) / 2, (height - rectH) / 2, (width - rectW) / 2 + rectW, (height - rectH) / 2 + rectH);

        oval4 = new RectF(((width - rectW) / 2) + 4, (height - rectH) / 2 + 7, (width - rectW) / 2 + redW_H, (height - rectH) / 2 + redW_H);*/
        oval3 = new RectF(0, 0,  rectW,  rectH);

        oval4 = new RectF( 4,  7, redW_H,  redW_H);
    }

    public void setOval(int deltX) {
//      oval4 = new RectF(((width - rectW) / 2) + 4, (height - rectH) / 2 + 7, (width - rectW) / 2 + redW_H + deltX, (height - rectH) / 2 + redW_H);
        oval4 = new RectF( 4, 7,  redW_H + deltX,  redW_H);

        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /*底部*/
        mPaint.setStyle(Paint.Style.FILL);//充满
        mPaint.setAntiAlias(true);// 设置画笔的锯齿效果
        mPaint.setAlpha(shutDownRect);
        canvas.drawRoundRect(oval3, rectArc, rectArc, mPaint);

        /*红色滑条*/
        mRedPaint.setStyle(Paint.Style.FILL);//充满
        mRedPaint.setAntiAlias(true);// 设置画笔的锯齿效果
        mRedPaint.setAlpha(shutDownAlpha);
        mRedPaint.setColor(Color.RED);
        canvas.drawRoundRect(oval4, rectArc, rectArc, mRedPaint);

        /*sos文字*/
        mTextPaint.setAntiAlias(true);// 设置画笔的锯齿效果
        mTextPaint.setColor(Color.WHITE);
        mTextPaint.setTextSize(60);
        mTextPaint.setStyle(Paint.Style.FILL);
        mTextPaint.setTextAlign(Paint.Align.RIGHT);
        Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
        float top = fontMetrics.top;//为基线到字体上边框的距离,即上图中的top
        float bottom = fontMetrics.bottom;//为基线到字体下边框的距离,即上图中的bottom
        int baseLineY = (int) (oval4.centerY() - top / 2 - bottom / 2);
        canvas.drawText("sos", oval4.right - 11, baseLineY-5, mTextPaint);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
<RelativeLayout
    android:layout_width="440px"
    android:layout_height="129px"
    android:layout_centerInParent="true"
    >
    <sd.read.test.csc.recttest.SOSSlideView
        android:id="@+id/mSlide"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</RelativeLayout>
</RelativeLayout>


package sd.read.test.csc.recttest;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends Activity {

    private ImageView redIv;
    private SOSSlideView mSOSSlideView;
    private boolean DEBUG = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mSOSSlideView = (SOSSlideView) findViewById(R.id.mSlide);
        mSOSSlideView.setOnTouchListener(setOnTouchSlideListener);
    }

    float downX;
    int deltX;
    private View.OnTouchListener setOnTouchSlideListener = new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    downX = event.getX();
                    break;
                case MotionEvent.ACTION_MOVE:
                    deltX = (int) (event.getX() - downX);
                    if (deltX < 0)
                        deltX = 0;
                    if (deltX <= (440-116-2))
                        mSOSSlideView.setOval(deltX);
                    break;
                case MotionEvent.ACTION_UP:
                case MotionEvent.ACTION_CANCEL:
                    mSOSSlideView.setOval(0);
                    downX = 0f;
                    break;
            }
            return true;
        }
    };

}


本文来自:CSDN博客

感谢作者:cuckoochun

查看原文:android 类似iphone关机sos滑动效果

196 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet