使用RecyclerView實現(xiàn)滾動控件

歡迎Follow我的GitHub, 關(guān)注我的簡書.

效果

本文的合集已經(jīng)編著成書，高級Android開發(fā)強化實戰(zhàn)，歡迎各位讀友的建議和指導(dǎo)。在京東即可購買：https://item.jd.com/12385680.html

Android

滾動控件的實現(xiàn)方式有很多, 使用RecyclerView也比較簡單. 做了一個簡單的年齡滾動控件, 讓我們來看看RecyclerView的使用方式, 主要有以下幾點:
(1) 對齊控件中心位置.
(2) 計算滾動距離.
(3) 高亮中心視圖.
(4) 實時顯示中心數(shù)據(jù).
(5) 停止時自動對齊.
(6) 滾動時, 設(shè)置按鈕狀態(tài)開關(guān).

1. 框架

主要關(guān)注RecyclerView部分邏輯.

    /**
     * 初始化年齡滑動條
     */
    private void initAgeList() {
        LinearLayoutManager mLayoutManager =
                new LinearLayoutManager(getActivity(), LinearLayoutManager.HORIZONTAL, false);
        mRvAgeList.setLayoutManager(mLayoutManager);
        mAgeAdapter = new PersonAgeAdapter(START_NUM, END_NUM);
        mRvAgeList.setAdapter(mAgeAdapter);
        mRvAgeList.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);

                mBDownStep.setEnabled(false);

                // 效果在暫停時顯示, 否則會導(dǎo)致重繪異常
                if (newState == RecyclerView.SCROLL_STATE_IDLE) {
                    mAgeAdapter.highlightItem(getMiddlePosition());
                    mRvAgeList.scrollToPosition(getScrollPosition());
                    mLastValue = getMiddlePosition();
                    UserInfoManager.setAge(getMiddlePosition() + START_NUM);

                    mBDownStep.setEnabled(true); // 滑動時不可用, 停止時才可以
                }
            }

            @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                // 值是實時增加
                mTvAgeValue.setText(String.valueOf(getMiddlePosition() + START_NUM));
            }
        });

        mAgeAdapter.highlightItem(getMiddlePosition());
    }

設(shè)置一個水平布局

LinearLayoutManager mLayoutManager =
                new LinearLayoutManager(getActivity(), LinearLayoutManager.HORIZONTAL, false);
        mRvAgeList.setLayoutManager(mLayoutManager);

添加Adapter, 設(shè)置起始和結(jié)束位置.

        mAgeAdapter = new PersonAgeAdapter(START_NUM, END_NUM);
        mRvAgeList.setAdapter(mAgeAdapter);

2. Adapter

Adapter定制一些功能, 如標(biāo)示指向中心位置, 數(shù)據(jù)聯(lián)動顯示, 高亮Item等.

/**
 * 年齡的適配器
 * <p>
 * Created by wangchenlong on 15/11/12.
 */
public class PersonAgeAdapter extends RecyclerView.Adapter<PersonAgeAdapter.AgeItemViewHolder> {

    public static final int ITEM_NUM = 7; // 每行擁有的Item數(shù), 必須是奇數(shù)

    private int mFrom; // 起始
    private int mTo; // 終止
    private int mHighlight = -1; // 高亮

    public PersonAgeAdapter(int from, int to) {
        mFrom = from;
        mTo = to;
    }

    @Override public AgeItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View item = LayoutInflater.from(parent.getContext()).
                inflate(R.layout.view_age_item, parent, false);

        // 設(shè)置Item的寬度
        ViewGroup.LayoutParams lp = item.getLayoutParams();
        lp.width = getItemStdWidth();

        return new AgeItemViewHolder(item);
    }

    @Override public void onBindViewHolder(AgeItemViewHolder holder, int position) {
        holder.getTextView().setText(String.valueOf(mFrom + position));

        // 高亮顯示
        if (isSelected(position)) {
            holder.getTextView().setTextSize(30);
            holder.getTextView().setTextColor(ChunyuApp.getAppContext().getResources().getColor(R.color.black));
        } else {
            holder.getTextView().setTextSize(20);
            holder.getTextView().setTextColor(ChunyuApp.getAppContext().getResources().getColor(R.color.gray_line));
        }
    }

    // 高亮中心, 更新前后位置
    public void highlightItem(int position) {
        mHighlight = position;
        int offset = ITEM_NUM / 2;
        for (int i = position - offset; i <= position + offset; ++i)
            notifyItemChanged(i);
    }

    // 判斷是否是高亮
    public boolean isSelected(int position) {
        return mHighlight == position;
    }


    @Override public int getItemCount() {
        return mTo - mFrom + 1;
    }

    // 獲取標(biāo)準(zhǔn)寬度
    public static int getItemStdWidth() {
        DisplayMetrics displayMetrics = ChunyuApp.getAppContext().getResources().getDisplayMetrics();
        return displayMetrics.widthPixels / ITEM_NUM;
    }

    // ViewHolder
    public class AgeItemViewHolder extends RecyclerView.ViewHolder {

        private TextView mTextView;

        public AgeItemViewHolder(View itemView) {
            super(itemView);

            mTextView = (TextView) itemView.findViewById(R.id.item_age_value);
            mTextView.setTag(this);
        }

        public TextView getTextView() {
            return mTextView;
        }
    }
}

每個單元格寬度是屏幕寬度的奇數(shù)分之一, 填充屏幕, 則起始指向中心.

    @Override public AgeItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View item = LayoutInflater.from(parent.getContext()).
                inflate(R.layout.view_age_item, parent, false);

        // 設(shè)置Item的寬度
        ViewGroup.LayoutParams lp = item.getLayoutParams();
        lp.width = getItemStdWidth();

        return new AgeItemViewHolder(item);
    }

