仿购物阅读类app的分类界面

Lucky_Boy 发布于2019-06-25 11:33 / 3046人阅读

摘要：本文标题是仿购物阅读类的分类界面，因为大多数的分类界面都是这样，尤购物类阅读类居多。本文效果是仿京东阅读分类界面。之前无意安装了京东阅读，无意中看到了一个分类界面，感觉效果很好，就想写下来。

本文标题是仿购物阅读类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 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:	" + position);
        ToastUtils.showKevinToast(this, "You clicked:	" + position, R.drawable.ic_tip);
    }

    private void scrollToTop(int n) {
        //先从RecyclerView的LayoutManager中获取第一项和最后一项的Position
        int firstItem = mLinearLayoutManager.findFirstVisibleItemPosition();
        int lastItem = mLinearLayoutManager.findLastVisibleItemPosition();
        printLogd("firstItem:	" + firstItem);
        printLogd("lastItem:	" + 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);
        }
    }

看到布局就会发现真的很简单

是不是很简单?

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

idc机房托管服务器托管图形界面的分类 iOS购物分类模块阅读APP 多类分类

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/13889.html

高仿 - 收藏集 - 掘金

摘要：自定义仿京东手势解锁掘金早上看个，忘了吃饭，最后定位到的问题，反馈了。动画仿新浪微博雷达搜索效果掘金前言在应用中使用动画，可以给用户带来良好的交互体验。掘金该应用内容灵感来源于应用。自定义 view——仿京东手势解锁 - Android - 掘金早上看个bug，忘了吃饭，最后定位到ROM的问题，反馈了。忙完了是时候享受了，现在戴上耳机，写个清爽点的文章。虽然很简单，刷刷存在感也好啊，...

jasperyang 2019-06-25 11:22 评论0 收藏0
小程序之仿小米商城Lite

摘要：嗯这句话就是作为第一次做仿小程序项目的我，历经磨难得出来的肺腑之言。作为想要走上代码这条不归路的程序员，心浮气躁就是为以后整个项目给自己挖坑奠定了良好的基础。前言关于小程序，在这里有一句话送给正准备阅读的你-世界上本没有坑，路走的多了就有了；世界上本没有路，坑填的多了就有了。嗯~~~这句话就是作为第一次做仿小程序项目的我，历经‘磨难’得出来的肺腑之言。好了，不多说，进入正...

Lsnsh 2019-08-29 15:37 评论0 收藏0
小程序之仿小米商城Lite

摘要：嗯这句话就是作为第一次做仿小程序项目的我，历经磨难得出来的肺腑之言。作为想要走上代码这条不归路的程序员，心浮气躁就是为以后整个项目给自己挖坑奠定了良好的基础。前言关于小程序，在这里有一句话送给正准备阅读的你-世界上本没有坑，路走的多了就有了；世界上本没有路，坑填的多了就有了。嗯~~~这句话就是作为第一次做仿小程序项目的我，历经‘磨难’得出来的肺腑之言。好了，不多说，进入正...

wow_worktile 2019-08-26 12:01 评论0 收藏0
小程序之仿小米商城Lite

摘要：嗯这句话就是作为第一次做仿小程序项目的我，历经磨难得出来的肺腑之言。作为想要走上代码这条不归路的程序员，心浮气躁就是为以后整个项目给自己挖坑奠定了良好的基础。前言关于小程序，在这里有一句话送给正准备阅读的你-世界上本没有坑，路走的多了就有了；世界上本没有路，坑填的多了就有了。嗯~~~这句话就是作为第一次做仿小程序项目的我，历经‘磨难’得出来的肺腑之言。好了，不多说，进入正...

Kahn 2019-08-05 14:06 评论0 收藏0
项目 - 收藏集 - 掘金

摘要：掘金非官方的知乎日报，一款基于的。项目实战跟小一起做菜鸟音乐高仿网易云音乐今日力推厨客趣刻掘金一厨客简介，厨客，是一款查询搜索分类收藏菜谱功能的。 Android 教你打造独一无二的刷新加载框架 - Android - 掘金其实早在去年七月，群里小伙伴就有让我共享这个。但我当时绝的技术不纯熟。代码有bug什么的。没有写出来。现在感觉整理的差不多了。就写出来让大家看看，有问题一起讨论解决...

jcc 2019-06-25 11:26 评论0 收藏0