Android自定义RecyclerView实现不固定刻度的刻度尺

本文实例为大家分享了自定义RecyclerView实现不固定刻度的刻度尺的具体代码,供大家参考,具体内容如下

##不均匀刻度效果图

##等比例刻度效果图

实现功能目前

1、实现类似日期/分类等大小不固定的水平刻度尺效果
2、实现标准刻度尺效果
3、监听RecyclerView滑动时居中条目
4、去掉边缘阴影

定义RecyclerView

public class CenterRecyclerView extends RecyclerView {

//设置RecyclerView的速度
  private static final int MAXIMUM_FLING_VELOCITY = 3000;
//画中轴线
  private Paint mCenterLinePaint;
  private Context context;
  private CenterLayoutManager mLayoutManager;
  private Paint mTextPaint;
  private String text = "";
  private String textUnit = "";
  private Paint mTextUnitPaint;
  private int mWidth;
  private int mHeight;
  private int mLineStartY;
  private int mLineEndY;
  private int mTextStartY;

  public CenterRecyclerView(@NonNull Context context) {
    this(context, null);
  }

  public CenterRecyclerView(@NonNull Context context, @Nullable AttributeSet attrs) {
    this(context, attrs, -1);
  }

  public CenterRecyclerView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context, attrs);
  }

  private void init(Context context, AttributeSet attrs) {
    this.context = context;
    initPaint();
  }

  public void setTypeface(Typeface typeface) {
    mTextPaint.setTypeface(typeface);
    mTextUnitPaint.setTypeface(typeface);
  }

  private void initPaint() {
    mCenterLinePaint = new Paint();
    mCenterLinePaint.setAntiAlias(true);
    mCenterLinePaint.setStrokeWidth(ScreenUtil.dip2px(context, 4));
    mCenterLinePaint.setTextAlign(Paint.Align.CENTER);
    mCenterLinePaint.setColor(0xff6e9fff);

    mTextUnitPaint = new Paint();
    mTextUnitPaint.setStyle(Paint.Style.FILL);
    mTextUnitPaint.setStrokeWidth(ScreenUtil.dip2px(context, 4));
    mTextUnitPaint.setTextSize(ScreenUtil.dip2px(context, 15));
    mTextUnitPaint.setColor(Color.parseColor("#DD5F00"));

    mTextPaint = new Paint();
    mTextPaint.setStyle(Paint.Style.FILL);
    mTextPaint.setStrokeWidth(ScreenUtil.dip2px(context, 4));
    mTextPaint.setTextSize(ScreenUtil.dip2px(context, 60));
    mTextPaint.setColor(Color.parseColor("#DD5F00"));
    mTextPaint.setTextAlign(Paint.Align.CENTER);
  }

  @Override
  public void addOnScrollListener(@NonNull OnScrollListener listener) {
    super.addOnScrollListener(listener);
    postInvalidate();
  }

  @Override
  protected void onMeasure(int widthSpec, int heightSpec) {
    super.onMeasure(widthSpec, heightSpec);

  }

//获取相关参数
  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    super.onLayout(changed, l, t, r, b);
    mWidth = getWidth();
    mHeight = getHeight();
    int lineHeight = ScreenUtil.dip2px(context, 58);
    mLineStartY = mHeight / 2 - lineHeight / 2;
    mLineEndY = mHeight / 2 + lineHeight / 2;
    mTextStartY = mHeight / 2 - ScreenUtil.dip2px(context, 55);
  }

  @Override
  public void draw(Canvas c) {
    super.draw(c);
    Log.d("szjjyh", "draw: " + getWidth());
    drawCenterLine(c);
    drawText(c);
  }

//画线
  private void drawCenterLine(Canvas canvas) {
    canvas.drawLine(mWidth / 2, mLineStartY, mWidth / 2, mLineEndY, mCenterLinePaint);
  }

