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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • pytest skipif_pytest不是内部或外部命令

    pytest skipif_pytest不是内部或外部命令前言pytest.mark.skip可以标记无法在某些平台上运行的测试功能,或者您希望失败的测试功能Skip和xfail:处理那些不会成功的测试用例你可以对那些在某些特定平台上不能运行的测试用

    2022年7月30日
    7
  • 什么是跨域问题?跨域解决问题

    什么是跨域问题?跨域解决问题一 为什么会出现跨域问题 出于浏览器的同源策略限制 同源策略是一种约定 它是浏览器最核心也是最基本的安全功能 如果缺少了同源策略 则浏览器的正常的功能可能会受到影响 跨域收是 Web 是构建在同源策略基础上的 浏览器只是针对同源策略的一种实现 同源策略会阻止一个域的 JavaScript 脚本和另一个域的内容进行交互 所谓同源 即指同一个域 就是两个页面具备同样的协议 protocol 主机 host 和端口号 port 跨域报错的原因请求是跨域的 并不一定会报错 普通的图片请求 css 文件请求是不

    2025年6月12日
    4
  • linux 文档编辑命令_vim编辑器常用命令

    linux 文档编辑命令_vim编辑器常用命令Linux文档编辑命令1.vi或vim命令1.基本操作1.vim文件名:进入一般模式(不能输入)2.按下i从一般模式,进入到插入模式3.按下esc从插入模式,退出到一般模式4.在一般模式下,输入:wq,退出编辑。2.vi基本概念3.常用命令2.管道linux提供管道符号“|”作用是“命令1”的输出内容,将作为“命令2”…

    2022年9月27日
    3
  • matlab单相电源在哪里,浅谈基于MATLAB的单相独立光伏逆变电源电路仿真设计

    matlab单相电源在哪里,浅谈基于MATLAB的单相独立光伏逆变电源电路仿真设计156电子技术  独立型光伏发电系统系统结构如图1所示,主要有太阳电池组件(方阵)、控制器、储能蓄电池(组)、直流/交流逆变器等部分组成。光伏阵列发出的直流电通过器将其逆变为交流电供给负载,蓄电池将光伏阵列在白天发出的电能存储起来,并在夜间和阴雨天给负载供电。浅谈基于MATLAB的单相独立光伏逆变电源电路仿真设计魏显文(武威职业学院,甘肃武威733000)摘 要:本文…

    2022年5月11日
    37
  • 详细AutoEventWireup <@ Page language=c# AutoEventWireup=”false”和“True”>的研究

    详细AutoEventWireup <@ Page language=c# AutoEventWireup=”false”和“True”>的研究@Page里面的属性是ASP.NET页面中最基础的组成部分。可也包涵了很多麻烦在里面,因为种种原因导致必须研究一下这个属性AutoEventWireupAutoEventWireup用我的理解方式是这样:(Auto解释是自动,Event解释是事件,Wire解释关联结构模式,up解释是在上面)个人理解的方式来推断这个属性所实现的功能。首先,从浏览器触发的事件不能理科在本地得

    2022年5月27日
    36
  • QT+QT creator+OpenCV图像灰度化

    QT+QT creator+OpenCV图像灰度化

    2022年2月2日
    57

发表回复

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

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