对齐 Android GridLayout答案

【问题标题】：Align Android GridLayout对齐 Android GridLayout
【发布时间】：2018-02-05 08:45:46
【问题描述】：

我需要 GridLayout 像这样对齐视图（浅蓝色图标和文本是 GridLayout 中的视图）：

但我的 GridLayout 像这样对齐：

如果我设置 app:layout_columnWeight="1" and app:layout_rowWeight="1"，我的 GridLayout 会像这样对齐：

我的 GridLayout xml：

<android.support.v7.widget.GridLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="18dp"
            app:columnCount="7">

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Trilha"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Mergulho"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Praia"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Festas"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Parque de Diversões"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Relaxar"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Esportes Radicais"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Acampamento"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Off Road"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Passeio de Barco"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Restaurantes"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Show / Festival"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword13"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Resort / SPA"/>

            <com.motivapp.motivapp.customview.KeywordView
                android:id="@+id/keyword14"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                keyword:text="Locas Históricos"/>


        </android.support.v7.widget.GridLayout>

还有 GridView 里面的视图：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <com.motivapp.motivapp.customview.DefaultTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/keywordTextView"
        android:textSize="18sp"
        android:text="Keyword"
        android:textColor="#839EC5"
        android:layout_gravity="center_horizontal"/>

    <ImageView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/keyword_button"
        android:id="@+id/keywordButton"/>

</LinearLayout>

这是一个自定义视图，但现在，它什么也不做，只显示一个自定义 textview 和一个 imageview...我对 GridLayout 所做的操作就像第一个图像一样对齐？

更新：

快要解决我的问题了……我改变了一些东西，现在只有一个视图没有对齐。

我把app:layout_columnWeight="1"放在gridlayout的所有视图上，并改变了自定义视图布局的重力和文字宽度：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical|center_horizontal">

    <com.motivapp.motivapp.customview.DefaultTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/keywordTextView"
        android:textSize="16sp"
        android:text="Keyword"
        android:textColor="#839EC5"
        android:gravity="center"/>

    <ImageView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:src="@drawable/keyword_button"
        android:id="@+id/keywordButton"/>

</LinearLayout>

如何使所有这些视图居中？当textview有一个大的宽度和换行符时，如何防止它强制imageview向下并且不居中对齐？

【问题讨论】：

标签： android android-gridlayout

【解决方案1】：

您可以将自定义 GridView 与 android:numColumns="7" 一起使用，或者您可以将 RecyclerView 与 7 列的 GridLayoutManager 一起使用您可以使用项目视图的自定义布局来定义您的文本和图像，如下所示：

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

    <TextView
        android:id="@+id/txtGridItem"
        android:layout_width="match_parent"
        android:gravity="center"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/imgGridItem"
        android:layout_width="match_parent"
        android:layout_height="130dp" />
</LinearLayout>

【讨论】：

此解决方案仅适用于一种屏幕尺寸。尝试使用只有 6 个图标空间的屏幕，边缘列将被剪裁。不知道有没有合适的解决办法...
你用过recyclerview和gridlayoutmanager还是用过GridView？

【解决方案2】：

这是因为 textview 的大小很长，这就是它占用更多空间的原因，因此请在您的文件中将宽度设置为 match_parent 如果它不起作用，则 textview 比减小该文本大小。

【讨论】：

match_parent 不起作用，但是如果我设置了文本宽度，则文本换行并强制图像视图下降，然后图像视图也会强制另一个视图下降......如何像第一张图片一样集中（带换行符）？
在文本视图中尝试椭圆大小

【解决方案3】：

这是一种方法。这假定您希望 GridView 在父级中居中。如果它需要相对于其他东西居中，则必须修改代码。

我所做的只是继承 onLayout 并将网格视图“翻译”到居中位置。

public class GridViewCentering extends GridView
{
  public GridViewCentering (Context context, AttributeSet attrs)
  {
    super (context, attrs);
  }

  @Override
  protected void onLayout (boolean changed, int l, int t, int r, int b)
  {
    super.onLayout (changed, l, t, r, b);
    int parentW = ((ViewGroup)getParent ()).getMeasuredWidth();
    int w = getWidth ();
    int offset = (parentW - w) / 2;
    setTranslationX (offset);
  }
}

【讨论】：

【解决方案4】：

使用 RecyclerView 代替 GridLayout 并将计数设置为 7。

【讨论】：

我不能使用适配器、listview、recyclerview...我需要在没有任何适配器的情况下使用这个布局
尝试将 app:columnCount="7" 更改为：android:columnCount="7"
'app' 命名空间，因为我使用支持 GridLayout (android.support.v7.widget.GridLayout)，如果我更改为正常的 GridLayout 并使用“android”名称，它不会改变结果

【解决方案5】：

在 xml 中使用它

<GridView
                android:id="@+id/grid"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:columnWidth="100dp"
                android:gravity="center"
                android:numColumns="auto_fit"
                android:stretchMode="columnWidth" />

【讨论】：

是gridlayout，不是gridview，没有stretchMode

【解决方案6】：

您可以像这样将 RecyclerView 与 GridLayoutManager 一起使用

GridLayoutManager mGridLayoutManager = new GridLayoutManager(context, 2, LinearLayoutManager.HORIZONTAL, false);

将布局管理器设置为适配器 mRecyclerView.setLayoutManager(mGridLayoutManager);

【讨论】：

我不能使用适配器，它只需要一个带有“固定”视图的网格布局，而不是适配器

【解决方案7】：

问题是当文本只有一两行时，视图的高度不同。有多种可能的解决方案：

最好的可能是：将 layout_gravity="bottom" 添加到 Gridlayout 内的每个项目。如果有两条线的视图，则其他视图的间距会添加到顶部，并且图像（圆圈）都处于相同的高度。

如果您希望所有行具有相同的高度，您可以将 android:minLines="2" 添加到所有 Textviews。但这会在短文本的文本和图像之间设置间距。

【讨论】：