//画字/画单位
  private void drawText(Canvas c) {
    c.drawText(text, mWidth / 2, mTextStartY, mTextPaint);
    if (textUnit != null && textUnit.length() != 0) {
      float textWidth = mTextPaint.measureText(text);
      c.drawText(textUnit, (mWidth + textWidth) / 2, mTextStartY, mTextUnitPaint);
    }
  }

  public String getText() {
    return text;
  }

  public void setText(String text) {
    if (text == null) {
      return;
    }
    this.text = text;
  }

  public String getTextUnit() {
    return textUnit;
  }

  public void setTextUnit(String textUnit) {
    if (textUnit == null) {
      return;
    }
    this.textUnit = textUnit;
  }

  @Override
  public void setAdapter(@Nullable Adapter adapter) {
    super.setAdapter(adapter);
  }

  @Override
  public void setLayoutManager(@Nullable LayoutManager layout) {
    super.setLayoutManager(layout);
    mLayoutManager = (CenterLayoutManager) layout;
  }

  @Override
  public boolean fling(int velocityX, int velocityY) {
    velocityX = solveVelocity(velocityX);
    velocityY = solveVelocity(velocityY);
    return super.fling(velocityX, velocityY);
  }

  private int solveVelocity(int velocity) {
    if (velocity > 0) {
      return Math.min(velocity, MAXIMUM_FLING_VELOCITY);
    } else {
      return Math.max(velocity, -MAXIMUM_FLING_VELOCITY);
    }
  }

//  @Override
//  protected float getLeftFadingEdgeStrength() {
//    return 0;
//  }
}

定义LinearLayoutManager

public class CenterLayoutManager extends LinearLayoutManager {
  public CenterLayoutManager(Context context) {
    super(context);
  }

  public CenterLayoutManager(Context context, int orientation, boolean reverseLayout) {
    super(context, orientation, reverseLayout);
  }

  public CenterLayoutManager(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
  }
//计算偏移量自己适配
 @Override
  public void scrollToPosition(int position) {
    scrollToPositionWithOffset(position,-15);
  }

  @Override
  public void scrollToPositionWithOffset(int position, int offset) {
    super.scrollToPositionWithOffset(position, offset);
  }
  @Override
  public void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state, int position) {
    RecyclerView.SmoothScroller smoothScroller = new CenterSmoothScroller(recyclerView.getContext());
    smoothScroller.setTargetPosition(position);
    startSmoothScroll(smoothScroller);
  }

  public void smoothScrollToPosition(RecyclerView recyclerView, int position) {
    RecyclerView.SmoothScroller smoothScroller = new CenterSmoothScroller(recyclerView.getContext());
    smoothScroller.setTargetPosition(position);
    startSmoothScroll(smoothScroller);
  }

  private static class CenterSmoothScroller extends LinearSmoothScroller {

    CenterSmoothScroller(Context context) {
      super(context);
    }

//滑动到中间位置
    @Override
    public int calculateDtToFit(int viewStart, int viewEnd, int boxStart, int boxEnd, int snapPreference) {
      return (boxStart + (boxEnd - boxStart) / 2) - (viewStart + (viewEnd - viewStart) / 2);
    }
//滚动速度设置
    @Override
    protected float calculateSpeedPerPixel(DisplayMetrics displayMetrics) {
      return 4;
    }

    @Override
    protected int getVerticalSnapPreference() {
      return super.getVerticalSnapPreference();
    }
  }

}

滑动事件监听

public class CenterScrollListener extends RecyclerView.OnScrollListener {

  private CenterLayoutManager mLayoutManager;
  RecyclerView recyclerView;
  private int mPosition;
  private double intScrollState;
  private int mFirstItemPosition1;
  private int mLastItemPosition1;
  private boolean is_Stop;
  private String TAG = "CenterScrollListener";
  private double is_playSound;

  public CenterScrollListener(OnItemCenterScrollistner onItemCenterScrollistner) {
    this.onItemCenterScrollistner = onItemCenterScrollistner;
  }

  public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
    init(recyclerView);
    intScrollState = newState;
    is_Stop = false;