單數(shù)Item數(shù)量, 則中心的指示器必指向中心Item的中心.

根據(jù)選中狀態(tài), 更新Item樣式.

    @Override public void onBindViewHolder(AgeItemViewHolder holder, int position) {
        holder.getTextView().setText(String.valueOf(mFrom + position));

        // 高亮顯示
        if (isSelected(position)) {
            holder.getTextView().setTextSize(30);
            holder.getTextView().setTextColor(ChunyuApp.getAppContext().getResources().getColor(R.color.black));
        } else {
            holder.getTextView().setTextSize(20);
            holder.getTextView().setTextColor(ChunyuApp.getAppContext().getResources().getColor(R.color.gray_line));
        }
    }

設(shè)置高亮, 把中心位置高亮, 兩邊恢復(fù), 通知Adapter重繪ViewHolder.

    // 高亮中心, 更新前后位置
    public void highlightItem(int position) {
        mHighlight = position;
        int offset = ITEM_NUM / 2;
        for (int i = position - offset; i <= position + offset; ++i)
            notifyItemChanged(i);
    }

    // 判斷是否是高亮
    public boolean isSelected(int position) {
        return mHighlight == position;
    }

notifyItemChanged()會重繪所選擇的頁面.

獲取寬度, 把一行顯示Item數(shù)量設(shè)置為單數(shù), 則中心指向一個Item.

    // 獲取標(biāo)準(zhǔn)寬度
    public static int getItemStdWidth() {
        DisplayMetrics displayMetrics = ChunyuApp.getAppContext().getResources().getDisplayMetrics();
        return displayMetrics.widthPixels / ITEM_NUM;
    }

注意RecyclerView不能移動半個單元, 每行數(shù)量是單數(shù)時, 則必會指向中心.

3. 滾動邏輯

在滾動時, 實時更新頁面顯示; 在停止時, 更新高亮和存儲數(shù)據(jù); 滾動結(jié)束時, 激活按鈕.

        mRvAgeList.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
                mBDownStep.setEnabled(false);

                // 效果在暫停時顯示, 否則會導(dǎo)致重繪異常
                if (newState == RecyclerView.SCROLL_STATE_IDLE) {
                    mAgeAdapter.highlightItem(getMiddlePosition());
                    mRvAgeList.scrollToPosition(getScrollPosition());
                    mLastValue = getMiddlePosition();
                    UserInfoManager.setAge(getMiddlePosition() + START_NUM);

                    mBDownStep.setEnabled(true); // 滑動時不可用, 停止時才可以
                }
            }

            @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                // 值是實時增加
                mTvAgeValue.setText(String.valueOf(getMiddlePosition() + START_NUM));
            }
        });

        mAgeAdapter.highlightItem(getMiddlePosition());
    }

    /**
     * 獲取中間位置
     *
     * @return 當(dāng)前值
     */
    private int getMiddlePosition() {
        return getScrollPosition() + (PersonAgeAdapter.ITEM_NUM / 2);
    }

    /**
     * 獲取滑動值, 滑動偏移 / 每個格子寬度
     *
     * @return 當(dāng)前值
     */
    private int getScrollPosition() {
        return (int) ((double) mRvAgeList.computeHorizontalScrollOffset()
                / (double) PersonAgeAdapter.getItemStdWidth());
    }

判斷滾動的距離單位, 偏移總距離/單個Item寬度.

    private int getScrollPosition() {
        return (int) ((double) mRvAgeList.computeHorizontalScrollOffset()
                / (double) PersonAgeAdapter.getItemStdWidth());
    }

computeHorizontalScrollOffset()獲取RecyclerView的偏移總位移.

中間位置, 還要加上半行Item數(shù)量

    private int getMiddlePosition() {
        return getScrollPosition() + (PersonAgeAdapter.ITEM_NUM / 2);
    }

判斷滾動是否停止.

if (newState == RecyclerView.SCROLL_STATE_IDLE)

在滾動停止時, 自動對齊.

mRvAgeList.scrollToPosition(getScrollPosition());

調(diào)用需要高亮顯示的Item.

mAgeAdapter.highlightItem(getMiddlePosition());

注意在滾動停止時, 更新高亮比較好, 否則重繪速度較慢, 會影響滾動效果.

滑動效果

推薦, 介紹RecyclerView的文章, 特別詳細(xì).

OK, 我們可以根據(jù)這些定制各式各樣的滾動條了!

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,062評論 25贊 709
  • 簡介： 提供一個讓有限的窗口變成一個大數(shù)據(jù)集的靈活視圖。 術(shù)語表： Adapter：RecyclerView的子類...
    酷泡泡閱讀 5,378評論 0贊 16
  • 簡介 RecyclerView在24.2.0版本中新增了SnapHelper這個輔助類，用于輔助RecyclerV...
    辰之貓閱讀 155,923評論 66贊 618
  • 聽著她放的 薛之謙的 別， 別坦白， 別勇敢 剛剛好，在她不在的時候我剛聽過 她出去玩了，回來的...
    MMa_f259閱讀 193評論 0贊 0
  • 趙明喜歡開著燈睡覺。 他的房子很大，其實原先看起來沒這么大，只是粉刷的時候涂了藍(lán)色，設(shè)計師說：這是一種后退色。果然...
    連卿閱讀 397評論 0贊 5

友情鏈接更多精彩內(nèi)容