!!自定义view实现仿淘宝菜单栏底部进度条联动
先看效果图
是你想要的 往下翻
上Demo :先看布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="300dp"
android:id="@+id/recycler"
/>
<RelativeLayout
android:layout_width="200dp"
android:layout_height="5dp"
android:id="@+id/seekBar"
android:layout_centerHorizontal="true"
android:layout_below="@id/recycler"
android:layout_marginTop="10dp"
android:background="#DBDBE2">
<com.wd.demo.CustomView
android:id="@+id/custom"
android:layout_alignParentLeft="true"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</RelativeLayout>
自定义 view 类 上来粘
package com.wd.demo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import androidx.annotation.Nullable;
public class CustomView extends View {
/**
*mX : 进度条左边的边 mWidth :
* mPaint 初始化画笔
* */
private float mX, mWidth;
private Paint mPaint;
public CustomView(Context context) {
super(context);
initPaint();
}
public CustomView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
initPaint();
}
//初始化画笔
private void initPaint(){
mPaint = new Paint();
mPaint.setColor(Color.RED);
}
/**
* 获取到外面的宽度
* */
public void setBgWidth(float width){
mWidth = width;
}
/**
* 获取外面滑动触摸的响应
* */
public void setSideX(float x){
if(mWidth <= 0){
return;
}
mX += x;
//在主线程做刷新重复调用 onDraw();
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
RectF rectF = new RectF();
rectF.left = getLeft() + mX;
rectF.right = rectF.left +mWidth;
rectF.top = getTop();
rectF.bottom = getBottom();
canvas.drawRoundRect(rectF, 0, 0, mPaint);
}
}
Activity Demo
public class MainActivity extends AppCompatActivity {
private RecyclerView mRecyclerView;
private List<UserBean> mUserBeanList = new ArrayList<>();
private CustomView mCustomView;
private RelativeLayout mRelativLayout;
int windowWidth;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//获取手机屏幕宽度
Resources resources = this.getResources();
DisplayMetrics dm = resources.getDisplayMetrics();
windowWidth = dm.widthPixels;
mRecyclerView = findViewById(R.id.recycler);
mRelativLayout = findViewById(R.id.seekBar);
mCustomView = findViewById(R.id.custom);
for (int i = 0; i < 20; i++) {
mUserBeanList.add(new UserBean("仿淘宝", R.mipmap.ic_launcher));
}
MyAdapter myAdapter = new MyAdapter(mUserBeanList, this);
GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 2, RecyclerView.HORIZONTAL, false);
mRecyclerView.setLayoutManager(gridLayoutManager);
mRecyclerView.setAdapter(myAdapter);
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
}
@Override
public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
change(dx);
}
});
}
@Override
protected void onResume() {
super.onResume();
mCustomView.post(new Runnable() {
@Override
public void run() {
change(0);
}
});
}
/**
* change() 根据mRecyclerViewWith的宽度,动态的计算进度条的宽度
* */
private void change(int dx){
//mRecyclerView的宽度
int mRecyclerViewWith = mRecyclerView.computeHorizontalScrollRange();
//mRelativLayout宽度
int relativLayoutWidth = mRelativLayout.getWidth();
//根据屏幕宽度除以RecycleView宽度,获取百分比,通过百分比乘以RelativLayout宽度,动态计算滑动条显示宽度
float f = (float) windowWidth / mRecyclerViewWith;
//计算的得出进度条的位置
float width = relativLayoutWidth * f;
//设置给自定义进度条的右边
mCustomView.setBgWidth(width);
//根据屏幕宽度除以RecycleView宽度,获取百分比 再 乘以 relativLayout的宽度减去 自定义进度条的宽度,就得到了当前的进度
float a = (float) dx / (mRecyclerViewWith - windowWidth ) * (relativLayoutWidth - width);
//把这个进度设置给进度条左边的边
mCustomView.setSideX(a);
}
}
Adapter (这里面没做什么东西)
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
private List<UserBean> mUserBeanList;
private Context mContext;
public MyAdapter(List<UserBean> userBeanList, Context context) {
mUserBeanList = userBeanList;
mContext = context;
}
@NonNull
@Override
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View inflate = LayoutInflater.from(mContext).inflate(R.layout.item, null);
return new MyViewHolder(inflate);
}
@Override
public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
holder.mTextView.setText("仿淘宝");
holder.mImageView.setImageResource(R.mipmap.ic_launcher);
}
@Override
public int getItemCount() {
if (mUserBeanList.size() >0){
return mUserBeanList.size();
}else{
return 0;
}
}
public class MyViewHolder extends RecyclerView.ViewHolder {
private final ImageView mImageView;
private final TextView mTextView;
public MyViewHolder(@NonNull View itemView) {
super(itemView);
mImageView = itemView.findViewById(R.id.iv);
mTextView = itemView.findViewById(R.id.textView);
}
}
}
Bean类
package com.wd.demo;
public class UserBean {
private String name;
private int imageUrl;
public UserBean(String name, int imageUrl) {
this.name = name;
this.imageUrl = imageUrl;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getImageUrl() {
return imageUrl;
}
public void setImageUrl(int imageUrl) {
this.imageUrl = imageUrl;
}
}
就是这么多了 !!
有初学者想学习一下实现方案的可继续向下滑
一 : 首先 我们要获取手机屏幕的宽度 ,不管你是什么手机 都要获取
二: 其次给recyclerView设置监听 在第二个方法里得到dx X轴的位置,让其在resume这个对用户可以进行交互的生命周期中回到最开始的位置 也就是设置 0
通过自定义的mCustomView 给主线程发送消息 让其在滑动的时候不停的调用chang方法
三: 获取RecyclerView的宽度 跟获取 RelativLayout的宽度,再用列表的长度 /手 机的宽度得到一个百分比,将这个百分比乘以父布局的宽度就是进度条的宽度了,这样再多的列表也怕进度条会太大啦,再将这个数据给自定义的view赋值给左边的边,一直调用在主线程做刷新的方法就会一直绘制view做边的位置,在通过获取右边的一直绘制这右边的位置~~