Span dwie kolumny gridview nad trzema

Question

Mam nadzieję, że ktoś może mi pomóc, mam układ siatki wypełniony przez adapter z 8 przedmiotami. W siatce znajdują się trzy kolumny, pozostawiają mnie dwa rzędy z trzema pełnymi kolumnami i dwiema, a na końcu pustą luką. Załączam zdjęcia, aby szczegółowo określić, co próbuję osiągnąć. Chcę móc rozciągnąć kolumny wierszy ostatniego wiersza, aby wypełnić szerokość widoku siatki. To jest wypełniane przez adapter.

Poniżej znajduje się aplikacja, teraz mam zawartość w 8 komórkach, nie ma dziewiątej komórki na wypadek pomyłki z obrazem.

Oto, jak chciałbym wyglądać. Chciałbym rozciągnąć dwie komórki w trzech kolumnach.

Poniżej jest mój kod co mam realizowane dotychczas

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; 
    } 

} 

Oto kod dla mojego układu fragment zawierający 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> 

i wreszcie układ dla mojej pozycji siatki

<?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> 

Jeśli ktoś mógłby mi w tym pomóc, byłbym bardzo wdzięczny. Zbadałem fora i natknąłem się na sugestie dotyczące używania gridlayout, są obsługiwane od api 14 i nowsze, ale rozwijam się na api 9 i wyżej.

Dzięki!

Answer 1

Można użyć RecyclerView z GridLayoutManager aby wykonać zadanie:

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: Kiedyś lib FastAdapter tworzyć przedmioty dla RecyclerView, który bardzo polecam: https://github.com/mikepenz/FastAdapter