iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Flexbox+ReclyclerView实现流式布局
  • 246
分享到

Flexbox+ReclyclerView实现流式布局

2024-04-02 19:04:59 246人浏览 安东尼
摘要

本文实例为大家分享了Flexbox+ReclyclerView实现流式布局的具体代码,供大家参考,具体内容如下 效果: module build.gradle引入 implem

本文实例为大家分享了Flexbox+ReclyclerView实现流式布局的具体代码,供大家参考,具体内容如下

效果:

module build.gradle引入


implementation 'com.Google.Android.flexbox:flexbox:3.0.0'

布局

activity_main.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">

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


</LinearLayout>

MainActivity


package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;
import android.util.Log;
import android.view.View;

import com.google.android.flexbox.FlexDirection;
import com.google.android.flexbox.FlexWrap;
import com.google.android.flexbox.FlexboxLayoutManager;
import com.google.android.flexbox.JustifyContent;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RecyclerView rv_Flexbox;
    private List<String> list_data;
    private FlexBoxAdapter fAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        rv_Flexbox = (RecyclerView)findViewById(R.id.rv_Flexbox);
        FlexboxLayoutManager flexboxLayoutManager = new FlexboxLayoutManager(this);
        //flexDirection 属性决定主轴的方向(即项目的排列方向)。类似 LinearLayout 的 vertical 和 horizontal。
        flexboxLayoutManager.setFlexDirection(FlexDirection.ROW);//主轴为水平方向,起点在左端。
        //flexWrap 默认情况下 Flex 跟 LinearLayout 一样,都是不带换行排列的,但是flexWrap属性可以支持换行排列。
//        flexboxLayoutManager.setFlexWrap(FlexWrap.WRAP);//按正常方向换行
        //justifyContent 属性定义了项目在主轴上的对齐方式。
//        flexboxLayoutManager.setJustifyContent(JustifyContent.FLEX_START);//交叉轴的起点对齐。
        rv_Flexbox.setLayoutManager(flexboxLayoutManager);

        list_data = new ArrayList<>();
        list_data.add("小米手机");
        list_data.add("平衡車");
        list_data.add("无人机");
        list_data.add("神舟笔记本电脑");
        list_data.add("小鹏汽车");
        list_data.add("特斯拉");
        fAdapter = new FlexBoxAdapter(this,list_data);
//        fAdapter.notifyDataSetChanged();
        rv_Flexbox.setAdapter(fAdapter);

        fAdapter.setOnItemClickLitener(new FlexBoxAdapter.OnItemClickLitener() {
            @Override
            public void OnItemClick(View view, int positon) {
                Log.e("wy", "position: "+positon+"  data:" + list_data.get(positon));
            }
        });
    }
}

FlexBoxAdapter


package com.example.myapplication;

import android.content.Context;
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 FlexBoxAdapter extends RecyclerView.Adapter<FlexBoxAdapter.myHolder> {

    private Context mContext;
    private List<String> list_data;
    private LayoutInflater inflater;

    public FlexBoxAdapter(Context mContext, List<String> list_data) {
        this.mContext = mContext;
        this.list_data = list_data;
        this.inflater = LayoutInflater.from(mContext);
    }

    @NonNull
    @Override
    public myHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {

        View view = inflater.inflate(R.layout.fragment_rv_item,viewGroup,false);

        return new myHolder(view);
    }


    @Override
    public void onBindViewHolder(@NonNull final myHolder myHolder, int i) {
        myHolder.tv_title.setText(list_data.get(i));

        // 如果设置了回调,则设置点击事件
        if (mOnItemClickLitener != null)
        {
            myHolder.itemView.setOnClickListener(new View.OnClickListener()
            {
                @Override
                public void onClick(View v)
                {
                    int pos = myHolder.getLayoutPosition();
                    mOnItemClickLitener.OnItemClick(myHolder.itemView, pos);
                }
            });


        }
    }

    @Override
    public int getItemCount() {
        return list_data.size();
    }

    class myHolder extends RecyclerView.ViewHolder
    {

        TextView tv_title;

        public myHolder(@NonNull View itemView) {
            super(itemView);

            tv_title = (TextView)itemView.findViewById(R.id.tv_title);
        }
    }

    
    public interface OnItemClickLitener
    {
        void OnItemClick(View view, int positon);
    }

    private OnItemClickLitener mOnItemClickLitener;

    public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener)
    {
        this.mOnItemClickLitener = mOnItemClickLitener;
    }
}

drawable下

flex_item_bg.xml


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <!-- 填充-->
    <solid android:color="#00000000"/>
    <!-- 描边 -->
    <stroke
        android:width="1dp"
        android:color="#7F7F7F" />
    <!-- 圆角 -->
    <corners
        android:radius="2dp" />
</shape>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: Flexbox+ReclyclerView实现流式布局

