Android练手完整项目app(三)商品分类+流式布局Tag

2023-11-19

在这里插入图片描述
在这里插入图片描述

1.整体布局,结合项目(一)在FunctionFragment创建整体布局。搜索框布局应该include引入,这里我就没单独抽取。

<?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:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:gravity="center"
        android:background="@color/home_top_bg">
        <RelativeLayout
            android:id="@+id/search_part"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:background="@drawable/bg_search">

            <ImageView
                android:id="@+id/searchImg"
                android:layout_width="10dp"
                android:layout_height="10dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="12dp"
                android:src="@mipmap/home_search_icon" />

            <EditText
                android:id="@+id/inputData"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginLeft="7dp"
                android:layout_toRightOf="@+id/searchImg"
                android:background="@null"
                android:hint="请输入关键字进行搜索"
                android:imeOptions="actionSearch"
                android:maxLength="10"
                android:paddingLeft="3dp"
                android:singleLine="true"
                android:textColor="@color/black"
                android:textColorHint="@color/black"
                android:textSize="16sp" />
        </RelativeLayout>
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/fun_recy"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#F2F3F7"
            android:layout_weight="1"/>
        <FrameLayout
            android:id="@+id/fun_framelayout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:background="@color/white"/>

    </LinearLayout>

</LinearLayout>

2.左侧列表适配器和item布局

public class FunRecyAdapter extends RecyclerView.Adapter<FunRecyAdapter.ViewHolder> {
    private Context context;
    private   List<Fun_Bean.DatasBean> data;

    public FunRecyAdapter(Context context,   List<Fun_Bean.DatasBean> data) {
        this.context = context;
        this.data = data;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View inflate = LayoutInflater.from(context).inflate(R.layout.fun_recy_item, parent, false);
        ViewHolder viewHolder = new ViewHolder(inflate);
        return viewHolder;
    }

    @SuppressLint("ResourceAsColor")
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        holder.itemView.setId(position);
        holder.tv.setText(data.get(position).getShowName());

        if(data.get(position).isCheck()){
            holder.itemView.setBackgroundResource(R.drawable.act_recy_bg);
            holder.tv.setTextColor(Color.parseColor("#FF6600"));

        }else{
            holder.itemView.setBackgroundColor(Color.parseColor("#DDDDDD"));
            holder.tv.setTextColor(Color.parseColor("#FF000000"));
        }

        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mSelectorListener.onSelect(view,position);
            }
        });

    }

    @Override
    public int getItemCount() {
        return data.size()==0?0:data.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder{

        private final TextView tv;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            tv = itemView.findViewById(R.id.tv);
        }
    }
    public interface OnSelectorListener{
        void onSelect(View view,int position);
    }
    public void setOnSelectorListener(OnSelectorListener listener){
        mSelectorListener=listener;
    }
    private OnSelectorListener mSelectorListener;
}

fun_recy_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="wrap_content"
    android:minHeight="60dp"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

</LinearLayout>

3.创建右侧具体分类列表fragement-FunRightFragment

public class FunRightFragment extends Fragment {

    private RecyclerView mRecy;
    private Fun_Bean.DatasBean info;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fun_right_fg, null);
        mRecy = view.findViewById(R.id.fun_right_fg_rcy);
        //得到数据
        info = (Fun_Bean.DatasBean) getArguments().getSerializable("info");
        initViews();
        return view;
    }
    private void initViews() {
        // 设置布局管理器
        mRecy.setLayoutManager(new LinearLayoutManager(getActivity(), LinearLayoutManager.VERTICAL, false));
        List<Fun_Bean.DatasBean.ItemDTO> item = info.getItem();
        // 实例化Adapter对象
        Fun_Right_recy_Adapter adapter = new Fun_Right_recy_Adapter(getActivity(), item);
        // 设置Adapter
        mRecy.setAdapter(adapter);
        adapter.notifyDataSetChanged();


  }
}

fun_right_fg.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="match_parent"
    android:orientation="vertical">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/fun_right_fg_rcy"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Fun_Right_recy_Adapter,右侧fragment里面列表的适配器,这个列表里面就是流式布局

public class Fun_Right_recy_Adapter extends RecyclerView.Adapter<Fun_Right_recy_Adapter.ViewHolder> {
    private Context context;
    private List<Fun_Bean.DatasBean.ItemDTO> data;

    public Fun_Right_recy_Adapter(Context context,   List<Fun_Bean.DatasBean.ItemDTO> data) {
        this.context = context;
        this.data = data;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View inflate = LayoutInflater.from(context).inflate(R.layout.fun_right_fg_item, parent, false);
        ViewHolder viewHolder = new ViewHolder(inflate);
        return viewHolder;
    }

    @SuppressLint("ResourceAsColor")
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        holder.tv_title.setText(data.get(position).getTitle());
        // flexbox布局动态添加标签
        List<Fun_Bean.DatasBean.ItemDTO.TabDTO> tags = data.get(position).getTab();
        for (int i = 0; i < tags.size(); i++) {
            String temp = tags.get(i).getQ();
            View tagView = LayoutInflater.from(context).inflate(R.layout.item_tag_cell, null, false);
            TextView tag = tagView.findViewById(R.id.tv_tag);
            tag.setText(temp);
            // 设置标签点击事件
            tag.setOnClickListener(view -> itemCellClicker.onItemClick(temp));
            holder.flexbox_layout.addView(tagView);
        }






    }

    @Override
    public int getItemCount() {
        return data.size()==0?0:data.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder{

        private final TextView tv_title;
        private final FlexboxLayout flexbox_layout;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            tv_title = itemView.findViewById(R.id.tv_title);
            flexbox_layout = itemView.findViewById(R.id.flexbox_layout);
        }
    }
    public interface ItemCellClicker{
        void onItemClick(String tag);
    }

    // 流式布局标签点击事件
    public ItemCellClicker itemCellClicker;
    // 设置点击事件回调
    public void setItemCellClicker(ItemCellClicker itemCellClicker){
        this.itemCellClicker = itemCellClicker;
    }
}


fun_right_fg_item.xml 右侧fragment列表的子布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp">

    <TextView
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:id="@+id/tv_title"
        android:text="Hello android"
        android:textSize="20sp"
        android:textColor="@color/black"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <!--流式布局-->
    <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexbox_layout"
        android:orientation="horizontal"
        app:flexWrap="wrap"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

item_tag_cell.xml 是流式布局子布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp">

    <TextView
        android:id="@+id/tv_tag"
        android:paddingHorizontal="12dp"
        android:gravity="center"
        android:background="@drawable/flow_item_bg"
        android:text="Hello android"
        android:textSize="20sp"
        android:textColor="@color/black"
        android:layout_width="wrap_content"
        android:layout_height="32dp"/>

</LinearLayout>

4.绑定适配,创建Fragment,自己写假数据

public class FunctionFragment extends Fragment {

    private RecyclerView mRecy;
    private FunRecyAdapter mAdater;
    FunRightFragment functionFragment;
    private FragmentTransaction fragmentTransaction;
    private Bundle mBundle;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View inflate = inflater.inflate(R.layout.frg_function, container, false);

        return inflate;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        initView(view);
    }

    private void initView(View view) {
        mRecy = view.findViewById(R.id.fun_recy);
        mRecy.setLayoutManager(new LinearLayoutManager(getActivity(), LinearLayoutManager.VERTICAL, false));
        String response="创建个json。。。。自己写吧";
        Fun_Bean fun_bean = new Gson().fromJson(response, Fun_Bean.class);
        mAdater = new FunRecyAdapter(getActivity(), fun_bean.getData());
        mRecy.setAdapter(mAdater);
        fun_bean.getData().get(0).setCheck(true);

        //创建Fragment对象
        functionFragment = new FunRightFragment();
        fragmentTransaction = getActivity().getSupportFragmentManager().beginTransaction();
        fragmentTransaction.replace(R.id.fun_framelayout, functionFragment);

        //传递数据到Fragment
        mBundle = new Bundle();
        mBundle.putSerializable("info", fun_bean.getData().get(0));
        functionFragment.setArguments(mBundle);
        fragmentTransaction.commit();

        mAdater.setOnSelectorListener((view1, position) -> {
            Fun_Bean.DatasBean datasBean = fun_bean.getData().get(position);
            for (int i = 0; i < fun_bean.getData().size(); i++) {
                if (fun_bean.getData().get(i).getShowName().equals(datasBean.getShowName())) {
                    fun_bean.getData().get(i).setCheck(true);
                } else {
                    fun_bean.getData().get(i).setCheck(false);
                }
            }
            mAdater.notifyDataSetChanged();
            //右侧fragment
            //创建Fragment对象
            functionFragment = new FunRightFragment();
            fragmentTransaction = getActivity().getSupportFragmentManager().beginTransaction();
            fragmentTransaction.replace(R.id.fun_framelayout, functionFragment);

            //传递数据到Fragment
            mBundle = new Bundle();
            mBundle.putSerializable("info", fun_bean.getData().get(position));
            functionFragment.setArguments(mBundle);
            fragmentTransaction.commit();
        });

    }
  //流式布局
    implementation 'com.google.android.flexbox:flexbox:3.0.0'

本分类模块,主要练习流式布局,常用于历史搜索及各类型分类

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Android练手完整项目app(三)商品分类+流式布局Tag 的相关文章

