Android初级教程_图片混排效果和ViewPager的使用

前段时间公司需要实现图片混排的效果,类似"美丽说"那样,宽度一样,高度不一.总共有3列.每次加载更多的时候都是往最低的那列添加图片,这样就不会出现有的列非常多的图片,而有的列图片很少.首先申明的是这个例子是根据别人的程序基础上改的:https://github.com/dodola/android_waterfall再次感谢.!

效果如下图所示:

当滑倒底部的时候如果还有图片则自动加载下一页.

代码实现如下:

首先自定义布局:

public class MyLinearLayout extends LinearLayout {

    private Map<Integer, Integer> map;
    private ArrayList<LinearLayout> waterfall_items;
    private Context context;
    private Display display;
    private int itemWidth;

    public MyLinearLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public MyLinearLayout(Context context) {
        super(context);
    }

    /**
     * 初始化容器
     * @param columnCount
     *            列数
     * @param paddingLeft
     * @param paddingTop
     * @param paddingRight
     * @param paddingBottom
     */
    public void initLayout(int columnCount, int paddingLeft, int paddingTop,
            int paddingRight, int paddingBottom) {

        if (columnCount < 1)
            columnCount = 3;

        Constans.COLUMN_COUNT = columnCount;

        waterfall_items = new ArrayList<LinearLayout>();
        map = new HashMap<Integer, Integer>();
        for (int i = 0; i < columnCount; i++) {
            map.put(i, 0);
        }
        context = getContext();
        WindowManager windowManager = (WindowManager) context
                .getSystemService(Context.WINDOW_SERVICE);
        display = windowManager.getDefaultDisplay();
        itemWidth = display.getWidth() / columnCount;// 根据屏幕大小计算每列大小
        for (int i = 0; i < columnCount; i++) {
            LinearLayout itemLayout = new LinearLayout(context);
            LinearLayout.LayoutParams itemParam = new LinearLayout.LayoutParams(
                    itemWidth, LayoutParams.WRAP_CONTENT);
            itemLayout.setPadding(1, 2, 1, 2);
            itemLayout.setOrientation(LinearLayout.VERTICAL);
            itemLayout.setLayoutParams(itemParam);
            waterfall_items.add(itemLayout);
            this.addView(itemLayout);
        }
    }
    /**
     * 贴图
     * @param article 文章实体
     * @param columnIndex 列索引
     */
    private void addImage(final Article article, int columnIndex) {
        ImageView item = (ImageView) LayoutInflater.from(context).inflate(
                R.layout.waterfallitem, null);
        waterfall_items.get(columnIndex).addView(item);
        //int inSampleSize = 1;
        int h = 0;
        // int originalWidth = article.getWidth();
         int originalHieght = article.getHeight();
        //
        // int screenHeight = display.getHeight() / 7;
        // int screenWidth = display.getWidth() / 7;
        // float heightRatio = (float) Math.ceil(article.getHeight()
        // / screenHeight);
        // float widthRatio = (float) (Math.ceil(originalWidth / screenWidth));
        // if (heightRatio >= 1 && widthRatio >= 1) {
        // if (heightRatio > widthRatio) {
        // inSampleSize = (int) heightRatio;
        // } else {
        // inSampleSize = (int) widthRatio;
        // }
        // h = originalHieght;// inSampleSize;
        // } else {
        // h = originalHieght;
        // }
        h = originalHieght;
        int value = map.get(columnIndex);
        map.put(columnIndex, value+h);

        TaskParam param = new TaskParam();
        param.setItemWidth(itemWidth);
        Bitmap defaultImage = BitmapFactory.decodeResource(getResources(),
                R.drawable.loading);
        ImageLoaderTask task = new ImageLoaderTask(item, display,
                article.getImage(), article, defaultImage, param);
        task.execute(param);
        item.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent();
                intent.setClassName(context.getPackageName(),
                        GirlDetailActivity.class.getName());
                intent.putExtra("id", article.getId());
                context.startActivity(intent);
            }
        });


    }

    /**
     * 把图片集合填充到容器里
     * @param articles
     */
    public void setAdapter(List<Article> articles) {
        for (int i = 0; i < articles.size(); i++) {
            Article article = articles.get(i);
            addImage(article, getLowestColumn());
        }
    }

    public int getLowestColumn(){
        List<Integer> list = new ArrayList<Integer>();
        list.addAll(map.values());
        Collections.sort(list);
        int min = list.get(0);
        Set<Map.Entry<Integer, Integer>> entrySet = map.entrySet();
        for (Map.Entry<Integer, Integer> entry : entrySet) {
            if(min==entry.getValue()){
                return entry.getKey();
            }
        }
        return 0;
    }
}

