Посвящение калькулятору с помощью GridLayout

У меня проблемы с оформлением макетов.Посвящение калькулятору с помощью GridLayout

Чтобы понять основы, я решил создать простое приложение калькулятора.
Итак, я использую GridLayout, вложенный в LinearLayout, чтобы поместить кнопки в текстовые поля.

Вот источник моего макета.

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

Как сделать этот макет заполнением экрана?

И сделать мое приложение выглядит как этого

Надеясь для быстрых ответов.

[EDIT]: Итак, теперь все идет лучше, но у меня появились новые вопросы. Сейчас моя основная деятельность выглядит следующим образом

Очень хороший, на мой взгляд, но:

Как удалить пустое пространство на правой стороне клавиатуры?
Как сделать клавиатуру и текстовое изображение размером 70 и 30 процентов экрана соответственно?

Кроме того, новый код макета:

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

источник

2016-08-20 likeanowl

Попробуйте использовать TableLayout. Затем вы можете растянуть столбцы, чтобы они соответствовали ширине экрана. –

И сетка не могла этого сделать? – likeanowl

GridView или GridLayout были бы просто идеальны для калькулятора. –

Есть довольно близко. Не знаете, как обращаться с вертикальными разделителями. По какой-то причине класть 1dp Просмотр между каждым столбцом, который охватывает каждую строку, заставляет GridLayout расширять весь вид.

И использовать это, вам нужна эта зависимость для поддержки версии библиотеки

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

цвета.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>

источник

2016-08-20 20:24:26

Вау, это фантастика! – likeanowl

Да, я подумал о добавлении полной границы вокруг каждой кнопки, но я не хотел «удваивать» толщину по краям, поэтому я помещал тонкие строки между кнопками. –

Меняйте = и 0 кнопок:

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

я понял из Вашего комментария, что = кнопка выступала в нижней части экрана. Это будет связано с тем, что вы назначили большой вес калькулятору, поэтому использование fill_vertical сделает это.

Я Предполагая, что (но исправьте меня, если я ошибаюсь) с нужной графики, вы показали, что вы хотите, чтобы калькулятор был выровнен в нижней части экрана. Если это так, вот моя рекомендованная поправка к макету (tldr: использовать RelativeLayout вместо 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>

источник

2016-08-20 17:28:31

Благодарим вас за ответ @ChrisWard. Но на эмуляторе все еще выглядит довольно странно: http://imgur.com/a/AY9hO Почему? – likeanowl

Привет @likeanowl, я вижу проблему, и я сделал редактирование на свой пост выше. –

Большое вам спасибо, я попробую прямо сейчас – likeanowl

Наконец, спустя почти десять часов, я доволен. Now its looks like this

на основе @ cricket_007 предложение, мой код

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

Может быть, это немного сумбурно, но это нормально, я думаю.

источник

2016-08-20 23:30:47 likeanowl

Посвящение калькулятору с помощью GridLayout

ответ

Смежные вопросы