用自己写的ImageLoad实现照片墙

在上一篇中，我们自己尝试写了一个简单的但功能齐全的ImageLoad，现在我们来尝试着用自己写的ImageLoad写一个简单的照片墙，我们先看看效果图，兴奋一下先：
, "http://img1.mm131.com/pic/2867/0.jpg", "http://img1.mm131.com/pic/2866/0.jpg", "http://img1.mm131.com/pic/2865/0.jpg", "http://img1.mm131.com/pic/2864/0.jpg", "http://img1.mm131.com/pic/2863/0.jpg", "http://img1.mm131.com/pic/2862/0.jpg", "http://img1.mm131.com/pic/2861/0.jpg", "http://img1.mm131.com/pic/2860/0.jpg", "http://img1.mm131.com/pic/2859/0.jpg", "http://img1.mm131.com/pic/2858/0.jpg", "http://img2.mm131.com:55888/pic/2857/0.jpg", "http://img2.mm131.com:55888/pic/2856/0.jpg", "http://img2.mm131.com:55888/pic/2855/0.jpg", "http://img2.mm131.com:55888/pic/2854/0.jpg", "http://img2.mm131.com:55888/pic/2853/0.jpg", "http://img2.mm131.com:55888/pic/2852/0.jpg", "http://img2.mm131.com:55888/pic/2851/0.jpg", "http://img2.mm131.com:55888/pic/2850/0.jpg", "http://img2.mm131.com:55888/pic/2849/0.jpg", "http://img1.mm131.com/pic/2846/0.jpg", "http://img1.mm131.com/pic/2844/0.jpg", "http://img1.mm131.com/pic/2843/0.jpg", "http://img1.mm131.com/pic/2842/0.jpg", "http://img1.mm131.com/pic/2841/0.jpg", "http://img1.mm131.com/pic/2840/0.jpg", "http://img1.mm131.com/pic/2839/0.jpg", "http://img1.mm131.com/pic/2838/0.jpg", "http://img1.mm131.com/pic/2835/0.jpg", "http://img1.mm131.com/pic/2834/0.jpg", "http://img1.mm131.com/pic/2833/0.jpg", "http://img1.mm131.com/pic/2832/0.jpg", "http://img1.mm131.com/pic/2830/0.jpg", "http://img1.mm131.com/pic/2829/0.jpg", "http://img1.mm131.com/pic/2828/0.jpg", "http://img1.mm131.com/pic/2827/0.jpg", "http://img1.mm131.com/pic/2826/0.jpg", "http://img1.mm131.com/pic/2825/0.jpg", "http://img1.mm131.com/pic/2824/0.jpg", "http://img1.mm131.com/pic/2823/0.jpg", "http://img1.mm131.com/pic/2821/0.jpg", "http://img1.mm131.com/pic/2820/0.jpg", "http://img1.mm131.com/pic/2819/0.jpg", "http://img1.mm131.com/pic/2818/0.jpg", "http://img1.mm131.com/pic/2816/0.jpg", "http://img1.mm131.com/pic/2815/0.jpg", "http://img1.mm131.com/pic/2814/0.jpg", "http://img1.mm131.com/pic/2812/0.jpg", "http://img1.mm131.com/pic/2811/0.jpg", "http://img1.mm131.com/pic/2810/0.jpg", "http://img1.mm131.com/pic/2809/0.jpg", "http://img1.mm131.com/pic/2808/0.jpg", "http://img1.mm131.com/pic/2806/0.jpg", "http://img1.mm131.com/pic/2805/0.jpg", "http://img1.mm131.com/pic/2804/0.jpg", "http://img1.mm131.com/pic/2803/0.jpg", "http://img1.mm131.com/pic/2802/0.jpg", "http://img1.mm131.com/pic/2801/0.jpg" }; ArrayListlist = new ArrayList<>(); for (String url : urlArrays) { list.add(url); } return list; } }

好的，内容有了，那么我们还需要显示的界面呀，界面也是很简单的，主体布局就是一个GridView:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.yixingu.myphotowall.MainActivity">

    <GridView  android:id="@+id/gridView" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:horizontalSpacing="5dp" android:verticalSpacing="5dp" android:listSelector="@android:color/transparent" android:numColumns="3" android:stretchMode="columnWidth">
    GridView>
LinearLayout>

还有item：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical">

    <com.yixingu.myphotowall.ui.SquareImageView  android:id="@+id/image" android:layout_width="match_parent" android:layout_height="wrap_content" android:scaleType="centerCrop" android:src="@drawable/img"/>

LinearLayout>

