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 相关文章推荐
深入理解以DEBUG方式线程的底层运行原理
Jun 21 Java/Android
使用Springboot实现健身房管理系统
Jul 01 Java/Android
SpringBoot集成Druid连接池连接MySQL8.0.11
Jul 02 Java/Android
JavaWeb 入门:Hello Servlet
Jul 16 Java/Android
Java练习之潜艇小游戏的实现
Mar 16 Java/Android
RestTemplate如何通过HTTP Basic Auth认证示例说明
Mar 17 Java/Android
JavaWeb实现显示mysql数据库数据
Mar 19 Java/Android
Java十分钟精通进阶适配器模式
Apr 06 Java/Android
Java设计模式之代理模式
Apr 22 Java/Android
Android在Sqlite3中的应用及多线程使用数据库的建议
Apr 24 Java/Android
详解Android中的TimePickerView(时间选择器)的用法
Apr 30 Java/Android
详解Flutter自定义应用程序内键盘的实现方法
Jun 14 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
jquery tab标签页的制作
2010/05/10 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
JS函数基本定义与用法示例
2020/01/15 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
python实现简单的TCP代理服务器
2014/10/08 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
毕业生求职简历的自我评价
2013/10/07 职场文书
文秘专业个人求职信
2013/12/22 职场文书
最新大学职业规划书范文
2013/12/30 职场文书
高中生自我评语大全
2014/01/19 职场文书
出国留学计划书
2014/04/27 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
电子信息工程自荐信
2014/05/26 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
合作合同协议书
2016/03/21 职场文书
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS