京东分类android实现_Android仿购物阅读类app的分类界面

本文标题是仿购物阅读类app的分类界面,因为大多数app的分类界面都是这样,尤购物类阅读类居多。本文效果是仿京东阅读分类界面。

之前无意安装了京东阅读,无意中看到了一个分类界面,感觉效果很好,就想写下来。于是乎有了下面的效果。写好了好长时间了,终于今天找个时间把这个记录下来。

效果图

京东阅读分裂界面的效果图

436a7464d8da7b8e15c4c4276fb190f7.gif

Demo效果图

e55ad822e5423c30bf2fa7054d12a421.gif

刚开始写的时候想了个思路是左边利用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们。

  @Override    public void onLeftItemClick(int position) {        taskPasition = dataTitle.get(position);        List 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"?>    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/white_1"    android:orientation="horizontal">            android:id="@+id/rv_recycler_view_left"        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1">            android:id="@+id/rv_recycler_view_right"        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="3">

另外注意,如果你使用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;    }

源码地址:

https://github.com/student9128/ImitateJDReaderDemo

到这里就结束啦.

6dd9982f951ecbafe2bd8aba8e394cd4.png

dea9577bb77cb7070b55d149057c2b5c.png

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值