Span due colonne di gridview su tre

Question

Spero che qualcuno possa aiutarmi, ho un layout di griglia popolato da un adattatore con 8 voci. Ci sono tre colonne nella griglia, questo mi lascia con due file con tre colonne piene e due con due e un vuoto vuoto alla fine. Ho allegato immagini per i dettagli che sto cercando di ottenere. Voglio essere in grado di allungare le colonne delle ultime righe per riempire la larghezza della griglia. Questo viene popolato da un adattatore.

Di seguito è come è ora l'app, ho contenuto in 8 celle, non c'è nessuna cella in caso di confusione con la mia immagine.

Ecco come mi piacerebbe che fosse. Quindi mi piacerebbe allungare le due celle su tre colonne.

Qui di seguito è il mio codice per quello che ho realizzato finora

public class channels_fragment extends Fragment { 

    private View view; 
    private GridView channelsGridView; 
    protected Handler handler; 
    //protected GridAdapter gridAdapter; 
    private Main_Activity main; 
    private final ChannelsModel model = new ChannelsModel(); 

    static final String[] channelTitles = new String[]{"test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"}; 


    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 

     main = (Main_Activity) this.getActivity(); 
     view = inflater.inflate(R.layout.channels_fragment_layout, null); 

     channelsGridView = (GridView)view.findViewById(R.id.channelsGrid); 

     channelsGridView.setAdapter(new ImageAdapter(this.getActivity(), channelTitles)); 
     channelsGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() { 
      @Override 
      public void onItemClick(AdapterView<?> parent, View view, int position, long id) { 

      } 
     }); 


     return view; 
    } 


    public static int convertDpToPixels(float dp, Context context){ 
     Resources resources = context.getResources(); 
     return (int) TypedValue.applyDimension(
       TypedValue.COMPLEX_UNIT_DIP, 
       dp, 
       resources.getDisplayMetrics() 
     ); 
    } 

class ImageAdapter extends BaseAdapter{ 

    private Context context; 
    private final String[] channelTitles; 

    public ImageAdapter(Context context, String[] channelTitles){ 
     this.context = context; 
     this.channelTitles = channelTitles; 
    } 

    public View getView(int position, View convertView, ViewGroup parent) { 

     LayoutInflater inflater = (LayoutInflater) context 
       .getSystemService(Context.LAYOUT_INFLATER_SERVICE); 

     View gridView; 

     if (convertView == null) { 

      gridView = new View(context); 

      // get layout from mobile.xml 
      gridView = inflater.inflate(R.layout.grid_item_layout, null); 

      // set value into textview 
      TextView textView = (TextView) gridView 
        .findViewById(R.id.grid_item_text); 
      textView.setText(channelTitles[position]); 

      // set image based on selected text 
      ImageView imageView = (ImageView) gridView 
        .findViewById(R.id.grid_item_image); 

      ImageView iv = (ImageView) gridView.findViewById(R.id.ver_border_dark); 

      String channelTitle = channelTitles[position]; 

      if (position == 6){ 

       gridView.setBackgroundResource(R.drawable.background_bottom_dark); 
       textView.setTextColor(Color.WHITE); 

      } 
      if (position ==7) 

      { 
       gridView.setBackgroundResource(R.drawable.background_bottom_dark); 
       textView.setTextColor(Color.WHITE); 
       iv.setVisibility(View.VISIBLE); 
       iv.setImageResource(R.drawable.grid_line_ondark_vert); 
      } 

      if (channelTitle.equals("test1")) { 
       imageView.setImageResource(R.drawable.icon_events); 
      } else if (channelTitle.equals("test2?")) { 
       imageView.setImageResource(R.drawable.icon_whats_nearby); 
      } else if (channelTitle.equals("test3")) { 
       imageView.setImageResource(R.drawable.icon_top_tips); 
      } else if (channelTitle.equals("test4")) { 
      imageView.setImageResource(R.drawable.icon_plan_my_trip); 
      } else if (channelTitle.equals("test5")) { 
       imageView.setImageResource(R.drawable.icon_special_offers); 
      } else if (channelTitle.equals("test6")) { 
       imageView.setImageResource(R.drawable.icon_explore_more); 
      } else if (channelTitle.equals("test7")) { 
       imageView.setImageResource(R.drawable.icon_city_plus); 
      } else if (channelTitle.equals("test8")) { 

       imageView.setImageResource(R.drawable.icon_audio_guides); 
      } 

     } else { 
      gridView = (View) convertView; 
     } 

     return gridView; 
    } 