本文链接: https://www.lsjlt.com/news/157989.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Flexbox+ReclyclerView实现流式布局
    本文实例为大家分享了Flexbox+ReclyclerView实现流式布局的具体代码,供大家参考,具体内容如下 效果: module build.gradle引入 implem...
    99+
    2024-04-02
  • Flexbox+ReclyclerView怎么实现流式布局
    本篇内容主要讲解“Flexbox+ReclyclerView怎么实现流式布局”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Flexbox+ReclyclerView怎么实现流式布局”吧!效果:m...
    99+
    2023-06-25
  • 如何实现Flexbox 布局
    如何实现Flexbox 布局?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一、<form> 元素表单使用 <form> 元素。<form>&...
    99+
    2023-06-08
  • React Native如何实现Flexbox布局
    这篇文章给大家分享的是有关React Native如何实现Flexbox布局的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Flex 是 Flexible Box 的缩写,意为”弹...
    99+
    2024-04-02
  • CSS3中怎么实现 FlexBox弹性布局
    这篇文章将为大家详细讲解有关CSS3中怎么实现 FlexBox弹性布局,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。flexbox是一种css display类型,提供一种更简单高效的布局方...
    99+
    2023-06-08
  • css Flexbox布局实例分析
    今天小编给大家分享一下css Flexbox布局实例分析的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。概念Flexbox是f...
    99+
    2023-06-30
  • CSS3中如何实现Flexbox骰子布局
    小编给大家分享一下CSS3中如何实现Flexbox骰子布局,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、First Face...
    99+
    2024-04-02
  • CSS Flexbox布局:利用弹性盒子布局实现灵活的布局结构
    CSS Flexbox布局:灵活的布局结构实现简介:在前端开发中,页面布局是一个重要的环节。传统的布局方式,如使用浮动或定位,有时候在设计不符合标准化的情况下会出现一系列问题。为了克服这些问题,CSS3引入了Flexbox布局,它可以为开发...
    99+
    2023-11-18
    CSS 布局 FLEXBOX
  • 实现瀑布流布局的三种方式
    前言 今天逛闲鱼的时候观察到每一行的高度不是相同的,经了解才知道原来这是一种瀑布流布局,感觉挺有意思,于是决定研究一下,在网上也找了一些方案,实现瀑布流大概有3种方式。 一、JS 实...
    99+
    2024-04-02
  • AJAX实现瀑布流布局
    这篇文章给大家分享的是有关AJAX实现瀑布流布局的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。瀑布流是当前一种比较流行的网站界面布局方式,参差不齐的多栏布局以及到达底部自动加载的方式,使网站在视觉和用户体验上都能...
    99+
    2023-06-08
  • 怎么实现瀑布流布局
    本篇文章给大家分享的是有关怎么实现瀑布流布局,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。一、JS 实现瀑布流思路分析瀑布流布局的特点是等宽不等高。为了让最后一行的差距最小,从...
    99+
    2023-06-09
  • css如何利用flexbox布局实现盒子居中
    小编给大家分享一下css如何利用flexbox布局实现盒子居中,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!利用flexbox布局<style t...
    99+
    2023-06-17
  • CSS布局教程:实现瀑布流式卡片布局的最佳方法
    引言:在现代网页设计中,瀑布流式卡片布局是非常流行的一种布局方式。它能够有效地展示大量的内容,并且在不同的屏幕尺寸下都能够自适应,给用户带来良好的浏览体验。本文将介绍实现瀑布流式卡片布局的最佳方法,并提供具体的代码示例。一、实现瀑布流式布局...
    99+
    2023-10-21
    CSS 瀑布流 布局
  • JavaScript如何实现瀑布流布局
    这篇文章将为大家详细讲解有关JavaScript如何实现瀑布流布局,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。就是一堆等宽不等高的数据块组成的页面,如图: 现在好多网站...
    99+
    2024-04-02
  • JavaScriptL如何实现瀑布流布局
    这篇“JavaScriptL如何实现瀑布流布局”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇...
    99+
    2024-04-02
  • jquery如何实现瀑布流布局
    这篇文章将为大家详细讲解有关jquery如何实现瀑布流布局,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1.看看效果吧!2.html代码index.html<!DO...
    99+
    2024-04-02
  • JQuery实现简单瀑布流布局
    本文实例为大家分享了JQuery实现简单瀑布流布局的具体代码,供大家参考,具体内容如下 分享一个基于JQuery实现的瀑布流布局,效果如下:  实现代码如下,欢迎大家复制...
    99+
    2024-04-02
  • JavaScript实现瀑布流布局详解
    目录需求思路代码实现实现效果问题和修正修正后效果总结需求 所谓瀑布流布局,就是含有若干个等宽的列,每一列分别放置图片、视频等,放置的元素都是等宽的,因此可能是不等高的。新的元素到来时...
    99+
    2024-04-02
  • uniapp瀑布流布局怎么实现
    要实现uniapp中的瀑布流布局,可以使用uniapp提供的mescroll组件,通过配置该组件实现瀑布流效果。以下是实现瀑布流布局...
    99+
    2024-03-08
    uniapp
  • 用Flexbox制作CSS布局实现水平垂直居中
    本篇内容介绍了“用Flexbox制作CSS布局实现水平垂直居中”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作