仿購物閱讀類app的分類界面

本文標題是仿購物閱讀類app的分類界面，由於大多數app的分類界面都是這樣，尤購物類閱讀類居多。本文效果是仿京東閱讀分類界面。

以前無心安裝了京東閱讀，無心中看到了一個分類界面，感受效果很好，就想寫下來。因而乎有了下面的效果。寫好了好長時間了，終於今天找個時間把這個記錄下來。

效果圖

上面是京東閱讀分裂界面的效果圖，

Demo效果圖

剛開始寫的時候想了個思路是左邊利用RecyclerView,右邊使用Fragment，後來發現這個思路不可取，並且麻煩。其實兩邊利用兩個Fragment是能夠的，這樣想是因爲平板上一般使用左右兩個fragment。可是後來想到直接使用兩個RecyclerView分別顯示在左右兩邊不是更簡單。因此這裏的效果是直接使用兩個RecyclerView分別顯示在左右兩邊來實現的。
這裏遇到了倆問題，第一個就是點擊左側，切換的狀況，由於左側有個帶顏色的豎條，不是簡單的加狀態選擇器就能夠實現的。
這裏稍微想了下，經過以下方法實現的。或許有的同窗有更好的方法，還請告知下。

代碼

@Override
    public void onBindViewHolder(final MyViewHolder holder, final int position) {
        holder.textView.setText(data.get(position));
        holder.textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                index = position;
                if (listener != null) {
                    listener.onLeftItemClick(position);
                }
                notifyDataSetChanged();
            }
        });
        if (index == position) {
            holder.textView.setBackgroundColor(ContextCompat.getColor(context, R.color.white_1));
            holder.textView.setTextColor(ContextCompat.getColor(context, R.color.blue));
            holder.viewLine.setVisibility(View.VISIBLE);
        } else {
            holder.textView.setBackgroundColor(ContextCompat.getColor(context, R.color.white));
            holder.textView.setTextColor(ContextCompat.getColor(context, R.color.black));
            holder.viewLine.setVisibility(View.GONE);
        }
    }

這裏我經過定義一個index來切換點擊和爲點擊的效果。

第二個問題就是怎麼讓點擊的條目滑動到頂部。這裏也上網搜了一番，找了一個代碼，可是有bug，沒法實現平穩滑動的效果。這裏在原有基礎上改了一點點。因爲這個代碼寫的時間有點長了，實在不知道在怎麼找到原做者了，否則必定會附上連接，這裏表示抱歉.

這裏主要實現平穩滑動的關鍵是使用了插值器LinearInterpolator()勻速滑動

下面附上關鍵代碼：

下面是點擊左邊實現滑動的關鍵代碼。其餘代碼詳細搭建都會寫，就是RecyclerView們和他們的adapter們。o(￣︶￣)o

@Override
    public void onLeftItemClick(int position) {
        taskPasition = dataTitle.get(position);
        List<String> lineType = new ArrayList<>();
        for (int i = 0; i < Math.random() * 10; i++) {
            lineType.add(Integer.parseInt(new DecimalFormat("0").format(Math.random() * 10)) + "");
        }
        indexQueryRightAdapter.updateData(lineType);
        scrollToTop(position);
    }

    @Override
    public void onRightItemClick(int position) {

//        showToast("You clicked:\t" + position);
        ToastUtils.showKevinToast(this, "You clicked:\t" + position, R.drawable.ic_tip);
    }

    private void scrollToTop(int n) {
        //先從RecyclerView的LayoutManager中獲取第一項和最後一項的Position
        int firstItem = mLinearLayoutManager.findFirstVisibleItemPosition();
        int lastItem = mLinearLayoutManager.findLastVisibleItemPosition();
        printLogd("firstItem:\t" + firstItem);
        printLogd("lastItem:\t" + lastItem);
        //而後區分狀況
        if (n <= firstItem) {
            //當要置頂的項在當前顯示的第一個項的前面時
//            rvRecyclerView.scrollToPosition(n);//有bug
            mRecyclerView.smoothScrollBy(0, mRecyclerView.getChildAt(n - firstItem).getTop(), new LinearInterpolator());
        } else if (n <= lastItem) {
            //當要置頂的項已經在屏幕上顯示時
            int top = mRecyclerView.getChildAt(n - firstItem).getTop();//當前情景下其實只執行這行代碼，能夠不區分狀況
            mRecyclerView.smoothScrollBy(0, top, new LinearInterpolator());
//            mRecyclerView.smoothScrollToPosition(n);
        } else {
            //當要置頂的項在當前顯示的最後一項的後面時
            mRecyclerView.scrollToPosition(n);
        }
    }

看到佈局就會發現真的很簡單

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white_1"
    android:orientation="horizontal">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_recycler_view_left"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"></android.support.v7.widget.RecyclerView>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_recycler_view_right"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"></android.support.v7.widget.RecyclerView>
</LinearLayout>

是否是很簡單?

另外注意，若是你使用RecyclerView不多，這裏提醒下須要注意到的坑。

@Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.adapter_item_recycler_left, parent, false);//注意此處不要用(@ResLayout resLayout,null)這樣的形式
        MyViewHolder myViewHolder = new MyViewHolder(view);
        return myViewHolder;

    }

有喜歡效果裏那個Toast效果的的能夠參見這裏(^o^)/~

Demo下載

github