界面Activity:

Handler handler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            waterfall_container.setAdapter(articles);//设置数据
                if(countImage==currentCount){
                    System.out.println("已经到最后");
                    textView.setVisibility(View.VISIBLE);
                }
        }
    };

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        initLayout();

    }

    private void initLayout() {

        textView = (TextView) findViewById(R.id.tv_tip);
        waterfall_scroll = (LazyScrollView) findViewById(R.id.waterfall_scroll);
        waterfall_scroll.getView();
        waterfall_scroll.setOnScrollListener(new OnScrollListener() {

            @Override
            public void onTop() {
                Log.d("LazyScroll", "Scroll to top");
            }
            @Override
            public void onScroll() {
                Log.d("LazyScroll", "Scroll");
            }
            @Override
            public void onBottom() {
                // 滚动到最底端
                if(countImage!=currentCount) {
                    new Thread(new LoadMyArticle()).start();//加载下一页
                }
            }
        });
        waterfall_container = (MyLinearLayout) this
                .findViewById(R.id.waterfall_container);

        //初始化容器
        waterfall_container.initLayout(3, 2, 2, 2, 2);

        // 加载所有图片路径
        new Thread(new LoadMyArticle()).start();

    }

    public final class LoadMyArticle implements Runnable {
        @Override
        public void run() {
            try {
                url_article_list.append("&page=").append(page++);
                InputStream inputStream = GsonJsonParser
                        .getIputStream(url_article_list.toString());
                ArticleJson articleJson = (ArticleJson) GsonJsonParser
                        .parseStreamToObject(inputStream, ArticleJson.class);
                countImage = articleJson.getTotal();
                articles = articleJson.getData();
                currentCount += articles.size();
                handler.sendEmptyMessage(1);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

当点击某一张图片的时候,进入图片详情.这里使用了VIewPager来实现的.效果如下:

实现如下:

private ViewPager viewPager;
    private List<ImageView> imageViews = new ArrayList<ImageView>();
    private List<Photo> photos;
    private Map<Integer,SoftReference<Bitmap>> cache = new HashMap<Integer,SoftReference<Bitmap>>();
    private ProgressBar pb;
    private MyAsyncTask myAsyncTask;
    int screenWidth ;
    int screenHeight;
    Handler handler = new Handler(){
        public void handleMessage(android.os.Message msg) {
            switch (msg.what) {
            case 1:
                if(photos!=null&&photos.size()>0){
                    for (int i = 0; i < photos.size(); i++) {
                        ImageView imageView = new ImageView(GirlDetailActivity.this);
                        imageViews.add(imageView);
                    }
                    viewPager.setAdapter(new AwesomePagerAdapter());
                    myAsyncTask = new MyAsyncTask(0);
                    myAsyncTask.execute(photos.get(0).getImage());
                }
                break;
            }
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.girls_detail);
        Display display = getWindowManager().getDefaultDisplay();
        display = getWindowManager().getDefaultDisplay();
        screenWidth = display.getWidth();
        screenHeight = display.getHeight();
        init();
        Intent intent = getIntent();
        String id = intent.getStringExtra("id");
        StringBuffer url = new StringBuffer(url);
        url.append("?id=").append(id).append("&type=2");
        new Thread(new LoadImagePath(url.toString())).start();

    }

    public void init(){

        pb = (ProgressBar) findViewById(R.id.widget);

        viewPager = (ViewPager) findViewById(R.id.awesomepager);

        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageSelected(final int position) {
                String image_path = photos.get(position).getImage();
                pb.setVisibility(View.GONE);
                if(cache.containsKey(position)){
                    Bitmap bitmap = cache.get(position).get();
                    if(bitmap!=null){
                        imageViews.get(position).setImageBitmap(bitmap);
                    }else {
                        if(!myAsyncTask.isCancelled()){
                            System.out.println("任务被取消");
                            myAsyncTask.cancel(true);
                        }
                        myAsyncTask = new MyAsyncTask(position);
                        myAsyncTask.execute(image_path);
                    }
                }else {
                    if(!myAsyncTask.isCancelled()){
                        System.out.println("任务被取消");
                        myAsyncTask.cancel(true);
                    }
                    myAsyncTask = new MyAsyncTask(position);
                    myAsyncTask.execute(image_path);
                }
            }

            @Override
            public void onPageScrolled(int position, float positionOffset,
                    int positionOffsetPixels) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }




    public class AwesomePagerAdapter extends PagerAdapter {
        @Override
        public int getCount() {
            return imageViews.size();
        }

        @Override
        public Object instantiateItem(View collection, int position) {

            ImageView imageView = imageViews.get(position);
            ((ViewPager) collection).addView(imageView, 0);
            return imageViews.get(position);
        }

        @Override
        public void destroyItem(View collection, int position, Object view) {
            ((ViewPager) collection).removeView(imageViews.get(position));
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            // System.out.println("isViewFromObject");
            return view == (object);
        }

        @Override
        public void finishUpdate(View arg0) {
            // System.out.println("finishUpdate");
        }

        @Override
        public void restoreState(Parcelable arg0, ClassLoader arg1) {
            // System.out.println("restoreState");
        }

        @Override
        public Parcelable saveState() {
            // System.out.println("saveState");
            return null;
        }

        @Override
        public void startUpdate(View arg0) {
        }

    }

    @Override
    public void onStop() {
        super.onStop();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }

    private final class LoadImagePath implements Runnable{
        private String url;
        public LoadImagePath(String url){
            this.url = url;
        }
        @Override
        public void run() {
            try {
                InputStream in = JsonParse.getIputStream(url);
                PhotoDetailJson photoDetailJson = (PhotoDetailJson) GsonJsonParser.parseStreamToObject(in, PhotoDetailJson.class);
                PhotoDetail detail = photoDetailJson.getData();
                photos = detail.getPhoto();
                handler.sendEmptyMessage(1);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    public final class MyAsyncTask extends AsyncTask<String, Void, Bitmap>{

        private int position;
        public MyAsyncTask(int position){
            this.position = position;
        }
        @Override
        protected Bitmap doInBackground(String... params) {
            String path = params[0];
            try {
                InputStream in = JsonParse.getIputStream(path);
                //如果屏幕超过800*480
                if(screenWidth>480&&screenHeight>800){//960x540
                    screenWidth = 480;
                    screenHeight = 800;
                }
                 Bitmap bitmap = ImageUtil.getSizedBitmap(screenWidth, screenHeight, in);
                 cache.put(position, new SoftReference<Bitmap>(bitmap));
                 return bitmap;
            } catch (IOException e) {
                e.printStackTrace();
            } catch (Exception e) {
                e.printStackTrace();
            }
            return null;
        }

        @Override
        protected void onPostExecute(Bitmap result) {
            super.onPostExecute(result);
            imageViews.get(position).setImageBitmap(result);
            pb.setVisibility(View.GONE);
        }

        @Override
        protected void onPreExecute() {
            super.onPreExecute();
            pb.setVisibility(View.VISIBLE);
            imageViews.get(position).setImageResource(R.drawable.wait_girl_detail);
        }

    }

完毕!

欢迎转载,转载请注明出处:http://blog.csdn.net/johnny901114/article/details/7835139

谢谢大家.希望对你有帮助.有事请留言....