seekBar实现滑动解锁[通俗易懂]

seekBar实现滑动解锁[通俗易懂]今天android项目里突然要做一个滑动解锁的控件,nm,ui出图就喜欢按照IOS上的控件来,这次也不例外,不过IOS上的滑动解锁效果确实还是不错。好了,废话不多说,上代码。

大家好,又见面了,我是你们的朋友全栈君。

今天android项目里突然要做一个滑动解锁的控件,nm,ui出图就喜欢按照IOS上的控件来,这次也不例外,不过IOS上的滑动解锁效果确实还是不错。好了,废话不多说,上代码。。。
关键的View代码SlidingSeekBar.java
/**
 * 描述:自定义滑动解锁(横向的)seekBar
 * 特点:自定义后seekBar只能滑动并禁用点击
 * 最关键的就是设置flag
 * Created by ruihe on 2016/5/28.
 */
public class SlidingSeekBar extends SeekBar implements SeekBar.OnSeekBarChangeListener, View.OnTouchListener {

    private Context mContext;
    /**
     * seekBar是否滑动的判断标志,默认为false
     */
    private boolean isSlide;
    /**
     * 每次手指按下时处在屏幕上的横坐标
     */
    private int mStartTouchX;
    /**
     * seekBar的状态监听
     */
    private OnSeekBarStatusListener mOnSeekBarStatusListener;
    private SlidingSeekBar mSlideSeekBar;
    private TextView tvHint;
    private View viewBg;
    private int[] mLocation = new int[2];

    public SlidingSeekBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public SlidingSeekBar(Context context) {
        super(context);
    }

    public SlidingSeekBar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void initSlideToRightUnlock(Context context, TextView tvHint, View v, OnSeekBarStatusListener onSeekBarStatusListener) {
        mSlideSeekBar = this;
        this.mContext = context;
        this.tvHint = tvHint;
        this.viewBg = v;
        this.mOnSeekBarStatusListener = onSeekBarStatusListener;
        mSlideSeekBar.setProgress(0);
        viewBg.setAlpha(0.0f);
        tvHint.setAlpha(1.0f);
        setOnTouchListener(this);
        setOnSeekBarChangeListener(this);
    }


    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        if (!fromUser)
            return;

        if (!isSlide) {
            seekBar.setProgress(0);
        } else {
            seekBar.setProgress(progress);
            float tempProgress = progress * 0.01f;
            viewBg.setAlpha(tempProgress);
            tvHint.setAlpha(1.0f - tempProgress * 2.0f);
        }

    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {

        if (seekBar.getProgress() < 80) {//判断小于80的不算unlock操作
            seekBar.setProgress(0);
            tvHint.setAlpha(1.0f);
            viewBg.setAlpha(0.0f);
        } else {
            seekBar.setProgress(100);
            tvHint.setAlpha(0.0f);
            viewBg.setAlpha(1.0f);
            mOnSeekBarStatusListener.onFinishUnlock();
        }

    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        int action = event.getAction();

        switch (action) {
            case MotionEvent.ACTION_DOWN:
                isSlide = false;
                mStartTouchX = (int) event.getX();
                break;
            case MotionEvent.ACTION_MOVE:

                mSlideSeekBar.getLocationOnScreen(mLocation);
                int mSeekBarX = mLocation[0];
                int seekBarThumbLeft = mSeekBarX + DensityUtil.dip2px(mContext, 80) + mSlideSeekBar.getThumbOffset();

                if (mStartTouchX < seekBarThumbLeft) {
                    isSlide = true;
                }
                break;
            case MotionEvent.ACTION_UP:
                isSlide = false;
                break;
            default:
                break;
        }

        return false;
    }


    /**
     * seekBar滑动完成监听
     */
    public interface OnSeekBarStatusListener {

        void onFinishUnlock();

    }


}
示例Fragment
当然无论Activity还是Fragment都无所谓,这里我是继承了自己BaseFragment,这里并没有必须要求的意思,只需要实现滑动解锁完成的接口SlidingSeekBar.OnSeekBarStatusListener即可

/**
 * 描述:滑动解锁
 * Created by ruihe on 2016/5/28.
 */
public class FragmentThree extends BaseFragment implements SlidingSeekBar.OnSeekBarStatusListener {