    @Override 
    public int getCount() { 
     return channelTitles.length; 
    } 

    @Override 
    public Object getItem(int position) { 
     return null; 
    } 

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

} 

Qui è il codice per il mio layout frammento compreso il GridView

<?xml version="1.0" encoding="utf-8"?> 
<Relative xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ImageView 
     android:id = "@+id/dub_photo" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@drawable/photo"/> 

    <GridView 
     android:id="@+id/channelsGrid" 
     android:background="@drawable/light_background" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:columnWidth="100dp" 
     android:numColumns="auto_fit" 
     android:gravity="center" 
     android:stretchMode="columnWidth" 
     android:layout_below="@+id/dub_photo"> 
    </GridView> 
</RelativeLayout> 

e, infine, il layout per il mio articolo griglia

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <RelativeLayout 
     android:id="@+id/gridItem" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true" 
     android:padding="10dp"> 

     <ImageView 
      android:id ="@+id/grid_item_image" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerHorizontal="true" /> 

     <TextView 
      android:textColor="#000000" 
      android:id = "@+id/grid_item_text" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:textSize="12dp" 
      android:layout_centerHorizontal="true" 
      android:layout_below="@+id/grid_item_image" 
      android:layout_marginTop="10dp" /> 
    </RelativeLayout> 

    <RelativeLayout 
     android:id="@+id/horizontal_border" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_below="@+id/gridItem"> 

     <ImageView 
      android:id = "@+id/hor_border" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/grid_line_horizontal"/> 
    </RelativeLayout> 

    <RelativeLayout 
     android:layout_width="wrap_content" 
     android:layout_alignStart="@id/horizontal_border" 
     android:layout_height="wrap_content" 
     android:layout_above="@+id/horizontal_border"> 

     <ImageView 
      android:id = "@+id/ver_border" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/grid_line_vertical"/> 

     <ImageView 
      android:id = "@+id/ver_border_dark" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/grid_line_ondark_vert" 
      android:visibility="gone"/> 
    </RelativeLayout> 
</RelativeLayout> 

Se qualcuno mi può aiutare con questo lo apprezzerei molto. Ho ricercato i forum e ho trovato suggerimenti sull'utilizzo di gridlayout, ci sono supportati da API 14 e versioni successive ma sto sviluppando per API 9 e versioni successive.

Grazie!

Answer 1

si potrebbe usare un RecyclerView con un GridLayoutManager per fare il lavoro:

final int columns = 12; 
    GridLayoutManager gridLayoutManager = new GridLayoutManager(getActivity(), columns); 
    gridLayoutManager.setOrientation(LinearLayoutManager.VERTICAL); 
    gridLayoutManager.setSpanSizeLookup(
      new GridLayoutManager.SpanSizeLookup() { 
       @Override 
       public int getSpanSize(int position) { 
        IItem adapterItem = mAdapter.getItem(position); 
        if (adapterItem instanceof DefaultItem) { 
         return columns/3; 
        } 
        if (adapterItem instanceof BiggerItem) { 
         return columns/2; 
        } 
        if (adapterItem instanceof FullWidthItem) { 
         return columns; 
        } 
        return 1; 
       } 
      }); 

    mRecyclerView.setLayoutManager(gridLayoutManager); 

PS: ho usato il lib FastAdapter per creare gli elementi per la RecyclerView, che posso raccomandare: https://github.com/mikepenz/FastAdapter