2

На первый взгляд простейшая задача - нарисовать калькулятор в таком стиле: введите сюда описание изображения

И первое, что приходит на ум - использовать GridLayout для размещения кнопок. Этот макет позволяет объединять ячейки как по горизонтали, так и по вертикали, что требуется для кнопок "0" и "=".

После первого наброска для меня, как для новичка в этом деле, получился неожиданный результат. Мог бы выложить скрины, но не позволяет репутация. Смысл в том, что на экранах до 7-ми дюймов кнопки просто не помещаются в экран и крайний столбец элементов просто недоступен.

Оказывается GridLayout подгоняет ширину ячеек под самый широкий элемент в строке. Хотя я вначале думал, что грид работает по-другому - подгоняет элементы под размер экрана (как LinearLayout). В итоге вся борьба с гридом сводится к тому, что нужно задавать фиксированные размеры кнопок, чтобы они поместились в экран. Но это, как я понимаю, не выход, так как под каждый размер экрана делать макет - это чушь.

Далее возникла мысль использовать TableLayout. С ним всё прекрасно получается, так как у этого контейнера есть нужный в данной ситуации атрибут shrinkColumns, который позволяет переносить текст, если тот не помещается в ширину колонки. В случае с кнопками, он их ужимает до нужного размера и они все прекрасно смотрятся на любом экране. Но, здесь опять я встретился с траблой. При чем для меня непонятной до сих пор. Ячейки в TableLayout можно объединять только по горизонтали! С чем связано это ограничение - ума не приложу... В итоге кнопку "=" вставить в таблицу как в задании - невозможно.

В итоге, я так пока и не пришел к разумному решению - как правильно сделать разметку кнопок, чтобы они корректно подстраивались под любой экран. Прошу вашей помощи. Заранее благодарен!

1
  • Вот ссылка на хабр, со статьей, там описывается как сделать лайаут, который подойдет для этой задачи. Commented 4 апр. 2016 в 21:52

2 ответа 2

1
<TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp">
        <TableRow>
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
        </TableRow>
        <TableRow>
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
        </TableRow>
        <TableRow>
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
        </TableRow>
        <TableRow>
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
        </TableRow>
        <TableRow>
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
        </TableRow>
        <TableRow android:weightSum="5">
            <Button android:layout_weight="1" android:layout_span="2" />
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
            <Button android:layout_weight="1" />
        </TableRow>
    </TableLayout>

С кнопкой = сложнее. TableLayout не позволяет объединять строки.

1
  • Я об этом написал в вопросе: "Ячейки в TableLayout можно объединять только по горизонтали! С чем связано это ограничение - ума не приложу... В итоге кнопку "=" вставить в таблицу как в задании - невозможно." В принципе, ответ я уже получил. Это всё можно выполнить несколькими LinearLayout Commented 5 апр. 2016 в 16:44
0

GridLayout позволяет при необходимости растянуть на несколько столбцов или строк. Можно применять следующие атрибуты:

  • android:layout_columnSpan: количество столбцов, на которые растягивается элемент
  • android:layout_rowSpan: количество строк, на которые растягивается элемент.

    <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:rowCount="3"
    android:columnCount="3">
    
    <Button
        android:text="1"
        android:layout_column="0"
        android:layout_row="0" />
    <Button android:text="2"
        android:layout_column="1"
        android:layout_row="0"/>
    <Button android:text="3"
        android:layout_column="2"
        android:layout_row="0"  />
    <Button android:text="4"
        android:layout_width="180dp"
        android:layout_columnSpan="2"/>
    <Button android:text="5"
        android:layout_height="100dp"
        android:layout_rowSpan="2"/>
    <Button android:text="6" />
    <Button android:text="7"/>
    

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.