    private View mView;
    private View viewBg;
    private TextView tvSlideToRightHint;
    private SlidingSeekBar slideSeekBar;


    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            slideSeekBar.setProgress(0);
            tvSlideToRightHint.setAlpha(1.0f);
            viewBg.setAlpha(0.0f);
        }
    };

    @Override
    public void onAttached() {

    }

    @Override
    public void getFragmentView(View view, Bundle savedInstanceState) {
        mView = view;
        initView();
        initListener();
        bindData();
    }


    @Override
    public int getContentViewId() {
        return R.layout.fragment_three;
    }


    private void initView() {
        viewBg = mView.findViewById(R.id.view_bg);
        tvSlideToRightHint = (TextView) mView.findViewById(R.id.tv_slide_to_right);
        slideSeekBar = (SlidingSeekBar) mView.findViewById(R.id.seek_bar);

    }

    private void initListener() {
        slideSeekBar.initSlideToRightUnlock(holder, tvSlideToRightHint, viewBg, this);
    }


    private void bindData() {
        holder.mTitleView.removeAllMenu();
        holder.mTitleView.setTitle(R.string.main_third);

    }

    @Override
    public void onDetached() {

    }

    @Override
    public void onFinishUnlock() {
        Toast.makeText(holder, "恭喜,解锁成功!", Toast.LENGTH_SHORT).show();
        mHandler.sendEmptyMessageDelayed(0, 3000);
    }
}
<span style="font-family: Arial, Helvetica, sans-serif;">
</span>
<span style="font-family:Arial, Helvetica, sans-serif;">布局文件</span><pre name="code" class="java">fragment_three.xml:
</pre><pre name="code" class="java"><pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:padding="5dp"
        android:text="seekBar滑动解锁" />


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center">

        <View
            android:id="@+id/view_bg"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#4c000000" />


        <RelativeLayout
            android:layout_width="280dp"
            android:layout_height="60dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="30dp">

            <com.ruihe.demo.common.utils.view.SlidingSeekBar
                android:id="@+id/seek_bar"
                style="@style/style_slide_to_right_unlock"
                android:layout_width="280dp"
                android:layout_height="60dp"
                android:padding="0dp" />

            <TextView
                android:id="@+id/tv_slide_to_right"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginLeft="80dp"
                android:gravity="center"
                android:text="右滑解锁"
                android:textColor="#CCFFFFFF"
                android:textSize="18sp" />
        </RelativeLayout>

    </RelativeLayout>


</LinearLayout>


seekBar的样式:

style_slide_to_right_unlock.xml:
</pre><pre name="code" class="html"><pre name="code" class="html"><pre name="code" class="html"> <!--滑动截图的Style-->

    <style name="style_slide_to_right_unlock" parent="@android:style/Widget.SeekBar">
        <item name="android:maxHeight">280dp</item>
        <item name="android:minHeight">280dp</item>
        <item name="android:maxWidth">60dp</item>
        <item name="android:minWidth">60dp</item>
        <item name="android:indeterminateOnly">false</item>
        <item name="android:indeterminateDrawable">
            @android:drawable/progress_indeterminate_horizontal
        </item>
        <item name="android:progressDrawable">@drawable/shape_map_shot</item>
        <item name="android:thumb">@drawable/ic_map_slide</item>
        <item name="android:thumbOffset">-3dp</item>
    </style>


</pre><pre name="code" class="html"><pre name="code" class="html">其中@drawable/shape_map_shot为底色背景这里是用shape画的
<pre name="code" class="html">shape_map_shot.xml

<pre name="code" class="html"><pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="50dp" />

    <solid android:color="#292d37" />


</shape>
</pre><pre name="code" class="html">
@drawable/ic_map_slide为上层滑动的拇指图标:

</pre><pre>

<img src="https://img-blog.csdn.net/20160530110256676?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

好的这样就可以了。附上效果图

seekBar实现滑动解锁[通俗易懂]



版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/149617.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 华为论坛官网_华为设备官网

    华为论坛官网_华为设备官网今日看点✦华为将持续投入汽车行业,今年研发投资将达10亿美元✦绿地集团旗下绿地数科拟2023年前上市,利润达到60亿元✦瑞幸首家咖啡烘焙基地正式投产,总投资2.1亿元✦海南离岛免税…

    2022年10月5日
    2
  • win10pycharm双击无响应_pycharm打不开了怎么办

    win10pycharm双击无响应_pycharm打不开了怎么办Windows10更新升级之后,Pycharm打不开了,经过了各种方法尝试,最终重装了微软的VC程序,问题即可解决。

    2022年8月26日
    12
  • browserify使用「建议收藏」

    browserify使用「建议收藏」一、简介browserift是javascript编译工具,可以通过预编译方式,将后端的node模块加入javascript中,进而可在前端浏览器上执行。二、安装1、安装nodejs和npmnodejs是node的运行环境,npm是node的包管理工具。它们的安装在此略过(可参数本博客其它文章)。2、browserify安装命令:npminstall-gbrowserify三、使…

    2025年7月3日
    2
  • Java详解:淘宝秒杀脚本java

    Java详解:淘宝秒杀脚本java造成雪崩的真实场景1.4.1服务提供者不可用硬件故障:如网络故障、硬盘损坏等。程序的bug:如算法需要占用大量CPU的计算时间导致CPU使用率过高。缓存击穿:比如应用刚重启,短时间内缓存是失效的,导致大量请求直接访问到了数据库,数据库不堪重负,服务不可用。秒杀和大促:服务短时间承载不了那么多请求量。1.4.2重试加大流量用户连续重试:比如用户看到界面上没有响应,所以又操作了一遍,结果又增加了一倍请求量。程序重试机制:比如代码中有多次重试的逻辑,一次失

    2022年6月1日
    35
  • 硬件接口之Camera DVP「建议收藏」

    硬件接口之Camera DVP「建议收藏」Camera的并口传输方式很多地方叫做dvp接口,但是并没有统一的标准。MIPI接口比DVP的接口信号线少,由于是低压差分信号,产生的干扰小,抗干扰能力也强。最重要的是DVP接口在信号完整性方面受限制,速率也受限制。500W还可以勉强用DVP,800W及以上都采用MIPI接口。1.DVP的信号脚名称及作用:PCLK:pixelclock,像素时钟,每个时钟对应一个像素数据;HSYNC:horizonalsynchronization,行同步信号VSYNC:verticalsynchro

    2022年5月2日
    69
  • intellij 激活码_通用破解码

    intellij 激活码_通用破解码,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月16日
    83

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号