Mit einem Taschenrechner mit einem GridLayout vergelten

Ich habe Probleme damit Layouts gut aussehen.Mit einem Taschenrechner mit einem GridLayout vergelten

Um die Grundlagen zu verstehen, habe ich beschlossen, eine einfache Taschenrechner-App zu erstellen.
Also verwende ich ein GridLayout in einem LinearLayout geschachtelt, um Schaltflächen unter Textfelder zu platzieren.

Hier ist die Quelle meines Layouts.

<?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:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:weightSum="100"> 

    <TextView 
     android:layout_height="wrap_content" 
     android:layout_width="match_parent" 
     android:text="0" 
     android:layout_weight="30"/> 

    <GridLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:columnCount="4" 
     android:rowCount="5" 
     android:orientation="horizontal" 
     android:useDefaultMargins="false" 
     android:layout_weight="70"> 

     <Button 
      android:text="C" /> 

     <Button 
      android:text="BS" /> 

     <Button 
      android:text="/" /> 

     <Button 
      android:text="x" /> 

     <Button 
      android:text="7" /> 

     <Button 
      android:text="8" /> 

     <Button 
      android:text="9" /> 

     <Button 
      android:text="-" /> 

     <Button 
      android:text="4" /> 

     <Button 
      android:text="5" /> 

     <Button 
      android:text="6" /> 

     <Button 
      android:text="+" /> 

     <Button 
      android:text="1" /> 

     <Button 
      android:text="2" /> 

     <Button 
      android:text="3" /> 

     <Button 
      android:layout_gravity="fill" 
      android:layout_rowSpan="2" 
      android:text="=" /> 
     <Button 
      android:layout_gravity="fill" 
      android:layout_columnSpan="2" 
      android:text="0" /> 
     <Button 
      android:text="." /> 
    </GridLayout> 

</LinearLayout>

Wie kann dieses Layout den Bildschirm füllen?

Und meine App wie diese

der Hoffnung auf schnelle Antworten suchen machen.

[EDIT]: So, jetzt sind die Dinge viel besser, aber ich habe neue Fragen. Jetzt sieht meine Haupttätigkeit wie dieses

Ganz nett, meiner Meinung nach, aber:

Wie leeren Raum auf der rechten Seite der Tastatur entfernen?
Wie machen Tastatur und Text-Ansicht nehmen wie 70 und 30 Prozent des Bildschirms jeweils?

Auch neue Layout-Code ist:

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

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="android.calcandroid.MainActivity"> 

    <TextView 
     android:background="@drawable/shape" 
     android:layout_height="match_parent" 
     android:layout_width="match_parent" 
     android:text="0" 
     android:layout_above="@+id/gridLayout" /> 

    <GridLayout 
     android:id="@+id/gridLayout" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:layout_alignParentBottom="true" 
     android:columnCount="4" 
     android:rowCount="5" 
     android:orientation="horizontal" 
     android:useDefaultMargins="false"> 

     <Button 
      android:background="@drawable/shape" 
      android:text="C" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="BS" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="/" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="x" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="7" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="8" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="9" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="-" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="4" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="5" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="6" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="+" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="1" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="2" /> 

     <Button 
      android:background="@drawable/shape" 
      android:text="3" /> 

     <Button 
      android:background="@drawable/shape" 
      android:layout_gravity="fill_vertical" 
      android:layout_rowSpan="2" 
      android:text="=" /> 
     <Button 
      android:background="@drawable/shape" 
      android:layout_gravity="fill_horizontal" 
      android:layout_columnSpan="2" 
      android:text="0" /> 
     <Button 
      android:background="@drawable/shape" 
      android:text="." /> 
    </GridLayout> 

</RelativeLayout>

Quelle

2016-08-20 likeanowl

Versuchen Sie es mit einem TableLayout. Dann können Sie die Spalten strecken, um die Breite des Bildschirms anzupassen –

Und Gitter könnte es nicht tun? – likeanowl

Ein GridView oder GridLayout wäre einfach perfekt für eine Taschenrechner App. –

Got ziemlich nahe. Nicht sicher, wie mit den vertikalen Trennwänden umzugehen ist. Aus irgendeinem Grund verursacht das Setzen einer 1dp View zwischen jeder Spalte, die sich über jede Zeile erstreckt, dass GridLayout die gesamte Ansicht erweitert.

Und um dies zu nutzen, müssen Sie diese Abhängigkeit für Ihre Unterstützung Bibliothek Version

compile "com.android.support:gridlayout-v7:<support library number>"

Farbe.

xml

<color name="calcAccent">#ef6c00</color>

styles.xml

<style name="calcAction"> 
    <item name="android:background">#f7f8fa</item> 
</style> 
<style name="calcNumber"> 
    <item name="android:background">#fafbfd</item> 
</style>

Layout-XML

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     xmlns:grid="http://schemas.android.com/apk/res-auto" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

    <TextView 
      android:layout_height="match_parent" 
      android:layout_width="match_parent" 
      android:text="0" 
      android:layout_above="@+id/gridLayout" android:layout_alignParentLeft="true" 
      android:layout_alignParentStart="true" 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"/> 

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

     <!-- Row 1 --> 
     <Button 
       android:text="C" 
       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: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:text="&#247;" 
       grid:layout_row="0" 
       style="@style/calcAction" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1" grid:layout_column="4"/> 
     <Button 
       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:text="7" grid:layout_row="2" grid:layout_column="0" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1" 
       style="@style/calcNumber"/> 
     <Button 
       android:text="8" grid:layout_row="2" grid:layout_column="2" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 
     <Button 
       android:text="9" grid:layout_row="2" grid:layout_column="4" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 
     <Button 
       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:text="4" grid:layout_row="4" grid:layout_column="0" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 
     <Button 
       android:text="5" grid:layout_row="4" grid:layout_column="2" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 
     <Button 
       android:text="6" grid:layout_row="4" grid:layout_column="4" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 
     <Button 
       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:text="1" grid:layout_row="6" grid:layout_column="0" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 
     <Button 
       android:text="2" grid:layout_row="6" grid:layout_column="2" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 
     <Button 
       android:text="3" grid:layout_row="6" grid:layout_column="4" 
       style="@style/calcNumber" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1"/> 
     <Button 
       android:text="=" grid:layout_row="6" grid:layout_column="6" 
       style="@style/calcNumber" android:background="@color/calcAccent" 
       grid:layout_rowSpan="3" 
       grid:layout_columnWeight="1" grid:layout_rowWeight="1" 
       android:textAppearance="@style/TextAppearance.AppCompat.Large" 
       android:textColor="@color/primary_material_light" android:textStyle="bold" android:textSize="22sp" 
       android:gravity="bottom|center_horizontal" android:padding="8dp"/> 
     <!-- Row 5 --> 

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

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

</RelativeLayout>

Quelle

2016-08-20 20:24:26

Wow, das ist fantastisch! – likeanowl

Ja, ich überlegte, ob ich die volle Umrandung um jede Schaltfläche hinzufügen sollte, aber ich wollte die Dicke an den Kanten nicht "verdoppeln", deshalb platzierte ich dünne Ansichtszeilen zwischen den Schaltflächen. –

Ihre = Ändern und 0 Tasten:

<Button 
    android:layout_rowSpan="2" 
    android:layout_gravity="fill_vertical" 
    android:text="=" /> 
<Button 
    android:layout_columnSpan="2" 
    android:layout_gravity="fill_horizontal" 
    android:text="0" />

[EDIT]

ich aus Ihrem Kommentar erkannt, dass die = Der Knopf ragte bis zum unteren Bildschirmrand. Dies liegt daran, dass Sie dem Taschenrechner eine hohe Gewichtung zugewiesen haben, also würde fill_vertical dies tun.

Ich bin unter der Annahme (aber korrigieren Sie mich, wenn ich falsch liege) von der gewünschten Grafik, die Sie zeigten, dass Sie den Rechner an den unteren Rand des Bildschirms ausgerichtet werden soll. Wenn das der Fall ist, hier ist meine vorgeschlagene Änderung zu Ihrem Layout (TLDR: Verwenden Sie RelativeLayout statt Linearlayout):

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <TextView 
     android:layout_height="match_parent" 
     android:layout_width="match_parent" 
     android:text="0" 
     android:layout_above="@+id/gridLayout" /> 

    <GridLayout 
     android:id="@+id/gridLayout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:layout_alignParentBottom="true" 
     android:columnCount="4" 
     android:rowCount="5" 
     android:orientation="horizontal" 
     android:useDefaultMargins="false"> 

     <Button 
      android:text="C" /> 

     <Button 
      android:text="BS" /> 

     <Button 
      android:text="/" /> 

     <Button 
      android:text="x" /> 

     <Button 
      android:text="7" /> 

     <Button 
      android:text="8" /> 

     <Button 
      android:text="9" /> 

     <Button 
      android:text="-" /> 

     <Button 
      android:text="4" /> 

     <Button 
      android:text="5" /> 

     <Button 
      android:text="6" /> 

     <Button 
      android:text="+" /> 

     <Button 
      android:text="1" /> 

     <Button 
      android:text="2" /> 

     <Button 
      android:text="3" /> 

     <Button 
      android:layout_gravity="fill_vertical" 
      android:layout_rowSpan="2" 
      android:text="=" /> 
     <Button 
      android:layout_gravity="fill_horizontal" 
      android:layout_columnSpan="2" 
      android:text="0" /> 
     <Button 
      android:text="." /> 
    </GridLayout> 

</RelativeLayout>

Quelle

2016-08-20 17:28:31

Vielen Dank für Ihre Antwort, @ChrisWard. Aber auf Emulator sieht es immer noch ziemlich seltsam aus: http://imgur.com/a/AY9hO Warum? – likeanowl

Hallo @likeanowl, ich sehe das Problem und ich habe einen Beitrag zu meinem Beitrag oben gemacht. –

Vielen Dank, ich werde es jetzt versuchen – likeanowl

Endlich, nach fast 10 Stunden bin ich zufrieden. Now its looks like this

basierend auf @ cricket_007 Vorschlag, mein Code ist

<?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" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:weightSum="100" 
    tools:context="android.calcandroid.MainActivity"> 

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

Vielleicht ist es ein bisschen chaotisch, aber es ist in Ordnung, denke ich.

Quelle

2016-08-20 23:30:47 likeanowl

Mit einem Taschenrechner mit einem GridLayout vergelten

Antwort

Verwandte Themen