Span zwei Spalten von gridview über drei

Question

ich hoffe jemand kann mir helfen, ich ein Raster-Layout durch einen Adapter mit 8 Elementen gefüllt haben. Es gibt drei Spalten im Gitter, das lässt mich mit zwei Reihen mit drei vollen Spalten und mit zwei und einer leeren Lücke am Ende. Ich habe Bilder zum Detail hinzugefügt, was ich erreichen möchte. Ich möchte in der Lage sein, die Spalten der letzten Zeilenreihen zu strecken, um die Breite der Rasteransicht zu füllen. Dies wird von einem Adapter aufgefüllt.

Unten ist, wie die App jetzt ist, ich habe Gehalt in 8 Zellen, gibt es keine neunte Zelle in Fall gibt es Verwirrung mit meinem Bild.

Hier ist, wie ich es gerne aussehen würde. So würde Ich mag die beiden Zellen in drei Spalten strecken.

Unten finden Sie mein Code für das, was ich

bisher umgesetzt haben

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

} 

Hier ist der Code für mein Fragment Layout einschließlich der 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> 

und schließlich das Layout für mein Rasterelement

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

Wenn jemand mir dabei helfen könnte ich es sehr schätzen würde. Ich habe die Foren recherchiert und bin auf Vorschläge für die Verwendung von gridlayout gestoßen, da sie von API 14 und höher unterstützt werden, aber ich entwickle für API 9 und höher.

Danke!

Answer 1

Sie könnten eine RecyclerView mit einem GridLayoutManager verwenden, um die Arbeit zu erledigen:

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: Ich benutzte die FastAdapter lib die Elemente für die RecyclerView zu erstellen, die ich sehr empfehlen kann: https://github.com/mikepenz/FastAdapter