Android实现图片九宫格


Posted in Java/Android onJune 28, 2022

本文实例为大家分享了Android实现图片九宫格的具体代码,供大家参考,具体内容如下

九宫格分三类

Android实现图片九宫格

实现的效果

Android实现图片九宫格

Android实现图片九宫格

Android实现图片九宫格

Android实现图片九宫格

Android实现图片九宫格

Android实现图片九宫格

具体实现

activity_main

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

   <data>

   </data>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

item_main

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>
        <variable
            name="img"
            type="com.nooneb.ninegrid.Img" />
        <import type="android.view.View"/>
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="64dp">

        <ImageView
            android:id="@+id/oneImg"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:visibility="@{img.isOne()?View.VISIBLE:View.GONE}"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:localImg="@{img.img1}" />

        <ImageView
            android:id="@+id/twoImg1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:visibility="@{img.isTwoOrFour()?View.VISIBLE:View.GONE}"
            app:layout_constraintDimensionRatio="w,1:1"
            app:layout_constraintEnd_toStartOf="@+id/guideline2"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:localImg="@{img.img1}" />

        <ImageView
            android:id="@+id/twoImg2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:visibility="@{img.isTwoOrFour()?View.VISIBLE:View.GONE}"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/guideline2"
            app:layout_constraintTop_toTopOf="parent"
            app:localImg="@{img.img2}" />

        <ImageView
            android:id="@+id/twoImg3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:visibility="@{img.isFour()?View.VISIBLE:View.GONE}"
            app:layout_constraintDimensionRatio="w,1:1"
            app:layout_constraintEnd_toStartOf="@+id/guideline2"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/twoImg1"
            app:localImg="@{img.img3}" />

        <ImageView
            android:id="@+id/twoImg4"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:visibility="@{img.isFour()?View.VISIBLE:View.GONE}"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/guideline2"
            app:layout_constraintTop_toBottomOf="@+id/twoImg2"
            app:localImg="@{img.img4}" />

        <ImageView
            android:id="@+id/threeImg1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:visibility="@{img.isOther()?View.VISIBLE:View.GONE}"
            app:layout_constraintDimensionRatio="w,1:1"
            app:layout_constraintEnd_toStartOf="@+id/guideline3"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:localImg="@{img.img1}" />

        <ImageView
            android:id="@+id/threeImg2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:visibility="@{img.isOther()?View.VISIBLE:View.GONE}"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toStartOf="@+id/guideline4"
            app:layout_constraintStart_toStartOf="@+id/guideline3"
            app:layout_constraintTop_toTopOf="parent"
            app:localImg="@{img.img2}" />

        <ImageView
            android:id="@+id/threeImg3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:visibility="@{img.isOther()?View.VISIBLE:View.GONE}"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/guideline4"
            app:layout_constraintTop_toTopOf="parent"
            app:localImg="@{img.img3}" />

        <ImageView
            android:id="@+id/threeImg4"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:visibility="@{img.isOther()?View.VISIBLE:View.GONE}"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toStartOf="@+id/guideline3"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/threeImg1"
            app:localImg="@{img.img4}" />

        <ImageView
            android:id="@+id/threeImg5"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:visibility="@{img.isOther()?View.VISIBLE:View.GONE}"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toStartOf="@+id/guideline4"
            app:layout_constraintStart_toStartOf="@+id/guideline3"
            app:layout_constraintTop_toBottomOf="@+id/threeImg2"
            app:localImg="@{img.img5}" />

        <ImageView
            android:id="@+id/threeImg7"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:visibility="@{img.isOther()?View.VISIBLE:View.GONE}"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toStartOf="@+id/guideline3"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/threeImg4"
            app:localImg="@{img.img7}" />

        <ImageView
            android:id="@+id/threeImg8"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:visibility="@{img.isOther()?View.VISIBLE:View.GONE}"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toStartOf="@+id/guideline4"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="@+id/guideline3"
            app:layout_constraintTop_toBottomOf="@+id/threeImg5"
            app:localImg="@{img.img8}" />

        <ImageView
            android:id="@+id/threeImg6"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:visibility="@{img.isOther()?View.VISIBLE:View.GONE}"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/guideline4"
            app:layout_constraintTop_toBottomOf="@+id/threeImg3"
            app:localImg="@{img.img6}" />

        <ImageView
            android:id="@+id/threeImg9"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:visibility="@{img.isOther()?View.VISIBLE:View.GONE}"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="@+id/guideline4"
            app:layout_constraintTop_toBottomOf="@+id/threeImg6"
            app:localImg="@{img.img9}" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent=".5" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent=".333333" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent=".666666" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

实体类

public class Img {
    public Integer img1;
    public Integer img2;
    public Integer img3;
    public Integer img4;
    public Integer img5;
    public Integer img6;
    public Integer img7;
    public Integer img8;
    public Integer img9;

    public Img(Integer img1, Integer img2, Integer img3, Integer img4, Integer img5, Integer img6, Integer img7, Integer img8, Integer img9) {
        this.img1 = img1;
        this.img2 = img2;
        this.img3 = img3;
        this.img4 = img4;
        this.img5 = img5;
        this.img6 = img6;
        this.img7 = img7;
        this.img8 = img8;
        this.img9 = img9;
    }

    public int count(){
        int i=0;
        if (img1!=null)i++;
        if (img2!=null)i++;
        if (img3!=null)i++;
        if (img4!=null)i++;
        if (img5!=null)i++;
        if (img6!=null)i++;
        if (img7!=null)i++;
        if (img8!=null)i++;
        if (img9!=null)i++;
        return i;
    }
    public boolean isOne(){
        return count()==1;
    }
    public boolean isTwoOrFour(){
        return count()==2||count()==4;
    }
    public boolean isFour(){
        return count()==4;
    }
    public boolean isOther(){
        if (count()!=1){
            if (count()!=2){
                return count() != 4;
            }
        }
        return false;
    }
}

