Wie erstellt man Listenansicht oder Gridview mit unterschiedlicher Artikelgröße?

Question

Ich möchte GridView oder ListView, die ersten Zeile hat ein Item Breite ist groß und zweite Element Breite ist klein, aber Höhe ist gleich. Danach ist die Breite eines Artikels für die zweite Reihe klein und die Breite des zweiten Artikels ist groß. und dieses Geplapper endet am Ende der Liste.

Genau wie unten geben:

Answer 1

Ich nicht Bibliothek für die Auflistung durchsuchen, aber ich mache Logik nach Layout und gelöstes Problem Liste. Hier möchte ich meinen Code mit mir teilen, ich habe meine Voraussetzung für die Auflistung nach der gegebenen Frage. Ich mache Layout mit zwei linearen Layout in jeder zwei Bilder nach Gewicht entsprechend der angegebenen Auflistung gegeben.Jetzt setze ich Logik ungerade und gerade. Bei ungeraden ersten ist LinearLayout sichtbar und bei Gerade 2. LinearLayout ist sichtbar.

unten ist das Layout, das ich für die Listenzeile gemacht habe.

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

Adapter Code für Listenansicht ist unten angegeben:

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

Jede suggesation oder die meisten willkommen Kommentar Code zu verbessern.

Answer 2

Wenn Ihre Wahl ist nicht beschränkt auf Listview und Gridview lassen versuchen, diese StaggeredGrid

Sie auch recyclerView können auch wenn Sie es vorziehen Es beinhaltet eine gewisse Logik.