【问题标题】:Perfectly linear spacing between gridview items网格视图项目之间的完美线性间距
【发布时间】:2014-01-13 10:01:38
【问题描述】:

我正在使用以下代码来显示 GirdView 项目。

<GridView
            android:id="@+id/gridView"
            android:gravity="center_horizontal"
            android:layout_below="@+id/searchLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:horizontalSpacing="10dp"
            android:numColumns="3"
            android:stretchMode="columnWidth"
            android:verticalSpacing="10dp" />

每个 GridItem (ImageView) 的大小为 92dp

我想要的是每行只显示 3 列或 3 个图像,并且每个顶部、底部、左右都需要完全对齐和相等。

下面是上面代码的结果。

可以看出,网格左右两侧的空间比图像之间的空间要小得多,行与行之间的空间也非常小。

其次,我使用的是 92dp。以上是 S3 的结果,但是当我使用小屏幕时,第三张图像不像 320 dp 屏幕那样适合。

不应该使用“dp”根据屏幕大小自动调整吗?

【问题讨论】:

  • 您尝试过我的回答吗?如果它没有解决您的问题,请告诉我。

标签: java android android-layout


【解决方案1】:

我认为这段代码会对你有所帮助 试试看:-

GridView
android:id="@+id/grid_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="3"
android:gravity="center"
android:stretchMode="columnWidth"
android:background="#000000"/>

