创建5列的网格布局

我想了解android布局的基本知识。所以，正因为如此，我决定创建2个视图的计算器应用程序：基础和科学。创建5列的网格布局

所以，我完成创建一个基本的布局，现在想多一个排，像战俘，开方，LN操作等

建立科学布局和我面临麻烦，而新列添加到现有的布局：当我尝试添加新按钮时，它会超出屏幕。

所以，问题是：如何使5列没有硬编码按钮的宽度网格布局？

我的代码：

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    xmlns:grid="http://schemas.android.com/apk/res-auto" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:weightSum="100" 
    tools:context="android.calcandroid.MainActivity"> 

    <include 
     android:id="@+id/tool_bar" 
     layout="@layout/tool_bar" 
     ></include> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="20"> 

     <TextView 
      android:layout_height="match_parent" 
      android:layout_width="match_parent" 
      android:text="0" 
      android:gravity="bottom|end" 
      android:singleLine="true" 
      android:textAppearance="@style/TextAppearance.AppCompat.Headline" 
      android:textSize="48sp" 
      android:background="#e3e7ea" 
      android:paddingBottom="32dp" 
      android:padding="16dp"/> 

    </LinearLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="80"> 

     <android.support.v7.widget.GridLayout 
      android:id="@+id/gridLayout" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      grid:useDefaultMargins="false" 
      grid:alignmentMode="alignBounds" 
      grid:columnCount="7" 
      grid:rowCount="9"> 

      <!-- Row 1 --> 
      <Button 
       android:text="C" 
       android:background="@drawable/shape" 
       grid:layout_row="0" 
       grid:layout_column="0" 
       style="@style/calcAction" 
       android:textStyle="bold" 
       android:textColor="@color/calcAccent" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <ImageButton 
       android:background="@drawable/shape" 
       android:src="@android:drawable/ic_input_delete" 
       grid:layout_row="0" 
       grid:layout_column="2" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" /> 

      <Button 
       android:background="@drawable/shape" 
       android:text="&#247;" 
       grid:layout_row="0" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       grid:layout_column="4"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="x" 
       grid:layout_row="0" 
       grid:layout_column="6" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       style="@style/calcAction"/> 

      <!-- Row 2 --> 
      <View 
       grid:layout_gravity="fill_horizontal" 
       android:layout_height="1dp" 
       grid:layout_row="1" 
       grid:layout_column="0" 
       grid:layout_columnSpan="7" 
       android:background="#eee"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="7" 
       grid:layout_row="2" 
       grid:layout_column="0" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       style="@style/calcNumber"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="8" 
       grid:layout_row="2" 
       grid:layout_column="2" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="9" 
       grid:layout_row="2" 
       grid:layout_column="4" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="-" 
       grid:layout_row="2" 
       grid:layout_column="6" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <!-- Row 3 --> 

      <View 
       grid:layout_gravity="fill_horizontal" 
       android:layout_height="1dp" 
       grid:layout_row="3" 
       grid:layout_column="0" 
       grid:layout_columnSpan="7" 
       android:background="#eee"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="4" 
       grid:layout_row="4" 
       grid:layout_column="0" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="5" 
       grid:layout_row="4" 
       grid:layout_column="2" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="6" 
       grid:layout_row="4" 
       grid:layout_column="4" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="+" 
       grid:layout_row="4" 
       grid:layout_column="6" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <View 
       grid:layout_gravity="fill_horizontal" 
       android:layout_height="1dp" 
       grid:layout_row="7" 
       grid:layout_column="0" 
       grid:layout_columnSpan="7" 
       android:background="#eee"/> 

      <!-- Row 4 --> 

      <Button 
       android:background="@drawable/shape" 
       android:text="1" 
       grid:layout_row="6" 
       grid:layout_column="0" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:background="@drawable/shape" 
       android:text="2" 
       grid:layout_row="6" 
       grid:layout_column="2" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:background="@drawable/shape" 
       grid:layout_row="6" 
       grid:layout_column="4" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       android:text="3" 
       style="@style/calcNumber"/> 

      <Button 
       grid:layout_row="6" 
       grid:layout_column="6" 
       grid:layout_rowSpan="3" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       android:background="@color/calcAccent" 
       android:textAppearance="@style/TextAppearance.AppCompat.Large" 
       android:textColor="@color/primary_material_light" 
       android:textStyle="bold" 
       android:textSize="22sp" 
       android:gravity="center_vertical|center_horizontal" 
       android:padding="8dp" 
       android:text="=" 
       style="@style/calcNumber"/> 
      <!-- Row 5 --> 

      <Button 
       android:background="@drawable/shape" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       grid:layout_row="8" 
       grid:layout_column="0" 
       grid:layout_columnSpan="3" 
       style="@style/calcNumber" 
       android:text="0"/> 

      <Button 
       android:background="@drawable/shape" 
       grid:layout_row="8" 
       grid:layout_column="4" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       style="@style/calcNumber" 
       android:text="."/> 

      <!-- Horizontal Grid --> 
      <View 
       grid:layout_gravity="fill_horizontal" 
       android:layout_height="1dp" 
       grid:layout_row="5" grid:layout_column="0" grid:layout_columnSpan="7" 
       android:background="#eee"/> 


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

    </LinearLayout> 

</LinearLayout>

而且它的外观与4列：4 columns

来源

2016-08-21 likeanowl

嗯，因为没有人回答，我已经通过我自己解决了这个。

该问题出现在硬编码按钮的网格单元格编号中，也出现在对网格不完全理解的情况下：layout_columnWeight & grid：layout_rowWeight。

所以我删除硬编码值，这里是溶液的全码：

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    xmlns:grid="http://schemas.android.com/apk/res-auto" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:weightSum="100" 
    tools:context="android.calcandroid.MainActivity"> 

    <include 
     android:id="@+id/tool_bar" 
     layout="@layout/tool_bar" 
     ></include> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="20"> 

     <TextView 
      android:layout_height="match_parent" 
      android:layout_width="match_parent" 
      android:text="0" 
      android:gravity="bottom|end" 
      android:singleLine="true" 
      android:textAppearance="@style/TextAppearance.AppCompat.Headline" 
      android:textSize="48sp" 
      android:background="#e3e7ea" 
      android:paddingBottom="32dp" 
      android:padding="16dp"/> 

    </LinearLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="80"> 

     <android.support.v7.widget.GridLayout 
      android:id="@+id/gridLayout" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      grid:useDefaultMargins="false" 
      grid:alignmentMode="alignBounds" 
      grid:columnCount="5" 
      grid:rowCount="5"> 

      <!-- Row 1 --> 
      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       android:text="ln" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       style="@style/calcAction"/> 

      <Button 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:text="C" 
       android:background="@drawable/shape" 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       style="@style/calcAction" 
       android:textStyle="bold" 
       android:textColor="@color/calcAccent" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <ImageButton 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       android:src="@android:drawable/ic_input_delete" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" /> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       android:text="&#247;" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       android:text="x" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       style="@style/calcAction"/> 

      <!-- Row 2 --> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       android:text="log" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       android:text="7" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       style="@style/calcNumber"/> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       android:text="8" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       android:text="9" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       android:text="-" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <!-- Row 3 --> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       android:text="\u221A" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       android:text="4" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       android:text="5" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       android:text="6" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       android:text="+" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <!-- Row 4 --> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       android:text="^" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       android:text="1" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       android:text="2" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       android:text="3" 
       style="@style/calcNumber"/> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_vertical" 
       grid:layout_rowSpan="2" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       android:background="@color/calcAccent" 
       android:textAppearance="@style/TextAppearance.AppCompat.Large" 
       android:textColor="@color/primary_material_light" 
       android:textStyle="bold" 
       android:textSize="22sp" 
       android:gravity="center_vertical|center_horizontal" 
       android:padding="8dp" 
       android:text="=" 
       style="@style/calcNumber"/> 

      <!-- Row 5 --> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       android:text="!" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1"/> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       grid:layout_columnSpan="2" 
       style="@style/calcNumber" 
       android:text="0"/> 

      <Button 
       android:layout_width="0dp" 
       android:layout_height="0dp" 
       grid:layout_gravity="fill_horizontal" 
       android:gravity="center" 
       android:background="@drawable/shape" 
       grid:layout_columnWeight="1" 
       grid:layout_rowWeight="1" 
       style="@style/calcNumber" 
       android:text="."/> 

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

    </LinearLayout> 

</LinearLayout>

而且截图：pretty nice!

希望这个答案可以帮助别人。

来源

2016-08-21 23:00:32 likeanowl

创建5列的网格布局

回答

相关问题