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实现滑动解锁[通俗易懂]



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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

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