溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Android 圖片網(wǎng)格布局控件示例代碼

發(fā)布時間:2020-08-24 17:56:18 來源:腳本之家 閱讀:127 作者:大飛機 欄目:移動開發(fā)

項目地址:MultiPictureView

MultiPictureView是一個可以將多張圖片以網(wǎng)格的方式顯示的View,通過簡單的接口實現(xiàn)煩人的布局,從此解放你的小手手

顯示效果

  1. 支持設(shè)置圖片數(shù)量上限
  2. 支持設(shè)置最多顯示列數(shù)
  3. 支持動態(tài)布局和靜態(tài)布局兩種模式(見下圖)
  4. 支持編輯模式和展示模式(編輯模式可以增加和刪除圖片)

布局方式

Android 圖片網(wǎng)格布局控件示例代碼

動態(tài)布局

Android 圖片網(wǎng)格布局控件示例代碼

靜態(tài)布局

編輯/顯示模式

Android 圖片網(wǎng)格布局控件示例代碼Android 圖片網(wǎng)格布局控件示例代碼

如何使用

1. 在布局中聲明

<com.goyourfly.multi_picture.MultiPictureView
  android:id="@+id/multi_image_view"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:editable="false"
  app:deleteDrawable="@drawable/..."
  app:addDrawable="@drawable/..."
  app:imageLayoutMode="DYNAMIC"
  app:max="9"
  app:space="6dp"
  app:span="3" />

參數(shù) 類型 說明 默認值
editable boolean 是否可編輯(添加和刪除) false
span integer 每行最多顯示多少 3
space dimension 圖片間隔大小 8dp
max integer 最多顯示多少張圖片 9
imageLayoutMode integer 圖片布局類型:動態(tài)(DYNAMIC=1)和靜態(tài)(STATIC=2) STATIC=2
deleteDrawable drawable 刪除圖標 紅色刪除Drawable
addDrawable drawable 添加圖片 灰色添加圖片Drawable

2. 在代碼中使用

2.1 初始化ImageLoader

MultiPictureView.setImageLoader(object : ImageLoader {
  override fun loadImage(image: ImageView, uri: Uri) {
    Vincent.with(image.context)
        .load(uri)
        .placeholder(R.drawable.ic_placeholder_loading)
        .error(R.drawable.ic_placeholder_loading)
        .into(image)
  }
})

2.2 綁定圖片資源,設(shè)置事件監(jiān)聽

multiPictureView = (MultiPictureView) findViewById(R.id.multi_image_view);
// 設(shè)置圖片資源
multiPictureView.setList(list:List<Uri>)
multiPictureView.setAddClickCallback(new MultiPictureView.AddClickCallback() {
  @Override
  public void onAddClick(View view) {
    // 添加圖片回調(diào)...
  }
});
multiPictureView.setDeleteClickCallback(new MultiPictureView.DeleteClickCallback() {
  @Override
  public void onDeleted(View view,int index) {
    // 刪除圖片回調(diào),如果不設(shè)置,默認刪除圖片...
  }
});
multiPictureView.setItemClickCallback(new MultiPictureView.ItemClickCallback() {
  @Override
  public void onItemClicked(View view,int index,ArrayList<Uri> uris) {
    // 圖片被點擊...
  }
});

依賴

第一步:添加到根build.gradle

allprojects {
  repositories {
    ...
    jcenter()
  }
}

第二步:在模塊的build.gradle添加依賴

dependencies {
  compile 'com.github.goyourfly:multi_picture_view:latestVersion'
}

感謝

在Demo中使用了下面兩個開源項目,感謝一哈,雖然第二個是我寫的...大家要覺得好用,記得給我點個贊

Matisse

Vincent

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

向AI問一下細節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI