android上使用RecyclerView实现顶部悬浮标题效果的Sticky Title View

本文介绍如何使用RecyclerView在Android应用中实现顶部悬浮标题的效果,包括不规则GridView的实现、分割距离的控制以及悬浮标题的绘制。通过自定义LayoutManager、Adapter和ItemDecoration,详细阐述了整个实现过程。
摘要由CSDN通过智能技术生成

目前很多的项目都在使用顶部悬浮标题的效果,很明显,这的确是一个比较人性化,用户体验效果比较好的UI交互效果,对于这个效果,有很多种实现方式,如果说要用RecyclerView来实现一个分类信息展示,并且要用到顶部标题栏悬浮显示当前分类的效果,应该怎么实现呢?

先来看个效果。

大概就这么一个效果,建议大家看效果时候,忽略左边的list列表,因为没有做关联,左边就是一个摆设。

实现这么一个效果,需要怎么去分析和实习那呢,其实从这样一个效果来看,我个人应该会先想到这样几个问题:

1. 这种不规则的GridView的是如何实现的?

2.使用RecyclerView实现不规则GridView,每个item之间的分割距离又是如何控制实现的?

3. 这种顶部悬浮效果又是如何实现的?

这是两个主要的问题。

OK,我还是主要围绕这两个问题,一步一步来实现。

一、首先这个不规则的GridView是如何实现的呢?

我们知道首先RecyclerView在使用的时候,可以设置一个LayoutManager,LayoutManager常用的有LinearLayoutManager和GridLayoutManager,

从名字上来说,很明显,前者是更偏向实现一个横纵向的ListView,而后者更倾向实现横纵向的GridView。

那么无疑,今天主角肯定是GridLayoutManager了。

说到这里,必须要贴出今天涉及到布局文件了。

主界面的MainActivity.java的布局文件,很简单第一个RecyclerView就是左边的List,这个可以忽略,其实就是一个摆设。

我们今天的实现都在这个FrameLayout中,这个会在代码中填充成一个Fragment。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f0f0f0"
    android:orientation="horizontal"
    android:weightSum="4">

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


    <FrameLayout
        android:id="@+id/fragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3" />

</LinearLayout>

那么接下来就来贴一下Fragment的xml布局文件吧。

detail_fragment_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/detail_fragment_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/detail_recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>

</LinearLayout>


也是一样极其简单,就一个RecyclerView,今天实现这个功能就主要跟这个RecycerView打交道了。

OK,布局文件准备好了,那我们肯定要准备Grid中item 的布局文件了,可是大家通过上面的图片可以看出,里面其实是有两中不同风格的布局文件的,一个绿色的标题,

一个是黄色的item,那么这样个情况下,毫无疑问我们是要准备两个item布局文件的,一个是title的布局文件,一个普通的item布局文件。

普通item的layout布局文件:

common_rv_item.xml

<?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="50dp"
    android:gravity="center"
    android:background="@android:color/holo_orange_dark"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center" />


</LinearLayout>

title类型的laytout布局文件:

detail_title.xml

<?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="50dp"
    android:orientation="vertical">

    <TextView
        android:layout_gravity="center"
        android:id="@+id/title_textview"
        android:textSize="20sp"
        android:gravity="left|center_vertical"
        android:background="#09a33d"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

当然还有描述grid item的java bean对象。

package com.zhg.views.stickytitlerecyclerview;

/**
 * Created by User on 2017/7/21.
 */

public class DetailBean {
    private boolean isTitle;
    private String name;
    private String tag=null;

    public boolean isTitle() {
        return isTitle;
    }

    public void setTitle(boolean title) {
  • 11
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值