創建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列的網格佈局

回答

相關問題