Flutter Button — использование кнопок в проектe
Как всегда откройте новый проект в Android Studio и удалите шаблонный пример. Можете взять код из предыдущего нашего поста, например отсюда (Drawer Flutter) и вставить его в свой проект. Код необходимо брать из последнего абзаца.
В настоящей статье мы рассмотрим RaisedButton и научимся добавлять иконку на кнопку. Как использовать FlatButton мы покажем в следующей статье про Flutter Button.
Итак поехали. По ходу текста, мы не будем размещать весь код, а только изменяемые места. Вы можете поступить следующим образом. Скопировать из конца статьи код и вставлять в него примеры, указанные по ходу статьи.
RaisedButton Flutter
В переводе с английского языка raised — поднятый, возвышенный. Данный виджет представляет из себя кнопку, которая при нажатии имеет эффект приподнятости.
class _AppState extends State < @override Widget build(BuildContext context) < return Center( child: RaisedButton( onPressed: null, child: Text('Пример кнопки', style: TextStyle(fontSize: 15)) ) ); >>В данном примере в свойстве кнопки onpressed мы указали значение null , это состояние Disabled. Вот результат данного кода:
давайте изменим это свойство на следующее:
onPressed: ()<>,результат этого действия — кнопка будет визуально активна.
Добавить цвет можно, добавив свойство:
child: RaisedButton( onPressed: ()<>, child: Text('Пример кнопки', style: TextStyle(fontSize: 15)), color: Colors.yellow, )
Теперь давайте посмотрим как добавить иконку в RaisedButton . Для этого мы используем RaisedButton.icon , в свойстве icon которого, мы укажем нужную нам иконку, например settings . Обратите внимание, что текстовое поле, в данном виджете обозначается как label
child: RaisedButton.icon( onPressed: ()<>, icon: Icon( Icons.settings //вид иконки. ), label: Text('Кнопка настройки'), // название кнопки color: Colors.yellow, // цвет кнопки )
приведем некоторые виды иконок:
.computer — обозначение компьютера
.conract-phone — обозначение человека с поднятой трубкой
.content-copy — копирование выделенного фрагмента
Все варианты вы можете глянуть на официальном сайте Flutter.dev в разделе посвященном Icons class
Пойдем дальше. Изменим цвет кнопки при нажатии, добавив в свойство highlightColor
highlightColor: Colors.redAccent,а с помощью splashColor: Colors.redAccent мы добавим эффект разрастания цвета при нажатии. Попробуйте сами.
import 'package:flutter/material.dart'; void main() < runApp( MaterialApp( home: Scaffold( appBar: AppBar( centerTitle: true, title: Text('пример Flutter Button'), backgroundColor: Colors.green[600], ), body: App(), ))); >class App extends StatefulWidget < @override _AppState createState() =>_AppState(); > class _AppState extends State < @override Widget build(BuildContext context) < return Center( child: RaisedButton.icon( onPressed: ()<>, icon: Icon( Icons.settings ), label: Text('Кнопка настройки'), color: Colors.yellow, splashColor: Colors.redAccent, ));>>Круглая Flutter Button
Часто в дизайне необходимо добавить не стандартную прямоугольную кнопку, а круглую. Flutter и здесь на высоте, добавление круглой кнопки происходит с помощью виджета FloatingActionButton
child: FloatingActionButton( backgroundColor: Colors.orange, elevation: 1, onPressed: () => <>, ),Иногда также требуется чтобы кнопка располагалась вне body внизу экрана. В этом случае вам необходимо поместить код кнопки, например такой, напрямую в body
void main() < runApp( MaterialApp( home: Scaffold( appBar: AppBar( centerTitle: true, title: Text('Flutter Button'), backgroundColor: Colors.green[600], ), body: App(), floatingActionButton: FloatingActionButton.extended(onPressed: ()<>, label: Text("Кнопка внизу")), ))); >
если в виджете указать свойство icon: Icon(Icons.thumb_up), то результат будет следующий:
изменить цвет кнопки можно с помощью backgroundColor: Colors.green , где green — указываемый вами цвет для кнопки
Полный код статьи про RaisedButton
import 'package:flutter/material.dart'; void main() < runApp( MaterialApp( home: Scaffold( appBar: AppBar( centerTitle: true, title: Text('Flutter Button'), backgroundColor: Colors.green[600], ), body: App(), floatingActionButton: FloatingActionButton.extended(onPressed: ()<>, label: Text("Кнопка внизу"),icon: Icon(Icons.thumb_up)), ))); > class App extends StatefulWidget < @override _AppState createState() =>_AppState(); > class _AppState extends State < @override Widget build(BuildContext context) < return Center( child: FloatingActionButton( backgroundColor: Colors.orange, elevation: 1, onPressed: () =><>, ), ); >>Напоминаем вам, что вы можете работать не только в Android Studio, но и скачав, например Sublime Text
- Метки flutter botton, flutter raisedbutton, raised button
Полупрозрачная панель для ImageView
Для экономии места, когда требуется для ImageView сделать сопровождающий текст, можно наложить текст поверх ImageView, при этом сам TextView сделать полупрозрачным. Здесь нам поможет разметка RelativeLayout, позволяющая наложить два компонента друг на друга:
Как видно на скриншоте, текст лёг поверх картинки, немного захватив задние лапки и пушистый хвост.
А как поступить с более сложным случаем, когда нам нужно использовать два TextView поверх ImageView. В этом случае поместим текстовые метки в разметку LinearLayout, которую свою очередь сделаем полупрозрачной и поместим её уже поверх ImageView, как это делали в первом примере.
Данный приём можно использовать не только для отдельных ImageView, но и для адаптеров к GridView, когда у каждой ячейки сеточной компоновки требуется разместить ImageView и подпись к нему.
Как сделать кнопки произвольной формы на Android?
Добрый день, делаю первые шаги на андроиде.
Подскажите как проще создать кнопки не стандартной формы. На рисунке 5 кнопок. Есть ли возможность накладывать маску на прямоугольную кнопку? Либо направьте в ту сторону куда копать, спасибо большое.
- Вопрос задан более трёх лет назад
- 982 просмотра
Комментировать
Решения вопроса 1
Юрий @YuryBorodkin
Android dev
Если ты хочешь иметь какие-то сегменты с разными обработчиками на клик, ну или на вид одна кнопка, а по факту там пять зон с разными обработчиками, это делается через viewgroup, т.е кнопки накладываются друга на друга или как-то еще сочетаются.
В твоем случаем можно сделать что-то вроде
код лэйаута, тебе нужно что в FrameLayout
rect_black_stoke_40dp
Потом ставишь обработчики на id частей кнопки и готово. Можно один на все части (ну или сразу на весь FrameLayout) тогда будет на тап по любой части одна реакции. Либо, на каждый сегмент свой обработчик.
Ответ написан более трёх лет назад
Антон Мисягин @sunnmas Автор вопроса
Спасибо за отклик. Правильно ли я понимаю, что кнопки в итоге будут наложены друг на друга? Легко ли получится разрулить нажатие на «правильную» кнопку при клике в области кривизны вне круглой кнопки? Есть ли какие нибудь примеры на данную тему?
Юрий @YuryBorodkin
Смотри, в андроид вью имеет форму прямоугольника. Кнопка, если упрощенно, регистрирует нажатие по всей своей поверхности.
Если ты хочешь иметь какие-то сегменты с разными обработчиками на клик, ну или на вид одна кнопка, а по факту там пять зон с разными обработчиками, это делается через viewgroup, т.е кнопки накладываются друга на друга или как-то еще сочетаются.
В твоем случаем можно сделать что-то вроде
код лэйата, тебе нужно что в FrameLayout
rect_black_stoke_40dp
Потом ставишь обработчики на id частей кнопки и готово. Можно один на все части (ну или сразу на весь FrameLayout) тогда будет на тап по любой части одна реакции. Либо, на каждый сегмент свой обработчик.
Панель навигации
В Android 4.0 (точнее в Android 3.0) появилась новая панель навигации. Рассмотрим несколько примеров взаимодействия с этой панелью. Как включить панель навигации в эмуляторе написано здесь.
Следует обратить внимание на следующие вещи. Первое — поведение панели навигации на планшетах под управлением Android 3.0 немного отличается от панели навигации для устройств под управлением Android 4.0 и представленный код может не работать. Второй момент — многие брендированные телефоны имеют собственную прошивку, в которой не предусмотрена панель навигации. Яркий пример — мой Galaxy SII. Учитывайте эти факты при разработке своих приложений.
Прячем системные кнопки навигации
Чтобы скрыть системную панель навигации с кнопками Home, Back, можно использовать код:
getWindow(). getDecorView(). setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
Этот способ подойдёт для игр, читалок и прочих приложений, где системная панель занимает лишнее пространство. Панель не удаляется, а просто скрывается из виду. Когда пользователь нажмёт на экран в той позиции, где находится данная панель, то она автоматически появится.
Прячем или затемняем панель навигации
Способов управления панелью навигации не так уж и много. Точнее их всего три. Мы можем скрыть панель или затемнить её (рекомендуется использовать в играх, чтобы не отвлекала). Управляется поведение панели при помощи метода setSystemUiVisibility(), который применим к элементам View. Например, мы можем запустить приложение с скрытой панелью, но как только мы коснёмся экрана (приложение получит фокус), то панель сразу появится. Для эффекта затемнения мы приготовим кнопку. Третий способ показа панели использовать не будем, так как она и так появляется без явного вызова метода.
Для начала создадим разметку приложения с большой картинкой. Наверное, удобно было бы, если при запуске панель навигации не выводилась сразу, чтобы можно было рассмотреть картинку получше.
package ru.alexanderklimov.navigationbar; import . public class NavBarAppActivity extends Activity < ImageView myImageView; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.main); myImageView = (ImageView) findViewById(R.id.myimageview); // прячем панель навигации при запуске myImageView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION); >public void onClick(View v) < // затемняем панель навигации myImageView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LOW_PROFILE); >>
В результате, при запуске панель будет скрыта, при нажатии на экран панель появится, а при щелчке на кнопку панель станет менее заметной.
Если говорить о затемнении, то приглушается не только панель навигации, но и строка состояния над заголовком, чтобы усилить фокус на самом приложении. Перепишем код для включения/выключения эффекта
public void onClick(View v) < int currentVis = v.getSystemUiVisibility(); int newVis; if ((currentVis & View.SYSTEM_UI_FLAG_LOW_PROFILE) == View.SYSTEM_UI_FLAG_LOW_PROFILE) < newVis = View.SYSTEM_UI_FLAG_VISIBLE; >else < newVis = View.SYSTEM_UI_FLAG_LOW_PROFILE; >v.setSystemUiVisibility(newVis); >
Сначала мы узнаём текущие настройки с помощью метода getSystemUiVisibility(), а затем устанавливаем новые настройки.
Кстати, вы заметили, что на картинке два кота? Эх, вы. (источник)
При затемнении и скрытии мы использовали элемент ImageView в качестве компонента, который управляет флагами видимости. Сейчас в официальной документации используется другой пример, когда используется объект View, получаемый через метод getWindow().getDecorView(), хотя в комментариях говорится, что можно использовать и старый способ. Сейчас мы рассмотрим этот пример, заодно покажу, как сбросить все флаги. Для примера достаточно двух кнопок.
package ru.alexanderklimov.test; import . public class MainActivity extends Activity < View decorView; int uiOptions = View.SYSTEM_UI_FLAG_LOW_PROFILE; @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); decorView = getWindow().getDecorView(); decorView.setSystemUiVisibility(uiOptions); >// Щелчок первой кнопки public void onClick(View v) < decorView.setSystemUiVisibility(uiOptions); >// Щелчок второй кнопки public void onClick2(View v) < // вызов setSystemUiVisibility() с значением 0 // очистит все флаги decorView.setSystemUiVisibility(0); >>
При нажатии первой кнопки панель навигации и строка состояния затемнятся, а при нажатии на вторую кнопку снова появятся.
Прячем строку состояния
Отталкиваясь от последнего примера, рассмотрим случай, когда мы хотим скрыть строку состояния, чтобы получить приложение на весь экран. Для этого нам нужно использовать флаг SYSTEM_UI_FLAG_FULLSCREEN. Такой способ рекомендуется использовать на Android 4.1 и выше. Пример для старых версий описывать не буду, ищите в документации.
public void onClick(View v) < // во весь экран decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_FULLSCREEN); >
После нажатия на кнопку, самая верхняя полоска исчезнет и заголовок приложения сдвинется вверх.
Если хотите скрыть и заголовок приложения, то добавьте ещё две строчки кода:
// При необходимости можете скрыть и заголовок приложения ActionBar actionBar = getActionBar(); actionBar.hide();
Можно объединять флаги, например, можем скрыть панель навигации и строку состояния одновременно:
public void onClick(View v) < int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_FULLSCREEN; // прячем панель навигации и строку состояния decorView.setSystemUiVisibility(uiOptions); >
Следует помнить, что любое нажатие в области экрана заставит появиться панель навигации и строку состояния снова. Также имейте в виду, что когда пользователь нажмёт на кнопку HOME, а потом вернётся в ваше приложение, то панель и строка состояния будут видны, если вы расположение метод скрытия в метод onCreate(), который просто не сработает при возвращении. Поэтому используйте методы onResume() или onWindowFocusChanged().
Перекрыть разметку
По умолчанию Панель действий размещается в верхней части активности, а сама разметка активности находится под панелью. Можно переопределить это поведение, когда панель будет накладываться на разметку:
// onCreate() getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY); setContentView(R.layout.activity_main);