Android實(shí)現(xiàn)圖片九宮格

更新時(shí)間：2022年06月28日 14:40:44 作者：hishere

這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)圖片九宮格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Android實(shí)現(xiàn)圖片九宮格的具體代碼，供大家參考，具體內(nèi)容如下

九宮格分三類

實(shí)現(xiàn)的效果

具體實(shí)現(xiàn)

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>

實(shí)體類

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: