這篇文章主要介紹Android中GridView仿微信添加多圖效果怎么實現(xiàn),文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供西安網(wǎng)站建設、西安做網(wǎng)站、西安網(wǎng)站設計、西安網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、西安企業(yè)網(wǎng)站模板建站服務,10年西安做網(wǎng)站經(jīng)驗,不只是建網(wǎng)站,更提供有價值的思路和整體網(wǎ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是添加按鈕,設置了隱藏屬性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();//設置圖片選擇的一些屬性 } public MultiImageAdapter(Activity activity) { this.activity = activity; this.inflater = LayoutInflater.from(activity); is = true;//設置為true表示第一次初始化 initImagePicker();//設置圖片選擇的一些屬性 } @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í)行這里 //隱藏添加按鈕,要設置圖片嘛~ holder.ibAdd.setVisibility(View.GONE); //根據(jù)條目位置設置圖片 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()); //設置圖片加載器 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);//保存文件的高度。單位像素 } }
以上是“Android中GridView仿微信添加多圖效果怎么實現(xiàn)”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
文章名稱:Android中GridView仿微信添加多圖效果怎么實現(xiàn)
轉(zhuǎn)載源于:http://jinyejixie.com/article34/pggise.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、響應式網(wǎng)站、動態(tài)網(wǎng)站、企業(yè)建站、小程序開發(fā)、面包屑導航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)