Android Gridview与2列（但不同的ImageView宽度大小）

Question

我希望屏幕看起来像下面，在GridView的帮助下。我能够添加1列和两列使用setSpanSizeLookup

但如何添加两列动态宽度？

[1]

final GridLayoutManager gridLayoutManager=new GridLayoutManager(ExploreMenuActivity.this,2); 
     gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() { 
      @Override 
      public int getSpanSize(int position) { 
       if(position == 0) 
       { 
        return 2; 
       }else { 
        return 1; 
       } 
      } 
     }); 

更新[在这里输入的形象描述] [1]！]：

我用Flexbox的布局由谷歌。

compile 'com.google.android:flexbox:0.3.1' 

我的主要活动

FlexboxLayoutManager flexboxLayoutManager=new FlexboxLayoutManager(ExploreMenuActivity.this); 
     flexboxLayoutManager.setFlexWrap(FlexWrap.WRAP); 
     flexboxLayoutManager.setAlignItems(AlignItems.STRETCH); 
    recycler_ExploreProduct.setLayoutManager(flexboxLayoutManager); 

我.xml文件

<ImageView xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/img" 
android:layout_width="@dimen/_140sdp" 
android:background="@color/color_white_gray" 
android:layout_height="@dimen/_140sdp" 
android:scaleType="fitCenter" 
android:src="@drawable/p_7" /> 

和我的适配器

@Override 
public void onBindViewHolder(final ViewHolder holder, int position) { 


    Drawable drawable = ResourcesCompat.getDrawable(context.getResources(), aryImages[position], null); 
    holder.bindTo(drawable, position); 
} 

class ViewHolder extends RecyclerView.ViewHolder { 
    ImageView imageView; 

    public ViewHolder(View itemView) { 
     super(itemView); 
     imageView = (ImageView) itemView.findViewById(R.id.img); 
    } 

    void bindTo(Drawable drawable, int position) { 
     imageView.setImageDrawable(drawable); 
     ViewGroup.LayoutParams lp = imageView.getLayoutParams(); 

     DisplayMetrics displayMetrics = new DisplayMetrics(); 
     WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE); 
     wm.getDefaultDisplay().getMetrics(displayMetrics); 
     int screenWidth = displayMetrics.widthPixels; 

     Log.d(TAG,"## bindTo before if"); 
     if (lp instanceof FlexboxLayoutManager.LayoutParams) { 
      Log.d(TAG,"## bindTo inside if"); 
      FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) lp; 

      if (position == 0) { 
       flexboxLp.width = screenWidth/3; 

      } else if (position == 1) { 
       flexboxLp.width = screenWidth/2; 

      } else if (position == 2) { 
       flexboxLp.width = screenWidth/2; 

      } else if (position == 3) { 
       flexboxLp.width = screenWidth/3; 

      } else if (position == 4) { 
       flexboxLp.width = screenWidth/3; 

      } else if (position == 5) { 
       flexboxLp.width = screenWidth/2; 

      } else if (position == 6) { 
       flexboxLp.width = screenWidth; 

      } else if (position == 7) { 
       flexboxLp.width = screenWidth/3; 

      } else if (position == 8) { 
       flexboxLp.width = screenWidth/2; 

      } else if (position == 9) { 
       flexboxLp.width = screenWidth; 

      } else if (position == 10) { 
       flexboxLp.width = screenWidth/2; 

      } else if (position == 11) { 
       flexboxLp.width = screenWidth/3; 

      } else if (position == 12) { 
       flexboxLp.width = screenWidth; 

      } else if (position == 13) { 
       flexboxLp.width = screenWidth/3; 

      } else if (position == 14) { 
       flexboxLp.width = screenWidth/2; 

      } else if (position == 15) { 
       flexboxLp.width = screenWidth/2; 

      } else if (position == 16) { 
       flexboxLp.width = screenWidth/3; 

      } else if (position == 17) { 
       flexboxLp.width = screenWidth; 

      } else if (position == 18) { 
       flexboxLp.width = screenWidth/3; 
      } else if (position == 19) { 
       flexboxLp.width = screenWidth/2; 
      } 
    } 
} 

现在我能够使用上述静态条件下实现输出， 任何人都可以请告诉我如何做到这一点动态，当我的数据将来自API。

Answer 1

使用本https://github.com/felipecsl/AsymmetricGridView

http://myhexaville.com/2017/02/27/android-flexboxlayout/

我相信这会帮助你。

Answer 2

您需要在Recyclerview中使用滞后的LayoutManager才能获得所需的结果。

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/rl" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:padding="16dp" 
    tools:context=".MainActivity" 
    android:background="#ffffff" 
    > 
    <android.support.v7.widget.RecyclerView 
     android:id="@+id/recycler_view" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:scrollbars="vertical" 
     > 
    </android.support.v7.widget.RecyclerView> 
</RelativeLayout> 

MainActivity.java

package com.cfsuman.me.androidcode; 

import android.content.Context; 
import android.graphics.Color; 
import android.graphics.drawable.ColorDrawable; 
import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 
import android.support.v7.widget.RecyclerView; 
import android.support.v7.widget.StaggeredGridLayoutManager; 
import android.view.Window; 
import android.widget.RelativeLayout; 


public class MainActivity extends AppCompatActivity { 
    private Context mContext; 

    RelativeLayout mRelativeLayout; 
    private RecyclerView mRecyclerView; 

    private RecyclerView.Adapter mAdapter; 
    private RecyclerView.LayoutManager mLayoutManager; 


    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     // Request window feature action bar 
     requestWindowFeature(Window.FEATURE_ACTION_BAR); 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

     // Get the application context 
     mContext = getApplicationContext(); 

     // Change the action bar color 
     getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.RED)); 

     // Get the widgets reference from XML layout 
     mRelativeLayout = (RelativeLayout) findViewById(R.id.rl); 
     mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view); 

     // Initialize a new String array 
     String[] colors = { 
       "Red","Green","Blue","Yellow","Magenta","Cyan","Orange", 
       "Aqua","Azure","Beige","Bisque","Brown","Coral","Crimson" 
     }; 

     /* 
      StaggeredGridLayoutManager 
       A LayoutManager that lays out children in a staggered grid formation. It supports 
       horizontal & vertical layout as well as an ability to layout children in reverse. 

       Staggered grids are likely to have gaps at the edges of the layout. To avoid these 
       gaps, StaggeredGridLayoutManager can offset spans independently or move items 
       between spans. You can control this behavior via setGapStrategy(int). 
     */ 
     /* 
      public StaggeredGridLayoutManager (int spanCount, int orientation) 
       Creates a StaggeredGridLayoutManager with given parameters. 

      Parameters 
       spanCount : If orientation is vertical, spanCount is number of columns. 
        If orientation is horizontal, spanCount is number of rows. 
       orientation : VERTICAL or HORIZONTAL 
     */ 
     // Define a layout for RecyclerView 
     mLayoutManager = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL); 
     mRecyclerView.setLayoutManager(mLayoutManager); 

     // Initialize a new instance of RecyclerView Adapter instance 
     mAdapter = new ColorAdapter(mContext,colors); 

     // Set the adapter for RecyclerView 
     mRecyclerView.setAdapter(mAdapter); 
    } 
} 

ColorAdapter.java

package com.cfsuman.me.androidcode; 

import android.content.Context; 
import android.graphics.Color; 
import android.support.v7.widget.RecyclerView; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.TextView; 

import java.util.Random; 


public class ColorAdapter extends RecyclerView.Adapter<ColorAdapter.ViewHolder>{ 
    private String[] mDataSet; 
    private Context mContext; 
    private Random mRandom = new Random(); 

    public ColorAdapter(Context context,String[] DataSet){ 
     mDataSet = DataSet; 
     mContext = context; 
    } 

    public static class ViewHolder extends RecyclerView.ViewHolder{ 
     public TextView mTextView; 
     public ViewHolder(View v){ 
      super(v); 
      mTextView = (TextView)v.findViewById(R.id.tv); 
     } 
    } 

    @Override 
    public ColorAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType){ 
     // Create a new View 
     View v = LayoutInflater.from(mContext).inflate(R.layout.custom_view,parent,false); 
     ViewHolder vh = new ViewHolder(v); 
     return vh; 
    } 

    @Override 
    public void onBindViewHolder(ViewHolder holder, int position){ 
     holder.mTextView.setText(mDataSet[position]); 
     // Set a random height for TextView 
     holder.mTextView.getLayoutParams().height = getRandomIntInRange(250,75); 
     // Set a random color for TextView background 
     holder.mTextView.setBackgroundColor(getRandomHSVColor()); 
    } 

    @Override 
    public int getItemCount(){ 
     return mDataSet.length; 
    } 

    // Custom method to get a random number between a range 
    protected int getRandomIntInRange(int max, int min){ 
     return mRandom.nextInt((max-min)+min)+min; 
    } 

    // Custom method to generate random HSV color 
    protected int getRandomHSVColor(){ 
     // Generate a random hue value between 0 to 360 
     int hue = mRandom.nextInt(361); 
     // We make the color depth full 
     float saturation = 1.0f; 
     // We make a full bright color 
     float value = 1.0f; 
     // We avoid color transparency 
     int alpha = 255; 
     // Finally, generate the color 
     int color = Color.HSVToColor(alpha, new float[]{hue, saturation, value}); 
     // Return the color 
     return color; 
    } 
} 

的build.gradle [依赖性]

compile 'com.android.support:recyclerview-v7:23.0.1' 
compile 'com.android.support:cardview-v7:23.0.1' 

Answer 3

使用的LinearLayout与同等重量的两个ImageViews类似下面的XML

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:orientation="horizontal" 
    android:layout_height="wrap_content"> 

    <ImageView 
     android:id="@+id/image1" 
     android:layout_width="0dp" 
     android:src="@mipmap/ic_launcher" 
     android:layout_weight="1" 
     android:background="#ff0000" 
     android:layout_height="wrap_content"/> 

    <ImageView 
     android:id="@+id/image2" 
     android:layout_width="0dp" 
     android:layout_weight="1" 
     android:background="#ffff00" 
     android:src="@mipmap/ic_launcher" 
     android:layout_height="wrap_content"/> 
</LinearLayout> 

Answer 4

You need to use flexbox layout 
`<com.google.android.flexbox.FlexboxLayout 
       android:id="@+id/flex_layout" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       app:justifyContent="flex_start" 
       app:alignContent="flex_start" 
       app:alignItems="flex_start" 
       app:flexDirection="row" 
       app:flexWrap="wrap"> 
</com.google.android.flexbox.FlexboxLayout>` 

and then add view dynamically like 
`TextView rowTextView = (TextView)view.findViewById(R.id.flex_tv); 
    rowTextView.setTag(items.get(i)); 
    rowTextView.setId(i); 
    rowTextView.setText(items.get(i)); 
    flexboxLayout.addView(view);` 

请加编译“com.google.android:flexbox:0.3。0 @在你的gradle这个AAR”