移动开发第二次作业——实现顶部悬浮的滑动列表

顶部悬浮的滑动列表

一、本项目完成的功能
在上次作业类微信app中的一个可切换页面中实现下述功能:
1.用列表显示若干个英语音乐剧和法语音乐剧，以及它们的剧目名称
2.实现顶部悬浮功能，即向上滑动展示下面的内容时，分组名可以在顶部悬浮，直到该分组内容向上滑动退出屏幕页面，分组名跟随分组内容退出屏幕页面

二、布局文件
在第一次实验的基础上需要修改一个xml文件，增加两个xml文件
1.在上次作业中的tab02.xml文件中，删除TextView，拖入RecyclerView，此时系统会自动导入RecyclerView相关的依赖包

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/rcv_sticky"android:layout_width="match_parent"android:layout_height="wrap_content"android:overScrollMode="never"android:scrollbars="none" /><include layout="@layout/sticky_include_recycle_item" /></RelativeLayout>

2.新建两个item.xml文件，内容为TextView，用来显示分组名和分组内容

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/tv_sticky_header_view"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/colorAccent"android:padding="20dp"android:textColor="@android:color/white"android:textSize="30sp"tools:text="@string/app_name" />

<?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="wrap_content"android:orientation="vertical"><include layout="@layout/sticky_include_recycle_item" /><TextViewandroid:id="@+id/tv_novel"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="17dp"android:text="@string/app_name"android:textSize="25sp"/></LinearLayout>

三、核心代码
在第一次实验的基础上需要修改一个java文件，增加两个java文件
1.在第一次实验中的frdFragment文件中，重新编写有关函数，新建initList函数向列表中插入文字信息，新建initData函数通过拆分上述列表中的文字信息，向StickyData类中写入数据。

    private void initList() {mList.add("英语音乐剧|Hamliton");mList.add("英语音乐剧|悲惨世界");mList.add("英语音乐剧|歌剧魅影");mList.add("英语音乐剧|春之觉醒");mList.add("英语音乐剧|致埃文汉森");mList.add("英语音乐剧|近乎正常");mList.add("英语音乐剧|猫");mList.add("英语音乐剧|吉屋出租");mList.add("英语音乐剧|理发师陶德");mList.add("英语音乐剧|芝加哥");mList.add("英语音乐剧|律政俏佳人");mList.add("英语音乐剧|魔法坏女巫");mList.add("英语音乐剧|身在高地");mList.add("英语音乐剧|舞动人生");mList.add("英语音乐剧|小美人鱼");mList.add("法语音乐剧|摇滚莫扎特");mList.add("法语音乐剧|摇滚红与黑");mList.add("法语音乐剧|巴黎圣母院");mList.add("法语音乐剧|1789");mList.add("法语音乐剧|小王子");mList.add("法语音乐剧|罗密欧与朱丽叶");mList.add("法语音乐剧|唐璜");mList.add("法语音乐剧|乱世佳人");}private void initData() {for (int i = 0; i < mList.size(); i++) {StickyData bean = new StickyData();String s = mList.get(i);String group = s.substring(0, s.indexOf("|"));String novel = s.substring(s.indexOf("|") + 1, s.length());bean.setGroup(group);bean.setNovel(novel);mDataList.add(bean);}Log.d(TAG, "initData: " + mDataList.size());}

新建addOnScrollListener函数实现吸顶效果，最后在主函数中依次实现这些方法即可。

   private void initView() {final adapter adapter = new adapter(getActivity());RecyclerView rcvSticky = (RecyclerView) view.findViewById(R.id.rcv_sticky);final TextView tvArea = (TextView) view.findViewById(R.id.tv_sticky_header_view);rcvSticky.setLayoutManager(new LinearLayoutManager(getActivity()));rcvSticky.setHasFixedSize(true);rcvSticky.setAdapter(adapter);adapter.setStickyDataList(mDataList);rcvSticky.addOnScrollListener(new RecyclerView.OnScrollListener() {@Overridepublic void onScrolled(RecyclerView recyclerView, int dx, int dy) {super.onScrolled(recyclerView, dx, dy);View stickyInfoView = recyclerView.findChildViewUnder(tvArea.getMeasuredWidth() / 2, 5);if (stickyInfoView != null && stickyInfoView.getContentDescription() != null) {tvArea.setText(String.valueOf(stickyInfoView.getContentDescription()));}View transInfoView = recyclerView.findChildViewUnder(tvArea.getMeasuredWidth() / 2, tvArea.getMeasuredHeight() + 1);if (transInfoView != null && transInfoView.getTag() != null) {int transViewStatus = (int) transInfoView.getTag();int dealtY = transInfoView.getTop() - tvArea.getMeasuredHeight();if (transViewStatus == adapter.HAS_STICKY_VIEW) {if (transInfoView.getTop() > 0) {tvArea.setTranslationY(dealtY);} else {tvArea.setTranslationY(0);}} else if (transViewStatus == adapter.NONE_STICKY_VIEW) {tvArea.setTranslationY(0);}}}});}

2.新建适配器adapter.java文件，通过implement加入几个必要的方法，根据实际需求重写这些方法即可。

