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");
      }
    }));

  }

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

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

(0)

相关推荐

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

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

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

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

  • Android实现滚动刻度尺效果

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

  • Android实现滑动刻度尺效果

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

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

    本文实例为大家分享了自定义RecyclerView实现不固定刻度的刻度尺的具体代码,供大家参考,具体内容如下 ##不均匀刻度效果图 ##等比例刻度效果图 实现功能目前 1.实现类似日期/分类等大小不固定的水平刻度尺效果 2.实现标准刻度尺效果 3.监听RecyclerView滑动时居中条目 4.去掉边缘阴影 定义RecyclerView public class CenterRecyclerView extends RecyclerView { //设置RecyclerView的速度 priva

  • Android自定义RecyclerView Item头部悬浮吸顶

    本文实例为大家分享了Android自定义RecyclerView Item头部悬浮吸顶的具体代码,供大家参考,具体内容如下 概述 1.自定义了一个FrameLayout,引入条目的头部布局加入到自定义FrameLayout中. 2.将RecyclerView加入FrameLayout 3.条目头部View的Alpha动画以及设置透明和不透明这个时机大多是通过打log来确定的,硬推理还是有些难. 4.当屏幕显示区域的第二条Item距离控件顶端的距离小于条目头部View高度时,就开始移动条目头部Vi

  • Android自定义recyclerView实现时光轴效果

    时光轴效果在很多app上都有出现,例如淘宝中快递的跟踪,本文将使用recyclerView实现时光轴效果,我们会到自定义控件,首先先看一下效果图: 接下来是步骤分析 1自定义属性 这个大家应该都了解了,根据我们之前的分析,直接在attrs.xml中进行声明 <declare-styleable name="TimeLine">     <attr name="beginLine" format="reference|color"

  • Android嵌套RecyclerView左右滑动替代自定义view

    以前的左右滑动效果采用自定义scrollview或者linearlayout来实现,recyclerview可以很好的做这个功能,一般的需求就是要么一个独立的左右滑动效果,要么在一个列表里的中间部分一个左右滑动效果 而列表里面也容易,只是需要解决一点小问题,个人认为值得一提的就是高度问题,一般的人采用固定死的高度,可是在列表里面展示和机型的不同,固定死的话很难保证美观,动态的高度才能解决问题的所在 首先在一个列表控件布局上添加一个recyclerview控件 <android.support.v

  • Android 使用自定义RecyclerView控件实现Gallery效果

    上篇文章给大家介绍了Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果.其实制作横向滚动的不得不说另一个控件,就是Google官方最近新增加的RecyclerView,据说是ListView的升级版本,本篇文章,首先介绍RecyclerView的用法,然后经行一定的分析:最后自定义一下RecyclerView实现我们需要的相册效果. 1.RecyclerView的基本用法 首先主Activity的布局文件: <RelativeLayout xmln

  • Android使用RecyclerView实现自定义列表、点击事件以及下拉刷新

    Android使用RecyclerView 1. 什么是RecyclerView RecyclerView 是 Android-support-v7-21 版本中新增的一个 Widgets,官方对于它的介绍则是:RecyclerView 是 ListView 的升级版本,更加先进和灵活. 简单来说就是:RecyclerView是一种新的视图组,目标是为任何基于适配器的视图提供相似的渲染方式.它被作为ListView和GridView控件的继承者,在最新的support-V7版本中提供支持. 2.

  • Android 自定义圆形带刻度渐变色的进度条样式实例代码

    效果图 一.绘制圆环 圆环故名思意,第一个首先绘制是圆环 1:圆环绘制函数 圆环API public void drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 参数说明 oval:圆弧所在的椭圆对象. startAngle:圆弧的起始角度. sweepAngle:圆弧的角度. useCenter:是否显示半径连线,true表示显示圆弧与圆心的半径连线,false表示不

  • Android自定义view实现标签栏功能(只支持固定两个标签)

    实现效果图 主要代码 完整源代码 class TabView(context: Context, attributeSet: AttributeSet?) : LinearLayout(context, attributeSet) { private lateinit var firstTab: View private lateinit var secondTab: View private val firstTabIndex = 0 private val secondTabIndex =

  • Android自定义View实现渐变色仪表盘

    前言:最近一直在学自定义View的相关知识,感觉这在Android中还是挺难的一块,当然这也是每个程序员必经之路,正好公司项目要求实现类似仪表盘的效果用于直观的显示公司数据,于是就简单的写了个demo,记录实现的过程.上篇<Android自定义View实现圆弧进度效果>简单记录了圆弧及文字的绘制,渐变色的仪表盘效果将更加升入的介绍canvas及paint的使用(如画布旋转,paint的渐变色设置等). 知识梳理 1.圆弧渐变色(SweepGradient) 2.圆弧上刻度绘制 3.指针指示当前

  • Android 自定义日期段选择控件功能(开始时间-结束时间)

    开发中碰到个需求,需要在一个空间中选择完成开始和结束时间.实现的过程走的是程序员开发的老路子,找到轮子后自己改吧改吧就成了. 当时做的时候有几个需求:1.当天为最大的结束日期,2.最大选择范围1年,3.开始时间和结束时间可以为同一天.如有其他需求实现,可以参考代码改进一下.先上效果图: 视频点击后的虚影是屏幕录制的原因.实现步骤:(如有缺失什么资源,请告知.开始时间和结束时间显示自己布局内添加就可以) 1.自定义控件属性 <declare-styleable name="MyCalenda

随机推荐