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);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
赞 (0)
相关推荐
-
Android 九宫格的实现方法
1.xml代码: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill
-
Android打造流畅九宫格抽奖活动效果
因为company项目中需要做九宫格抽奖活动,以前都没有做过类似的功能,虽然之前在浏览大神们的博客中,无意中也看到了好多关于抽奖的项目,但因为项目中没有需要,一直都没有点击进去看.这次不去看估计不行.直到公司计划要做抽奖功能,才迫不得已上网查找demo 网上找了大半天,好不容易找到了几个demo,下载下来,解压缩包发现竟然里面空空如也,只有几张九宫格的图片,害我白白浪费了几个CSDN积分.后面在eoe网站那发现了一个demo,于是好开心,下载下来后马上导入到工程中,运行看了效果,九宫格是出来了,
-
Android实现九宫格解锁的方法
相信大家都有使用九宫格解锁,比如在设置手机安全项目中,可以使用九宫格解锁,提高安全性,以及在使用支付功能的时候,为了提高安全使用九宫锁,今天就为大家介绍Android实现九宫格的方法,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 布局文件如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas
-
Android编程之九宫格实现方法实例分析
本文实例讲述了Android编程之九宫格实现方法.分享给大家供大家参考,具体如下: 显示九宫格需要用GridView , 要显示每个格子中的视图有两种方式,第一种方式是做成xml文件,再将xml文件做成视图.第二种方式就是在代码中构建出这样一种布局,这里采用第一种方式来实现: GridView: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="ht
-
android 九宫格滑动解锁开机实例源码学习
效果图由于网站占时不能上传,以后补上. NinePointLineView.java 复制代码 代码如下: package org.demo.custon_view; import org.demo.utils.MLog; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; imp
-
轻松实现Android自定义九宫格图案解锁
Android实现九宫格图案解锁,自带将图案转化成数字密码的功能,代码如下: LockPatternView.java package com.jackie.lockpattern; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Point; import android.text.TextUtils; i
-
Android实现九宫格横向左右滑动
项目中大多都会有很多的分类,且左右滑动,如美团首页(下图): 不难发现包含2部分内容:1.左右滑动的页面,2.指示器. 大度一般都会想到,viewPager+GridView,这里介绍另外的的一种方法,也做下记录: GridViewPager+MagicIndicator(万能指示器) 一.引入build.gradle compile 'com.yhy:gvp:1.1.0' compile 'com.github.hackware1993:MagicIndicator:1.5.0' 如果报错,在
-
Android开发之实现GridView支付宝九宫格
先给大家展示下关于仿支付宝钱包首页中带有分割线的gridview,俗称九宫格 的效果图,怎么样是不是和你想象的一样啊.在你的预料之中就继续访问以下代码内容吧. 我们都知道ListView设置分割线是非常容易的,设置ListView的分割线颜色和宽度,只需要在布局中定义android:divider和android:dividerHeight属性即可.而GridView并没有这样的属性和方法,那我们改如何来做呢? 我们小编在做这个效果之前,也参考了其他的一些方案,比如说定义一个自定义的GridVi
-
Android实现九宫格（GridView中各项平分空间）的方法
本文实例讲述了Android实现九宫格(GridView中各项平分空间)的方法.分享给大家供大家参考.具体如下: 项目需要做一个九宫格(也不一定是9的,4宫格.16宫格.4x3宫格...),封了 一个宫格,它能够根据为它分配的空间来自动的调节宫中各项的尺寸. 从TableLayout集成来的,因此如果你直接在设计器上使用该封装的话需要把它自动加进去的那几个TableRow删除一下. 类名为AdvancedGridView,代码如下: import android.content.Context;
-
轻松实现安卓(Android)九宫格解锁
效果图 思路 首先我们来分析一下实现九宫格解锁的思路:当用户的手指触摸到某一个点时,先判断该点是否在九宫格的某一格范围之内,若在范围内,则该格变成选中的状态:之后用户手指滑动的时候,以该格的圆心为中心,用户手指为终点,两点连线.最后当用户手指抬起时,判断划过的九宫格密码是否和原先的密码匹配. 大致的思路流程就是上面这样的了,下面我们可以来实践一下. Point 类 我们先来创建一个 Point 类,用来表示九宫格锁的九个格子.除了坐标 x ,y 之外,还有三种模式:正常模式.按下模式和错误模式.