Android RecyclerView 之 列表宫格布局的切换

前言

RecyclerView 的使用我就不再多说,接下来的几篇文章主要说一下 RecyclerView 的实用小功能,包括 列表宫格的切换,吸顶效果,多布局效果等,今天这篇文章就来实现一下列表宫格的切换,效果如下


一、数据来源

数据来源于知乎日报API,采用 okhttp+retrofit 组合方式请求获取,网络请求没有进行二次封装,只是简单请求数据源,对于有需求的用户自行进行封装修改。

二、使用步骤

1.引入库

  //万能适配器
  implementation 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.50'
  //卡片布局
  implementation 'androidx.cardview:cardview:1.0.0'
  //图片加载
  implementation 'com.github.bumptech.glide:glide:4.9.0'
  //json解析
  implementation 'com.alibaba:fastjson:1.2.61'
  //标题栏
  implementation 'com.github.goweii:ActionBarEx:3.2.2'
  // 只引入ActionBarEx
  implementation 'com.github.goweii.ActionBarEx:actionbarex:3.2.2'
  // 引入ActionBarCommon/Search/Super,依赖于ActionBarEx
  implementation 'com.github.goweii.ActionBarEx:actionbarex-common:3.2.2'

2.获取数据

 使用如下 URL 进行数据请求:API 使用的 HTTP Method 均为 GET

https://news-at.zhihu.com/api/3/news/hot

响应实例:

{
    "recent": [
        {
            "news_id": 3748552,
            "thumbnail": "http://p3.zhimg.com/67/6a/676a8337efec71a100eea6130482091b.jpg",
            "title": "长得漂亮能力出众性格单纯的姑娘为什么会没有男朋友?",
            "url": "http://daily.zhihu.com/api/2/news/3748552"
        }
    ]
}

根据实例生成实体类 NewsListBean 实现序列换接口 Serializable

public class NewsListBean implements Serializable {

    private String date;
    private List<Recent> recent;


    public String getDate() {
        return date;
    }

    public void setDate(String date) {
        this.date = date;
    }

    public List<Recent> getRecent() {
        return recent;
    }

    public void setRecent(List<Recent> recent) {
        this.recent = recent;
    }

    public static class Recent implements Serializable {
        private String news_id;
        private String thumbnail;
        private String title;
        private String url;

        public String getNews_id() {
            return news_id;
        }

        public void setNews_id(String news_id) {
            this.news_id = news_id;
        }

        public String getThumbnail() {
            return thumbnail;
        }

        public void setThumbnail(String thumbnail) {
            this.thumbnail = thumbnail;
        }

        public String getTitle() {
            return title;
        }

        public void setTitle(String title) {
            this.title = title;
        }

        public String getUrl() {
            return url;
        }

        public void setUrl(String url) {
            this.url = url;
        }
    }
}

写一个 接口类用来管理 API ,可以单独放在一个文件夹下

public interface ApiUrl {

    @GET("/api/4/news/hot")
    Call<NewsListBean> getPic();

}

3.主要代码

1 activity_main.xml

这里使用了三方库  ActionBarEx 实现了沉浸式标题栏,使用了系统的 ProgressBar 实现请求加载框

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

    <per.goweii.actionbarex.ActionBarEx
        android:id="@+id/abc_main_return"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#14a4fb"
        app:ab_autoImmersion="false"
        app:ab_bottomLineColor="#f3f3f3"
        app:ab_bottomLineHeight="0dp"
        app:ab_statusBarColor="#00000000"
        app:ab_statusBarMode="dark"
        app:ab_statusBarVisible="true"
        app:ab_titleBarHeight="50dp"
        app:ab_titleBarLayout="@layout/top" />

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

    <ProgressBar
        android:id="@+id/progressbar"
        style="@style/Base.Widget.AppCompat.ProgressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="gone" />
</RelativeLayout>

2 zh_item_layout.xml

列表子布局 ,采用 CardView 卡片布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/zh_card_View"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/dp_10"
    android:layout_marginTop="10dp"
    android:layout_marginRight="@dimen/dp_10"
    android:layout_marginBottom="@dimen/dp_10"
    app:cardBackgroundColor="#ffffff"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="false">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="120dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/transparent">

            <ImageView
                android:id="@+id/news_image"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_centerVertical="true"
                android:layout_margin="10dp"
                android:elevation="2dp"
                android:scaleType="fitXY" />

            <TextView
                android:id="@+id/news_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginStart="10dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="10dp"
                android:layout_toEndOf="@id/news_image"
                android:ellipsize="end"
                android:maxEms="15"
                android:singleLine="true"
                android:textColor="@color/black"
                android:textSize="20sp" />
        </RelativeLayout>
    </RelativeLayout>


</androidx.cardview.widget.CardView>

3 zh_grid__item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/zh_card_View"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:layout_marginLeft="@dimen/dp_10"
    android:layout_marginTop="10dp"
    android:layout_marginRight="@dimen/dp_10"
    android:layout_marginBottom="@dimen/dp_10"
    app:cardBackgroundColor="#ffffff"
    app:cardCornerRadius="10dp"
    app:cardElevation="10dp"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="false">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/transparent"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="@dimen/dp_10">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3">

            <ImageView
                android:id="@+id/news_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center">

            <TextView
                android:id="@+id/news_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:maxEms="8"
                android:singleLine="true"
                android:textColor="@color/black"
                android:textSize="20sp" />

        </LinearLayout>


    </LinearLayout>


</androidx.cardview.widget.CardView>

4 NewsListAdapter 适配器

public class NewsListAdapter extends BaseQuickAdapter<NewsListBean.Recent, BaseViewHolder> {

    public NewsListAdapter(int layoutResId, @Nullable List<NewsListBean.Recent> data) {
        super(layoutResId, data);
    }

    @Override
    protected void convert(@NonNull BaseViewHolder helper, NewsListBean.Recent item) {
        helper.setText(R.id.news_title, item.getTitle());
        String img = item.getThumbnail();
        ImageView newsImage = helper.getView(R.id.news_image);
        Glide.with(mContext).
                asBitmap().
                load(img).
                diskCacheStrategy(DiskCacheStrategy.ALL).
                into(newsImage);
        helper.addOnClickListener(R.id.zh_card_View);
    }


}

5 BaseActivity 基类

public abstract class BaseActivity extends AppCompatActivity {


    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        Window window = getWindow();
        // 5.0以上系统状态栏透明
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(Color.TRANSPARENT);
        }
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                // 全屏显示,隐藏状态栏和导航栏,拉出状态栏和导航栏显示一会儿后消失。
                window.getDecorView().setSystemUiVisibility(
                        View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                                // | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                                | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                                // | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                                // | View.SYSTEM_UI_FLAG_FULLSCREEN
                                | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
            } else {
                // 全屏显示,隐藏状态栏
                window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_FULLSCREEN);
            }
        }
        //预防软键盘挡住输入框
        getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
        //禁止横屏
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
        super.onCreate(savedInstanceState);

    }

  
}

6 MainActivity 主要代码 

这里主要通过一个 boolean 值 isGrid 来判断是否切换状态来加载不同的布局,以及布局管理器来达到实际效果

public class MainActivity extends BaseActivity {

    private RecyclerView zhLv;
    private ProgressBar proBar;
    private NewsListAdapter adapter;


    private List<NewsListBean.Recent> mList = new ArrayList<>();


    private static final int REQUEST_EXTERNAL_STORAGE = 1;
    private static String[] PERMISSIONS_STORAGE = {
            Manifest.permission.READ_EXTERNAL_STORAGE,
            Manifest.permission.WRITE_EXTERNAL_STORAGE};
    private ImageView menuBtn;
    private LinearLayoutManager layoutManager;
    private ImageView btnImg;
    private LinearLayout backLayoput;

    public static void verifyStoragePermissions(Activity activity) {
        int permission = ActivityCompat.checkSelfPermission(activity,
                Manifest.permission.WRITE_EXTERNAL_STORAGE);
        if (permission != PackageManager.PERMISSION_GRANTED) {
            ActivityCompat.requestPermissions(activity, PERMISSIONS_STORAGE,
                    REQUEST_EXTERNAL_STORAGE);
        }
    }

    private boolean isGrid = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        verifyStoragePermissions(MainActivity.this);
        initView();
        initData();

        menuBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                switchLayout();
            }
        });
    }


    private void switchLayout() {

        if (isGrid) {
            layoutManager = new LinearLayoutManager(this);
            adapter = new NewsListAdapter(R.layout.zh_item_layout, mList);
            zhLv.setAdapter(adapter);
        } else {
            layoutManager = new GridLayoutManager(this, 2);
            adapter = new NewsListAdapter(R.layout.zh_grid__item_layout, mList);
            zhLv.setAdapter(adapter);
        }
        zhLv.setLayoutManager(layoutManager);
        isGrid = !isGrid;
    }

    private void initView() {
        zhLv = findViewById(R.id.zh_lv);
        proBar = findViewById(R.id.progressbar);
        menuBtn = findViewById(R.id.btn_main_menu);
        btnImg = findViewById(R.id.btn_main_menu);
        backLayoput = findViewById(R.id.btn_back_layout);
        backLayoput.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        layoutManager = new LinearLayoutManager(MainActivity.this);
        zhLv.setLayoutManager(layoutManager);
        adapter = new NewsListAdapter(R.layout.zh_item_layout, mList);
        zhLv.setAdapter(adapter);
    }

    private void initData() {
        proBar.setVisibility(View.VISIBLE);
        Retrofit retrofit = new Retrofit.Builder()
                .baseUrl("https://news-at.zhihu.com/")
                //设置数据解析器
                .addConverterFactory(GsonConverterFactory.create())
                .build();
        ApiUrl apiUrl = retrofit.create(ApiUrl.class);
        Call<NewsListBean> call = apiUrl.getPic();
        call.enqueue(new Callback<NewsListBean>() {
                         @Override
                         public void onResponse(Call<NewsListBean> call, Response<NewsListBean> response) {

                             List<NewsListBean.Recent> recent = response.body().getRecent();
                             if (response.body() != null && recent.size() > 0) {
                                 try {
                                     mList.addAll(recent);
                                     adapter.setNewData(mList);
                                     proBar.setVisibility(View.GONE);
                                 } catch (Exception e) {
                                     String message = e.getMessage();
                                     e.printStackTrace();
                                 }
                             }
                         }

                         @Override
                         public void onFailure(Call<NewsListBean> call, Throwable t) {
                             Log.e("mmm", "errow " + t.getMessage());
                         }
                     }
        );


    }


}

总结

一个小小的很实用的功能就完成了,下一篇文章会接着实现RecyclerView 吸顶效果,后续还会加上列表本地缓存等功能,Demo 在此系列文章完结附上,不妨点赞收藏哦~

青山不改,绿水长流 有缘江湖再见 ~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/99801.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

大数据之Maven

一、Maven的作用 作用一&#xff1a;下载对应的jar包 避免jar包重复下载配置&#xff0c;保证多个工程共用一份jar包。Maven有一个本地仓库&#xff0c;可以通过pom.xml文件来记录jar所在的位置。Maven会自动从远程仓库下载jar包&#xff0c;并且会下载所依赖的其他jar包&…

uniapp项目实践总结(六)自定义顶部导航栏

本篇主要讲述如何自定义顶部导航栏,有时候默认导航栏不足以满足我们的需求,这时候就需要自定义导航栏来解决这个问题。 目录 默认导航修改配置自定义顶部默认导航 自带的默认顶部导航设置的内容有限,不容易扩展修改,因此如果有更加个性化的需求,则需要自定义顶部导航。 …

QT基础使用:组件和代码关联(信号和槽)

自动关联 ui文件在设计环境下&#xff0c;能看到的组件可以使用鼠标右键选择“转到槽”就是开始组件和动作关联。 在自动关联这个过程中软件自动动作的部分 需要对前面头文件进行保存&#xff0c;才能使得声明的函数能够使用。为了方便&#xff0c;自动关联时先对所有文件…

Windows如何部署Redis

一、简介 Redis (Remote Dictionary Server) 是一个由意大利人 Salvatore Sanfilippo 开发的 key-value 存储系统&#xff0c;具有极高的读写性能&#xff0c;读的速度可达 110000 次/s&#xff0c;写的速度可达 81000 次/s 。 二、下载 访问 https://github.com/tporadows…

IDEA集成Git相关操作知识(pull、push、clone)

一&#xff1a;集成git 1&#xff1a;初始化git&#xff08;新版本默认初始化&#xff09; 老版本若没有&#xff0c;点击VCS&#xff0c;选中import into Version Controller中的Create git Repository(创建git仓库)&#xff0c;同理即可出现git符号。 也可查看源文件夹有没有…

Apifox-比postman更优秀的接口自动化测试平台

一、Apifox介绍 Apifox 是 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台&#xff0c;定位 Postman Swagger Mock JMeter。通过一套系统、一份数据&#xff0c;解决多个系统之间的数据同步问题。只要定义好 API 文档&#xff0c;API 调试、API 数据 Mock、AP…

【Cortex-M3权威指南】学习笔记4 - 异常

目录 实现 CM3流水线CM3 详细框图CM3 总线接口总线连接模板 异常异常类型优先级定义优先级组 向量表中断输入于挂起NMI中断挂起 Fault 类异常总线 faults存储器管理 faults用法 faults SVC 与 PendSV 实现 CM3 流水线 CM3 处理器使用 3 级流水线&#xff0c;分别是&#xff1a;…