    if (intScrollState == RecyclerView.SCROLL_STATE_IDLE) {
      Log.e(TAG, "onScrollStateChanged: 11111:"+mPosition);
      CeterScroll(0, mPosition);
    }
  }

  public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
    init(recyclerView);
    int x = Math.abs(dx);
    if (!is_Stop && x <= 1) {
      is_Stop = true;
      if (dx >= 0) {
        mPosition = (mFirstItemPosition1 + mLastItemPosition1) / 2;
        View childAt = mLayoutManager.findViewByPosition(mPosition);
        if (childAt.getLeft() < ScreenUtil.getScreenWidth(recyclerView.getContext()) / 2) {
          mPosition = mPosition + 1;
        }
        Log.e(TAG, "111111: w:" + childAt.getWidth() + " :l:" +
            childAt.getLeft() + " :r:" + childAt.getRight());
      } else {
        mPosition = (mFirstItemPosition1 + mLastItemPosition1) / 2;
        View childAt = mLayoutManager.findViewByPosition(mPosition);
        if (childAt.getLeft() > ScreenUtil.getScreenWidth(recyclerView.getContext()) / 2) {
          mPosition = mPosition - 1;
        }
      }
    }
    CeterScroll(x, mPosition);
  }

//事件监听
  private void init(@NonNull RecyclerView recyclerView) {
    this.recyclerView = recyclerView;
    if (mLayoutManager == null) {
      mLayoutManager = (CenterLayoutManager) recyclerView.getLayoutManager();
    }
    int firstItemPosition = mLayoutManager.findFirstVisibleItemPosition();
    int lastItemPosition = mLayoutManager.findLastVisibleItemPosition();
    mFirstItemPosition1 = mLayoutManager.findFirstCompletelyVisibleItemPosition();
    mLastItemPosition1 = mLayoutManager.findLastCompletelyVisibleItemPosition();
    mPosition = (mFirstItemPosition1 + mLastItemPosition1) / 2;

    if (is_playSound != mPosition) {
      is_playSound = mPosition;
      int count = mLayoutManager.getItemCount();
//          soundpool.play(soundmap.get(1), 1, 1, 0, 0, 1);
      if (onItemCenterScrollistner != null) {
//中间条目事件监听
        onItemCenterScrollistner.onItemCenterScrollistner(mLastItemPosition1, mPosition,count);
      }
    }

//目前由于要实现灰色条目当条目间距为10dp,屏幕宽度360时不能继续滑动
    if (mPosition <= 18) {
      CeterScroll(0, 18);
    }
  }

//速度变小时自动滚动到中间位置
  private void CeterScroll(int dx, int position) {
    if ((intScrollState == RecyclerView.SCROLL_STATE_SETTLING || intScrollState
        == RecyclerView.SCROLL_STATE_IDLE) && Math.abs(dx) <= 1) {
      mLayoutManager.smoothScrollToPosition(recyclerView, position);
    }
  }

  OnItemCenterScrollistner onItemCenterScrollistner;

  public void setOnItemCenterScrollistner(OnItemCenterScrollistner onItemCenterScrollistner) {
    this.onItemCenterScrollistner = onItemCenterScrollistner;
  }

  public interface OnItemCenterScrollistner {
    void onItemCenterScrollistner(int lastItemPosition1, int position, int count);
  }

adpater实现

public class DateAdapter extends BaseRecyclerAdapter<CalendarDateBean> {

  private static final int layoutId = R.layout.view_item_date;

  public DateAdapter(Context context, List<CalendarDateBean> datas) {
    super(context, datas, layoutId);
  }

  @Override
  protected void bindData(BaseViewHolder holder, CalendarDateBean data, int position) {
    if (data.getDay() == 1) {
//R.id.tv_1为线需要居中否则和中轴线不会完全对称  R.id.tv_2为大刻度文字
      holder.getView(R.id.tv_1).setScaleX(2F);
      holder.setText(R.id.tv_2, data.getMonth() + "月");
      holder.getView(R.id.tv_2).setVisibility(View.VISIBLE);
      holder.getView(R.id.tv_1).setBackgroundColor(Color.parseColor("#ffffff"));
    } else if (data.getDay() ==-1){
      holder.getView(R.id.tv_1).setScaleX(1F);
      holder.getView(R.id.tv_2).setVisibility(View.GONE);
      holder.getView(R.id.tv_1).setBackgroundColor(Color.parseColor("#222222"));
    }else {
      holder.getView(R.id.tv_1).setScaleX(1F);
      holder.getView(R.id.tv_2).setVisibility(View.GONE);
      holder.getView(R.id.tv_1).setBackgroundColor(Color.parseColor("#ffffff"));
    }
  }

}