图片适配器

public class ImgAdapter {
    @BindingAdapter("localImg")
    public static void set(ImageView imageView,Integer res){
        if (res==null){
            imageView.setVisibility(View.GONE);
            return;
        }
        imageView.setImageResource(res);

    }
}

列表适配器

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.Holder> {

    private final Context context;
    public List<Img> imgs;

    public MyAdapter(Context context,List<Img> imgs) {
        this.context = context;
        this.imgs=imgs;
    }

    @NonNull
    @Override
    public Holder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        ItemImgBinding binding = ItemImgBinding.inflate(
                LayoutInflater.from(context),
                parent,
                false);
        return new Holder(binding);
    }

    @Override
    public void onBindViewHolder(@NonNull Holder holder, int position) {
        Img img = imgs.get(position);
        holder.binding.setImg(img);
        holder.binding.executePendingBindings();
    }

    @Override
    public int getItemViewType(int position) {
        return position;
    }

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

    public class Holder extends RecyclerView.ViewHolder {
        ItemImgBinding binding;
        public Holder(ItemImgBinding binding) {
            super(binding.getRoot());
            this.binding=binding;
        }
    }
}

MainActivity

public class MainActivity extends AppCompatActivity {

    ActivityMainBinding binding;
    MyAdapter myAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        List<Img> imgs = Arrays.asList(
                new Img(R.drawable.avatar_1, null, null, null, null, null, null, null, null),
                new Img(R.drawable.avatar_1, R.drawable.avatar_2, null, null, null, null, null, null, null),
                new Img(R.drawable.avatar_1, R.drawable.avatar_2, R.drawable.avatar_3, null, null, null, null, null, null),
                new Img(R.drawable.avatar_1, R.drawable.avatar_2, R.drawable.avatar_3, R.drawable.avatar_4, null, null, null, null, null),
                new Img(R.drawable.avatar_1, R.drawable.avatar_2, R.drawable.avatar_3, R.drawable.avatar_4, R.drawable.avatar_5, null, null, null, null),
                new Img(R.drawable.avatar_1, R.drawable.avatar_2, R.drawable.avatar_3, R.drawable.avatar_4, R.drawable.avatar_5, R.drawable.avatar_6, null, null, null),
                new Img(R.drawable.avatar_1, R.drawable.avatar_2, R.drawable.avatar_3, R.drawable.avatar_4, R.drawable.avatar_5, R.drawable.avatar_6, R.drawable.avatar_7, null, null),
                new Img(R.drawable.avatar_1, R.drawable.avatar_2, R.drawable.avatar_3, R.drawable.avatar_4, R.drawable.avatar_5, R.drawable.avatar_6, R.drawable.avatar_7, R.drawable.avatar_8, null),
                new Img(R.drawable.avatar_1, R.drawable.avatar_2, R.drawable.avatar_3, R.drawable.avatar_4, R.drawable.avatar_5, R.drawable.avatar_6, R.drawable.avatar_7, R.drawable.avatar_8, R.drawable.avatar_9)
        );

        myAdapter=new MyAdapter(this,imgs);
        binding.recyclerView.setLayoutManager(new LinearLayoutManager(this));
        binding.recyclerView.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL));
        binding.recyclerView.setAdapter(myAdapter);
    }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。


Tags in this post...

Java/Android 相关文章推荐
SpringBoot项目中控制台日志的保存配置操作
Jun 18 Java/Android
Java Dubbo框架知识点梳理
Jun 26 Java/Android
详解Java分布式事务的 6 种解决方案
Jun 26 Java/Android
分析ZooKeeper分布式锁的实现
Jun 30 Java/Android
springboot+WebMagic+MyBatis爬虫框架的使用
Aug 07 Java/Android
Java 在生活中的 10 大应用
Nov 02 Java/Android
Netty分布式客户端处理接入事件handle源码解析
Mar 25 Java/Android
解决Springboot PostMapping无法获取数据的问题
May 06 Java/Android
JavaScript正则表达式实现注册信息校验功能
May 30 Java/Android
Android Canvas绘制文字横纵向对齐
Jun 05 Java/Android
Java多线程并发FutureTask使用详解
Jun 28 Java/Android
Java Redisson多策略注解限流
Sep 23 Java/Android
springboot 全局异常处理和统一响应对象的处理方式
Jun 28 #Java/Android
详解Spring Security如何在权限中使用通配符
Jun 28 #Java/Android
Android RecyclerView实现九宫格效果
Jun 28 #Java/Android
Java 多线程并发FutureTask
Java+swing实现抖音上的表白程序详解
Jun 25 #Java/Android
Java Spring Boot请求方式与请求映射过程分析
Jun 25 #Java/Android
Spring Cloud OAuth2实现自定义token返回格式
Jun 25 #Java/Android
You might like
php下intval()和(int)转换使用与区别
2008/07/18 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
详解JS预解析原理
2020/06/16 Javascript
在Python中使用元类的教程
2015/04/28 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
Python 将pdf转成图片的方法
2018/04/23 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
初级Java程序员面试题
2016/03/03 面试题
小学教育毕业生自荐信
2013/11/18 职场文书
如何写一份好的自荐信
2014/01/02 职场文书
宿舍违规检讨书
2014/01/12 职场文书
大学社团活动总结
2014/04/26 职场文书
代领毕业证委托书
2014/08/02 职场文书
资产运营委托书范本
2014/10/16 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
九不准学习心得体会
2016/01/23 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP