創建網格佈局。

Question

我需要創建一個這樣的佈局： ，我試圖使用gridlayout來做到這一點，但它找不到正確的方法。任何人都可以請給我一些指導？謝謝！

Answer 1

我想這是最直接的方法是結合水平和垂直LinearLayouts，不同weights設定其子視圖。

這段代碼可能是一個開始point.-

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="100dp" > 

    <RelativeLayout 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:background="@color/green" 
     android:layout_margin="5dp" > 

    </RelativeLayout> 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:orientation="vertical" > 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:layout_margin="5dp" 
      android:background="@color/orange" > 
     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:layout_margin="5dp" 
      android:background="@color/green" > 
     </RelativeLayout> 
    </LinearLayout> 
</LinearLayout> 

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="100dp" > 

    <RelativeLayout 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_margin="5dp" 
     android:layout_weight="0.5" 
     android:background="@color/orange" > 

    </RelativeLayout> 

    <RelativeLayout 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_margin="5dp" 
     android:layout_weight="1" 
     android:background="@color/black" > 

    </RelativeLayout> 
</LinearLayout> 

，類似的this.-

PinterestListView看起來很有希望導致佈局以及。

Answer 2

MainActivity

GridView gridview = (GridView) findViewById(R.id.gridview); 
gridview.setAdapter(new ImageAdapter(this)); 

activity_main.xml中

<GridView xmlns:android=」http://schemas.android.com/apk/res/android&#8221; 
android:id=」@+id/gridview」 
android:layout_width=」fill_parent」 
android:layout_height=」fill_parent」 
android:columnWidth=」150dp」 
android:numColumns=」auto_fit」 
android:verticalSpacing=」10dp」 
android:horizontalSpacing=」10dp」 
android:stretchMode=」columnWidth」 
android:gravity=」center」 
/> 

grid_item.xml

<LinearLayout xmlns:android=」http://schemas.android.com/apk/res/android&#8221; 
android:id=」@+id/GridItem」 
android:layout_width=」fill_parent」 
android:layout_height=」wrap_content」 
android:orientation=」vertical」 
android:gravity=」center_horizontal」> 

<ImageView 
android:id=」@+id/icon_image」 
android:layout_width=」200dp」 
android:layout_height=」150dp」 > 
</ImageView> 

<TextView 
android:id=」@+id/icon_text」 
android:layout_width=」wrap_content」 
android:layout_height=」wrap_content」 
android:gravity=」center_horizontal」 
android:text=」TextView」 
android:textColorHighlight=」#656565″ > 
</TextView> 

</LinearLayout> 

ImageAdapter 

import android.content.Context; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.BaseAdapter; 
import android.widget.ImageView; 
import android.widget.TextView; 

public class ImageAdapter extends BaseAdapter { 
private Context mContext; 

public ImageAdapter(Context c) { 
mContext = c; 
} 

public int getCount() { 
return mThumbIds.length; 
} 

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

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

// create a new ImageView for each item referenced by the Adapter 
public View getView(int position, View convertView, ViewGroup parent) { 
View v; 

if (convertView == null) { // if it’s not recycled, initialize some attributes 
LayoutInflater li = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
v = li.inflate(R.layout.grid_item, null); 
TextView tv = (TextView)v.findViewById(R.id.icon_text); 
tv.setText(mTextsIds[position]); 
ImageView iv = (ImageView)v.findViewById(R.id.icon_image); 
//iv.setLayoutParams(new GridView.LayoutParams(85, 85)); 
//iv.setScaleType(ImageView.ScaleType.CENTER_CROP); 
iv.setPadding(8, 8, 8, 8); 
iv.setImageResource(mThumbIds[position]); 
} else { 
v = (View) convertView; 
} 
return v; 
} 

// references to our images 
private Integer[] mThumbIds = { 
R.drawable.batman_96, R.drawable.caillou_96, 
R.drawable.dennis_96, R.drawable.disney_96, 
R.drawable.heman_96, R.drawable.looneytunes_96, 
R.drawable.popeye_96, R.drawable.ppg_96, R.drawable.sd_96, 
R.drawable.spm_96, R.drawable.superman_96, 
R.drawable.tintin_96, R.drawable.tj_96, R.drawable.wp_96, 
R.drawable.ww_96 

}; 

// references to our texts 
private String[] mTextsIds = { 
「Batman」, 「Caillou」, 
「Dennis The Menace」, 「Disney」, 
「He-Man」, 「Looney Tunes」, 
「Popeye」, 「Power Puff Girls」, 「Scooby Doo」, 
「Spiderman」, 「Superman」, 
「Tintin」, 「Tom and Jerry」, 「Winnie the Poo」, 「Woody Woodpecker」 
}; 
} 

但你必須做出改變，根據您的需求。像圖像的大小。