Project address: github.com/razerdp/Fri…

The last link: http://www.jianshu.com/p/ff9788581fb0

The next link: http://www.jianshu.com/p/3d0cc6882e1a

Content page inside today’s main realization of the content of the text, because pure text content page is no need to show, web sharing is fixed, only the text is changing.

If you browse the circle of friends at ordinary times, it is not difficult to find that the number of pictures on the size of the control is influential.

It’s easy to see what’s going on in the following two pictures:

  • Figure 1: When the picture is single, we can find that the size of the picture is not fixed, but it is certain that there is an upper limit of width and height for each picture.
  • Figure 2: No matter two or three columns, the item width is the same, and they are all square
  • Figure 3: The picture is 4 pieces, formatted as “tian”, and follows the rules of point 2.

The current solution is as follows: 1 – single picture can be solved, and layout 2 – item can be given width and height directly. 3 – When the image is 4, dynamically set the number of columns to 2, due to the second point, the width is the same.

This article addresses the first point

First of all, we need to know that the image sent by our server is a jsonArray, that is, an array, and its type is 11. That is to say, the group of images may be 1 or 9, but their type is 11.

Therefore, we need to convert locally. After parsing with Gson, we need to determine the number of pictures. If it is equal to 1, we will directly set it to the type we set locally, and then use the layout.

Let’s first define our type, this time we’ll call it 9:

Then copy the original layout and insert an ImageView directly into our content, defining the width, height and maximum height.

General effect as shown in the picture (maximum width and height) :

Then we set up our item and return our RES

/** * Created by large bulb on 2016/2/27. ** * type=9 */
public class ItemWithImgSingle extends BaseItemDelegate {

    public ItemWithImgSingle(a){}

    @Override
    protected void bindData(int position, @NonNull View v, @NonNull MomentsInfo data, int dynamicType) {}@Override
    public int getViewRes(a) {
        return R.layout.dynamic_item_with_img_single;
    }

    @Override
    public void onFindView(@NonNull View parent) {}}Copy the code

Thanks to our previous encapsulation, adding a layout is almost effortless (at least without going to the Adapter to write holder and Swithc ViewType), and then we register with the Adapter and our layout is ready to use.

The next step is to implement our logic.

First go to our request parsing and manually determine if a single image is available (* this article does not write a request code implementation article) :

    @Override
    public void parseResponse(BaseResponse response, JSONObject json, int start, boolean hasMore) throws JSONException {
        hostInfo= JSONUtil.toObject(json.optString("hostInfo"),HostInfo.class);
        List<MomentsInfo> momentsInfos=JSONUtil.toList(json.optString("moments"),new TypeToken<ArrayList<MomentsInfo>>(){}
                .getType());
        setStart(start);
        
        // Check manually
        if(momentsInfos ! =null) {
            for (int i = 0; i < momentsInfos.size(); i++) {
                MomentsInfo momentsInfo = momentsInfos.get(i);
                if(momentsInfo.dynamicInfo ! =null &&
                        momentsInfo.dynamicInfo.dynamicType == DynamicType.TYPE_WITH_IMG) {
                    if(momentsInfo.content.imgurl ! =null && momentsInfo.content.imgurl.size() == 1) {
                        momentsInfo.dynamicInfo.dynamicType = DynamicType.TYPE_IMG_SINGLE;
                    }
                }
            }
        }
        response.setData(momentsInfos);
    }
Copy the code

After each parsing, we iterate through the array to get type. If type is a text, we determine the length of the graph. If type is 1, we manually change the type.

Some people may think that each time through this is too inefficient, and will not block, here is the answer:

  • First of all, the length of the array is related to the count we send when we request it, so if we send eight, we only ask for eight, so the time is almost negligible
  • Second, we’re overriding Volley’s request, executing it inside the request (parseNetworkResponse), and Volley gets to the queue for every request, and this is asynchronous, so it doesn’t block the UI thread. Details can be found here

With these two finished, we started to work on our Item:

Initialize some parameters in onFindView:

   @Override
    public void onFindView(@NonNull View parent) {
        mImageView= (ImageView) parent.findViewById(R.id.img_single);
        if (maxWidth==0){
            maxWidth= UIHelper.getScreenPixWidth(context)-UIHelper.dipToPx(context,90f);
        }
        if (maxHeight==0){
            maxHeight=UIHelper.dipToPx(context,175f); }}Copy the code

Here we mainly initialize the maximum width and height

Then implement our operation in onBindData:

Before we start, let’s think about how we can achieve adaptive sizing:

  • Get the width and height of the image compared to our maximum width and height, then dynamically set the ImageView’s LayoutParams before loading the image
  • Get the width and height of the image, compared to our maximum width and height, and then scale the image

Basically these two schemes, one operation view, one operation picture. Here we use the second option because the first option would cause requestLayout() by constantly setting LayoutParams, which would then result in measurement /layout/ redraw, which would still be visually stuck. So we go to plan two.

For scheme 2, we can know by Glide official document that we implement the following methods:

Glide.with(yourApplicationContext))
    .load(youUrl)
    .asBitmap()
    .into(new SimpleTarget<Bitmap>(myWidth, myHeight) {
        @Override
        public void onResourceReady(Bitmap bitmap, GlideAnimation anim) {
            // Do something with bitmap here.}};Copy the code

Can get the picture information, here we can judge the width and height of the picture, and then through Glide override method to get the picture. (PS: I do not know whether it is good to call Glide in Glide, intuition is not very good, but I have not thought of a better method at the moment… I hope you can teach it to me.

The code is as follows:

 @Override
    protected void bindData(int position, @NonNull View v, @NonNull MomentsInfo data, int dynamicType) {
        final String imgUrl=data.content.imgurl.get(0);
        if(! TextUtils.isEmpty(imgUrl)){ Glide.with(context).load(imgUrl).asBitmap().into(new SimpleTarget<Bitmap>() {
                @Override
                public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
                    if (resource.getWidth() >= maxWidth) {
                        width = maxWidth;
                    }
                    else {
                        width = resource.getWidth();
                    }
                    resource.recycle();
                    Glide.with(context)
                         .load(imgUrl)
                         .dontAnimate()
                         .crossFade()
                         .override(width,
                                 (int) (width * ratio)) .into(mImageView); }}); }}Copy the code

Ratio is our maximum aspect ratio, which allows us to compress images equally without sacrificing any cost as fitXY does. (In short, squashed okay… Or squished…)

The final effect is as follows:

Attached: Three pictures used in this article address: http://d.hiphotos.baidu.com/zhidao/pic/item/faedab64034f78f06cadf7e97a310a55b3191c01.jpg http://www.qqpk.cn/Article/UploadFiles/201201/20120108160105455.jpg http://cdn.duitang.com/uploads/item/201409/27/20140927123303_kdKje.thumb.700_0.jpeg