ERROR(IMPSP-365) innovus加endcap失败问题解析

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f; 拾陆楼知识星球入口 ERROR(IMPSP-365)&#xff1a;Design has inst with SITE (xx_site)&#xff0c;but the floorplan has no rows defined for this site.Any location for such instance will …

jsch网页版ssh

使用依赖 implementation com.jcraft:jsch:0.1.55Server端代码 import com.jcraft.jsch.Channel; import com.jcraft.jsch.JSch; import com.jcraft.jsch.Session; import java.io.InputStream; import java.io.OutputStream; import java.util.concurrent.TimeUnit; import o…

【状态估计】基于UKF法、AUKF法、EUKF法电力系统三相状态估计研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

在k8s中用label控制Pod部署到指定的node上

案例-标注k8s-node1是配置了SSD的节点 kubectl label node k8s-node1 disktypessd 查看标记 测试 将pod部署到disktypessd的节点上&#xff08;这里设置了k8s-node1为ssd&#xff09; 部署后查看结果-副本全都运行在了k8s-node1上—符合预期 删除标记 kubectl label node k8…

Linux 进程基础概念-进程状态、进程构成、进程控制

Linux 进程 参考&#xff1a; 「linux操作系统」进程的切换与控制到底有啥关系&#xff1f; - 知乎 (zhihu.com)&#xff0c;Linux进程解析_deep_explore的博客-CSDN博客&#xff0c;腾讯面试&#xff1a;进程的那些数据结构 - 知乎 (zhihu.com)&#xff0c;如何在Linux下的进…

算法通过村第四关-栈黄金笔记|表达式问题

文章目录 前言1. 计算器问题2. 逆波兰表达式问题 总结 前言 提示&#xff1a;快乐的人没有过去&#xff0c;不快乐的人除了过去一无所有。 --理查德弗兰纳根《深入北方的小路》 栈的进阶来了&#xff0c;还记得栈的使用场景吗&#xff1f;表达式和符号&#xff0c;这不就来了 1…

【LeetCode-中等题】437. 路径总和 III

文章目录 题目方法一&#xff1a;迭代层序 每层节点dfs 维护一个count变量 题目 方法一&#xff1a;迭代层序 每层节点dfs 维护一个count变量 思路&#xff1a; 层序遍历每一个节点遍历一个节点就对这个节点进行dfsdfs的同时&#xff0c;维护一个count变量&#xff0c;并且…

ARDUINO STM32 SSD1306

STM32F103XX系列SPI接口位置 在ARUDINO 下&#xff0c;&#xff08;不需要设置引脚功能&#xff0c;不需要开启时钟设置&#xff0c;ARDUINO已经帮我们处理了&#xff09; stm32f103c6t6 flash不足&#xff0c;不足以运行U8G2,产生错误 改用U8X8&#xff0c;后将字体改为u8x8_…

Ubuntu 22.04安装 —— Win11 22H2

目录 Ubuntu使用下载UbuntuVmware 安装图示安装步骤图示 Ubuntu使用 系统环境&#xff1a; Windows 11 22H2Vmware 17 ProUbutun 22.04.3 Server Ubuntu Server documentation | Ubuntu 下载 Ubuntu 官网下载 建议安装长期支持版本 ——> 可以选择桌面版或服务器版(仅包…

基于侏儒猫鼬算法优化的BP神经网络(预测应用) - 附代码

基于侏儒猫鼬算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于侏儒猫鼬算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.侏儒猫鼬优化BP神经网络2.1 BP神经网络参数设置2.2 侏儒猫鼬算法应用 4.测试结果&#xff1a;5…

基于JAVAEE技术的ssm校园车辆管理系统源码和论文

基于JAVAEE技术的ssm校园车辆管理系统源码和论文105 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 1.选题背景和意义 背景&#xff1a; 随着第二次工业革命后&#xff0c;内燃机的发明与完善&#xff0c;解…

原生js实现轮播图及无缝滚动

我这里主要说轮播图和无缝滚动的实现思路&#xff0c;就采用最简单的轮播图了&#xff0c;当然实现的思路有很多种&#xff0c;我这也只是其中一种。 简单轮播图的大概结构是这样的&#xff0c;中间是图片&#xff0c;二边是箭头可以用来切换图片&#xff0c;下面的小圆点也可以…

three.js(九):内置的路径合成几何体

路径合成几何体 TubeGeometry 管道LatheGeometry 车削ExtrudeGeometry 挤压 TubeGeometry 管道 TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean) path — Curve - 一个由基类Curve继承而来的3D路径。 De…