标签: grid-layout

我们正在编写一个针对ICS +的应用程序,并认为Gr​​idLayout是最好的布局范例,但似乎很少有关于它的文章,我们遇到了一些对齐问题.

<GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/row_background"
    android:rowCount="1"
    android:columnCount="3"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:useDefaultMargins="true"
    android:background="@drawable/list_item_bg">

    <ImageView
        android:id="@+id/visibilityIcon"
        android:layout_row="0"
        android:layout_column="0"
        android:src="@drawable/visibility_icon" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"/>

    <ImageView
        android:id="@+id/windIcon"
        android:layout_row="0"
        android:layout_column="1"
        android:src="@drawable/wind_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"/>

    <ImageView
        android:id="@+id/crosswindIcon"
        android:layout_row="0"
        android:layout_column="2"
        android:src="@drawable/cloud_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"/>

</GridLayout>

但是,左侧2图标保持左对齐,最右侧图标以剩余空间居中.

基本上我们需要做的是将每列的大小指定为总屏幕大小的1/3(自3列).我认为这就是GridLayout所做的,但看起来'wrap_content'会导致这种行为(有意义),但'match_parent'会导致第一列填满整个屏幕,而不是填充其单元格,这是我预期的行为.

我们似乎已经尝试过重力,layout_gravity等的所有组合,但要么我们从根本上做错了什么,要么发现了GridLayout的限制.

谢谢你的帮助!

我无法让GridLayout水平滚动.

我发现了一个类似的问题Gridlayout + ScrollView.我尝试了这种方法,但它没有用.

它会删除许多表(因为它应该显示从1到20的所有表).

这是xml文件

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

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="16dp" >

            <android.support.v7.widget.GridLayout
                android:id="@+id/table_mapGrid"
                android:layout_width="250dp"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </ScrollView>

    <include layout="@layout/cell_list_loading" />

    <TextView
        android:id="@+id/table_errorView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="20dp"
        android:text="@string/message_error_connection"
        android:visibility="invisible" />

</FrameLayout>

我希望显示动态内容,改变列和行的数量,可能在表之间有空格.这个我已经完成了,但问题是当网格布局的宽度比它的容器的更大,我想解决的是使用水平滚动,但它似乎没有工作...

有什么建议吗？

我是一个相对较新的编程和使用bootstrap 3.0制作网站.

我想在页面中间制作两行.对于我使用的第一行div class="col-md-4 col-md-offset-2"和第二行div class="col-md-4".

我的第一个问题是,如果可以增加10行而不是12行,或者如果我还需要指定右边的2行呢？如果是这样,怎么办呢？

另外我想增加列之间的水平间距.我对此进行了一些研究并遇到了mixins,但它很难让我掌握.如果这里的任何人可以为我提供一种简单的方法来增加两列之间的水平间距,那将是很好的.

提前致谢.

我正在研究一种特定的布局算法，以在基于单元的网格中显示照片。理想的行为是将每张照片逐行放置在下一个可用空间中。

由于很容易有一千张照片需要同时计算位置，因此效率非常重要。

这个问题是否已经用现有算法解决了？如果没有，我怎样才能尽可能高效地实现它？

编辑关于定位：我现在基本上所做的就是逐个单元地迭代网格的每一行，直到找到适合该元素的空间。这就是为什么 4 放在 2 旁边。

当用XML添加按钮时 - 一切都很好

  <GridLayout
    android:id="@+id/social_gl_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"
    android:alignmentMode="alignBounds"
    android:columnCount="2"
    android:padding="8dp">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="45dp"
        android:layout_columnWeight="1">
        <Button
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:background="@android:color/holo_blue_light"
            android:text="Hi"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="45dp"
        android:layout_columnWeight="1">
        <Button
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:background="@android:color/holo_green_light"
            android:text="Whatsapp"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="45dp"
        android:layout_columnWeight="1">
        <Button
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:background="@android:color/holo_green_light"
            android:text="This is facebook"
            />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="45dp"
        android:layout_columnWeight="1">
        <Button
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:background="@android:color/holo_blue_light"
            android:text="On"
            />
    </LinearLayout>

</GridLayout>

动态添加按钮时(按代码) - 缺少对齐,按钮不占用列的完整宽度

GridLayout gl = (GridLayout) findViewById(R.id.social_gl_content);
    LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
    for (int i = 0 ; i < strs.length ; i++) …

我正在尝试使用div创建一个2x2网格.某些div可能包含图像,但可能会将其设置为背景,并带有选项background-size: cover.

这是我创建的笔:http://codepen.io/qarlo/pen/vLEprq

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: auto;
  max-width: 960px;
  width: 80%;
}
.container__item {
  align-content: center;
  border: 1px solid #333;
  display: flex;
  flex-basis: 1;
  font-size: 3em;
  justify-content: center;
  height: 100%;
  margin-bottom: 1em;
  min-height: 300px;
  width: 47%;
}

<div class="container">
  <div class="container__item">?</div>
  <div class="container__item">?</div>
  <div class="container__item">?</div>
  <div class="container__item">?</div>
</div>

我想在调整大小时强制div为正方形并保持纵横比.我错误地希望这对Flexbox来说很简单,但除非我遗漏了什么,否则我错了.

我想将捕获的图像设置为在同一gridlayout中动态创建的imageview,但它会创建一个新的网格布局并将捕获的图像设置为新的gridview.

这是我的mainactivity.java档案

public class MainActivity extends Activity implements AdapterView.OnItemClickListener {

    GridView gridView;
    ArrayList<Damage_Item> gridArray = new ArrayList<Damage_Item>();
    CustomAdapter_back customGridAdapter;
    GridLayout mContainerView;
    int REQUEST_CAMERA = 0, SELECT_FILE = 1;
    ImageView dynamic_imageview;
    LinearLayout dynamic_linearview;
    String image1;
    ArrayList<String> arrayList_image = new ArrayList<String>();

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

        mContainerView = (GridLayout)findViewById(R.id.describedamage_gridview) ;
        //gridArray.add(new Item(homeIcon,"Home"));
        gridView = (GridView) findViewById(R.id.gridview1);

        Button add = (Button)findViewById(R.id.button1);
        add.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                inflateImageRow();
            }
        });

    }

    public void selectImage() { …

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 3px;
  border: 1px solid green;
}

.item {
  border: 1px solid red;
  height: 50px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

如何将红色item盒子拉伸一点,使它们填满绿色container盒子的整个宽度？

它们应该都是相同的宽度,并且大于100px.

最后一行应该像现在一样左对齐.

我正在使用一个非常简单的布局的页面 - 基本上是一个数据表,但使用网格布局,以便列将根据内容大小很好地调整.我想使行可排序(使用jQuery),所以我需要找到一种方法来包装容器中同一行的所有单元格.

display: subgrid;

我尝试过使用subgrid,但目前似乎没有太多支持..显然,只是嵌套网格不起作用,因为它不会同步不同网格之间的列大小.

有关如何实现这一点的任何想法？

到目前为止,这是我的笔:https://codepen.io/anon/pen/PEjqgx

我正在使用 NopCommerce 制作 HTML 电子邮件模板。从那以后我把所有的 CSS 都放在内联中，但不起作用，在大多数情况下，除了网格样式之外，所有内容都有效。具体来说grid-gap，grid-template-columns它们在发送到 Gmail 后似乎就消失了。下面的代码片段是发送之前的原始代码。

<div class="grid-container" style="display: grid; grid-gap: 10px; background-color: white;margin-top:10px;left-padding: 10px; text-align:center; grid-template-columns: 33% 33% 33%;">
    <div style="background-color: #ebebe0;">
        <h1>Title 3</h1>
        <p>Lorem Ipsum</p>
    </div>
    <div style="background-color: #ebebe0;">
        <h1>Title 4</h1>
        <p>Lorem Ipsum</p>
    </div>
    <div style="background-color: #ebebe0;">
        <h1>Title 5</h1>
        <p>Lorem Ipsum</p>
    </div>
</div>

上面的图片取自 Gmail，正如您所看到的，grid-gap似乎grid-template-columns丢失了。任何人都可以给我指点或解决这个问题吗？非常感激。