Android waterfall photo wall implementation, experience the beauty of irregular arrangement Demo

Source code introduction

Android waterfall photo wall implementation, experience the beauty of irregular arrangement Demo.
Source code running screenshot

Source code snippet

 /**
 * Custom ScrollView, in which images are added dynamically.
 *
 * @author guolin
 */  
 public   class MyScrollView extends ScrollView implements OnTouchListener { 
  
 /**
 * The number of images to load per page
 */  
 public   static   final   int PAGE_SIZE = 15 ; 
  
 /**
 * Record the page currently loaded
 */  
 private   int page; 
  
 /**
 * The width of each column
 */  
 private   int columnWidth; 
  
 /**
 * The current height of the first column
 */  
 private   int firstColumnHeight; 
  
 /**
 * The current height of the second column
 */  
 private   int secondColumnHeight; 
  
 /**
 * The current height of the third column
 */  
 private   int thirdColumnHeight; 
  
 /**
 * Whether the layout has been loaded once. The initialization in onLayout only needs to be loaded once.
 */  
 private   boolean loadOnce; 
  
 /**
 * Tools for managing pictures
 */  
 private ImageLoader imageLoader; 
  
 /**
 * Layout of the first column
 */  
 private LinearLayout firstColumn; 
  
 /**
 * Layout of the second column
 */  
 private LinearLayout secondColumn; 
  
 /**
 * Layout of the third column
 */  
 private LinearLayout thirdColumn; 
  
 /**
 * Record all tasks that are downloading or waiting to download.
 */  
 private   static Set<loadimagetask> taskCollection; 
  
 /**
 * The direct child layout under MyScrollView.
 */  
 private   static View scrollLayout; 
  
 /**
 * The height of the MyScrollView layout.
 */  
 private   static   int scrollViewHeight; 
  
 /**
 * Record the vertical scroll distance.
 */  
 private   static   int lastScrollY = - 1 ; 
  
 /**
 * Record all images on the interface so that you can control the release of images at any time.
 */  
 private List<imageview> imageViewList = new ArrayList<imageview>(); 
  
 /**
 * In the Handler, check the image visibility and load more images.
 */  
 private   static Handler handler = new Handler() { 
  
 public   void handleMessage(android.os.Message msg) {
            MyScrollView myScrollView = (MyScrollView) msg.obj;
 int scrollY = myScrollView.getScrollY();
 // If the current scroll position is the same as the last time, it means that scrolling has stopped  
 if (scrollY == lastScrollY) {
 // When you scroll to the bottom and there is no downloading task currently, start loading the next page of images  
 if (scrollViewHeight + scrollY >= scrollLayout.getHeight()
                        && taskCollection.isEmpty()) {
                    myScrollView.loadMoreImages();
 }
                myScrollView.checkVisibility();
 } else {
                lastScrollY = scrollY;
                Message message = new Message();
                message.obj = myScrollView;
 // Determine the scroll position again after 5 milliseconds  
                handler.sendMessageDelayed(message, 5 );
 }
 }; 
  
 }; 
  
 /**
 * Constructor of MyScrollView.
 *
 * @param context
 * @param attrs
 */  
 public MyScrollView(Context context, AttributeSet attrs) {
 super (context, attrs);
        imageLoader = ImageLoader.getInstance();
        taskCollection = new HashSet<loadimagetask>();
        setOnTouchListener( this );
 } 
  
 /**
 * Perform some key initialization operations, get the height of MyScrollView, and get the width of the first column. And start loading the first page of pictures here.
 */  
 @Override  
 protected   void onLayout( boolean changed, int l, int t, int r, int b) {
 super .onLayout(changed, l, t, r, b);
 if (changed && !loadOnce) {
            scrollViewHeight = getHeight();
            scrollLayout = getChildAt( 0 );
            firstColumn = (LinearLayout) findViewById(R.id.first_column);
            secondColumn = (LinearLayout) findViewById(R.id.second_column);
            thirdColumn = (LinearLayout) findViewById(R.id.third_column);
            columnWidth = firstColumn.getWidth();
 loadOnce = true ;
 loadMoreImages();
 }
 } 
  
 /**
 * Listen for user touch screen events and start scrolling detection if the user's finger leaves the screen.
 */  
 @Override  
 public   boolean onTouch(View v, MotionEvent event) {
 if (event.getAction() == MotionEvent.ACTION_UP) {
            Message message = new Message();
            message.obj = this ;
            handler.sendMessageDelayed(message, 5 );
 }
 return   false ;
 } 
  
 /**
 * Start loading the next page of pictures. Each picture will start an asynchronous thread to download.
 */  
 public   void loadMoreImages() {
 if (hasSDCard()) {
 int startIndex = page * PAGE_SIZE;
 int endIndex = page * PAGE_SIZE + PAGE_SIZE;
 if (startIndex < Images.imageUrls.length) {
 Toast.makeText(getContext(), "Loading..." , Toast.LENGTH_SHORT)
                        .show();
 if (endIndex > Images.imageUrls.length) {
                    endIndex = Images.imageUrls.length;
 }
 for ( int i = startIndex; i < endIndex; i++) {
                    LoadImageTask task = new LoadImageTask();
                    taskCollection.add(task);
                    task.execute(Images.imageUrls[i]);
 }
 page++;
 } else {
 Toast.makeText(getContext(), "No more pictures" , Toast.LENGTH_SHORT)
                        .show();
 }
 } else {
 Toast.makeText(getContext(), "SD card not found" , Toast.LENGTH_SHORT).show();
 }
 } 
  
 /**
 * Traverse each image in imageViewList and check the visibility of the image. If the image has left the visible range of the screen, replace the image with an empty image.
 */  
 public   void checkVisibility() {
 for ( int i = 0 ; i < imageViewList.size(); i++) {
            ImageView imageView = imageViewList.get(i);
 int borderTop = (Integer) imageView.getTag(R.string.border_top);
 int borderBottom = (Integer) imageView
                    .getTag(R.string.border_bottom);
 if (borderBottom > getScrollY()
                    && borderTop < getScrollY() + scrollViewHeight) {
                String imageUrl = (String) imageView.getTag(R.string.image_url);
                Bitmap bitmap = imageLoader.getBitmapFromMemoryCache(imageUrl);
 if (bitmap != null ) {
                    imageView.setImageBitmap(bitmap);
 } else {
                    LoadImageTask task = new LoadImageTask(imageView);
                    task.execute(imageUrl);
 }
 } else {
                imageView.setImageResource(R.drawable.empty_photo);
 }
 }
 } 
  
 /**
 * Determine whether the phone has an SD card.
 *
 * @return Returns true if there is an SD card, otherwise returns false.
 */  
 private   boolean hasSDCard() {
 return Environment.MEDIA_MOUNTED.equals(Environment
                .getExternalStorageState());
 } 
  
 /**
 * The task of asynchronously downloading images.
 *
 * @author guolin
 */  
 class LoadImageTask extends AsyncTask<string, void ,= "" bitmap= "" > { 
  
 /**
 * URL of the image
 */  
 private String mImageUrl; 
  
 /**
 * Reusable ImageView
 */  
 private ImageView mImageView; 
  
 public LoadImageTask() {
 } 
  
 /**
 * Pass in a reusable ImageView
 *
 * @param imageView
 */  
 public LoadImageTask(ImageView imageView) {
            mImageView = imageView;
 } 
  
 @Override  
 protected Bitmap doInBackground(String... params) {
            mImageUrl = params[ 0 ];
            Bitmap imageBitmap = imageLoader
                    .getBitmapFromMemoryCache(mImageUrl);
 if (imageBitmap == null ) {
                imageBitmap = loadImage(mImageUrl);
 }
 return imageBitmap;
 } 
  
 @Override  
 protected   void onPostExecute(Bitmap bitmap) {
 if (bitmap != null ) {
 double ratio = bitmap.getWidth() / (columnWidth * 1.0 );
 int scaledHeight = ( int ) (bitmap.getHeight() / ratio);
                addImage(bitmap, columnWidth, scaledHeight);
 }
            taskCollection.remove( this );
 } 
  
 /**
 * Load the image according to the URL passed in. If the image already exists in the SD card, read it directly from the SD card, otherwise download it from the Internet.
 *
 * @param imageUrl
 * URL of the image
 * @return The image loaded into memory.
 */  
 private Bitmap loadImage(String imageUrl) {
            File imageFile = new File(getImagePath(imageUrl));
 if (!imageFile.exists()) {
                downloadImage(imageUrl);
 }
 if (imageUrl != null ) {
                Bitmap bitmap = ImageLoader.decodeSampledBitmapFromResource(
                        imageFile.getPath(), columnWidth);
 if (bitmap != null ) {
                    imageLoader.addBitmapToMemoryCache(imageUrl, bitmap);
 return bitmap;
 }
 }
 return   null ;
 } 
  
 /**
 * Add an image to the ImageView
 *
 * @param bitmap
 * Pictures to be added
 * @param imageWidth
 * The width of the image
 * @param imageHeight
 * The height of the image
 */  
 private   void addImage(Bitmap bitmap, int imageWidth, int imageHeight) {
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    imageWidth, imageHeight);
 if (mImageView != null ) {
                mImageView.setImageBitmap(bitmap);
 } else {
                ImageView imageView = new ImageView(getContext());
                imageView.setLayoutParams(params);
                imageView.setImageBitmap(bitmap);
                imageView.setScaleType(ScaleType.FIT_XY);
                imageView.setPadding( 5 , 5 , 5 , 5 );
                imageView.setTag(R.string.image_url, mImageUrl);
                findColumnToAdd(imageView, imageHeight).addView(imageView);
                imageViewList.add(imageView);
 }
 } 
  
 /**
 * Find the column where the image should be added. The principle is to judge the height of the three columns, and the column with the smallest current height is the one that should be added.
 *
 * @param imageView
 * @param imageHeight
 * @return The column where the image should be added
 */  
 private LinearLayout findColumnToAdd(ImageView imageView,
 int imageHeight) {
 if (firstColumnHeight <= secondColumnHeight) {
 if (firstColumnHeight <= thirdColumnHeight) {
                    imageView.setTag(R.string.border_top, firstColumnHeight);
                    firstColumnHeight += imageHeight;
                    imageView.setTag(R.string.border_bottom, firstColumnHeight);
 return firstColumn;
 }
                imageView.setTag(R.string.border_top, thirdColumnHeight);
                thirdColumnHeight += imageHeight;
                imageView.setTag(R.string.border_bottom, thirdColumnHeight);
 return thirdColumn;
 } else {
 if (secondColumnHeight <= thirdColumnHeight) {
                    imageView.setTag(R.string.border_top, secondColumnHeight);
                    secondColumnHeight += imageHeight;
 imageView
                            .setTag(R.string.border_bottom, secondColumnHeight);
 return secondColumn;
 }
                imageView.setTag(R.string.border_top, thirdColumnHeight);
                thirdColumnHeight += imageHeight;
                imageView.setTag(R.string.border_bottom, thirdColumnHeight);
 return thirdColumn;
 }
 } 
  
 /**
 * Download the image to the SD card for cache.
 *
 * @param imageUrl
 * The URL of the image.
 */  
 private   void downloadImage(String imageUrl) {
 if (Environment.getExternalStorageState().equals(
                    Environment.MEDIA_MOUNTED)) {
                Log.d( "TAG" , "monted sdcard" );
 } else {
                Log.d( "TAG" , "has no sdcard" );
 }
            HttpURLConnection con = null ;
            FileOutputStream fos = null ;
            BufferedOutputStream bos = null ;
            BufferedInputStream bis = null ;
            File imageFile = null ;
 try {
                URL url = new URL(imageUrl);
                con = (HttpURLConnection) url.openConnection();
                con.setConnectTimeout( 5 * 1000 );
                con.setReadTimeout( 15 * 1000 );
                con.setDoInput( true );
                con.setDoOutput( true );
                bis = new BufferedInputStream(con.getInputStream());
                imageFile = new File(getImagePath(imageUrl));
                fos = new FileOutputStream(imageFile);
                bos = new BufferedOutputStream(fos);
 byte [] b = new   byte [ 1024 ];
 int length;
 while ((length = bis.read(b)) != - 1 ) {
                    bos.write(b, 0 , length);
                    bos.flush();
 }
            } catch (Exception e) {
                e.printStackTrace();
 finally
 try {
 if (bis != null ) {
                        bis.close();
 }
 if (bos != null ) {
                        bos.close();
 }
 if (con != null ) {
                        con.disconnect();
 }
                } catch (IOException e) {
                    e.printStackTrace();
 }
 }
 if (imageFile != null ) {
                Bitmap bitmap = ImageLoader.decodeSampledBitmapFromResource(
                        imageFile.getPath(), columnWidth);
 if (bitmap != null ) {
                    imageLoader.addBitmapToMemoryCache(imageUrl, bitmap);
 }
 }
 } 
  
 /**
 * Get the local storage path of the image.
 *
 * @param imageUrl
 * The URL of the image.
 * @return The local storage path of the image.
 */  
 private String getImagePath(String imageUrl) {
 int lastSlashIndex = imageUrl.lastIndexOf( "/" );
            String imageName = imageUrl.substring(lastSlashIndex + 1 );
            String imageDir = Environment.getExternalStorageDirectory()
                    .getPath() + "/PhotoWallFalls/" ;
            File file = new File(imageDir);
 if (!file.exists()) {
                file.mkdirs();
 }
            String imagePath = imageDir + imageName;
 return imagePath;
 }
 } 
  
 }</string,></loadimagetask></imageview></imageview></loadimagetask>