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);     } }

推荐阅读