前言
android开发过程中,我们经常会用到RecyclerView,今天让我们来学习一个RecyclerView的辅助类----SnapHelper,并用它来撸一个"刻度尺"。
今天涉及的内容
- SnapHelper是什么
- SnapHelper子类
- RuleView实现逻辑及在MainActivity中的使用
- 效果图和项目结构图
- 相关代码
先来波效果图吧
一.SnapHelper是什么
SnapHelper主要的作用是辅助操控RecyclerView的Fling过程,是Google 在 Android 24.2.0 的support 包中添加的对RecyclerView的拓展,结合RecyclerView使用,能很方便的做出一些炫酷的效果。
二.SnapHelper子类
SnapHelper作为一个抽象类,其下有两个实现类:LinearSnapHelper 和 PagerSnapHelper。前者的效果是在RecyclerView滚动停止时对齐中间,其效果类似ViewPager但是一次可以滚动多页,另一个PagerSnapHelper的话则是一次只能滚动一页。
下面看看 LinearSnapHelper 和 PagerSnapHelper的使用:
//LinearSnapHelper的使用
SnapHelper snapHelper1=new LinearSnapHelper();
snapHelper1.attachToRecyclerView(mRecyclerView);
//PagerSnapHelper的使用
SnapHelper snapHelper2=new PagerSnapHelper();
snapHelper2.attachToRecyclerView(mRecyclerView);
基本使用很简单,下面让我们基于SnapHelper特性,用其子类LinearSnapHelper实现一个横向"刻度尺"。
三. RuleView实现逻辑及在MainActivity中的使用
3.1 RuleView实现逻辑分析
要撸一个“刻度尺”,游标展示在中间位置,然后要有一个可以来回滑动的列表。游标要居中,于是选择使用LinearSnapHelper实现滑动效果。
实现横向"刻度尺"需如下三步:
- 自定义一个RuleView控件,采用FrameLayout布局,将列表和游标重叠布局。
- 设置列表数据的时候测算数据位置,使得被选中的数据能正确显示在游标下
- 列表滚动结束后,更新游标选中值。
RuleView由游标,列表组成,其布局rule_layout.xml代码如下:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.0"
android:background="@color/red"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2.0"/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.0"/>
</LinearLayout>
</FrameLayout>
RuleView中涉及到RecyclerView展示列表数据, 为了监听刻度尺滑动停止时的值,继承LinearSnapHelper写一个MyLinearSnapHelper。
在RuleView中设置数据的时候,调用update()方法测算显示位置,并设置初始值。
然后写一个适配器RuleAdapter,用于设置list列表时数据的更新。下面给出
RuleView代码:
/**
* Title:刻度尺
* description:
* autor:pei
* created on 2019/9/25
*/
public class RuleView extends FrameLayout {
private View mLayoutView;
private Context mContext;
private RecyclerView mRecyclerView;
private List<String> mData;
private RuleAdapter<String>mRuleAdapter;
private String mTarget;//当前显示内容
private Handler mHandler=new Handler();
public RuleView(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
mLayoutView = LayoutInflater.from(context).inflate(R.layout.rule_layout, this);
this.mContext = context;
initView();
initData();
}
private void initView(){
mRecyclerView=mLayoutView.findViewById(R.id.rv);
}
private void initData(){
mData=new ArrayList<>();
mRuleAdapter=new RuleAdapter<>(mData,mContext);
LinearLayoutManager manager = new LinearLayoutManager(mContext);
manager.setSmoothScrollbarEnabled(true);
manager.setOrientation(LinearLayoutManager.HORIZONTAL);
mRecyclerView.setNestedScrollingEnabled(false);
mRecyclerView.setHasFixedSize(true);
mRecyclerView.setLayoutManager(manager);
mRecyclerView.setAdapter(mRuleAdapter);
//设置滑动效果
SnapHelper snapHelper=new MyLinearSnapHelper();
snapHelper.attachToRecyclerView(mRecyclerView);
((MyLinearSnapHelper) snapHelper).setOnFindObject(new MyLinearSnapHelper.OnFindObject() {
@Override
public void findView(View view) {
String content = ((TextView) view).getText().toString();
mTarget=content;
mRuleAdapter.setIndex(getIndex(content));
mRuleAdapter.notifyDataSetChanged();
}
});
}
public void setData(List<String> data){
if(mData==null){
mData=new ArrayList<>();
}
if(data==null||data.isEmpty()){
return;
}
mData.clear();
mData.addAll(data);
mRuleAdapter.notifyDataSetChanged();
update();
}
private int getIndex(String content){
for (int i = 0; i < mData.size(); i++) {
if(mData.get(i).equals(content)){
return i;
}
}
return RuleAdapter.DEFAULT_INDEX;
}
public String getTargetData(){
return mTarget;
}
}
3.2 MainActivity中调用RuleView
先在activity_main.xml中引用控件:
<com.example.rule.RuleView
android:id="@+id/view_rule"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#00ff00"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btn1"/>
在MainActivity中调用示例如下:
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Button mBtn1;
private Button mBtn2;
private RuleView mRuleView;
private List<String> mNames;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
setListener();
}
private void initData() {
mBtn1 = findViewById(R.id.btn1);
mBtn2 = findViewById(R.id.btn2);
mBtn1.setText("显示");
mBtn2.setText("测试");
//初始化mRuleView
mRuleView = findViewById(R.id.view_rule);
//给mRuleView设置数据
mNames = new ArrayList<>();
for (int i = 0; i <18; i++) {
mNames.add(i+"岁");
}
mRuleView.setData(mNames);
}
private void setListener() {
mBtn1.setOnClickListener(this);
mBtn2.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn1:
//获取mRuleView当前游标值
String content=mRuleView.getTargetData();
LogUtil.i("=====TargetData==="+content);
ToastUtil.shortShow(content);
break;
case R.id.btn2://清空
break;
default:
break;
}
}
}
四. 效果图和项目结构图
效果图
项目结构图