代码之家 › 专栏 › 技术社区 › felipe.rce

对齐Android GridLayout

android-gridlayout android

felipe.rce · 技术社区 · 7 年前

我需要GridLayout像这样对齐视图(浅蓝色图标和文本是GridLayout中的视图):

但我的GridLayout是这样排列的:

如果我设置 app:layout_columnWeight="1" and app:layout_rowWeight="1" ,我的GridLayout如下对齐:

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

<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像第一幅图像一样对齐?

快解决我的问题了。。。我改变了一些事情,现在只有一个观点是不一致的。

我把 应用:layout_columnWeight=“1”

<?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向下,并且不居中对齐,如何防止这种情况?

7 回复 | 直到 7 年前

Patrick R 7 年前

您可以将自定义GridView与 android:numColumns="7"

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

jigar savaliya 7 年前

这是因为textview的大小很长,这就是为什么它需要更多的空间,所以请设置宽度以匹配您的如果文本视图不起作用,请减小文本大小。

Peri Hartman 7 年前

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

yogesh lokhande 7 年前

回收视图 而不是 网格布局 并将计数设置为7。

Vijay Chaudhary 7 年前

在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" />

yatin deokar 7 年前

您可以将RecyclerView与GridLayoutManager一起使用,如下所示

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

mRecyclerView.setLayoutManager(mGridLayoutManager);

FrankKrumnow 4 年前

有多种可能的解决方案:

布局重力=“底部” 到Gridlayout中的每个项目。如果有一个视图有两条线,则其他视图的间距将添加到顶部,并且图像(圆)都处于相同的高度。