activity 加载view展示

private void initRecyclerView() {
//此处试配时注意item10dp 宽度360 计算发放 360/10/2得到记得适配
    for (int i = 0; i < 18; i++) {
      TimeBean timeBean = new TimeBean();
      mList.add(timeBean);
    }
    for (int i = 0; i < 1440; i++) {
      int minute = i % 60;
      int hour = i / 60;
      if (CalendarUtil.getHourTime()==hour&&CalendarUtil.getMinuteTime()==minute){
        mPostion = i;
      }
      TimeBean timeBean = new TimeBean();
      timeBean.setHour(hour);
      timeBean.setMinute(minute);
      timeBean.setTimeDate(CalendarUtil.getHourToMinute(hour,minute));
      mList.add(timeBean);
    }
    for (int i = 0; i < 18; i++) {
      TimeBean timeBean = new TimeBean();
//      timeBean.setMinute(-1);
      mList.add(timeBean);
    }

    rv_data = findViewById(R.id.rv_data);
    mAdapter = new TimeAdapter(this, mList);
    rv_data.setAdapter(mAdapter);
//设置字体
    rv_data.setTypeface(Typeface.createFromAsset(getAssets(), "fonts/dincond_boldalternate.ttf"));
    CenterLayoutManager layoutManager = new CenterLayoutManager(this);
    layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
    rv_data.setLayoutManager(layoutManager);

    rv_data.scrollToPosition(mPostion);
    rv_data.addOnScrollListener(new CenterScrollListener((lastItemPosition, position,count) -> {
//更新文本和单位
      rv_data.setText(mList.get(position).getTimeDate());
      if (mList.get(position).getHour()>12){
        rv_data.setTextUnit("PM");
      }else {
        rv_data.setTextUnit("AM");
      }
    }));

  }

实现了基本代码全部写了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-07-16

Android实现自定义滑动刻度尺方法示例

一 基础: 自定义View实现跟随手指滚动的刻度尺,实现了类似SeekBar的滑动选中效果.项目地址,欢迎star! UI图: 功能: 通过设置最小值跟最大值的范围,以及offset值.View将根据这些数据去计算出需要几个小刻度和几个长刻度,和每个长刻度上面显示的数值. 指针可以随意的定制. 当滑动停止后,刻度尺会根据四舍五入将距离指针最近的长刻度滑动到指针的位置. 支持范围越界回弹. 支持设置默认值. 二 实现: 先扯一下,再看别人写的控件的时候总有一种一脸懵逼的感觉,好多凌乱的变量和一大堆

Android实现滑动刻度尺效果

最近群里的开发人员咨询怎样实现刻度尺的滑动效果去选择身高体重等信息.给个横着的效果,自己试着去改编或者修改一下,看看通过自己的能力能不能做出竖着的效果来,过两天我再把竖着的那个滑动选择效果分享出来.废话不多说了,上代码. 效果图如下: 第一步:activity_mian.xml布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://s

Android自定义控件之刻度尺控件

今天我做的是一个自定义刻度尺控件,由于项目需求需要使用刻度尺那样滑动选择,由于对自定义控件的认识还不够深入,于是花了一周多时间才把这个控件给整出来,也是呕心沥血的经历啊,也让我对自定义控件有了自己的认识,废话不多说,先上一个简单的效果图,大家可以看看,如有需求可以直接拿去使用 效果图如下:只是我的一个简单Demo,效果有点丑陋了点,希望海涵! 效果已经出来接下来就是代码部分了,一看就只是一般的控件很难实现,于是就开始了我的自定义View之旅,每次自定义完后总是会收获很多东西,如下是我的代码: p

Android实现滚动刻度尺效果

缘起 最近在帮人做一个计步器,其中涉及到身高.体重等信息的采集:我参考了众多app的实现,觉得"乐动力"中滑动刻度的方式比较优雅.于是乎,反编译了该app,结果发现它是采用图片的方式实现的,即ScrollView内嵌了一张带刻度的图片. 个人觉得该方式太不灵活,且对美工的依赖较大,于是便想自定义一个刻度尺控件. 需求分析 绘制刻度,区分整值刻度和普通刻度 红色指针始终在刻度尺的中间,表示当前的刻度 刻度的最大值和最小值可动态设置 刻度尺的高度或宽度可设置,设置后中间刻度不变 可滑动,滑

