preview selected images like a carousel

shuaibin-lam · Aug 23, 2014 · 103c547 · 103c547
1 parent 4ddbcc0
commit 103c547
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 22 deletions.
diff --git a/LibPolyPicker/src/nl/changer/polypicker/GalleryFragment.java b/LibPolyPicker/src/nl/changer/polypicker/GalleryFragment.java
@@ -1,14 +1,12 @@
 package nl.changer.polypicker;
 
-import nl.changer.polypicker.R;
 import nl.changer.polypicker.model.Image;
 import android.content.Context;
 import android.database.Cursor;
 import android.net.Uri;
 import android.os.Bundle;
 import android.provider.MediaStore;
 import android.support.v4.app.Fragment;
-import android.util.Log;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
@@ -26,9 +24,9 @@ public class GalleryFragment extends Fragment {
 
     private static final String TAG = GalleryFragment.class.getSimpleName();
 
-    GridView mGalleryGridView;
-    ImageGalleryAdapter mGalleryAdapter;
-    ImagePickerActivity mActivity;
+    private GridView mGalleryGridView;
+    private ImageGalleryAdapter mGalleryAdapter;
+    private ImagePickerActivity mActivity;
 
     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
@@ -41,8 +39,8 @@ public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle sa
         Cursor imageCursor = null;
         try {
         	final String[] columns = {MediaStore.Images.Media.DATA, MediaStore.Images.ImageColumns.ORIENTATION};
-            final String orderBy = MediaStore.Images.Media.DATE_ADDED;
-            imageCursor = getActivity().getContentResolver().query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, columns, null, null, orderBy + " DESC");
+            final String orderBy = MediaStore.Images.Media.DATE_ADDED + " DESC";
+            imageCursor = getActivity().getContentResolver().query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, columns, null, null, orderBy);
             while (imageCursor.moveToNext()) {
                 Uri uri = Uri.parse(imageCursor.getString(imageCursor.getColumnIndex(MediaStore.Images.Media.DATA)));
                 int orientation = imageCursor.getInt(imageCursor.getColumnIndex(MediaStore.Images.ImageColumns.ORIENTATION));
@@ -78,6 +76,8 @@ public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
 
     class ViewHolder {
         ImageView mThumbnail;
+        // This is like storing too much data in memory.
+        // find a better way to handle this
         Image mImage;
     }
 

diff --git a/PolyPickerDemo/res/drawable/btn_remove.png b/PolyPickerDemo/res/drawable/btn_remove.png
diff --git a/PolyPickerDemo/res/layout/main.xml b/PolyPickerDemo/res/layout/main.xml
@@ -3,28 +3,56 @@
     android:id="@+id/container"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:gravity="center"
     android:orientation="vertical"
     android:padding="10dp"
     tools:context="nl.changer.polypickerdemo.MainActivity"
     tools:ignore="MergeRootFrame" >
 
-    <Button
-        android:id="@+id/get_images"
+    <RelativeLayout
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginLeft="30dp"
-        android:layout_marginRight="30dp"
-        android:text="Pick/Capture images"
-        android:textColor="#000000" />
+        android:layout_height="wrap_content" >
 
-    <Button
-        android:id="@+id/get_n_images"
+        <Button
+            android:id="@+id/get_images"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginLeft="30dp"
+            android:layout_marginRight="30dp"
+            android:text="Pick/Capture images"
+            android:textColor="#000000" />
+
+        <Button
+            android:id="@+id/get_n_images"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_below="@id/get_images"
+            android:layout_marginLeft="30dp"
+            android:layout_marginRight="30dp"
+            android:text="Pick/Capture only 3 images"
+            android:textColor="#000000" />
+    </RelativeLayout>
+
+    <HorizontalScrollView
+        android:id="@+id/hori_scroll_view"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginLeft="30dp"
-        android:layout_marginRight="30dp"
-        android:text="Pick/Capture only 3 images"
-        android:textColor="#000000" />
+        android:layout_height="match_parent"
+        android:fillViewport="false"
+        android:foregroundGravity="left"
+        android:paddingBottom="1dp"
+        android:paddingTop="1dp" >
+
+        <LinearLayout
+            android:id="@+id/selected_photos_container"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:layout_gravity="left"
+            android:animateLayoutChanges="true"
+            android:gravity="left"
+            android:orientation="horizontal"
+            android:visibility="visible" >
+
+            <!-- images will be added dynamicall to this layout -->
+        </LinearLayout>
+    </HorizontalScrollView>
 
 </LinearLayout>
diff --git a/PolyPickerDemo/res/layout/media_layout.xml b/PolyPickerDemo/res/layout/media_layout.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:background="@android:color/white"
+    android:clickable="true"
+    android:orientation="vertical"
+    android:padding="@dimen/media_spacing" >
+
+    <ImageView
+        android:id="@+id/media_image"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:adjustViewBounds="true"
+        android:contentDescription="new post image"
+        android:scaleType="centerCrop"
+        android:visibility="visible" />
+
+    <!-- <ImageView
+        android:id="@+id/remove_media"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_gravity="right|top"
+        android:layout_margin="@dimen/media_spacing"
+        android:background="@android:color/transparent"
+        android:contentDescription="remove button"
+        android:src="@drawable/btn_remove" /> -->
+
+</FrameLayout>
diff --git a/PolyPickerDemo/res/values/dimens.xml b/PolyPickerDemo/res/values/dimens.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <dimen name="media_spacing">10dp</dimen>
+
+</resources>
diff --git a/PolyPickerDemo/src/nl/changer/polypickerdemo/MainActivity.java b/PolyPickerDemo/src/nl/changer/polypickerdemo/MainActivity.java
@@ -1,8 +1,11 @@
 package nl.changer.polypickerdemo;
 
+import java.io.File;
 import java.util.HashSet;
+import java.util.Iterator;
 
 import nl.changer.polypicker.ImagePickerActivity;
+import nl.changer.polypicker.utils.ImageInternalFetcher;
 import android.app.Activity;
 import android.content.Context;
 import android.content.Intent;
@@ -11,8 +14,12 @@
 import android.os.Parcelable;
 import android.support.v4.app.FragmentActivity;
 import android.util.Log;
+import android.util.TypedValue;
+import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
+import android.widget.FrameLayout;
+import android.widget.ImageView;
 
 public class MainActivity extends FragmentActivity {
 
@@ -33,6 +40,7 @@ protected void onCreate(Bundle savedInstanceState) {
 		setContentView(R.layout.main);
 		mContext = MainActivity.this;
 
+		mSelectedImagesContainer = (ViewGroup) findViewById(R.id.selected_photos_container);
 		View getImages = findViewById(R.id.get_images);
 
 		getImages.setOnClickListener(new View.OnClickListener() {
@@ -88,8 +96,50 @@ protected void onActivityResult(int requestCode, int resuleCode, Intent intent)
                 		Log.i(TAG, " uri: " + uri);
                 		mMedia.add(uri);
 					}
+
+                	showMedia();
                 }
 			}
 		}
 	}
+
+	private void showMedia() {
+
+		// Remove all views before
+		// adding the new ones.
+		mSelectedImagesContainer.removeAllViews();
+
+		Iterator<Uri> iterator = mMedia.iterator();
+		ImageInternalFetcher imageFetcher = new ImageInternalFetcher(this, 500);
+		while(iterator.hasNext()) {
+			Uri uri = iterator.next();
+
+			// showImage(uri);
+			Log.i(TAG, " uri: " + uri);
+			if(mMedia.size() >= 1) {
+                mSelectedImagesContainer.setVisibility(View.VISIBLE);
+            }
+
+			View imageHolder = LayoutInflater.from(this).inflate(R.layout.media_layout, null);
+
+			// View removeBtn = imageHolder.findViewById(R.id.remove_media);
+			// initRemoveBtn(removeBtn, imageHolder, uri);
+            ImageView thumbnail = (ImageView) imageHolder.findViewById(R.id.media_image);
+
+            if(!uri.toString().contains("content://")) {
+    			// probably a relative uri
+            	uri = Uri.fromFile(new File(uri.toString()));
+    		}
+
+            imageFetcher.loadImage(uri, thumbnail);
+
+            mSelectedImagesContainer.addView(imageHolder);
+
+            // set the dimension to correctly 
+            // show the image thumbnail.
+            int wdpx = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 300, getResources().getDisplayMetrics());
+            int htpx = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 200, getResources().getDisplayMetrics());
+            thumbnail.setLayoutParams(new FrameLayout.LayoutParams(wdpx, htpx));
+		}
+	}
 }