仿微信读书APP滑动指示条，随弹窗弯曲成箭头形状

2023-07-09 17:51:40

打造个性化滑动指示条，引领美观与交互体验

简介

在当今移动互联网时代，打造个性化、美观的APP界面成为吸引用户、提升用户体验的关键因素。滑动指示条作为一种常见的设计元素，在APP中起着重要的导航和进度展示作用。为了满足用户的个性化需求和提升APP的整体美感，很多开发者都希望能够自定义滑动指示条的外观和动画效果。其中，仿微信读书APP的滑动指示条就是一个非常受欢迎的设计。

一、自定义滑动指示条

自定义滑动指示条需要涉及两个主要方面：

1. 定义指示条外观属性

我们需要定义指示条的外观属性，包括宽度、高度、颜色、圆角半径等。这些属性将决定指示条的基本视觉效果。

2. 绘制指示条

在自定义View中，需要重写onDraw()方法来绘制指示条。根据定义的属性，我们可以使用画布操作来绘制出所需的指示条形状和样式。

二、实现滑动效果

滑动效果是指示条的关键功能之一。我们需要监听RecyclerView的滚动事件，并在滚动过程中更新指示条的属性，使指示条与RecyclerView的滚动同步移动。

三、添加动画效果

动画效果可以提升指示条的交互体验。我们可以添加一个动画对象，在指示条移动时启动动画，使指示条的移动过程更加流畅和美观。

四、完整代码示例

// IndicatorView.java

public class IndicatorView extends View {

    // 指示条属性
    private int mIndicatorWidth;
    private int mIndicatorHeight;
    private int mIndicatorColor;
    private int mIndicatorCornerRadius;

    // 动画属性
    private ValueAnimator mAnimator;
    private float mStartY;
    private float mEndY;

    public IndicatorView(Context context) {
        super(context);
        init();
    }

    public IndicatorView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
        initAttrs(attrs);
    }

    public IndicatorView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
        initAttrs(attrs);
    }

    private void init() {
        // 初始化默认属性
        mIndicatorWidth = 100;
        mIndicatorHeight = 10;
        mIndicatorColor = Color.RED;
        mIndicatorCornerRadius = 0;

        // 初始化动画对象
        mAnimator = ValueAnimator.ofFloat(0, 1);
        mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // 更新动画过程中的指示条位置
                float fraction = animation.getAnimatedFraction();
                float currentY = mStartY + (mEndY - mStartY) * fraction;
                setTranslationY(currentY);
            }
        });
    }

    private void initAttrs(AttributeSet attrs) {
        // 从XML属性中获取自定义属性
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.IndicatorView);
        mIndicatorWidth = typedArray.getDimensionPixelSize(R.styleable.IndicatorView_indicatorWidth, 100);
        mIndicatorHeight = typedArray.getDimensionPixelSize(R.styleable.IndicatorView_indicatorHeight, 10);
        mIndicatorColor = typedArray.getColor(R.styleable.IndicatorView_indicatorColor, Color.RED);
        mIndicatorCornerRadius = typedArray.getDimensionPixelSize(R.styleable.IndicatorView_indicatorCornerRadius, 0);
        typedArray.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 绘制指示条
        Paint paint = new Paint();
        paint.setColor(mIndicatorColor);
        paint.setStyle(Paint.Style.FILL);
        paint.setAntiAlias(true);
        RectF rectF = new RectF(0, 0, mIndicatorWidth, mIndicatorHeight);
        canvas.drawRoundRect(rectF, mIndicatorCornerRadius, mIndicatorCornerRadius, paint);
    }

    public void setIndicatorWidth(int indicatorWidth) {
        this.mIndicatorWidth = indicatorWidth;
        invalidate();
    }

    public void setIndicatorHeight(int indicatorHeight) {
        this.mIndicatorHeight = indicatorHeight;
        invalidate();
    }

    public void setIndicatorColor(int indicatorColor) {
        this.mIndicatorColor = indicatorColor;
        invalidate();
    }

    public void setIndicatorCornerRadius(int indicatorCornerRadius) {
        this.mIndicatorCornerRadius = indicatorCornerRadius;
        invalidate();
    }

    public void startAnimation(float startY, float endY) {
        mStartY = startY;
        mEndY = endY;
        mAnimator.setDuration(300);
        mAnimator.start();
    }

    public void updateAnimation(float fraction) {
        float currentY = mStartY + (mEndY - mStartY) * fraction;
        setTranslationY(currentY);
    }
}

// MainActivity.java

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private IndicatorView mIndicatorView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mRecyclerView = findViewById(R.id.recycler_view);
        mIndicatorView = findViewById(R.id.indicator_view);

        // 设置RecyclerView的布局管理器和适配器
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        mRecyclerView.setAdapter(new MyAdapter());

        // 监听RecyclerView的滚动事件，更新指示条位置
        mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                float fraction = mRecyclerView.computeVerticalScrollOffset() / (float) mRecyclerView.computeVerticalScrollRange();
                mIndicatorView.updateAnimation(fraction);
            }
        });
    }

    private class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_view, parent, false);
            return new ViewHolder(view);
        }

        @Override
        public void onBindViewHolder(ViewHolder holder, int position) {
            holder.textView.setText("Item " + position);
        }

        @Override
        public int getItemCount() {
            return 100;
        }

        class ViewHolder extends RecyclerView.ViewHolder {

            TextView textView;

            ViewHolder(View itemView) {
                super(itemView);
                textView = itemView.findViewById(R.id.text_view);
            }
        }
    }
}