Create Grid Layout mit 5 Spalten

Ich versuche, Grundlagen der Android-Layouts zu verstehen. Aus diesem Grund habe ich beschlossen, eine Taschenrechner-App mit zwei Ansichten zu erstellen: Grundlagen und Wissenschaft.Create Grid Layout mit 5 Spalten

So beendete ich eine grundlegende Layout zu schaffen, und jetzt mit Operationen wie pow, sqrt, ln und etc.

Und ich konfrontiert Probleme zu schaffen wissenschaftliche Layout mit einer weiteren Zeile versuchen, während neue Spalte in den bestehenden Layout: Wenn ich versuche, neue Schaltfläche hinzuzufügen, geht es über den Bildschirm hinaus.

Also die Frage ist: Wie man Gitter-Layout mit 5 Spalten ohne Hardcoding-Taste Breite machen?

Mein Code:

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

Und wie es mit 4 Spalten aussieht: 4 columns

Quelle

2016-08-21 likeanowl

Nun, da niemand antwortete, hatte ich das von mir gelöst.

Das Problem war in Hardcoding Schaltfläche Grid-Zellen-Nummer und auch in meinem nicht vollständig Verständnis von Grid: Layout-Spalte Gewicht & Grid: layout_rowWeight. So

ich fest codierten Werte entfernt und hier ist der vollständige Code der Lösung:

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

Und ein Screenshot: pretty nice!

Hoffnung, dass diese Antwort jemand helfen.

Quelle

2016-08-21 23:00:32 likeanowl

Create Grid Layout mit 5 Spalten

Antwort

Verwandte Themen