package com.example.myapplication;import android.content.Context;
import android.text.TextUtils;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;import java.util.List;public class adapter extends RecyclerView.Adapter<adapter.StickyViewHolder> {private static final String TAG = adapter.class.getSimpleName();private Context mContext;private List<StickyData> mList;public static final int FIRST_STICKY_VIEW = 1;public static final int HAS_STICKY_VIEW = 2;public static final int NONE_STICKY_VIEW = 3;public adapter(Context context) {mContext = context;}public void setStickyDataList(List<StickyData> list) {mList = list;notifyDataSetChanged();}@NonNull@Overridepublic StickyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {View view = LayoutInflater.from(mContext).inflate(R.layout.sticky_recycle_item, parent, false);return new StickyViewHolder(view);}@Overridepublic void onBindViewHolder(@NonNull StickyViewHolder holder, int position) {StickyData stickyData = mList.get(position);holder.tvTeam.setText(stickyData.getNovel());if (position == 0) {holder.tvArea.setVisibility(View.VISIBLE);holder.tvArea.setText(stickyData.group);holder.itemView.setTag(FIRST_STICKY_VIEW);} else {if (!TextUtils.equals(stickyData.group, mList.get(position - 1).group)) {holder.tvArea.setVisibility(View.VISIBLE);holder.tvArea.setText(stickyData.group);holder.itemView.setTag(HAS_STICKY_VIEW);} else {holder.tvArea.setVisibility(View.GONE);holder.itemView.setTag(NONE_STICKY_VIEW);}}holder.itemView.setContentDescription(stickyData.group);}@Overridepublic int getItemCount() {return mList == null ? 0 : mList.size();}public class StickyViewHolder extends RecyclerView.ViewHolder {TextView tvArea, tvTeam;public StickyViewHolder(View itemView) {super(itemView);tvArea = itemView.findViewById(R.id.tv_sticky_header_view);tvTeam = itemView.findViewById(R.id.tv_novel);}}
}

最后写一个简单的StickyData类，作为frdFragment中使用数据的接口。

package com.example.myapplication;public class StickyData {public String group;public String novel;public String getGroup() {return group;}public void setGroup(String group) {this.group = group;}public String getNovel() { return novel;  }public void setNovel(String novel) {this.novel = novel;}
}

四、效果展示

五、代码实现
附上源码链接：https://gitee.com/CieloSs/mobile-development-myapplication

移动开发第二次作业——实现顶部悬浮的滑动列表相关推荐

实时控制软件开发第二次作业总结
作业地址评分细则本次作业总分10分按时交 - 有分晚交 - 扣本次作业所得分一半分抄袭 - 0分不交 - 0分按照demo1的readme做到第四步GDB调试,第5步trace要等板子到 ...
自学IOS开发第3天·基础SwiftUI之动态滑动列表(上)
文章目录基础SwiftUI之动态滑动列表 UI构建创建模型 BlogerData.swift 创建 JSON文件创建 Model.swift 附稿基础SwiftUI之动态滑动列表我完全跟着S ...
实现recycleView页面的跳转设计（移动开发第二次作业）
实现recycleView页面的跳转设计文章目录实现recycleView页面的跳转设计一.实现功能二.核心技术三.具体实现 1.新建与item条目对应的activity 2.设计.xml界 ...
20189200余超 2018-2019-2 移动平台应用开发实践第二周作业
2018-2019-2 移动平台应用开发实践第二周作业实验部分,在linux中用git命令将代码传到码云上成功上传的截图码云上的截图遇到如下的问题解决方法我发现在进行第一步git clon ...
开源软件开发导论第二次作业
这个作业的要求是:https://bbs.csdn.net/topics/608215808 我提问的项目是:https://gitcode.net/csdn/csdn-datav 1.关于项目无法在 ...
结对第二次作业--编程实现
这个作业属于哪个课程软件工程实践2023年春季学期这个作业要求在哪里结对第二次作业–编程实现结对学号 222000114_222000116 这个作业的目标使用web技术实现原型中的功能其 ...
20189317 《网络攻防技术》第二周作业
一.黑客信息 (1)国外黑客 1971年,卡普尔从耶鲁大学毕业.在校期间,他专修心理学.语言学以及计算机学科.也就是在这时他开始对计算机萌生兴趣.他继续到研究生院深造.20世纪60年代,退学是许多人的 ...
2017软件工程实践第二次作业（数独）
我的Github项目地址,使用工具VS2017社区版 / DevC++5.11,开发语言为C语言基础题要求如下,附加题不会做就不贴出来了...: 项目需求利用程序随机构造出 N 个已解答的数独棋盘 ...
软件工程第二周作业
##软件工程第二周作业提出问题 1. 一般来说,想要自己的程序跑得又快又好,就要减少函数的反复调用,但有所得则必有所失,效能提高就有可能伴随着程序的稳定性的降低,这两者应该如何权衡呢? 2. 关于5 ...

移动开发第二次作业——实现顶部悬浮的滑动列表

移动开发第二次作业——实现顶部悬浮的滑动列表相关推荐

最新文章

热门文章