随机推荐

  • 刷脸支付技术更多的是想要助力数字化运营

    刷脸支付是在原有的收银系统基础上增加一种收款方式 不影响收银系统 收银更有效 支付更便捷 体验感更好 节省时间成本 资金更安全 支付宝 微信官方为推广刷脸支付 两大官方投入巨额资金普及刷脸支付 日常生活中可避免忘记带手机 手机没电 通话中
  • C++17中utf-8 character literal的使用

    一个形如42的值被称作字面值常量 literal 这样的值一望而知 每个字面值常量都对应一种数据类型 字面值常量的形式和值决定了它的数据类型 由单引号括起来的一个字符称为char型字面值 双引号括起来的零个或多个字符则构成字符串型字面值 字
  • 两万字带你认识黑客在kali中使用的工具

    目录 前言 一 信息收集工具 二 脆弱性分析工具 三 漏洞利用工具 四 嗅探与欺骗工具 五 密码攻击工具 六 权限提升工具 七 Web应用工具 八 无线攻击工具 九 硬件黑客工具 十 维持访问工具 十一 取证工具 十二 逆向工程工具 十三
  • Linux动态链接库.so文件的创建与使用

    1 介绍 使用GNU的工具我们如何在Linux下创建自己的程序函数库 一个 程序函数库 简单的说就是一个文件包含了一些编译好的代码和数据 这些编译好的代码和数据可以在事后供其他的程序使用 程序函数库可以使整个程序更加模块化 更容易重新编译
  • Qt 简述QSettings配置文件保存使用数据

    前言 在开发中 需要将一些信息保存到本地 以便下次程序启动时使用 文件读写 数据库都是可以的 但是Qt提供了QSettings接口方法 将需要的信息写入或者读取配置文件中 其方法类似键值对 QSettings可以存储一系列设置 每个设置包括
  • 探讨Socks5代理IP在跨境电商与网络游戏中的网络安全应用

    随着全球互联网的迅猛发展 跨境电商和在线游戏成为了跨国公司和游戏开发商的新战场 然而 与此同时 网络安全问题也日益突出 本文将探讨如何利用Socks5代理IP来增强跨境电商和网络游戏的网络安全 保障数据传输的隐私和安全性 第一部分 Sock
  • 五分钟,带你彻底掌握 MyBatis 缓存的工作原理

    点击上方 芋道源码 选择 设为星标 管她前浪 还是后浪 能浪的浪 才是好浪 每天 8 55 更新文章 每天掉亿点点头发 源码精品专栏 原创 Java 2020 超神之路 很肝 中文详细注释的开源项目 RPC 框架 Dubbo 源码解析 网络
  • Quartz框架多个trigger任务执行出现漏执行的问题分析

    一 问题描述 使用Quartz配置定时任务 配置了超过10个定时任务 这些定时任务配置的触发时间都是5分钟执行一次 实际运行时 发现总有几个定时任务不能执行到 二 示例程序 1 简单介绍 采用spring quartz整合方案实现定时任务
  • docker菜鸟入门

    菜鸟入门Docker 说明 一 什么是Docker 1 虚拟机和Linux容器 二 Docker用途 三 Docker安装 1 设置仓库 2 安装 Docker Engine Community 3 验证安装成功 四 Docker启动与停止
  • VoVNet论文解读

    摘要 1 介绍 2 高效网络设计的影响因素 2 1 内存访问代价 2 2 GPU计算效率 3 建议的方法 3 1 重新思考密集连接 3 2 One Shot Aggregation 3 3 构建 VoVNet 网络 4 实验 5 代码解读
  • 01背包(c++版)

    dp i j 表示从下标为 0 i 的物品里任意取 放进容量为j的背包 价值总和最大是多少 void test 2 wei bag problem1 vector
  • 上班族为何需要做副业?如何靠副业月入过万?

    网上统计某某城市平均工资8千以上 诶 一看自己3 4千 其实现在每个背井离乡在外上班的打工人都挺难的 城市很繁华 工资很现实 在工厂打螺丝的更是苦逼的生活 被资本家无情的压榨 在豪华的写字楼上班的白领 也过着996的生活 甚至是007的日子
  • 操作系统复习题

    一 选择题 在计算机系统中 操作系统是 核心系统软件 网络操作系统 不是基本的操作系统 实时性 不是分时系统的基本特征 关于操作系统的叙述 能方便用户编程的程序 是不正确的 操作系统的发展过程是 设备驱动程序组成的原始操作系统 管理程序 操
  • Response 456错误

    今天使用某share拉取股票数据时 遇到了Response 456错误 然而在网上查也没有查到 感觉是是较为少见的错误 http response code HTTP状态码对照表 t 332741160的专栏 CSDN博客 后来发现这个错误
  • 【Bun1.0】使用 Bun.js 构建快速、可靠和安全的 JavaScript 应用程序

    bun js Bun 是一个现代的JavaScript运行环境 如Node Deno 主要特性如下 启动速度快 更高的性能 完整的工具 打包器 转码器 包管理 官网 https bun sh 优点 与传统的 Node js 不同 Bun j
  • python数据分析与挖掘实战 -第四章数据预处理

    数据清洗 目的 删除原始数据集中的无关数据 重复数据 平滑噪声数据 筛选掉与挖掘主题无关的数据 处理缺失值 异常值等 缺失值处理方法 删除记录 数据插补和不处理 拉格朗日插值法 对于平面上已知的N个点 无两点在一条直线上 可以找到一个N 1
  • 解决vue中样式不起作用:样式穿透/深度选择器(/deep/)

    原因1 组件内部使用组件 添加了scoped属性 原因2 动态引入html 也添加了scoped属性 原因3 非以上两种 一 添加了scoped属性 Vue中的scoped属性的效果主要是通过PostCss实现的 以下是转译前的代码
  • 关于数据结构中的叶节点和二度节点的关系(通俗的理解)。

    简单记录一下自己的一些地方和对于这个问题我的一些见解 有说的不好的地方欢迎指正 这里只给出一种理解 另一种利用公式进行理解的 我就不写了 因为csdn里面太多了 先说结论 叶节点的数目 二度节点 1 首先来看这张图 可以看到这个图大体是包含
  • redis 基础概述与使用

    目录 一 redis 概述 redis 主从同步执行流程 redis 淘汰策略 缓存常见问题 KEYS指令与SCAN指令 SpringBoot 整合 redis StringRedisTemplate 与 RedisTemplate red
  • Android练手完整项目app(三)商品分类+流式布局Tag

    1 整体布局 结合项目 一 在FunctionFragment创建整体布局 搜索框布局应该include引入 这里我就没单独抽取