Android圖片上傳實現(xiàn)預覽效果
更新時間：2016年01月26日 14:48:08 作者：Hankkin
這篇文章主要介紹了Android圖片上傳實現(xiàn)預覽效果的相關資料,需要的朋友可以參考下
首先具體分析一下，實現(xiàn)的功能，其中需求分析是必不可少的，需求、邏輯清除之后，再上手寫代碼，思路會很清晰。
1.多圖上傳首先得選擇圖片（這里項目需求是既可以拍照上傳也可以從相冊中選擇）
2.拍照上傳很簡單了網(wǎng)上也有很多例子，調用照相機，返回uri，獲取圖片
3.從相冊中選擇圖片
- 3.1 獲取手機中的所有圖片
- 3.2 將圖片存到自定義圖片數(shù)組中顯示
- 3.3 自定義ViewPager瀏覽圖片
主要的邏輯大體是這樣，下面具體看一下實現(xiàn)：
一、首先看一下界面：
<com.view.NoScrollGridView
android:id="@+id/noScrollgridview"
android:layout_marginLeft="@dimen/smaller_space"
android:layout_marginRight="@dimen/smaller_space"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:horizontalSpacing="3dp"
android:listSelector="@color/transparent"
android:numColumns="3"
android:scrollbars="none"
android:layout_gravity="center"
android:layout_marginTop="@dimen/smaller_space"
android:verticalSpacing="5dp" />
是一個 NoScrollGridView，項目需要，所以用了不滾動的GridView，大家用GridView也是一樣的。
noScrollgridview = (GridView) findViewById(R.id.noScrollgridview);
noScrollgridview.setSelector(new ColorDrawable(Color.TRANSPARENT));
/*新建傳值給adapter*/
if (file == null) {
picAdapter = new PictureAdapter(this, 0, null);
} else {
//添加失敗的圖片到數(shù)組中
for (int i=0;i<file.getMulFailFilePaths().length;i++){
ImageItem imageItem = new ImageItem();
imageItem.setImagePath(file.getMulFailFilePaths()[i].trim());
Bimp.tempSelectBitmap.add(imageItem);
}
/*上傳失敗傳值給adapter*/
picAdapter = new PictureAdapter(this, 2, file);
}
這個是初始化圖片數(shù)組，適配器（新建、上傳失敗、上傳成功的圖片我用的都是一個adapter）
ImageItem是圖片的模型，下面有它的屬性
//從圖庫選擇的圖片model
public class ImageItem extends File implements Serializable {
@Id
public String imageId; //圖片id
public String thumbnailPath;
public String imagePath; //圖片路徑
private Bitmap bitmap;
public boolean isSelected = false;
public String getImageId() {
return imageId;
}
public void setImageId(String imageId) {
this.imageId = imageId;
}
public String getThumbnailPath() {
return thumbnailPath;
}
public void setThumbnailPath(String thumbnailPath) {
this.thumbnailPath = thumbnailPath;
}
public String getImagePath() {
return imagePath;
}
public void setImagePath(String imagePath) {
this.imagePath = imagePath;
}
public boolean isSelected() {
return isSelected;
}
public void setSelected(boolean isSelected) {
this.isSelected = isSelected;
}
[java] view plain copy print?
/*根據(jù)圖片路徑獲取圖片的bitmap*/
public Bitmap getBitmap() {
if(bitmap == null){
try {
bitmap = Bimp.revitionImageSize(imagePath);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return bitmap;
}
public void setBitmap(Bitmap bitmap) {
this.bitmap = bitmap;
}
接下來是適配器：
由于涉及到添加圖片，adapter中添加一個flag用來顯示新建的圖片，將選擇的圖片添加到公有的圖片數(shù)組中，初始化的時候加載圖片數(shù)組顯示。（大家在看的時候可以忽略掉我的flag）
@SuppressLint("HandlerLeak")
public class PictureAdapter extends BaseAdapter {
private LayoutInflater inflater;
private int selectedPosition = -1;
private boolean shape;
private int flag = 0;//0 默認新建 1上傳成功 2上傳失敗
private AppItem_file file;
public boolean isShape() {
return shape;
}
private Activity context;
public void setShape(boolean shape) {
this.shape = shape;
}
public PictureAdapter(Activity context,int flag,AppItem_file file) {
this.context = context;
inflater = LayoutInflater.from(context);
this.flag = flag;
this.file = file;
}
// public void update() {
// loading();
// }
public int getCount() {
if (flag==0){ //新建圖片
if (Bimp.tempSelectBitmap.size() == 6) {
return 6;
}
return (Bimp.tempSelectBitmap.size() + 1);
}
else if (flag==1){ //上傳成功
return file.getFileList().size();
}
else { //上傳失敗
return file.getMulFailFilePaths().length;
}
}
public Object getItem(int arg0) {
if (flag==1){
return file.getFileList().get(arg0);
}else {
return file.getMulFailFilePaths()[arg0];
}
}
public long getItemId(int arg0) {
return arg0;
}
public void setSelectedPosition(int position) {
selectedPosition = position;
}
public int getSelectedPosition() {
return selectedPosition;
}
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
if (convertView == null) {
//根據(jù)圖片的數(shù)量加載不同布局
if (getCount()==1&&flag!=0){
convertView = inflater.inflate(R.layout.item_published_singal_item,
parent, false);
}
else {
convertView = inflater.inflate(R.layout.item_published_grida,
parent, false);
}
holder = new ViewHolder();
holder.image = (ImageView) convertView
.findViewById(R.id.item_grida_image);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
/**
* 根據(jù)初始化adapter傳過來的flag值，去不同的地方找圖片
* flag=0，去Bimp的圖片數(shù)組中找
* flag=1，證明上傳成功的，去下載好的getFileList中找
* flag=2，為上傳失敗的，圖片保存在FailFile中的List<ImageItem>中
* 優(yōu)化圖片顯示
*/
if (flag==0){ //新建圖片
if (position == Bimp.tempSelectBitmap.size()) {
holder.image.setImageBitmap(BitmapFactory.decodeResource(
convertView.getResources(), R.drawable.icon_add_pic_unfocused));
if (position == 6) {
if (flag==0){
holder.image.setVisibility(View.GONE);
}
}
} else {
holder.image.setImageBitmap(Bimp.tempSelectBitmap.get(position).getBitmap());
}
}
else if (flag==1){ //上傳成功
// List<Integer> ids = new ArrayList<Integer>();
// for (int i=0;i<file.getFileList().size();i++){
// ids.add(file.getFileList().get(i).getS_id());
// }
int id=file.getFileList().get(position).getS_id();
try {
// File file= NeedApplication.db.findById(File.class,id);
String fileBigImgUri =NeedApplication.db.findById(File.class,id).getFileUriBig();
if (fileBigImgUri!=null&&!"null".equals(fileBigImgUri))
ImageLoader.getInstance().displayImage((fileBigImgUri).trim(),holder.image);
} catch (DbException e) {
e.printStackTrace();
}
}
else { //上傳失敗
String url = "file://"+file.getMulFailFilePaths()[position].trim();
ImageLoader.getInstance().displayImage(url, holder.image);
}
return convertView;
}
public class ViewHolder {
public ImageView image;
}
}
下面是自定義相冊界面，用來選擇圖片的
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#E1E0DE"
>
<RelativeLayout
android:id="@+id/headview"
android:layout_width="fill_parent"
android:layout_height="45dp"
android:background="@drawable/plugin_camera_title_bar"
android:gravity="center_vertical"
android:layout_marginBottom="3dp"
>
<Button
android:layout_width="60dp"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="#fff"
android:id="@+id/back"
android:text="相冊"
android:background="@drawable/plugin_camera_title_btn_back"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_centerVertical="true"
/>
<Button
android:layout_width="67dp"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="#fff"
android:id="@+id/cancel"
android:text="取消"
android:background="@drawable/plugin_camera_title_btn_cancel"
android:layout_centerVertical="true"
android:layout_marginRight="5dp"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/bottom_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="@drawable/plugin_camera_bottom_bar"
android:layout_marginTop="3dp"
>
<Button
android:id="@+id/preview"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:text="預覽"
android:background="@drawable/plugin_camera_title_btn_preview"
/>
<Button
android:id="@+id/ok_button"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:background="@drawable/plugin_camera_ok_btn_state"
/>
</RelativeLayout>
<GridView
android:id="@+id/myGrid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@id/bottom_layout"
android:layout_below="@id/headview"
android:layout_centerInParent="true"
android:layout_marginTop="2dp"
android:horizontalSpacing="10dp"
android:numColumns="4"
android:verticalSpacing="10dp"
android:background="#E1E0DE" />
<TextView
android:id="@+id/myText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="相冊沒有圖片"
android:textColor="@color/black"
/>
</RelativeLayout>
同樣也是用了GridView，獲取手機中的圖片，添加到數(shù)組中，顯示
這里用到了一個AlbumHelper（相冊幫助類），網(wǎng)上找的代碼，感覺挺好的
public List<ImageBucket> getImagesBucketList(boolean refresh) {
if (refresh || (!refresh && !hasBuildImagesBucketList)) {
buildImagesBucketList();
}
List<ImageBucket> tmpList = new ArrayList<ImageBucket>();
Iterator<Entry<String, ImageBucket>> itr = bucketList.entrySet()
.iterator();
while (itr.hasNext()) {
Entry<String, ImageBucket> entry = (Entry<String, ImageBucket>) itr
.next();
tmpList.add(entry.getValue());
}
return tmpList;
}
獲取到數(shù)據(jù)源之后，該顯示了，也就是利用的獲取圖片幫助類里面的方法
// 初始化，給一些對象賦值
private void init() {
helper = AlbumHelper.getHelper();
helper.init(getApplicationContext());
contentList = helper.getImagesBucketList(false);
dataList = new ArrayList<ImageItem>();
for(int i = 0; i<contentList.size(); i++){
dataList.addAll( contentList.get(i).imageList );
}
back = (Button) findViewById(R.id.back);
cancel = (Button) findViewById(R.id.cancel);
cancel.setOnClickListener(new CancelListener());
back.setOnClickListener(new BackListener());
preview = (Button) findViewById(R.id.preview);
preview.setOnClickListener(new PreviewListener());
intent = getIntent();
Bundle bundle = intent.getExtras();
gridView = (GridView) findViewById(R.id.myGrid);
gridImageAdapter = new AlbumGridViewAdapter(mContext,dataList,Bimp.tempSelectBitmap);
gridView.setAdapter(gridImageAdapter);
tv = (TextView) findViewById(R.id.myText);
gridView.setEmptyView(tv);
okButton = (Button) findViewById(R.id.ok_button);
okButton.setText("完成"+"(" + Bimp.tempSelectBitmap.size()
+ "/"+ NeedApplication.picNums+")");
}
gridImageAdapter
.setOnItemClickListener(new AlbumGridViewAdapter.OnItemClickListener() {
@Override
public void onItemClick(final ToggleButton toggleButton,
int position, boolean isChecked,Button chooseBt) {
if (Bimp.tempSelectBitmap.size() >= NeedApplication.picNums) {
toggleButton.setChecked(false);
chooseBt.setVisibility(View.GONE);
if (!removeOneData(dataList.get(position))) {
Toast.makeText(AlbumActivity.this, "超出可選圖片張數(shù)", Toast.LENGTH_SHORT).show();
}
return;
}
if (isChecked) {
chooseBt.setVisibility(View.VISIBLE);
Bimp.tempSelectBitmap.add(dataList.get(position));
okButton.setText("完成"+"(" + Bimp.tempSelectBitmap.size()
+ "/"+ NeedApplication.picNums+")");
} else {
Bimp.tempSelectBitmap.remove(dataList.get(position));
chooseBt.setVisibility(View.GONE);
okButton.setText("完成"+"(" + Bimp.tempSelectBitmap.size() + "/"+ NeedApplication.picNums+")");
}
isShowOkBt();
}
});
點擊圖片選擇加到公有圖片數(shù)組中顯示已選擇。
最后是預覽圖片，利用自定義viewpager，實現(xiàn)圖片滑動，下面貼兩張截圖吧：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。
相關文章
這篇文章主要為大家詳細介紹了Android高德地圖marker自定義彈框窗口，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
iOS開發(fā)中TableView類似QQ分組的折疊與展開效果
這篇文章主要介紹了iOS開發(fā)中TableView類似QQ分組的折疊與展開效果,其實要做這個效果我先想到的是在tableView中再嵌套多個tableView。下面通過本文給大家分享實現(xiàn)思路，需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細介紹了Android使用第三方庫實現(xiàn)日期選擇器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
一個APP如果沒有頁面跳轉那么是沒有靈魂的，頁面跳轉的一個常用說法就是Navigator。那么在flutter中如何使用Navigator呢？本文就來和大家詳細聊聊2023-02-02
本文主要介紹了Android?Framework層獲取及處理按鍵事件流程，Android系統(tǒng)的輸入事件是InputManagerService服務來監(jiān)控的，該系統(tǒng)服務在SystemServer的startOtherServices（）中初始化，更多介紹需要的小伙伴可以參考一下2022-08-08
這篇文章主要為大家詳細介紹了很實用的Android日期計算類，一個是獲取與今天時間差，另一個是日期格式化工具類，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了Android 截圖功能源碼的分析的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了android開機啟動示例，開機自動啟動程序后開機啟動廣播功能實現(xiàn),需要的朋友可以參考下2014-02-02
這篇文章主要介紹了詳解Android單元測試最佳實踐，本文介紹了如何對Android原生應用進行單元測試，同時示例代碼采用MVP模式以提高代碼的可讀性和可測試性2018-08-08
這篇文章主要為大家介紹了autojs模仿QQ長按彈窗菜單實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01