如何使用不同的项目大小制作Listview或Gridview?

时间:2016-03-23 13:09:19

标签: android listview android-gridview

我希望GridView或ListView有第一行的一个项目的宽度很大而第二个项目的宽度很小但是高度相同。在第二行之后,一个项目的宽度很小,第二个项目的宽度很大。这种模式继续列在列表的末尾。

完全像是吼叫: enter image description here

2 个答案:

答案 0 :(得分:1)

如果您的选择不仅限于listview和gridview,请试试这个 StaggeredGrid

enter image description here

如果您愿意,也可以使用 recyclerView ,它包含一些逻辑。

答案 1 :(得分:0)

我无法搜索库列表但我根据布局制作逻辑并解决了列表问题。 在这里,我想分享我的代码,我根据给定的问题得到了我的上市要求。 我根据给定的列表在重量给出的每两个图像中进行两个线性布局的布局。现在我把逻辑奇数和偶数。奇数第一个LinearLayout是可见的,偶数第二个LinearLayout是可见的。

下面是我为列表行做的布局。

<LinearLayout
    android:id="@+id/lvFirst"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:layout_margin="3dp">

    <ImageView
        android:id="@+id/imgOne"
        android:scaleType="centerCrop"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:layout_weight="2.0"
        android:padding="3dp"/>

    <ImageView
        android:id="@+id/imgTwo"
        android:scaleType="centerCrop"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:padding="3dp"/>
</LinearLayout>

<LinearLayout
    android:id="@+id/lvSecond"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:layout_margin="3dp">

    <ImageView
        android:id="@+id/imgThree"
        android:scaleType="centerCrop"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:padding="3dp"/>

    <ImageView
        android:id="@+id/imgFour"
        android:scaleType="centerCrop"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:layout_weight="2.0"
        android:padding="3dp"/>
</LinearLayout>

列表视图的适配器代码如下:

public class ImageAdapterNew extends BaseAdapter {
private Context mContext;
private int[] mThumbIds;
boolean mIsPro;
ArrayList<HashMap<String, Integer>> imgList = new ArrayList<>();
public ImageAdapterNew(Context c, int numPics,
String imgName, boolean isPro) {
    mContext = c;
    mThumbIds = new int[numPics];
    int count = 0;
    HashMap<String, Integer> map = new HashMap<>();
    for (int i = 0; i < numPics; i++) {
        mThumbIds[i] = c.getResources().getIdentifier("small_" +
        imgName + "_" + i, "drawable", c.getPackageName());
        if (count >= 2) {
            count = 0;
            imgList.add(map);
            map = new HashMap<>();
            map.put(count + "", mThumbIds[i]);
        } else {
            map.put(count + "", mThumbIds[i]);
        }
        count++;
    }
    mIsPro = isPro;
}
public int getCount() {
    return imgList.size();
}
public Object getItem(int position) {
    return imgList.get(position);
}
public long getItemId(int position) {
    return position;
}
public View getView(int position, View convertView, ViewGroup parent) {
    View row = convertView;
    ViewHolder holder = null;
    if (row == null) {
        LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        row = inflater.inflate(R.layout.image_grid_new, parent, false);
        holder = new ViewHolder();
        holder.lvFirst = (LinearLayout) row.findViewById(R.id.lvFirst);
        holder.lvSecond = (LinearLayout) row.findViewById(R.id.lvSecond);
        holder.imgOne = (ImageView) row.findViewById(R.id.imgOne);
        holder.imgTwo = (ImageView) row.findViewById(R.id.imgTwo);
        holder.imgThree = (ImageView) row.findViewById(R.id.imgThree);
        holder.imgFour = (ImageView) row.findViewById(R.id.imgFour);
        row.setTag(holder);
    } else {
        holder = (ViewHolder) row.getTag();
    }
    if (position % 2 == 0) {
        holder.lvFirst.setVisibility(View.VISIBLE);
        holder.lvSecond.setVisibility(View.GONE);

        if (mThumbIds[position] != 0) {
        Picasso.with(mContext).load(imgList.get(position).get("0")).noFade().resize(300, 533).centerInside().into(holder.imgOne);                Picasso.with(mContext).load(imgList.get(position).get("1")).noFade().resize(300, 533).centerInside().into(holder.imgTwo);
            //If you don't want to use Picasso comment previous line and uncomment next line
            //imageView.setImageResource(mThumbIds[position]);
        }
    } else {
        holder.lvFirst.setVisibility(View.GONE);
        holder.lvSecond.setVisibility(View.VISIBLE);
        if (mThumbIds[position] != 0) {
          Picasso.with(mContext).load(imgList.get(position).get("0")).noFade().resize(300, 533).centerInside().into(holder.imgThree);                Picasso.with(mContext).load(imgList.get(position).get("1")).noFade().resize(300, 533).centerInside().into(holder.imgFour);
            //If you don't want to use Picasso comment previous line and uncomment next line
            //imageView.setImageResource(mThumbIds[position]);
        }
    }
    return row;
}
static class ViewHolder {
    ImageView imgOne, imgTwo, imgThree, imgFour;
    LinearLayout lvFirst, lvSecond;
}
}

任何改进代码的建议或评论都是最好的。