【讨论】:

    【解决方案2】:

    在 GridView 的 xml 中

        <GridView 
            android:id                = "@+id/gridViewSms"
            android:layout_width      = "fill_parent"
            android:layout_height     = "fill_parent"
            android:numColumns        = "3"
            android:horizontalSpacing = "10dp"
            android:verticalSpacing   = "10dp"
            android:gravity           = "center"
            android:stretchMode       ="columnWidth">
    

    ImageAdapter.java

    import android.content.Context;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.GridView;
    import android.widget.ImageView;
    
    public class ImageAdapter extends BaseAdapter {
         private Context mContext;
         private int widthOfScrren;
         public Integer[] mThumbIds;
    
    
            // Constructor
            public ImageAdapter(Context c,int ScrrenSize,Integer[] mThumbIds){
                mContext = c;
                widthOfScrren=ScrrenSize;
                this.mThumbIds = mThumbIds;
            }
    
            @Override
            public int getCount() {
                return mThumbIds.length;
            }
    
            @Override
            public Object getItem(int position) {
                return mThumbIds[position];
            }
    
            @Override
            public long getItemId(int position) {
                return 0;
            }
    
    
            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                ImageView imageView = new ImageView(mContext);
                imageView.setImageResource(mThumbIds[position]);
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
    
                imageView.setLayoutParams(new GridView.LayoutParams(widthOfScrren / 4,widthOfScrren / 4));
                return imageView;
            }
    
    
    
    }
    

    在你的活动中

    import android.app.Activity;
    import android.content.Context;
    import android.os.Bundle;
    import android.view.Display;
    import android.view.View;
    import android.view.WindowManager;
    import android.widget.AdapterView;
    import android.widget.AdapterView.OnItemClickListener;
    import android.widget.GridView;
    
    public class MainActivity  extends Activity{
    
    
        private Integer[] mThumbIds = {
                R.drawable.image1 ,
                R.drawable.image2,
                R.drawable.image3,
                R.drawable.image4,
                R.drawable.image5,
                R.drawable.image6,
                R.drawable.image7,
                R.drawable.image8,
                R.drawable.image9
        };
    
    
        @SuppressWarnings("deprecation")
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            // TODO Auto-generated method stub
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
    
    
            //found width of Screen for Gridview
            WindowManager windowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
            Display display = windowManager.getDefaultDisplay();
            int densityX = display.getWidth();
    
    
    
            GridView grid = (GridView) findViewById(R.id.gridViewSms);
            grid.setAdapter(new ImageAdapter(getApplicationContext(), densityX, mThumbIds));
    
            grid.setOnItemClickListener(new OnItemClickListener() {
    
                @Override
                public void onItemClick(AdapterView<?> parent, View v, int position ,
                        long id) {
    
    
                }
            });
    
    
        }
    
    }
    

    我测试过了。它有效。

    【讨论】:

      【解决方案3】:

      过去,我使用GridLayout 而不是GridView,这样我就可以保持与 api v8 的兼容性。

      对于 GridLayout,我编写了一个漂亮的小函数,它被放置在 Activity 中,以动态拉伸/间隔网格中的项目以均匀地填充视图。我在这里写过:

      https://stackoverflow.com/a/15341447/2066079

      为方便起见,我还复制了以下代码:

      public void fillview(android.support.v7.widget.GridLayout gl)
      {
          Button buttontemp;
      
          //Stretch buttons
          int idealChildWidth = (int) ((gl.getWidth()-20*gl.getColumnCount())/gl.getColumnCount());
          for( int i=0; i< gl.getChildCount();i++)
          {
              buttontemp = (Button) gl.getChildAt(i);
              buttontemp.setWidth(idealChildWidth);
          }
      }
      

      (20 用于内部和外部填充和边距。这可以更普遍地完成,但这样更干净)

      那么可以这样调用:

          android.support.v7.widget.GridLayout gl = (android.support.v7.widget.GridLayout)findViewById(R.id.buttongrid);
          ViewTreeObserver vto = gl.getViewTreeObserver();
          vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {@Override public void onGlobalLayout() 
          {
      
                  android.support.v7.widget.GridLayout gl = (android.support.v7.widget.GridLayout) findViewById(R.id.buttongrid);
                  fillview(gl);
      
                  ViewTreeObserver obs = gl.getViewTreeObserver();
                  obs.removeGlobalOnLayoutListener(this);
          }});
      

      这必须通过观察者来完成,因为我们需要等待视图被绘制,然后才能调用视图。

      【讨论】:

        【解决方案4】:

        请试试这个代码:

        Grid.xml:

        <GridView
                android:id="@+id/photo_grid"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="10dp"
                android:numColumns="3" />
        

        您的照片自定义 xml 文件:

        <ImageView
                android:id="@+id/img_photo"
                android:layout_width="@dimen/grid_photo"
                android:layout_height="@dimen/grid_photo"
                android:scaleType="fitXY"
                android:layout_margin="5dp"
                android:src="@drawable/ic_launcher" />
        

        注意:这里我建议使用不同的尺寸来表示图像尺寸,而不是固定的 92dp。因此,通过使用dimens.xml,您可以获得不同分辨率的精确宽度和高度,也可以从Gridview 的所有侧面获得相同的空间。

        【讨论】:

          【解决方案5】:

          我很久以前就遇到过同样的问题并得到解决 这个:

          你可以做一些改变属性如下 网格视图:

          <GridView
                  android:id="@+id/gridView1"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:layout_alignParentBottom="true"
                  android:layout_alignParentLeft="true"
                  android:layout_below="@+id/rltop"
                  android:fadingEdge="none"
                  android:fitsSystemWindows="true"
                  android:gravity="center"
                  android:horizontalSpacing="10dp"
                  android:numColumns="3"
                  android:paddingLeft="10dp"
                  android:paddingRight="10dp"
                  android:soundEffectsEnabled="true"
                  android:stretchMode="columnWidth"
                  android:verticalSpacing="10dp" >
              </GridView>
          

          通过以下方式获取您的屏幕尺寸和宽度:

          Display  display= ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
                  myapp.screen_width = display.getWidth(); 
                  myapp.screen_height = display.getHeight();
          

          最重要的是:

          在您的 GridAdapter 类中 -> 在 getView() 方法中:

          调用下面方法来定位不同分辨率的设备:

              public void screenResolutions(int screen_width,int screen_height, RelativeLayout relativeLayout)
                   {
                      if((myapp.screen_width == 240)&&(myapp.screen_height==320))
                      {
              //          relativeLayout.getLayoutParams().height=(myapp.screen_height-(35+General.getStatusBarHeight(cntxt)))/3;
                          relativeLayout.getLayoutParams().width=(myapp.screen_width)/3;
                      }
                      else if((myapp.screen_width== 720)&&(myapp.screen_height==1280))
                      {
                //        relativeLayout.getLayoutParams().height=(myapp.screen_height-(107+General.getStatusBarHeight(cntxt)))/3;
                          relativeLayout.getLayoutParams().width=(myapp.screen_width)/3;
          
          
                      }
                      else if((myapp.screen_width== 320)&&(myapp.screen_height==480))
                      {
            //            relativeLayout.getLayoutParams().height=(myapp.screen_height-(47+General.getStatusBarHeight(cntxt)))/3;
                          relativeLayout.getLayoutParams().width=(myapp.screen_width)/3;
          
          
                      }
                      else if((myapp.screen_width == 480)&&(myapp.screen_height==800))
                      {
          //              relativeLayout.getLayoutParams().height=(myapp.screen_height-(71+General.getStatusBarHeight(cntxt)))/3;
                          relativeLayout.getLayoutParams().width=(myapp.screen_width)/3;
          
          
                      }
                      else if((myapp.screen_width == 768)||(myapp.screen_height==1280))
                      {
            //            relativeLayout.getLayoutParams().height=(myapp.screen_height-(114+General.getStatusBarHeight(cntxt)))/3;
                          relativeLayout.getLayoutParams().width=(myapp.screen_width)/3;
          
          
                      }
                      else if((myapp.screen_width == 540)&&(myapp.screen_height==960))
                      {
              //          relativeLayout.getLayoutParams().height=(myapp.screen_height-(80+General.getStatusBarHeight(cntxt)))/3;
                          relativeLayout.getLayoutParams().width=(myapp.screen_width)/3;
          
          
                      }
                      else if((myapp.screen_width == 1080)||(myapp.screen_height==1920))
                      {
             //           relativeLayout.getLayoutParams().height=(myapp.screen_height-(160+General.getStatusBarHeight(cntxt)))/3;
                          relativeLayout.getLayoutParams().width=(myapp.screen_width)/3;
          
          
                      }
                   }
          

          其中 relativelayout = 包含 ImageView 的布局。

          您还必须将 imageview 的高度和宽度更改为目标 多种分辨率如下:

          把它放在你的图像视图中:

              android:layout_width="@dimen/image_width"
              android:layout_height="@dimen/image_height"
          

          把这个:

          在 values 文件夹中 values-hdpi => dimens.xml(480x800)

          <dimen name="image_width">92dp</dimen>
          <dimen name="image_height">92dp</dimen>
          

          在 values 文件夹中 values-mdpi => dimens.xml(320x480)

          <dimen name="image_width">64dp</dimen>
          <dimen name="image_height">64dp</dimen>
          

          在 values 文件夹中 values-sw360dp-notlong-hdpi => dimens.xml(540x960)

          <dimen name="image_width">114dp</dimen>
          <dimen name="image_height">114dp</dimen>
          

          在 values 文件夹中 values-sw360dp-xhdpi => dimens.xml(720x1280)

          <dimen name="image_width">138dp</dimen>
          <dimen name="image_height">138dp</dimen>
          

          在 values 文件夹中 values-sw360dp-notlong-xhdpi => dimens.xml(768x1280)

          <dimen name="image_width">184dp</dimen>
          <dimen name="image_height">184dp</dimen>
          

          【讨论】:

          • @Sager 我不知道你为什么要使用 screenResolutions() 当所有的维度都按照 dimens.xml 设置时,其次如果我使用上面的代码,我可以设法在水平方向但垂直方向给出相等的空间空格不相等
          • @MuhammadUmar screenResolutions() 所做的是:如果您使用的分辨率是 480x800,那么只有 3 张图像会完全恢复您的整个设备宽度,即 480。这意味着您的设备宽度完美地分为 3 个部分。
          • 是的,但垂直距离不是线性的。水平还行。
          • 对于垂直,您也可以通过在 sreenresolution() 方法中取消注释我的高度代码来做到这一点。
          【解决方案6】:

          你试过Developer site给出的默认演示吗?

          此演示清楚地显示了所有具有相同高度和宽度并且周围具有相同空间的图像。

          请同时查看Example for GridView

          如果对您没有帮助,请告诉我。

          享受编码... :)

          【讨论】:

            猜你喜欢
            • 2015-10-08
            • 2014-06-19
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2019-05-17
            相关资源
            最近更新 更多