android的自定义网格视图外观

时间:2014-12-18 08:07:00

标签: java android android-gridview

我有什么输出:

enter image description here


我想要实现的目标:(盒子是图像)

enter image description here


MainActivity .java

public class MainActivity extends Activity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

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

   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
      getMenuInflater().inflate(R.menu.main, menu);
      return true;
   }

}

activity_main.xml中

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
   android:id="@+id/gridview"
   android:layout_width="fill_parent" 
   android:layout_height="fill_parent"
   android:columnWidth="90dp"
   android:numColumns="auto_fit"
   android:verticalSpacing="10dp"
   android:horizontalSpacing="10dp"
   android:stretchMode="columnWidth"
   android:gravity="center"
/>

ImageAdapter .java

public class ImageAdapter extends BaseAdapter {
   private Context mContext;

   // Constructor
   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) {
      ImageView imageView;
      if (convertView == null) {
      imageView = new ImageView(mContext);
      imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
      imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
      imageView.setPadding(8, 8, 8, 8);
      } else {
      imageView = (ImageView) convertView;
      }

      imageView.setImageResource(mThumbIds[position]);
      return imageView;
   }

   // Keep all Images in array
   public Integer[] mThumbIds = {
      R.drawable.sample_2, R.drawable.sample_3,
      R.drawable.sample_4, R.drawable.sample_5,
      R.drawable.sample_6, R.drawable.sample_7,
      R.drawable.sample_0, R.drawable.sample_1,
      R.drawable.sample_2, R.drawable.sample_3,
      R.drawable.sample_4, R.drawable.sample_5,
      R.drawable.sample_6, R.drawable.sample_7,
      R.drawable.sample_0, R.drawable.sample_1,
      R.drawable.sample_2, R.drawable.sample_3,
      R.drawable.sample_4, R.drawable.sample_5,
      R.drawable.sample_6, R.drawable.sample_7
   };
}

2 个答案:

答案 0 :(得分:0)

使用默认网格视图无法实现。 一种方法是使用listView的自定义适配器。

你的get view方法应该类似于:

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

    View rowView = convertView;
    if (rowView == null)//set the convert view and the viewholder 
    {
    if (position%2==0)
    {//code to inflate a 2 item row
                LayoutInflater inflater = _context.getLayoutInflater();
                rowView = inflater.inflate(R.layout.2Item, parent,false);
                ViewHolder viewHolder = new ViewHolder();
                viewHolder._item1 = (ImageView) rowView.findViewById(R.id.2_item_1);

                ViewHolder viewHolder = new ViewHolder();
                viewHolder._item2 = (ImageView) rowView.findViewById(R.id.2_item_2)
                rowView.setTag(viewHolder);
            }

            ViewHolder holder = (ViewHolder) rowView.getTag();
    holder.set();
    else

    {//code to inflate a 3 item row
                LayoutInflater inflater = _context.getLayoutInflater();
                rowView = inflater.inflate(R.layout.3Item, parent,false);
                ViewHolder viewHolder = new ViewHolder();
                viewHolder._item1 = (ImageView) rowView.findViewById(R.id.3_item_1);

                ViewHolder viewHolder = new ViewHolder();
                viewHolder._item2 = (ImageView) rowView.findViewById(R.id.3_item_2)
                rowView.setTag(viewHolder);
    viewHolder._item3 = (ImageView) rowView.findViewById(R.id.3_item_3)
                rowView.setTag(viewHolder);
            }

            ViewHolder holder = (ViewHolder) rowView.getTag();      
            holder.set();
       }
return rowView;
    }

可能有一种更好的表现方式来做我提到的(我的getView代码可能不准确)所以请看一下本教程:http://android.amberfog.com/?p=296

最后评论 - 用于图像的arraylist也应该随意改变,因此数组中的每个项目将包含2或3个图像

答案 1 :(得分:0)

1)创建ListView

2)对于每一行,你有不同的布局,所以你必须告诉列表视图以智能的方式使用convertview,所以覆盖你的适配器的下面的方法,例如ArrayAdapter:

getViewTypeCount():这会询问您有多少不同的行布局,显然是2个。

getItemViewType(int position):获取将由getView创建的View类型,这意味着在getView中您将位置传递给getItemViewType(position)并返回一个数字,例如,如果它是2表示您如果是2,则必须使用连续3个图像的布局。

其他步骤与普通列表视图相同。