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);
}
}
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。
推薦閱讀：
- Android 詳解沉浸式狀態欄的實現流程
- Android移動應用開發指南之六種佈局詳解
- Android開發實現圖片切換APP
- Android MaterialCardView的使用介紹與示例
- Android Studio實現註冊頁面跳轉登錄頁面的創建