4

I'm using RecyclerView with GridLayout manager to make seat booking layout like travels.

My problem is how to auto detect spancount when my column is random?

I know spanCount = recyclerViewWidth / singleItemWidth;, but the problem is singleItemWidth is different, as the seat width is different.

This is the desired layout that I want:

enter image description here

... but I'm currently getting something like this:

enter image description here

This is the code I'm using to arrange the seat layout:

    gridLayoutManager=new GridLayoutManager(this,totalRows, LinearLayoutManager.VERTICAL,
            false);
    gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
        @Override
        public int getSpanSize(int position) {
            int rows=Integer.parseInt(upperlist.get(position).get("row"));
             return (rows);///(int) (mRecyclerView.getMeasuredWidth()/ 10);
        }
    });
     mRecyclerView.setLayoutManager( gridLayoutManager);
    MyAdapter myAdapter=new MyAdapter(this,gridArray);

... where upperlist hold these values:

 [{cols=8, seatNumber=29U, row=4, zindex=1}, 
  {cols=6,seatNumber=23U, row=4, zindex=1},
  {cols=4,seatNumber=21U,row=4, zindex=1}, 
  {cols=2, seatNumber=11U, row=4, zindex=1}, 
  {cols=0,seatNumber=9U,row=4, zindex=1},

  {cols=8,seatNumber=25U, row=2, zindex=1}, 
  {cols=6,seatNumber=17U, row=2, zindex=1}, 
  {cols=4,seatNumber=13U, row=2, zindex=1}, 
  {cols=2,seatNumber=5U,  row=2, zindex=1}, 
  {cols=10, seatNumber=D2U,row=2, zindex=1}, 
  {cols=0, seatNumber=1U, row=2, zindex=1}, 

  {cols=8, seatNumber=26U, row=1, zindex=1},
  {cols=6,seatNumber=18U, row=1, zindex=1}, 
  {cols=4,seatNumber=14U, row=1, zindex=1},
  {cols=2,seatNumber=6U,  row=1, zindex=1}, 
  {cols=0,seatNumber=2U,  row=1, zindex=1}]

This is a single list, where I'm having different values for rows and columns. I therefore need a generalized method which can work on all layouts.

Matt
  • 74,352
  • 26
  • 153
  • 180
Tufan
  • 2,789
  • 4
  • 34
  • 52

1 Answers1

3

I guess the "cols" parameter definies the column the item should be placed, right? If that's the case, you should take the max value of all items for this parameter. In this case "10". As all items seem to span 2 cloumns, each item has a span-size of 2 and the max span index is 11. Therefore your span-count should be 12 (indizes from 0 to 11).

Now you'll have to figure out the empty spaces. E.g. there is no item at all in row 3 and according to your data, row 1 & 4 have an empty element at the end. So you should define a empty item (-> viewtype!) that represents a blank space in your layout.

Finally, sort the list of items by their row-index and column index, so that you achieve this structure:

[ //row 1
  {cols=0, seatNumber=2U, row=1, zindex=1},
  {cols=2, seatNumber=6U, row=1, zindex=1}, 
  {cols=4, seatNumber=14U, row=1, zindex=1},
  {cols=6, seatNumber=18U, row=1, zindex=1},
  {cols=8, seatNumber=26U, row=1, zindex=1},
  {cols=10, row=1, zindex=1}, //an empty element

  //row 2
  {cols=0, seatNumber=1U, row=2, zindex=1},
  {cols=2, seatNumber=5U,  row=2, zindex=1},  
  {cols=4, seatNumber=13U, row=2, zindex=1}, 
  {cols=6, seatNumber=17U, row=2, zindex=1},
  {cols=8, seatNumber=25U, row=2, zindex=1},  
  {cols=10, seatNumber=D2U,row=2, zindex=1}, 

  //row 3 (just empty elements)
  {cols=0, row=3, zindex=1},
  {cols=2, row=3, zindex=1},
  {cols=4, row=3, zindex=1},
  {cols=6, row=3, zindex=1},
  {cols=8, row=3, zindex=1},
  {cols=10, row=3, zindex=1},

  //row 4
  {cols=0, seatNumber=9U, row=4, zindex=1},
  {cols=2, seatNumber=11U, row=4, zindex=1},
  {cols=4, seatNumber=21U, row=4, zindex=1}, 
  {cols=6, seatNumber=23U, row=4, zindex=1},
  {cols=8, seatNumber=29U, row=4, zindex=1},
  {cols=10, row=4, zindex=1} //an empty element
]

And modify the remaining code in this way:

columnCount = computeTotalColumnCount(...); //
addEmptyElements(...); // add empty elements to your data structure (upperList or gridArray)

gridLayoutManager=new GridLayoutManager(this, columnCount, LinearLayoutManager.VERTICAL,
            false);
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
        @Override
        public int getSpanSize(int position) {
            return 2;
        }
    });

If you want the span-size of each items to be more flexible, you should add a new parameter to each item, so that an item looks like this:

{cols=0, seatNumber=2U, row=1, zindex=1, spansize=2}

You can than modify your SpanSizeLookup to this:

gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
        @Override
        public int getSpanSize(int position) {
            return Integer.parseInt(upperList.get(i).get("spansize"));
        }
   });

I hope this helps ;)

Johannes
  • 223
  • 3
  • 11
  • every things looks fine but how to define a empty item (-> viewtype!) and how to add addEmptyElements(...);...how should i know i have n number of empt view required – Tufan Aug 03 '15 at 12:16
  • Regarding the viewtype, this answer might help: http://stackoverflow.com/a/26245463/1974562 For how to add empty elements, you should create the method "addEmptyElements(...)" and fill all the spots that have no "bed" with empty elements. There's sadly no way to do this easily, so you will have to e.g. iterate over the list, extract all positions that are not occupied by a bed and add empty elements at these positions. You may also mant to change your data structure to something that let's you manage this more easily (e.g. group all items of a row in a "Row" object) – Johannes Aug 03 '15 at 12:19