Loading network images

Import the corresponding libraries

The compile 'com. Android. Support: recyclerview - v7:25.0.0' compile 'com. Making. Bumptech. Glide: glide: 3.7.0'Copy the code

Glide load network pictures, API interface: Gank. IO/API /data/ welfare… The network resources used are dry goods concentration camp provided welfare picture resources, the specific API interface please visit API use Glide open source framework load picture, Use of RecyclerView to achieve waterfall flow mode to display pictures

Create RecyclerView’s layout res/ Layout /fragment_list.xml

  
  Copy the code

Create the layout res/layout/list_item.xml for each item of RecyclerView

Be careful not to write either match_parent or wrap_content, otherwise it won’t look like a waterfall

  
  
      
  Copy the code

Create RecyclerView adapter, gankAdapter.java, the main code logic is as follows

@Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View v = LayoutInflater.from(mContext).inflate(R.layout.list_item,parent,false); return new ViewHolder(v); } @Override public void onBindViewHolder(ViewHolder holder, int position) { final String url = mItems.get(position); Log.e("tag","============onBindViewHolder url: "+url); Glide.with(mContext) .load(url) .placeholder(R.mipmap.ic_launcher) .diskCacheStrategy(DiskCacheStrategy.RESULT) .into(holder.image); holder.image.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View v) { Intent intent = new Intent(); intent.setClass(mContext,PreviewImageActivity.class); intent.putExtra("url",url); mContext.startActivity(intent); }}); } @Override public int getItemCount() { return mItems.size(); } public class ViewHolder extends RecyclerView.ViewHolder{ ImageView image; public ViewHolder(View itemView) { super(itemView); image = (ImageView)itemView.findViewById(R.id.image); }}Copy the code

Create a Fragment to display GankFragment. Java main display logic is as follows:

@Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View v = inflater.inflate(R.layout.fragment_list,container,false); mClient = new OkHttpClient(); mReyclerView = (RecyclerView) v.findViewById(R.id.recycler_view); mReyclerView.setLayoutManager(new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL)); mAdapter = new GankAdapter(getActivity(),mUrls); mReyclerView.setAdapter(mAdapter); loadApi(index); mReyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrollStateChanged(RecyclerView recyclerView, int newState) { super.onScrollStateChanged(recyclerView, newState); } @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { super.onScrolled(recyclerView, dx, dy); if(isScrollToEnd(mReyclerView)){ Log.e("tag","============scroll to end"); index += 1; loadApi(index); }}}); return v; }Copy the code

To load web images, a third-party library of OkHttpClient has been introduced

The compile 'com. Squareup. Okhttp3: okhttp: 3.4.1 track'Copy the code

Logic for loading pictures of the network

private void loadApi(int page){ Request request = new Request.Builder().url("http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/"+page).build(); mClient.newCall(request).enqueue(new Callback() { @Override public void onFailure(Call call, IOException e) { Log.e("tag","loading failure "); e.printStackTrace(); } @Override public void onResponse(Call call, Response response) throws IOException { if(response.isSuccessful()){ String result = response.body().string(); try { JSONObject json = new JSONObject(result); JSONArray array = new JSONArray(json.getString("results")); for(int i = 0; iCopy the code




rendering

Loading local images

Glide load local image, and network image using the same adapter code gankAdapter. Java display logic code LocalAlbumFragment

  private void loadAlbum(){
    AsyncTask asyncTask = new AsyncTask() {
        @Override
        protected Void doInBackground(Void... params) {
            Cursor  c = getContext().getContentResolver().query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
                    new String[]{MediaStore.Images.ImageColumns.DATA},null,null, MediaStore.Images.ImageColumns.DATE_TAKEN+" desc ");
            if(null != c && c.getCount() > 0 && c.moveToFirst()){
                while (c.moveToNext()){
                    mData.add(c.getString(c.getColumnIndex(MediaStore.Images.ImageColumns.DATA)));
                }
            }
            return null;
        }

        @Override
        protected void onPostExecute(Void aVoid) {
            mHandler.sendEmptyMessage(2);

        }
    };

    asyncTask.execute();

  }Copy the code



rendering

Add image transform

Glide Library, you can do some transformation of the image, such as: BitmapTransform (), Glide, bitmapTransform(), you need to write the corresponding transformation method, but now there is a good third-party library has done some commonly used transformation package, you can directly use, Do not repeat the wheel or introduce a third party image transformations

The compile 'jp. Wasabeef: glide - transformations: 2.0.1'Copy the code

This library provides many transformations, such as clipping related, color change related, blur related, etc. For details, please refer to the source code to try out a circle effect

Glide.with(mContext) .load(url) .placeholder(R.mipmap.ic_launcher) .diskCacheStrategy(DiskCacheStrategy.RESULT) .bitmapTransform(new CropCircleTransformation(mContext)) // Use the circle transform, and you can use other transforms. Into (holder.image);Copy the code



rendering

Of course, if you are not satisfied with these effects, you can write the corresponding transformation effect