Android GridView仿微信添加多圖效果
本文實例為大家分享了GridView仿微信添加多圖效果展示的具體代碼,供大家參考,具體內(nèi)容如下
栗子慣例,先上GIF

在項目中這種添加⑨圖的效果應(yīng)該是非常常見的,后面有個添加的按鈕應(yīng)該怎么實現(xiàn),這也許讓一部分小白抓狂了吧~來吧,淡漠帶你飛,走起~~啦啦啦......
起飛前先說下,本篇只是講解九宮格添加圖片的效果,至于選擇圖片的效果是別人寫的庫,我只是接過來做選擇圖片用的~
1.首先這是用GridView實現(xiàn)的
xml布局就一個GridView
<GridView android:id="@+id/gridView" android:layout_width="match_parent" android:layout_height="match_parent" android:columnWidth="90dp" android:gravity="center" android:horizontalSpacing="4dp" android:numColumns="3" android:scrollbars="none" android:stretchMode="columnWidth" android:verticalSpacing="4dp" />
2.接下來看看java代碼
//圖片數(shù)據(jù),ImageItem是圖片選擇的庫自帶的Bean
private ArrayList<ImageItem> images;
//adapter是核心,添加按鈕的處理刪除的處理都在里面,后面會說,別急
private MultiImageAdapter adapter;
//初次進入的時候先只傳this
adapter = new MultiImageAdapter(this);
gridView.setAdapter(adapter);
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (data != null && requestCode == 3) {
//判斷一下是否有數(shù)據(jù),有的話就addAll(),不會覆蓋已經(jīng)有的圖
if(images == null){
images = (ArrayList<ImageItem>)
data.getSerializableExtra(ImagePicker.EXTRA_RESULT_ITEMS);
}else{
images.addAll((ArrayList<ImageItem>)
data.getSerializableExtra(ImagePicker.EXTRA_RESULT_ITEMS));
}
//拿到圖片數(shù)據(jù)后把images傳過去
adapter = new MultiImageAdapter(this,images);
gridView.setAdapter(adapter);
} else {
Toast.makeText(this, "沒有選擇圖片", Toast.LENGTH_SHORT).show();
}
}
Ok,Java代碼也講完了,到這里沒有什么復雜的吧,添加按鈕和刪除按鈕的處理都在Adapter里面,下面開始說核心的Adapter
3.核心Adapter
先看xml吧
<?xml version="1.0" encoding="utf-8"?>
<com.anfq.mylibrary.view.SquareLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#ffffff"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/ivIcon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimaryDark"
android:scaleType="fitXY" />
<ImageButton
android:id="@+id/ibDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="@null"
android:padding="10dp"
android:src="@drawable/del" />
</RelativeLayout>
<ImageButton
android:id="@+id/ibAdd"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:background="#eeeeee"
android:src="@drawable/add"
android:visibility="gone" />
</com.anfq.mylibrary.view.SquareLayout>
xml也不復雜,最外層的SquareLayout是一個讓GridView顯示的Item為正方形的處理,RelativeLayout里有個ImageView這個是用來展示圖片的,ImageButton是刪除的按鈕;然后外面ImageButton是添加按鈕,設(shè)置了隱藏屬性android:visibility="gone",只有在需要的時候才把添加按鈕召喚出來,添加完9個圖片的時候是沒有添加按鈕的。
把SquareLayout的代碼也插上吧~
public class SquareLayout extends RelativeLayout {
public SquareLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public SquareLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SquareLayout(Context context) {
super(context);
}
@SuppressWarnings("unused")
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(getDefaultSize(0, widthMeasureSpec),
getDefaultSize(0, heightMeasureSpec));
int childWidthSize = getMeasuredWidth();
int childHeightSize = getMeasuredHeight();
// 高度和寬度一樣
heightMeasureSpec = widthMeasureSpec = MeasureSpec.makeMeasureSpec(
childWidthSize, MeasureSpec.EXACTLY);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
Adapter來了
public class MultiImageAdapter extends BaseAdapter {
private Activity activity;
private LayoutInflater inflater;
private ArrayList<ImageItem> mImages;
//用來判斷是否是剛剛進入,剛進入只顯示添加按鈕,也就是上面java代碼中只傳this的時候
private boolean is = false;
ImagePicker imagePicker = ImagePicker.getInstance();
public MultiImageAdapter(Activity activity, ArrayList<ImageItem> images) {
this.activity = activity;
this.inflater = LayoutInflater.from(activity);
this.mImages = images;
initImagePicker();//設(shè)置圖片選擇的一些屬性
} public MultiImageAdapter(Activity activity) {
this.activity = activity;
this.inflater = LayoutInflater.from(activity);
is = true;//設(shè)置為true表示第一次初始化
initImagePicker();//設(shè)置圖片選擇的一些屬性
}
@Override
public int getCount() {
if(!is){
//這里判斷數(shù)據(jù)如果有9張就size等于9,否則就+1,+1是為按鈕留的位置
return mImages.size()==9?mImages.size():mImages.size()+1;
}
//沒有數(shù)據(jù)就是1,1是為按鈕留的位置
return 1;
}
@Override
public Object getItem(int position) {
return mImages.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(final int position, View view, final ViewGroup parent) {
ViewHolder holder = null;
if (null == view) {
view = inflater.inflate(R.layout.item_ulti_image, null);
holder = new ViewHolder();
holder.ivIcon = (ImageView) view.findViewById(R.id.ivIcon);
holder.ibAdd = (ImageButton) view.findViewById(R.id.ibAdd);
holder.ibDelete = (ImageButton) view.findViewById(R.id.ibDelete);
view.setTag(holder);
} else {
holder = (ViewHolder) view.getTag();
}
if(!is){
//選了圖片后會進入這里,先判斷下position 是否等于size
if(position == mImages.size()){
//執(zhí)行到這里就說明是最后一個位置,判斷是否有9張圖
if(mImages.size() != 9){
//沒有9張圖就顯示添加按鈕
holder.ibAdd.setVisibility(View.VISIBLE);
}else{
//有就隱藏
holder.ibAdd.setVisibility(View.GONE);
}
}else{
//還不是最后一個位置的時候執(zhí)行這里
//隱藏添加按鈕,要設(shè)置圖片嘛~
holder.ibAdd.setVisibility(View.GONE);
//根據(jù)條目位置設(shè)置圖片
ImageItem item = mImages.get(position);
Glide.with(activity)
.load(item.path)
.into(holder.ivIcon);
}
//刪除按鈕的點擊事件
holder.ibDelete.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//移除圖片
mImages.remove(position);
//更新
notifyDataSetChanged();
}
});
}else{
//初次初始化的時候顯示添加按鈕
holder.ibAdd.setVisibility(View.VISIBLE);
}
//添加按鈕點擊事件
holder.ibAdd.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//判斷是否是初始化進入
if(!is){
//到這里表示已經(jīng)選過了,然后用9-size算出還剩幾個圖的位置
imagePicker.setSelectLimit(9-mImages.size());//選中數(shù)量限制
}
//跳轉(zhuǎn)到圖片選擇
Intent intent = new Intent(activity, ImageGridActivity.class);
activity.startActivityForResult(intent, 3);
}
});
return view;
}
protected class ViewHolder {
/** icon */
protected ImageView ivIcon;
/** 移除 */
protected ImageButton ibDelete;
/**添加 */
protected ImageButton ibAdd;
}
private void initImagePicker() {
imagePicker.setImageLoader(new GlideImageLoader()); //設(shè)置圖片加載器
imagePicker.setShowCamera(true);//顯示拍照按鈕
imagePicker.setCrop(true);//允許裁剪(單選才有效)
imagePicker.setSaveRectangle(true);//是否按矩形區(qū)域保存
imagePicker.setSelectLimit(9);//選中數(shù)量限制
imagePicker.setStyle(CropImageView.Style.CIRCLE);//裁剪框的形狀
imagePicker.setFocusWidth(100);//裁剪框的寬度。單位像素(圓形自動取寬高最小值)
imagePicker.setFocusHeight(100);//裁剪框的高度。單位像素(圓形自動取寬高最小值)
imagePicker.setOutPutX(1000);//保存文件的寬度。單位像素
imagePicker.setOutPutY(1000);//保存文件的高度。單位像素
}
}
總結(jié):其實原理就是把數(shù)據(jù)的size+1,做為添加按鈕的放置,然后判斷下有9張圖就不顯示添加按鈕,并且size也不+1,就這樣,一個帶添加按鈕的GridView就好了。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- Android系統(tǒng)添加Linux驅(qū)動
- Android實現(xiàn)EditText添加下劃線
- Android添加用戶組及自定義App權(quán)限的方法
- Android中多行文本末尾添加圖片排版問題的解決方法
- Android添加指紋解鎖功能的實現(xiàn)代碼
- Android實現(xiàn)添加商品到購物車動畫效果
- Android中recyclerView底部添加透明漸變效果
- Android GridView添加頭部問題的解決
- 詳解如何在Android Studio中添加RecyclerView-v7支持包
- Android百度地圖添加Marker失真問題的解決方案
- Android手機屏幕同步工具asm.jar
- Android系統(tǒng)工具類詳解
- Android中APK簽名工具之jarsigner和apksigner詳解
- 超實用的android網(wǎng)絡(luò)工具類
- Android編程實現(xiàn)將時間轉(zhuǎn)化成幾分鐘前、幾天前等形式的工具類
- Android系統(tǒng)添加自己寫的工具
相關(guān)文章
Android編程實現(xiàn)兩個Activity之間共享數(shù)據(jù)及互相訪問的方法
這篇文章主要介紹了Android編程實現(xiàn)兩個Activity之間共享數(shù)據(jù)及互相訪問的方法,簡單分析了Android中Activity數(shù)據(jù)共享與訪問的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
Android Studio配置(Android Studio4.1為例)
這篇文章主要介紹了Android Studio配置(Android Studio4.1為例),文中通過圖文介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-10-10
Android編程實現(xiàn)AlertDialog自定義彈出對話框的方法示例
這篇文章主要介紹了Android編程實現(xiàn)AlertDialog自定義彈出對話框的方法,結(jié)合實例形式分析了Android AlertDialog自定義彈出對話框的基本功能與事件監(jiān)聽實現(xiàn)技巧,需要的朋友可以參考下2017-07-07
Android Studio3.5開發(fā)工具(安卓開發(fā)工具)安裝步驟詳解
這篇文章主要為大家詳細介紹了Android Studio3.5開發(fā)工具安裝、安卓開發(fā)工具的安裝步驟,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-09-09
Android實戰(zhàn)教程第四篇之簡單實現(xiàn)短信發(fā)送器
這篇文章主要為大家詳細介紹了Android實戰(zhàn)教程第四篇之簡單實現(xiàn)短信發(fā)送器,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11