其中SquareImageView是自己自定义的yigeImageView，主要是为了让图片成正方形：

package com.yixingu.myphotowall.ui;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ImageView;

/** * Created by likaisong on 17-4-1. */

public class SquareImageView extends ImageView {

    public SquareImageView(Context context){
        super(context);
    }

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

    public SquareImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
    }
}

主体布局有了，GridView有来，接着当然是Adapter啦，

package com.yixingu.myphotowall.adapter;

import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.graphics.drawable.Drawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

import com.yixingu.myphotowall.R;
import com.yixingu.myphotowall.bean.ImageUrlList;
import com.yixingu.myphotowall.myInageLoader.MyImageLoader;
import com.yixingu.myphotowall.utils.MyUtils;

import java.util.ArrayList;

/** * Created by likaisong on 17-4-1. */

public class ImageAdapter extends BaseAdapter{

    ArrayList urls = ImageUrlList.urlList();
    private Context mContext;
    private MyImageLoader mImageLoader ;
    private boolean mCanGetBitmapFromNetWork = false;
    public static boolean mIsGridViewIdle = true;
    private int mImageWidth = 0;
    private Drawable mDefaultBitmapDrawable;
    private boolean isWifi = false;
    public ImageAdapter(Context context){
        mCOntext= context;
        mDefaultBitmapDrawable = context.getResources().getDrawable(R.drawable.img);
        mImageLoader = MyImageLoader.build(mContext);
        initData();
    }

    private void initData() {
        int screenWidth = MyUtils.getScreenMetrics(mContext).widthPixels;
        int space = (int)MyUtils.dp2px(mContext, 20f);
        mImageWidth = (screenWidth - space) / 3;
        isWifi = MyUtils.isWifi(mContext);
        //判断是不是wifi环境
        if(isWifi){
            mCanGetBitmapFromNetWork = true;
        }
        if(!isWifi){
            AlertDialog.Builder builder = new AlertDialog.Builder(mContext);
            builder.setMessage("初次加载需要5M流量，是否继续？");
            builder.setTitle("注意");
            builder.setPositiveButton("是", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialogInterface, int i) {
                    mCanGetBitmapFromNetWork = true;
                    notifyDataSetChanged();
                }
            });
            builder.setNegativeButton("否",null);
            builder.show();
        }
    }

    @Override
    public int getCount() {
        return urls.size();
    }

    @Override
    public String getItem(int i) {
        return urls.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public View getView(int i, View convertView, ViewGroup viewGroup) {
        ViewHolder holder = null;
        if(cOnvertView== null){
            cOnvertView= LayoutInflater.from(mContext).inflate(R.layout.gridview_item,viewGroup,false);
            holder = new ViewHolder();
            holder.imageView = (ImageView)convertView.findViewById(R.id.image);
            convertView.setTag(holder);
        }else {
            holder = (ViewHolder) convertView.getTag();
        }
        ImageView imageView = holder.imageView;
        final String tag = (String) imageView.getTag();
        final String url = getItem(i);
        if(!url.equals(tag)){
            imageView.setImageDrawable(mDefaultBitmapDrawable);
        }
        //如果列表静止以及可以连接网络状态时
        if(mIsGridViewIdle && mCanGetBitmapFromNetWork){
            imageView.setTag(url);
            //借助异步加载
            mImageLoader.bindBitmap(url,imageView,mImageWidth,mImageWidth);
        }
        return convertView;
    }

    static class ViewHolder{
        ImageView imageView;
    }
}

最后在MainActivity中用就行来，

package com.yixingu.myphotowall;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.AbsListView;
import android.widget.GridView;

import com.yixingu.myphotowall.adapter.ImageAdapter;

public class MainActivity extends AppCompatActivity implements AbsListView.OnScrollListener{

    private GridView gridView;
    private ImageAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        gridView = (GridView)findViewById(R.id.gridView);
        adapter = new ImageAdapter(this);
        gridView.setAdapter(adapter);
        gridView.setOnScrollListener(this);
    }


    @Override
    public void onScrollStateChanged(AbsListView absListView, int scrollState) {
        if(scrollState == AbsListView.OnScrollListener.SCROLL_STATE_IDLE){
        //静态时才加载，滑动不加载
            ImageAdapter.mIsGridViewIdle = true;
            adapter.notifyDataSetChanged();
        }else{
            ImageAdapter.mIsGridViewIdle = false;
        }
    }

    @Override
    public void onScroll(AbsListView absListView, int i, int i1, int i2) {

    }

}

此外，还可以通过硬件加速解决偶尔卡顿现象:android:hardwareAccelerated=”true”．