felipecsl / AsymmetricGridView

Android ListView that mimics a GridView with asymmetric items. Supports items with row span and column span
http://felipecsl.com/AsymmetricGridView
MIT License
1.84k stars 431 forks source link

To Set ColSpan or RowSpan of any item to float number like 1.5(In Facebook Image Grids in feeds it has each item colSpan 2 or 1 or 1.5) #62

Closed singhania1408 closed 7 years ago

Steve2955 commented 7 years ago

Why don't simply make a gridview with colCount 6 and then use Items with a colSpan of 2, 3 and 4 ? This the should look something like this: screenshot_2016-09-20-15-24-12

felipecsl commented 7 years ago

what @Steve2955 said should be sufficient. BTW is that screenshot from an app on the Play Store? I'd love to take a look 😄

Steve2955 commented 7 years ago

@felipecsl The screenshot is not from an app on the playstore. I'm currently in the 10th grade and here in Germany we have to write something called a "Seminarfacharbeit". It's basicly a scientific paper you have to write in a team and it has to be submited until the 12th grade. If you've done this well enough, you don't have to do a second oral exam. Me and my team decided to make an app, which will help users to learn better and more efficent, by analysing their strengths and weaknesses. The app shown in the screenshot is just a compilation of examples, I made for the other members of my team, to show how we could design the start page of the app. In the end we decided to use a asymmetric gridview, so we can make more important topics larger and not so important ones smaller.

And finally I want to thank you for this awesome library you made, it saved me a lot of work and I hope you will continue making it even more awesome.

singhania1408 commented 7 years ago

@felipecsl one more question is it able to confined height of this grid view same as width or wrap content. I am using this library for viewing images in grid (same as Facebook app in feeds) .So i have to specify both height and width of Asymmetric grid View with wrap content.

felipecsl commented 7 years ago

@singhania1408 no, I don't think this will work with wrap content, you'd have to either set fixed dimensions or match_parent

singhania1408 commented 7 years ago

@felipecsl ColSpan or RowSpan is not working greater than 2.Please help me out I have implemented your library already.

Steve2955 commented 7 years ago

@singhania1408 As you can see in the screenshot, I already posted, ColSpan or RowSpan greater than 2 is working. If for some reason this doesn't work for you, you have to give a more detailed description.

singhania1408 commented 7 years ago

@Steve2955 Check this Code i am using this one in my Adapter .It is going correct for two images(1 colSpan) but going wrong for 3 and 4 sets of images.

public class AttachmentSetTask extends AsyncTask<Void, Void, PerAttachmentViewModel> {

    String attachment;
    WeakReference<AsymmetricGridView> attachmentReference;
    List<AsymmetricImageModel> items;

    AttachmentSetTask(String attachemnt, AsymmetricGridView asymmetricGridView) {
        this.attachment = attachemnt;
        items = new ArrayList<AsymmetricImageModel>();
        attachmentReference = new WeakReference<AsymmetricGridView>(asymmetricGridView);
    }

    @Override
    protected PerAttachmentViewModel doInBackground(Void... params) {
        PerAttachmentViewModel perAttachmentViewModel = new PerAttachmentViewModel();
        try {
            JSONArray dataArray = new JSONArray(attachment);
            int length = dataArray.length();
            int colSpan = 1, rowSpan = 1, padding = 0;
            int columnCount = 1, rowCount = 1;

            switch (length) {
                case 1:
                    columnCount = rowCount = 1;
                    padding = 0;
                    break;
                case 2:
                    columnCount = 2;
                    rowCount = 1;
                    padding = 2;
                    break;
                case 3:
                    colSpan = 2;
                    rowSpan = 2;
                    padding = 100;
                    columnCount = 5;
                    rowCount = 4;
                    break;
                case 4:
                    columnCount = 3;
                    rowCount = 3;
                    padding = 30;
                    break;
                default:
                    columnCount = 5;
                    rowCount = 6;
                    padding = 3;

            }
            int colWidth = (width) / columnCount;
            int viewHeight = colWidth * rowCount;
            //viewHolder.asymmetricGridView.setRequestedColumnWidth(colWidth);

            perAttachmentViewModel.setViewHeight(viewHeight);
            perAttachmentViewModel.setColCount(columnCount);
            int hasmore = 0;
            if (length > 5)
                hasmore = length - 5;

            for (int i = 0; i < length; i++) {
                if (length == 3) {
                    colSpan = (i == 0) ? 3 : 2;
                    rowSpan = (i == 0) ? 4 : 2;
                } else if (length == 4) {
                    colSpan = (i == 0) ? 3 : 1;
                    rowSpan = (i == 0) ? 2 : 1;
                } else if (length == 5) {
                    colSpan = (i == 0 || i == 1) ? 3 : 2;
                    rowSpan = (i == 0 || i == 1) ? 3 : 2;

                }
                AsymmetricImageModel asymmetricImageModel = new AsymmetricImageModel(colSpan, rowSpan, i, hasmore);
                JSONObject perObject = dataArray.getJSONObject(i);
                ImageModel imageModel = new ImageModel();
                imageModel.setImageUrl(mCommon.getvalue(perObject, Constants.BIGURL));
                imageModel.setId(mCommon.getvalue(perObject, Constants.ID));
                if (perObject.has(Constants.LIKES))
                    imageModel.setLikeCount(mCommon.getvalue(perObject, Constants.LIKES));
                if (perObject.has(Constants.LIKEBYME))
                    imageModel.setLikeCount(mCommon.getvalue(perObject, Constants.LIKEBYME));
                asymmetricImageModel.setImageModel(imageModel);
                items.add(asymmetricImageModel);
            }

            adapter = new DemoAdapter(context, items, feed_id);

            perAttachmentViewModel.setDemoAdapter(adapter);
            Log.v(TAG, "Feeds Adapter Called having Attachment");

                            /*ImageListAdapter imageListAdapter=new ImageListAdapter(context,android.R.layout.simple_list_item_1,list,list.size());
                            viewHolder.asymmetricGridView.setAdapter(imageListAdapter);*/

        } catch (JSONException e) {
            e.printStackTrace();
        }

        return perAttachmentViewModel;
    }

    @Override
    protected void onPostExecute(final PerAttachmentViewModel success) {
        AsymmetricGridView asymmetricGridView = attachmentReference.get();
        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, success.getViewHeight());
        layoutParams.setMargins(0, 15, 0, 0);
        layoutParams.addRule(RelativeLayout.BELOW, R.id.summary);
        asymmetricGridView.setLayoutParams(layoutParams);
        asymmetricGridView.setVisibility(View.VISIBLE);
        asymmetricGridView.setRequestedHorizontalSpacing(0);
        asymmetricGridView.setRequestedColumnCount(success.getColCount());
        asymmetricGridView.setAllowReordering(false);
        AsymmetricGridViewAdapter asymmetricAdapter =
                new AsymmetricGridViewAdapter<>(context, asymmetricGridView, success.getDemoAdapter());

        asymmetricGridView.setAdapter(asymmetricAdapter);
    }
}
singhania1408 commented 7 years ago

I have read in your previous issues about problems in more than 2 colSpan that's why i am raising this problem.

singhania1408 commented 7 years ago

@felipecsl @Steve2955 Please reply me as soon as possible. Caveats

Currently only has good support for items with rowSpan = 2 and columnSpan = 2. In the near future it will support different layout configurations.

It is mentioned in your ReadMe File.

felipecsl commented 7 years ago

it will work with rowspan/colspan greater than 2, it just might not look good since there's a greater chance you'll end up with more gaps in your grid