Android图片九宫格

2023-11-10 21:30:52

九宫格分三类

实现的效果

具体实现

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

码农公寓

实现的效果

activity_main

item_main

实体类

图片适配器

列表适配器

MainActivity

相关文章