大家好,又见面了,我是你们的朋友全栈君。
今天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="" />
好的这样就可以了。附上效果图
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/149617.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...