2013-12-18 127 views
5

我希望有人能幫助我,我有一個由8個項目的適配器填充的網格佈局。網格中有三列,這給我留下了兩行,三列滿,兩列,最後一個空的空白。我附加了圖片來詳細說明我想要實現的目標。我希望能夠拉伸最後一行的行列來填充gridview的寬度。這由適配器填充。跨越gridview的兩列三個

下面是如何應用程序是現在,我有8個單元格的內容,沒有第九個單元格,以防與我的圖像混淆。 How the application is now

以下是我希望它看起來如何。 enter image description here 所以我想在兩列拉伸兩個單元格。

下面是我爲我到目前爲止執行代碼

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

} 

這裏是我的片段佈局,包括在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> 

最後的佈局我的網格項代碼

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

如果有人能幫助我,我會很感激。我研究過這個論壇,並且我遇到過使用gridlayout的建議,從api 14開始支持,但是我正在爲api 9開發。

謝謝!

+0

可能重複的[Android的 - GridView的:指定列跨度](http://stackoverflow.com/questions/1272742/android-gridview-specify-column-span) – Prateek

+0

它不是重複的,它是如何重複?我正在提出一個具體的問題,我提供了我的資源。我也看了一下,在那個答案中除了說表格佈局提供了跨越的幫助之外沒有任何幫助。 –

+0

用同一個基礎問一個新問題並不能使它不同?如果它不可能使用GridView,那麼你可能不會嘗試使用Gridview來完成它! – Prateek

回答

0

你可以使用一個RecyclerView與GridLayoutManager做的工作:

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:我用FastAdapter LIB以創建RecyclerView,我強烈推薦的項目:https://github.com/mikepenz/FastAdapter