Android 使用CoordinatorLayout实现滚动标题栏效果的实例

在Material Design里,CoordinatorLayout通常用来作为顶层视图,来协调处理各个子View之间的动作,从而实现各种动画效果,如Snackbar与FloatingActionButton的配合显示效果,就是以CoordinatorLayout作为根布局来实现的 CoordinatorLayout提供Behaviors接口,子View通过实现Behaviors接口来协调和其它View之间的显示效果,可以这么理解: CoordinatorLayout让其子View之间互相知道

Android仿淘宝头条基于TextView实现上下滚动通知效果

最近有个项目需要实现通知栏的上下滚动效果,仿淘宝头条的那种. 我从网上看了一些代码,把完整的效果做了出来.如图所示: 具体代码片段如下: 1.在res文件夹下新建anmin文件夹,在这个文件夹里创建两个文件 (1).anim_marquee_in.xml进入时动画 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/ap

Android自定义控件实现按钮滚动选择效果

本文实例为大家分享了Android实现按钮滚动选择效果的具体代码,供大家参考,具体内容如下 效果图 代码实现 package com.demo.ui.view; import android.annotation.TargetApi; import android.content.Context; import android.os.Build; import android.os.Handler; import android.support.v4.content.ContextCompat;

Android实现带动画效果的可点击展开TextView

本文为大家分享了Android实现带动画效果的可点击展开TextView 制作代码,效果图: 收起(默认)效果: 点击展开后的效果: 源码: 布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:id="@+id/activity_main" xmlns:android="http://schemas.android.com/apk/res/a

Android ScrollView实现反弹效果的实例

Android ScrollView实现反弹效果 自定义ScrollView控件: /** * ScrollView反弹效果的实现 */ public class BounceScrollView extends ScrollView { private View inner;// 孩子View private float y;// 点击时y坐标 private Rect normal = new Rect();// 矩形(这里只是个形式,只是用于判断是否需要动画.) private boole

Android编程之书架效果背景图处理方法

本文实例讲述了Android编程之书架效果背景图处理方法.分享给大家供大家参考,具体如下: 在android应用中,做一个小说阅读器是很多人的想法,大家一般都是把如何读取大文件,如果在滚动或是翻页时,让用户感觉不到做为重点.我也在做一个类似一功能,可是在做书架的时候,看了QQ阅读的书架,感觉很好看,就想做一个,前面一篇<android书架效果实现原理与代码>对此做了专门介绍,其完整实例代码可点击此处本站下载. 上面的例子很不错,可是有一个问题是他的背景图的宽必须是手机屏幕的宽,不会改变,这样感

Android自定义滚动选择器实例代码

Android自定义滚动选择器 实现图片的效果 代码如下 package com.linzihui.widget; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Paint.Align; import android.graph

Android自定义滑动删除效果的实现代码

先给大家展示下效果图,如果感觉不错,请参考实现代码: 序言 最近项目中需要用到滑动删除,然后去网上搜了一下,发现现有网上的各种解决办法各式各样,但是还是找不到一个能将所有细节和逻辑处理好的,至于滑动删除部分,我觉得处理的相对比较好的是 QQ(包括处理各种逻辑和细节);最终,苦寻无果,于是决定自己动手,丰衣足食 这篇文章将从现有 Android 滑动删除的痛点,到搭建好一个基本的框架,到最终提供一份完整的 Demo为止,争取为读者提供最大的可定制化 正文 一. 滑动删除的痛点 (1). 现有资料中

Android仿IOS回弹效果 支持任何控件

本文实例为大家分享了Android仿IOS回弹效果的具体代码,供大家参考,具体内容如下 效果图: 导入依赖: dependencies { // ... compile 'me.everything:overscroll-decor-android:1.0.4' } RecyclerView 支持线性布局和网格布局管理器(即所有原生Android布局).可以轻松适应支持自定义布局管理器. RecyclerView recyclerView = (RecyclerView) findViewByI