我想有一个2x2网格内的按钮。这只是ICS,所以我试图使用新的GridLayout给定。
这是我的布局的XML:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/favorites_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00ff00"
android:rowCount="2"
android:columnCount="2">
<Button
android:text="Cell 0"
android:layout_row="0"
android:layout_column="0"
android:textSize="14dip" />
<Button
android:text="Cell 1"
android:layout_row="0"
android:layout_column="1"
android:textSize="14dip" />
<Button
android:text="Cell 2"
android:layout_row="1"
android:layout_column="0"
android:textSize="14dip" />
<Button
android:text="Cell 3"
android:layout_row="1"
android:layout_column="1"
android:textSize="14dip" />
</GridLayout>
问题是我的视图没有为每一行均匀地拉伸。这导致GridLayout的右侧有很多额外的空间。
我尝试设置layout_gravity="fill_horizontal",但这只适用于该行的最后一个视图。这意味着单元格1会一直延伸,为单元格0提供足够的空间。
如何解决这个问题?
这是一个相当老的问题,但显然很多人都感兴趣。对于像这样的4个按钮的简单布局,似乎tableelayout是实现预期结果的最简单方法。
下面的一些示例代码显示了一个表的前两行,该表有6列,横跨其父字段的宽度。每个单元格中的LinearLayout和ImageView用于允许在单元格中“打开和关闭”图像,同时保持单元格的颜色。
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1,2,3,4,5,6"
android:background="@drawable/vertical_radio_button_background"
android:padding="2dp">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/brown"
android:tag="13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_margin="1dp"
android:layout_column="1"
android:background="@color/brown">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="@drawable/selected_check"
android:visibility="invisible"/>
</LinearLayout>
<LinearLayout
android:id="@+id/maraschino"
android:tag="9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_margin="1dp"
android:layout_column="2"
android:background="@color/maraschino">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="@drawable/selected_check"
android:visibility="invisible"/>
</LinearLayout>
<LinearLayout
android:id="@+id/cayenne"
android:tag="22"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_margin="1dp"
android:layout_column="3"
android:background="@color/cayenne">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="@drawable/selected_check"
android:visibility="invisible"/>
</LinearLayout>
<LinearLayout
android:id="@+id/maroon"
android:tag="18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_margin="1dp"
android:layout_column="4"
android:background="@color/maroon">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="@drawable/selected_check"
android:visibility="invisible"/>
</LinearLayout>
<LinearLayout
android:id="@+id/plum"
android:tag="3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_margin="1dp"
android:layout_column="5"
android:background="@color/plum">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="@drawable/selected_check"
android:visibility="invisible"/>
</LinearLayout>
<LinearLayout
android:id="@+id/eggplant"
android:tag="15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_margin="1dp"
android:layout_column="6"
android:background="@color/eggplant">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="@drawable/selected_check"
android:visibility="invisible"/>
</LinearLayout>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/plum2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_margin="1dp"
android:layout_column="1"
android:background="@color/plum">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="@drawable/selected_check"
android:visibility="invisible"/>
</LinearLayout>
<LinearLayout
android:id="@+id/lavender"
android:tag="14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_margin="1dp"
android:layout_column="2"
android:background="@color/lavender">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="@drawable/selected_check"
android:visibility="invisible"/>
</LinearLayout>
<LinearLayout
android:id="@+id/carnation"
android:tag="16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_margin="1dp"
android:layout_column="3"
android:background="@color/carnation">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="@drawable/selected_check"
android:visibility="invisible"/>
</LinearLayout>
<LinearLayout
android:id="@+id/light_pink"
android:tag="23"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_margin="1dp"
android:layout_column="4"
android:background="@color/light_pink">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="@drawable/selected_check"
android:visibility="invisible"/>
</LinearLayout>
<LinearLayout
android:id="@+id/strawberry"
android:tag="10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_margin="1dp"
android:layout_column="5"
android:background="@color/strawberry">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="@drawable/selected_check"
android:visibility="invisible"/>
</LinearLayout>
<LinearLayout
android:id="@+id/magenta"
android:tag="20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_margin="1dp"
android:layout_column="6"
android:background="@color/magenta">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="@drawable/selected_check"
android:visibility="invisible"/>
</LinearLayout>
</TableRow>
</TableLayout>
main。xml
<GridLayout
android:id="@+id/grid_related_news"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:padding="3dp"
android:columnCount="2">
</GridLayout>
。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="0dp"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_columnWeight="1"
android:gravity="center"
android:padding="3dp"
android:layout_gravity="fill_horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
app:cardBackgroundColor="@color/white"
app:cardCornerRadius="5dp"
app:cardElevation="2dp"
android:layout_margin="4dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/img_related_news"
android:layout_width="0dp"
android:layout_height="0dp"
android:layoutDirection="rtl"
android:scaleType="centerCrop"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/light_gray" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#59000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/txt_related_news_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:elevation="2dp"
android:fontFamily="@font/yekan_bold"
android:letterSpacing="-0.1"
android:lineSpacingExtra="4dp"
android:maxLines="4"
android:textColor="@color/white"
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:text="@string/lorem_ipsum_sentence" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
java
GridLayout grid_related_news = findViewById(R.id.grid_related_news);
View view = LayoutInflater.from(this).inflate(R.layout.related_item, (ViewGroup) grid_related_news, false);
ImageView img_related_news = view.findViewById(R.id.img_related_news);
...
grid_related_news.addView(view);
你可以用这个例子
我终于找到了解决办法。就像Rotemmiz说的,你必须在之后动态地做。这段代码拉伸按钮以水平填充视图,但同样可以用于垂直填充视图。
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);
}});
它必须用一个观察者来完成,因为我们需要在调用视图之前等待视图被绘制。
以下是我所做的,我很高兴地说,这对我很有效。我也想要一个2x2, 3x3等网格的项目来覆盖整个屏幕。网格布局不遵循屏幕的宽度。线性布局的工作,但你不能使用嵌套权重。
对我来说,最好的选择是使用Fragments,我使用这个教程来开始我想做的事情。
下面是一些代码:
主要活动:
public class GridHolderActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_6);
}
}
activity_main_6 XML(填充3个片段)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<fragment
android:id="@+id/frag1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:name=".TwoHorizontalGridFragment"
tools:layout="@layout/two_horiz" />
<fragment
android:id="@+id/frag2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:name=".TwoHorizontalGridFragment"
tools:layout="@layout/two_horiz" />
<fragment
android:id="@+id/frag3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:name=".Grid.TwoHorizontalGridFragment"
tools:layout="@layout/two_horiz" />
基本片段布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_height="match_parent">
<ImageQueue
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/img1"
android:layout_weight="1"/>
<ImageQueue
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/img2"
android:layout_weight="1"/>
</LinearLayout>
片段类(只处理自定义视图的初始化)每个片段膨胀2个瓦片
public class TwoHorizontalGridFragment extends Fragment {
private View rootView;
private ImageQueue imageQueue1;
private ImageQueue imageQueue2;
@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
/**
* Inflate the layout for this fragment
*/
rootView = inflater.inflate(
R.layout.two_horiz, container, false);
return rootView;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
imageQueue1 = (ImageQueue)rootView.findViewById(R.id.img1);
imageQueue2 = (ImageQueue)rootView.findViewById(R.id.img2);
imageQueue1.updateFiles();
imageQueue2.updateFiles();
}
}
就是这样!
本质上,这是一种使用嵌套权重的奇怪工作。它给了我一个完美的2x3网格,填满了我的10英寸平板电脑和我的HTC机器人DNA的整个屏幕。让我知道你的进展如何!