Кастомная нижняя панель в android

Настраиваемая форма нижней панели в android

Однажды меня попросили создать приложение с необычным дизайном нижней панели BottomNavigationView :

Кастомная нижняя панель в android
Изогнутый BottomNavigationView

Я никогда ранее не делал ничего подобного, поэтому начал гуглить на предмет создания custom view. После поисков и советов коллег, я понял, что это всего лишь разновидность кривой Безье.

Кривая Безье

Если вы когда-либо использовали компьютерные программы для рисования, вы скорее всего использовали кривые Безье, даже не подозревая об этом. 

Кастомная нижняя панель в android
пример кривой Безье в Adobe Illustrator

Я нашёл интересную статью, в которой был описан необходимый мне тип кривой, рекомендую её прочитать. Там же есть утилита для работы с кривыми.

Кривая, отражающая нужный мне дизайн, оказалась кубической кривой Безье.

Кастомная нижняя панель в android

Кубические кривые определяются четырьмя опорными точками. Первая и последняя определяют положение концов кривой, а вторая и третья точки отвечают за направление кривой.

Перейдём к коду и увидим, как создавать кривые Безье в android.

Вначале создадим собственный view, расширяющий BottomNavigationView, чтобы взять весь его функционал и сконцентрироваться только на дизайне.

public class CurvedBottomNavigationView extends BottomNavigationView {
    public CurvedBottomNavigationView(Context context) {
        super(context);
        init();
    }
    public CurvedBottomNavigationView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    public CurvedBottomNavigationView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    private void init() {
        mPath = new Path();
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaint.setColor(Color.WHITE);
        setBackgroundColor(Color.TRANSPARENT);
    }
}

Метод init()в этом коде только инициализирует объекты path и paint.

Роль path — позволить нам рисовать геометрические формы, в том числе кривые Безье. Path рисует линию от точки до точки. Обычный 
BottomNavigationView в форме прямоугольника, поэтому используя Path мы перерисуем его с помощью кривых.

Кастомная нижняя панель в android
Позиции точек

Сначала инициализируем позиции наших точек. Они зависят от ширины и высоты view. Здесь P1 — начальная точка рисования, P2 — начало первой кривой, P3 — конец первой кривой и начало второй, а P4 — окончание второй кривой. 

Никогда не делайте расчёты в методе onDraw()— он вызывается постоянно и это просто убьёт производительность приложения. Я делаю расчёты в методе onSizeChanged(), вызываемом при изменении размера view, поэтому на производительности это не должно сильно сказаться

 @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // получаем ширину и высоту navigation bar
         mNavigationBarWidth = getWidth();
         mNavigationBarHeight = getHeight();
        // координаты (x,y) начальной точки до кривой
        mFirstCurveStartPoint.set((mNavigationBarWidth / 2) - (CURVE_CIRCLE_RADIUS * 2) - (CURVE_CIRCLE_RADIUS / 3), 0);
        // координаты (x,y) конечной точки после кривой
        mFirstCurveEndPoint.set(mNavigationBarWidth / 2, CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4));
        // то же самое для второй кривой
        mSecondCurveStartPoint = mFirstCurveEndPoint;
        mSecondCurveEndPoint.set((mNavigationBarWidth / 2) + (CURVE_CIRCLE_RADIUS * 2) + (CURVE_CIRCLE_RADIUS / 3), 0);

        // координаты (x,y) первой опорной точки на кубической кривой
        mFirstCurveControlPoint1.set(mFirstCurveStartPoint.x + CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4), mFirstCurveStartPoint.y);
        // координаты (x,y) второй опорной точки
        mFirstCurveControlPoint2.set(mFirstCurveEndPoint.x - (CURVE_CIRCLE_RADIUS * 2) + CURVE_CIRCLE_RADIUS, mFirstCurveEndPoint.y);

        mSecondCurveControlPoint1.set(mSecondCurveStartPoint.x + (CURVE_CIRCLE_RADIUS * 2) - CURVE_CIRCLE_RADIUS, mSecondCurveStartPoint.y);
        mSecondCurveControlPoint2.set(mSecondCurveEndPoint.x - (CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4)), mSecondCurveEndPoint.y);
    }

Перейдём к более интересному. Для начала обнулим (reset) path для удаления линий и кривых из неё, затем переместим её в начальную точку P1, используя метод moveTo(x,y), и нарисуем первую линию между P1 и P2, используя lineTo(x,y), это добавит линию с последней точки до заданной точки. Так как у нас пока нет последней точки, укажем moveTo(0,0).

Для рисования кубических кривых мы должны использовать метод cubicTo(x1,y1,x2,y2,x3,y3), где первая и вторая точки (x1,y1) (x2,y2) контролируют наклон. Для проверки корректности точек можно использовать эту утилиту. Так же отрисуем вторую кривую и так далее всю панель.

 @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        
        //расчет точки 
        
        mPath.reset();
        mPath.moveTo(0, 0);
        mPath.lineTo(mFirstCurveStartPoint.x, mFirstCurveStartPoint.y);

        mPath.cubicTo(mFirstCurveControlPoint1.x, mFirstCurveControlPoint1.y,
                mFirstCurveControlPoint2.x, mFirstCurveControlPoint2.y,
                mFirstCurveEndPoint.x, mFirstCurveEndPoint.y);

        mPath.cubicTo(mSecondCurveControlPoint1.x, mSecondCurveControlPoint1.y,
                mSecondCurveControlPoint2.x, mSecondCurveControlPoint2.y,
                mSecondCurveEndPoint.x, mSecondCurveEndPoint.y);

        mPath.lineTo(mNavigationBarWidth, 0);
        mPath.lineTo(mNavigationBarWidth, mNavigationBarHeight);
        mPath.lineTo(0, mNavigationBarHeight);
        mPath.close();
    }

Наконец, мы можем рисовать с помощью объекта canvas (канва). Канва содержит несколько методов рисования, и нам подходит canvas.drawPath(Path path, Paint paint).

  @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(mPath, mPaint);
    }

Хорошей разработки!

Код примеров вы сможете найти в моём Github и на Java и на Kotlin. Только выберите правильную ветку.

По материалам: «How I drew custom shapes in bottom bar»

Также по разработке под android рекомендую почитать «Разработка приложения-галереи под Android на Kotlin»

Кастомная нижняя панель в android

Разработчик: java, kotlin, c#, javascript, dart, 1C, python, php.

Пишите: @ighar. Buy me a coffee, please :).

Аутентификация в приложении Flutter

Аутентификация в приложении Flutter

Сегодня мы сделаем небольшое приложение, в котором покажем, как сделать авторизацию, выход из сеанса и удаление профиля в Firebase. И мы будем делать это в Android Studio. Кликнув по ссылке, вы узнаете как установить Flutter для Android Studio. Если вы используете другую IDE, не волнуйтесь, код не будет отличаться.

Если вы только начинаете разрабатывать на Flutter, обратите внимание на статью Создание первого приложения Flutter и продолжение.

Наше приложение будет выглядеть как на скриншоте ниже. Оно сможет авторизовать пользователя в Firebase через Google, завершать сеанс, удалять пользователя в том случае, если он когда-либо авторизовывался в приложении. Также мы добавим круглый индикатор прогресса внизу, чтобы показать, что приложение занято.

Аутентификация в приложении Flutter

Подготовка

Вначале необходимо настроить Google Firebase.

Добавим Firebase в проект

Аутентификация в приложении Flutter
скопируйте файл .json в папку Android/app 

Перейдите в консоль Firebase, создайте новый проект. Затем скачайте файл google-services.json и скопируйте его в папку Android/app/ (как на скриншоте). Не забудьте добавить SHA-1, он понадобится для аутентификации. Кликните здесь, если не знаете, где взять SHA-1.По дальнейшей настройке Flutter документация здесь.

Добавим метод входа (Sign-in)

Аутентификация в приложении Flutter
включим Google Sign-in

Затем в Firebase Console перейдите в Authentication (слева на панели). Здесь есть список Провайдеры авторизации. Для нашего проекта достаточно будет только Google.  

Добавляем зависимости

Откройте файл pubspec.yaml в папке проекта. Добавьте следующие строки ниже dependencies:

      // ./pubspec.yaml
      dependencies:
      //...
      #AUTHENTICATIN
      firebase_auth: ^0.6.2+1
      google_sign_in: ^3.2.2

Нажмите кнопку ‘Packages get’ сверху. Супер, теперь можно перейти к разработке. 

Структура проекта

Аутентификация в приложении Flutter
структура проекта

Я создал папку /scr в /lib. В /scr создал папку /auth. Добавил файл authHelper.dart в /auth, а home.dart и startApp.dart в /src. В принципе, вы можете создать любую структуру, однако, не забудьте поменять пути до файлов в этом случае.

Main.dart

Рассмотрим этот кусок кода. Это точка входа в приложении Flutter. Здесь мы просто запускаем StartApp().

    // ./lib/main.dart
    import 'package:flutter/material.dart';
    import 'src/startApp.dart';
    void main() => runApp(StartApp());

StartApp.dart

В startApp.dart мы пропишем тему приложения. Импортируем сюда home.dart, создадим StatelessWidget, определим цвета темы и основной экран методом Home().

    // ./lib/scr/startApp.dart
    import 'package:flutter/material.dart';
    import 'home.dart';
    class StartApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Auth Tutorial',
          theme: new ThemeData(
            // theme of our application.
            primaryColor: Colors.lightBlue,
            primaryColorDark: Colors.blue,
            accentColor: Colors.orange,
          ),
          home: new Home(),      
        );
      }
    }

Home.dart

Здесь мы импортируем flutter/material.dart и наш вспомогательный модуль authHelper.dart.Затем создаём StatefulWidget. 

    // ./lib/scr/home.dart
    import 'package:flutter/material.dart';
    import 'auth/authHelper.dart';
    class Home extends StatefulWidget {
      @override
      _Home createState() => new _Home();
    }

_Home() будет таким: создаём панель app bar с надписью ‘Flutter Authentication Tutorial’. Ниже у нас будет текстовое поле и три кнопки, ‘Login’, ‘Logout’ и ‘Delete’. Можете разместить их как угодно. Я даже присвоил разные цвета. Также мы добавим круглый индикатор прогресса.

    // ./lib/scr/home.dart
    //...
    class _Home extends State<StatefulWidget> {
      @override
      Widget build(BuildContext context) {    
        return new Scaffold(
          appBar: new AppBar(
            title: new Text('Flutter Authentication Tutorial'),
          ),
          body: new Center(
              child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.symmetric(vertical: 9.0, horizontal: 18.0),
                child: Text('User: $mUserName'),
              ),
              Padding(
                padding: EdgeInsets.symmetric(vertical: 9.0, horizontal: 18.0),
                child: RaisedButton(
                    color: Colors.green,
                    textColor: Colors.white,
                    splashColor: Colors.greenAccent,
                    child: const Text('LOGIN'),
                    onPressed: isLoggingIn ? null : clickLogin),
              ),
              Padding(
                padding: EdgeInsets.symmetric(vertical: 9.0, horizontal: 18.0),
                child: RaisedButton(
                    color: Colors.blue,
                    textColor: Colors.white,
                    splashColor: Colors.blueAccent,
                    child: const Text('LOGOUT'),
                    onPressed: isLoggingIn ? null : clickLogout),
              ),
              Padding(
                padding: EdgeInsets.symmetric(vertical: 9.0, horizontal: 18.0),
                child: RaisedButton(
                  color: Colors.red,
                  textColor: Colors.white,
                  splashColor: Colors.redAccent,
                  child: const Text('DELETE'),
                  onPressed: mUser == null || isLoggingIn ? null : clickDelete,
                ),
              ),
              new Opacity(
                opacity: cpbOpacity,
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    new CircularProgressIndicator(),
                    new SizedBox(width: 20.0),
                    new Text('Please wait...')
                  ],
                ),
              ),
            ],
          )),
        );
      }
    }

Добавим несколько переменных и функций. Для начала, mUser и mUserName. А также булеву isLoggingIn. При каждом успешном входе она будет true. И если она true, кнопки будут неактивны (если onPressed равен null, кнопка неактивна). При клике на кнопку Login будет вызван loginWithGoogle из модуля authHelper. Здесь же мы проверяем ошибки, и если всё хорошо, установим isLoggingIn и выведем имя пользователя (username), которое получим после авторизации.

    // ./lib/scr/home.dart
    class _Home extends State<StatefulWidget> {
      var mUser;
      var mUserName;
      var isLoggingIn = false;
      Future clickLogin() async {
        //установим isLoggingIn в true при клике на Login
        setState(() {
          isLoggingIn = true;
        });
        mUser = await loginWithGoogle().catchError((e) => setState(() {
              isLoggingIn = false;
            }));
        assert(mUser != null);
        setState(() {
          isLoggingIn = false;
          mUserName = mUser.displayName;
        });
      }
      @override
      Widget build(BuildContext context) {
      //...
      }
    }

Создадим методы clickLogout и clickDelete. В clickLogout мы вызываем logoutWithGoogle из authHelper. При успешном выполнении выводим в текстовом поле ‘No user is logged in’. При клике clickDelete, пользователь будет удалён из Firebase.

    // ./lib/scr/home.dart 
    class _Home extends State<StatefulWidget> { 
      //...
      void clickLogout() {
        setState(() {
          isLoggingIn = true;
        });
        logoutWithGoogle().whenComplete(() => setState(() {
              isLoggingIn = false;
              mUserName = 'No user is logged in!';
            }));
      }
      void clickDelete() {
        setState(() {
          isLoggingIn = true;
        });
        deleteUserWithGoogle(mUser).whenComplete(() => setState(() {
              isLoggingIn = false;
              mUser = null;
              mUserName = 'No user is logged in!';
            }));
      }
      @override
      Widget build(BuildContext context) {
        // ...
      }
    }

Допишем home.dart, добавьте эти строки в начале build. Здесь устанавливаем значение непрозрачности, в том случае, когда пользователь аутентифицирован.

    // ./lib/scr/home.dart 
    class _Home extends State<StatefulWidget> { 
      //...
      @override
      Widget build(BuildContext context) {
        var cpbOpacity;
        isLoggingIn ? cpbOpacity = 1.0 : cpbOpacity = 0.0;
        return new Scaffold(
          //...
        );
      }
    }

AuthHelper.dart

Почти закончили. Добавим немного кода в файл authHelper.dart. firebase_auth и google_sign_in необходимы для процесса аутентификации. При вызове loginWithGoogle сперва пытаемся получить пользователя. При неудаче пробуем дальнейшую авторизацию. Если и тут неудача, вызовем функцию signIn. Она откроет меню Google sign-in и если его отменят, получим ошибку. Ждём аутентификацию и пробуем получить пользователя Firebase. Если всё получилось, у нас будет пользователь, при этом он неанонимен.

    // ./lib/scr/auth/authHelper.dart
    import 'dart:async';
    import 'package:firebase_auth/firebase_auth.dart';
    import 'package:google_sign_in/google_sign_in.dart';
    final FirebaseAuth _auth = FirebaseAuth.instance;
    final GoogleSignIn _googleSignIn = new GoogleSignIn();
    Future<FirebaseUser> loginWithGoogle() async {
      GoogleSignInAccount currentUser = _googleSignIn.currentUser;
      if (currentUser == null) {
        currentUser = await _googleSignIn.signInSilently();
      }
      if (currentUser == null) {
        currentUser = await _googleSignIn.signIn();
        if (currentUser == null) {
          throw('Login Canceled');
        }
      }
      final GoogleSignInAuthentication auth = await currentUser.authentication;
      final FirebaseUser user = await _auth.signInWithGoogle(
        idToken: auth.idToken,
        accessToken: auth.accessToken,
      );
      assert(user != null);
      assert(!user.isAnonymous);
      return user;
    }
    //...

Допишем оставшиеся методы logoutWithGoogle и deleteUserWithGoogle. При выходе из сеанса, вызовем signOut из Firebase и signOut из googleSignIn. При удалении пользователя, сперва завершим его сеанс и затем полностью удалим.

    // ./lib/scr/auth/authHelper.dart
    //...
    Future<Null> logoutWithGoogle() async {
      await _auth.signOut();
      await _googleSignIn.signOut();
    }
    Future<Null> deleteUserWithGoogle(FirebaseUser user) async {
      await logoutWithGoogle();
      await user.delete();
    }

Вот и всё. Если у вас есть вопросы/уточнения, задавайте их в комментариях.

Вы пришли с Xamarin? Тогда почитайте Flutter или Xamarin: сравнение инструментов кросс-платформенной мобильной разработки.

Перевод «Flutter Authentication Tutorial»

Подписывайтесь на новости Flutter! https://t.me/flutterdaily

Аутентификация в приложении Flutter

Разработчик: java, kotlin, c#, javascript, dart, 1C, python, php.

Пишите: @ighar. Buy me a coffee, please :).

Создание первого приложения Flutter, часть 2

Создание первого приложения Flutter

Первая часть.

В этом уроке вы расширите функционал приложения и добавите в него интерактивность. Создадите вторую страницу (называемую роутом (route)), чтобы пользователь мог переходить на неё. На финальном этапе вы измените тему приложения (цвет).

Если вы пропустили первый урок, лучше начать с него.

Начнём с простого мобильного приложения, представленного бесконечным списком названий для компании-стартапа — это результат первого урока. В конце этого урока пользователь приложения сможет выбирать понравившиеся наименования и снимать выбор. По клику на иконку в верхнем правом углу будет открываться новая страница со списком наименований в избранном .

В этом GIF показан финальный вид приложения:

Создание первого приложения Flutter, часть 2

1. Добавим иконки в список

Добавим иконки в виде сердечка в каждую строку. Чуть позже сделаем их кликабельными с сохранением выбранного элемента в избранное.

Добавьте набор (Set) _saved в RandomWordsState. Этот Set будет хранить список выбранных пользователем пар слов. Set был выбран из-за того, что не допускает дублей.

class RandomWordsState extends State<RandomWords> {
  final List<WordPair> _suggestions = <WordPair>[];
  final Set<WordPair> _saved = new Set<WordPair>();   // Добавьте эту строку.
  final TextStyle _biggerFont = const TextStyle(fontSize: 18.0);
  ...
}

В функции _buildRow добавим проверку alreadySaved для того, чтобы быть уверенным, что ранее уже не сохранили такую пару.

Widget _buildRow(WordPair pair) {
  final bool alreadySaved = _saved.contains(pair);  // Добавьте эту строку.
  ...
}

В _buildRow() добавим иконку-сердечко к объектам ListTile для включения в избранное. Пока это статичные картинки, далее мы добавим в них интерактив:

Widget _buildRow(WordPair pair) {
  final bool alreadySaved = _saved.contains(pair);
  return new ListTile(
    title: new Text(
      pair.asPascalCase,
      style: _biggerFont,
    ),
    trailing: new Icon(   // Добавьте строки отсюда... 
      alreadySaved ? Icons.favorite : Icons.favorite_border,
      color: alreadySaved ? Colors.red : null,
    ),                    // ... до сюда.
  );
}

Перезапустите приложение. Вы должны увидеть незаполненные сердечки в каждой строке.

Проблемы?

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

2. Добавляем интерактивность

Сделаем сердечки кликабельными. При клике на них в списке, у выбранного элемента переключается свойство «избранный», при этом пара слов попадает в набор с избранным.

Для этого доработаем функцию _buildRow. Если запись уже есть в избранном, при повторном клике она удаляется из избранного. При клике на строку списка, вызовется setState() для уведомления фреймворка о смене состояния.

Добавьте onTap, как указано ниже:

Widget _buildRow(WordPair pair) {
  final alreadySaved = _saved.contains(pair);
  return new ListTile(
    title: new Text(
      pair.asPascalCase,
      style: _biggerFont,
    ),
    trailing: new Icon(
      alreadySaved ? Icons.favorite : Icons.favorite_border,
      color: alreadySaved ? Colors.red : null,
    ),
    onTap: () {      // Добавим 9 строк отсюда...
      setState(() {
        if (alreadySaved) {
          _saved.remove(pair);
        } else { 
          _saved.add(pair); 
        } 
      });
    },               // ... до сюда.
  );
}

Замечание: Во Flutter при вызове setState() срабатывает вызов к методу build() для объекта Состояния, в результате перерисовывая UI.

Перезапустите приложение. При клике на строку списка она должна попадать в избранное или удаляться из него. Также в месте клика появляется анимация заполнения.

Проблемы?

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

3. Переход на новый экран

Сейчас мы добавим новую страницу для вывода избранного. Вы узнаете как переходить между основным (home route) и новым роутом.

Стеком, содержащим все роуты приложения, управляет Navigator. Добавление роута в стек Navigator-а, делает переход на этот роут. Удаление роута из стека Navigator-а, возвращает на предыдущий роут.

Добавим иконку списка к AppBar в методе build класса RandomWordsState. По клику на эту иконку, в Navigator добавится новый роут, содержащий элементы избранного.

Добавьте иконку и соответствующее ей действие в метод build:

class RandomWordsState extends State<RandomWords> {
  ...
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
        actions: <Widget>[      // Добавьте 3 строки отсюда...
          new IconButton(icon: const Icon(Icons.list), onPressed: _pushSaved),
        ],                      // ... до сюда.
      ),
      body: _buildSuggestions(),
    );
  }
  ...
}

Замечание: Некоторые свойства виджетов принимают одиночный виджет (child), а другие, такие как действия, принимают массив виджетов (children), это указывается квадратными скобками ([]).

Добавим функцию _pushSaved() в класс RandomWordsState.

  void _pushSaved() {
  }

Перезапустим приложение. Иконка списка появится в верхней панели. Нажатие на неё ни к чему пока не приводит, потому что функция _pushSaved пуста.

Теперь создадим роут и положим в стек Navigator-а. Это действие отобразит новый роут на экране. Содержимое новой страницы построено в MaterialPageRoute builder, в анонимной функции.

Вызовем Navigator.push, как показано ниже. IDE покажет ошибку в коде, но мы это почти сразу поправим.

void _pushSaved() {
  Navigator.of(context).push(
  );
}

Добавим MaterialPageRoute и его построитель (builder). Код ниже создаёт список рядов ListTile. Метод divideTiles() добавляет горизонтальный разделитель между элементами. Переменная divided хранить финальный вид рядов, сконвертированный в список функцией toList().

Добавьте следующий код:

void _pushSaved() {
  Navigator.of(context).push(
    new MaterialPageRoute<void>(   // Добавьте 20 строк отсюда...
      builder: (BuildContext context) {
        final Iterable<ListTile> tiles = _saved.map(
          (WordPair pair) {
            return new ListTile(
              title: new Text(
                pair.asPascalCase,
                style: _biggerFont,
              ),
            );
          },
        );
        final List<Widget> divided = ListTile
          .divideTiles(
            context: context,
            tiles: tiles,
          )
          .toList();
      },
    ),                           // ... до сюда.
  );
}

В коде ниже свойство builder возвращает Scaffold, содержащий верхнюю панель нового роута с названием «Saved Suggestions.» Тело роута представлено ListView с рядами ListTiles; между рядами есть разделители:

void _pushSaved() {
  Navigator.of(context).push(
    new MaterialPageRoute<void>(
      builder: (BuildContext context) {
        final Iterable<ListTile> tiles = _saved.map(
          (WordPair pair) {
            return new ListTile(
              title: new Text(
                pair.asPascalCase,
                style: _biggerFont,
              ),
            );
          },
        );
        final List<Widget> divided = ListTile
          .divideTiles(
            context: context,
            tiles: tiles,
          )
              .toList();

        return new Scaffold(         // Добавьте 6 строк отсюда...
          appBar: new AppBar(
            title: const Text('Saved Suggestions'),
          ),
          body: new ListView(children: divided),
        );                           // ... до сюда.
      },
    ),
  );
}

Перезапустите приложение. Пометьте избранным какое-нибудь словосочетание в списке и затем нажмите иконку списка в верхней панели. Откроется новый экран с избранным. Navigator сам добавил кнопку «Назад» в панель. Вам даже не потребуется реализация метода Navigator.pop — просто нажав на неё, вы попадёте на основной экран.

Проблемы?

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

4. Смена UI через тему

Сейчас мы изменим тему приложения. Параметр theme отвечает за внешний вид вашего приложения. Вы можете использовать как тему по-умолчанию (зависит от устройства), так и изменить её по вашему желанию.

Тему настроить очень легко, для этого нужно сконфигурировать класс ThemeData. Изменим главный цвет нашего приложения на белый.

Смените цвет в классе MyApp:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(          // Добавьте 3 строки отсюда... 
        primaryColor: Colors.white,
      ),                             // ... до сюда.
      home: new RandomWords(),
    );
  }
}

Перезапустите приложение. Общий фон теперь белый, даже верхняя панель.

Как упражнение для практики, воспользуйтесь ThemeData для изменения других элементов UI. Класс Colors в библиотеке Material предоставляет множество цветов, а «горячий» перезапуск делает эксперименты с UI очень лёгкими.

Проблемы?

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

5. Готово!

Вы создали интерактивное приложение Flutter, работающее под iOS и Android и научились:

  • Писать код на Dart.
  • Использовать «горячий» перезапуск приложения для ускорения разработки.
  • Создавать виджеты с изменяемым состоянием (stateful), добавлять интерактивность в приложение.
  • Создавать роуты (route) и логику для перемещений между основным и новым роутами.
  • Изменять интерфейс приложения с помощью тем оформления.

Почитайте также Stateful-виджеты должны исчезнуть: Stateful Builder.

Перевод «Write Your First Flutter App, part 2»

Подписывайтесь на новости Flutter! https://t.me/flutterdaily

Создание первого приложения Flutter, часть 2

Разработчик: java, kotlin, c#, javascript, dart, 1C, python, php.

Пишите: @ighar. Buy me a coffee, please :).

Создание первого приложения Flutter, часть 1

Создание первого приложения Flutter

1. Введение

Flutter это SDK для создания мобильных приложений от Google под iOS и Android. С Flutter можно переиспользовать код, им пользуются разработчики по всему миру, он имеет открытый исходный код и бесплатен.

В этом уроке вы создадите несложное приложение Flutter. Если вы знакомы с объектно-ориентированным программированием и основами разработки, такими как переменные, циклы и условия, у вас всё должно получиться. Опыта разработки на Dart или под мобильные устройства не требуется.

Что мы узнаем в этом уроке

  • Как написать приложение на Flutter, выглядящее нативно и в  iOS, и в Android.
  • Базовую структуру приложений Flutter.
  • Поиск и использование пакетов для расширения функционала.
  • Использование горячей перезагрузки (hot reload) для удобства разработки.
  • Как реализовать stateful-виджет.
  • Как создать бесконечный список с «ленивой» загрузкой.

Во второй части мы добавим интерактивность, изменим тему приложения, добавим возможность перехода на другую страницу (называемую роутами (route) во Flutter).

Что мы сделаем в первой части

Вы сделаете простое мобильное приложение, генерирующее наименования для стартапов. Пользователь сможет выбирать и отменять выбор названий, сохраняя понравившиеся. Код будет «лениво» генерировать десять названий за один раз. По мере прокрутки пользователем списка, новые названия будут создаваться в фоне и подгружаться. Таким образом, пользователь сможет прокручивать список вечно.

В анимированном GIF показано, как будет выглядеть приложение в конце этой части:

Создание первого приложения Flutter, часть 1

2. Настройте окружение Flutter

Всё, что вам нужно для этого: Flutter SDK и редактор кода. В этом уроке предполагается, что вы выберете Android Studio, но выбор редактора остаётся за вами.

Протестировать работу приложения можно будет с этими устройствами:

  • Физическое устройство (Android или iOS), подключенное к компьютеру с настроенным режимом разработчика.
  • Симулятор iOS. (Требуется установка XCode)
  • Эмулятор Android. (Требуется установленная Android Studio)

3. Создаём каркас приложения Flutter

Для этого воспользуйтесь инструкцией Getting Started with your first Flutter app (возможно, позже её перевод будет доступен). Назовите проект startup_namer (вместо myapp). В дальнейшем мы будем дорабатывать это приложение.

Совет: Если вы не видите пункт «New Flutter Project» в вашей IDE, убедитесь, что она настроена для работы с Flutter и Dart.

В этом уроке мы будем преимущественно править файл lib/main.dart, в котором находится логика приложения.

Замените содержимое файла lib/main.dart.
Для этого удалите весь код в нём. Затем вставьте в него код ниже, выводящий надпись «Hello World» по центру экрана.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: const Text('Hello World'),
        ),
      ),
    );
  }
}

Замечание: При вставке кода могут исказиться отступы. Вот как это поправить:
   — Android Studio / IntelliJ IDEA: кликните правой кнопкой на коде и выберите Reformat Code with dartfmt.
   — VS Code: кликните правой кнопкой и выберите Format Document.
   — Terminal: запустите flutter format <имя файла>.

Запустите приложение. Вы должны увидеть приметно такое, в зависимости от того, Android или iOS у вас:

Замечание:  При первом запуске на физическом устройстве может пройти много времени. После этого будет работать hot reload. При нажатии на кнопку Save также будет запущен hot reload при работающей программе.

Подытожим

  • В этом примере создаётся приложение Material. Material — это описание визуального представления, он является стандартом в web и на мобильных платформах. Flutter содержит огромный спектр виджетов типа Material.
  • Метод main использует нотацию с большой стрелкой (=>), такая нотация используется в однострочных функциях.
  • Приложение наследует StatelessWidget, следовательно всё приложение также является виджетом. Во Flutter практически всё является виджетом, включая выравнивание, отступы, макет.
  • Виджет Scaffold из библиотеки Material предоставляет панель приложения, заголовок и свойство body, которое отвечает за иерархию виджетов на основном экране. И эта иерархия может быть иногда очень огромной.
  • Главная задача виджета — вернуть метод build, который описывает как нужно вывести виджет по отношению к соседним.
  • body в этом примере состоит из виджета Center, содержащего дочерний виджет Text. Виджет Center выравнивает всю иерархию потомков по центру экрана.

4. Используем сторонние пакеты

Сейчас вы научитесь работать с внешними пакетами, на примере пакета english_words, содержащего несколько тысяч популярных английских слов и утилиты для удобной работы с ними.

Найти пакет english_words, так же, как и многие другие пакеты с открытым исходным кодом, вы можете на pub.dartlang.org.

Файл pubspec управляет списком зависимостей приложения Flutter. В конец pubspec.yaml добавим english_words: ^3.1.0 (english_words версии 3.1.0 или выше) в список зависимостей (dependencies):

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.0
  english_words: ^3.1.0   # добавьте эту строку

Если вы открыли файл pubspec в Android Studio, кликните Packages get. Эта команда загрузит пакет из сети. В консоли вы должны увидеть что-то подобное:

flutter packages get
Running "flutter packages get" in startup_namer...
Process finished with exit code 0

Откроем lib/main.dart, импортируем пакет:

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';  // добавьте эту строку.

По мере написания, Android Studio будет предлагать библиотеки для импорта. Но добавленная строка сразу окрасится серым цветом, показывая неиспользуемый (пока) импорт.

Пришло время применить пакет english_words, пусть он генерит текст вместо текущей статичной надписи «Hello World».

Сделайте следующие изменения:

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random(); // добавьте эту строку.
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(    // Замените "const" на "new".
          //child: const Text('Hello World'),   // Замените этот текст...
          child: new Text(wordPair.asPascalCase),  // этим.
        ),
      ),
    );
  }
}

Замечание: «Pascal case» (так же известный как CamelCase («ВерблюжийРегистр»)), означает, что каждое слово в строке, включая первое, начинается с большой буквы. Таким образом, «upper camel case» становится «UpperCamelCase».

Если не заменить Center на «new Center», система типов покажет предупреждение о том, что объект Center не должен быть константой (const), потому что его потомок, объект Text больше не является константой. Поэтому и Center и Text должны создавать экземпляры с помощью new.

Если приложение уже запущено, используйте для перезапуска кнопку hot reload. При каждом перезапуске или холодном запуске проекта, вы будете видеть в приложении разные пары слов, выбранные в случайном порядке. Это происходит потому, что фразы создаются внутри метода build, запускаемого каждый раз при запросе от MaterialApp на перерисовку, или же переключении Platform в Flutter Inspector.

Проблемы?

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

5. Добавим stateful виджет

Stateless-виджеты неизменяемые (immutable), это значит, что их свойства не могут меняться  — все их значения завершённые (final).

Stateful виджеты поддерживают смену состояния. Реализация такого виджета подразумевает создание минимум двух классов: 1) класс StatefulWidget создающий экземпляр класса 2) State. Класс StatefulWidget сам по себе неизменяемый (immutable), однако класс State сохраняется на протяжении всего жизненного цикла виджета.

На этом шаге вы добавите stateful-виджет RandomWords, который создаст свой State-класс, RandomWordsState. Затем вы добавите RandomWords как дочерний элемент stateless-виджета MyApp.

Создадим минимальный класс состояния (state). Он может располагаться в любом месте файла в MyApp, но в этом решении он расположен в конце файла. Добавьте эти строки:

class RandomWordsState extends State<RandomWords> {
  // TODO Добавить метод build
}

Обратите внимание на объявление State<RandomWords>. Это указывает на то, что мы используем универсальный класс State, специализированный для использования с RandomWords. Большинство логики приложения и состояние находится здесь для поддержки состояния виджета RandomWords. Этот класс сохраняет сгенерированные пары слов, количество которых растёт бесконечно по мере прокрутки пользователя, так же как и избранных пар слов (будет в части 2), которые пользователь добавляет или удаляет в списке, нажимая кнопку в виде сердечка.

RandomWordsState зависит от класса RandomWords. Сейчас добавим его.

Добавьте stateful-виджет RandomWords в main.dart. Виджет RandomWords делает немного больше, чем просто создаёт State-класс:

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();
}

После этого IDE сообщит, что в классе отсутствует метод build. Добавим метод build, создающий пары слов, переместив этот код из MyApp в RandomWordsState. Добавьте код:

class RandomWordsState extends State<RandomWords> {
  @override                                  // Добавим с этой строки ... 
  Widget build(BuildContext context) {
    final WordPair wordPair = new WordPair.random();
    return new Text(wordPair.asPascalCase);
  }                                          // ... до этой.
}

Удалим часть кода из MyApp:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final WordPair wordPair = new WordPair.random();  // Удалите эту строку.

    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          //child: new Text(wordPair.asPascalCase), // А эту замените... 
          child: new RandomWords(),                 // ... на эту.
        ),
      ),
    );
  }
}

Перезапустите приложение. Ничего не должно измениться в поведении, приложение так же должно выводить пары слов при сохранении кода или перезапуске.

Совет: Если вы видите следующее сообщение при горячей перезагрузке, лучше полностью перезапустить его:
Reloading…
Not all changed program elements ran during view reassembly; consider restarting.

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

Проблемы?

Если ваше приложение не корректно работает, рабочий код по ссылке:

6. Создание ListView с бесконечной прокруткой

В этом шаге мы расширим RandomWordsState таким образм, чтобы выводился список пар слов. По мере его прокрутки, список (представленный виджетом ListView) будет расти бесконечно. Конструктор builder в ListView позволяет создавать списковые представления на лету, по запросу.

Добавьте список _suggestions в класс RandomWordsState для хранения предложенных пар. Также добавьте переменную _biggerFont для увеличения размера шрифта.

Замечание:  Добавление префикса в виде подчёркнутой линии к имени переменной делает её закрытой (private) в языке Dart.

class RandomWordsState extends State<RandomWords> {
  // добавьте следующие две строки.
  final List<WordPair> _suggestions = <WordPair>[];
  final TextStyle _biggerFont = const TextStyle(fontSize: 18.0); 
  ...
}

Затем добавьте функцию _buildSuggestions() в класс RandomWordsState. Этот метод создаст ListView, который выведет сгенерированные пары слов.

Класс ListView предоставляет свойство itemBuilder, это построитель и анонимная функция с обратным вызовом. Она принимает два параметра — BuildContext, и переменную-итератор i. Итератор начинается с 0 и увеличивается при каждом вызове функции, т.е. каждый раз при генерации новой пары слов. Такая модель позволяет списку предложений расти постепенно при перемотке списка пользователем.

Добавьте функцию _buildSuggestions, описанную ниже, в класс RandomWordsState (delete the comments, if you prefer):

  Widget _buildSuggestions() {
    return new ListView.builder(
      padding: const EdgeInsets.all(16.0),
      // The itemBuilder callback is called once per suggested 
      // word pairing, and places each suggestion into a ListTile
      // row. For even rows, the function adds a ListTile row for
      // the word pairing. For odd rows, the function adds a 
      // Divider widget to visually separate the entries. Note that
      // the divider may be difficult to see on smaller devices.
      itemBuilder: (BuildContext _context, int i) {
        // Add a one-pixel-high divider widget before each row 
        // in the ListView.
        if (i.isOdd) {
          return new Divider();
        }

        // The syntax "i ~/ 2" divides i by 2 and returns an 
        // integer result.
        // For example: 1, 2, 3, 4, 5 becomes 0, 1, 1, 2, 2.
        // This calculates the actual number of word pairings 
        // in the ListView,minus the divider widgets.
        final int index = i ~/ 2;
        // If you've reached the end of the available word
        // pairings...
        if (index >= _suggestions.length) {
          // ...then generate 10 more and add them to the 
          // suggestions list.
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      }
    );
  }

Функция _buildSuggestions вызывает _buildRow для каждой пары слов. Она выводит созданную пару в ListTile, и это позволит вам сделать ряды более привлекательными в части 2.

Добавьте функцию _buildRow в RandomWordsState:

  Widget _buildRow(WordPair pair) {
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }

Обновите метод build в RandomWordsState с добавлением _buildSuggestions() вместо прямого вызова библиотеки генерации слов. (Scaffold реализует базовый визуальный стиль в Material Design)

  @override
  Widget build(BuildContext context) {
    //final wordPair = new WordPair.random(); // удалить эти... 
    //return new Text(wordPair.asPascalCase); // ... две строки.

    return new Scaffold (                   // Добавить отсюда... 
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );                                      // ... досюда.
  }

Обновим метод build в MyApp, сменим заголовок и основной экран на виджет RandomWords.

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      home: new RandomWords(),
    );
  }

Перезапустим приложение. Вы должны увидеть бесконечный список пар слов, не важно насколько далеко вы пролистаете.

Проблемы?

Если ваше приложение работает не так, как должно, скачайте код по ссылке ниже и замените им свой, чтобы продолжить работу.

7. Что дальше

Поздравляем!

Вы закончили первую часть! Если хотите продолжить, переходите в часть 2, где сможете доработать приложение:

  • Добавить интерактивность.
  • Добавить навигацию.
  • Сменить цвет темы.

В конце части 2 приложение будет таким:

Создание первого приложения Flutter, часть 1

Подписывайтесь на новости Flutter! https://t.me/flutterdaily

Перевод «Write Your First Flutter App, part 1»

Создание первого приложения Flutter, часть 1

Разработчик: java, kotlin, c#, javascript, dart, 1C, python, php.

Пишите: @ighar. Buy me a coffee, please :).

Stateful-виджеты должны исчезнуть: Stateful Builder

Stateful-виджеты исчезнут: Stateful Builder

Как и сказано в названии, вам не всегда нужен StatefulWidget.

При разработке приложений Flutter, в зависимости от виджета, метод build может быть огромным. И использование StatefulWidget означает перестроение всей иерархии виджетов при каждом вызове setState .

Есть и более изящный способ обработки изменений состояния — использование StatefulBuilder.

Если вы только начинаете разрабатывать на Flutter, обратите внимание на статью Создание первого приложения Flutter и продолжение.

Stateful Builder

StatefulBuilderэто виджет Flutter, позволяющий встраивать состояние прямо в метод build. Этот виджет использует метод StatefulWidgetBuilder. В нём два параметра, context и setState. Параметр context это параметр типа BuildContext. Но наиболее интересен параметр setState.

typedef StatefulWidgetBuilder = Widget Function(BuildContext context, StateSetter setState);

Посмотрев в исходники StatefulWidgetBuilder, мы увидим, что setState это StateSetter. StateSetter это обратный вызов к State.setState. При его вызове, метод перестраивает иерархию виджетов с учётом их изменений.

Как использовать Stateful Builder

StatefulBuilder лучше всего использовать когда у вас средняя/большая иерархия виджетов, но состояние меняется только у небольшой его части.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amberAccent,
      body: SafeArea(
        child: Center(
          child: PersonCard(),
        ),
      ),
    );
  }
}

class PersonCard extends StatelessWidget {
  int counter = 0;
  @override
  Widget build(BuildContext contex) {
    return Card(
      child: SizedBox(
        width: 300.0,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(18.0),
                  child: Text(
                    "Luke Skywalker",
                    style:
                        TextStyle(fontSize: 16.0, fontWeight: FontWeight.w700),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(18.0),
                  child: Text(
                    "Age:  23",
                    style:
                        TextStyle(fontSize: 16.0, fontWeight: FontWeight.w700),
                  ),
                ),
              ],
            ),
            SizedBox(height: 12.0),
            Center(
              child: Container(
                height: 130.0,
                width: 130.0,
                child: Image.asset("assets/skywalker.png"),
              ),
            ),
            SizedBox(height: 12.0),
            StatefulBuilder(
              builder: (BuildContext context, StateSetter setState) {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    IconButton(
                      icon: Icon(Icons.skip_previous),
                      onPressed: () {
                        setState(() {
                          counter--;
                        });
                      },
                    ),
                    Text(
                      "$counter",
                      style: Theme.of(context).textTheme.body2,
                    ),
                    IconButton(
                      icon: Icon(Icons.skip_next),
                      onPressed: () {
                        setState(() {
                          counter++;
                        });
                      },
                    ),
                  ],
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

Здесь показана работа StatefulBuilder с виджетом Card. Вместо того, чтобы сделать всю Card stateful, мы используем StatefulBuilder для построения только той секции дерева виджетов, в которой есть state . В этом случае мы используем его только для построения Row с кнопками и текстом. В результате, при срабатывании onPressed и вызове setState, будут перестроены только Row и его потомки.

Stateful-виджеты должны исчезнуть: Stateful Builder

Если бы мы сделали виджет полностью stateful, то вместо перестроения только Row, это затронуло бы весь Card.

Stateful-виджеты должны исчезнуть: Stateful Builder
Рис. 1: Штриховкой показана область перестроения

Видео законченного приложения:

Перевод статьи «Stateful Widgets be gone: Stateful Builder»

Подписывайтесь на новости Flutter! https://t.me/flutterdaily

Stateful-виджеты должны исчезнуть: Stateful Builder

Разработчик: java, kotlin, c#, javascript, dart, 1C, python, php.

Пишите: @ighar. Buy me a coffee, please :).

Создание хорошего плагина Flutter

Создание первого приложения Flutter

Плагины — очень важная часть экосистемы Flutter. Они позволяют разработчикам взаимодействовать с платформой, на которой работают их приложения.

На текущий момент в каталоге насчитываются сотни плагинов для Flutter. Качество плагина — наиважнейшая вещь, независимо от автора плагина — это компания Google или частный разработчик. В этой статье мы рассмотрим, что такое хороший плагин и как написать такой самостоятельно.

Если вы только начинаете разрабатывать на Flutter, обратите внимание на статью Создание первого приложения Flutter и продолжение.

Сперва — функциональность, затем остальное

При написании плагина вы скорее всего попытаетесь использовать существующую нативную библиотеку. Для этого нужно взять API этой библиотеки и создать для неё эквивалентный API на Dart. Однако если API-интерфейсы существенно отличаются под разными платформами, начинаются проблемы.

При написании плагинов сначала думайте о функциональности, а не об API. К примеру, если вы пишете плагин локального хранилища, вам, вероятно, нужны API-интерфейсы, которые поддерживают хранение значений различных типов с возможностью их повторного вызова. После того, как вы определили, какую функциональность вы хотите заложить, подумайте о построение красивого Dart API:

class StoragePlugin {
  
  /// Читаем строку
  Future<String> getString(String key) async {}
  
  /// Записываем строку
  Future<void> setString(String key, String value) async {}
}

После того, как у вас будет Dart API, переходите к общему API, тогда и увидите, какие ваши вызовы API должны быть адаптированы к вызовам API библиотеки конкретной платформы:

class StoragePlugin {
  
  Future<String> getString(String key) async {
    if (Platform.isIos) {
      return await callMethodChannel('fetchValue', {'id': base64encode(key)});
    } else if (Platform.isAndroid) {
      return await callMethodChannel('fetchValue', {'id': key});
    }
  }
  
  Future<void> setString(String key, String value) async {
    if (Platform.isIos) {
      await callMethodChannel('setValue', {'id': base64encode(key), 'value': value});
    } else if (Platform.isAndroid) {
      await callMethodChannel('setValue', {'id': key, 'value': value});
    }
  }
}

Если вы хотите реализовать какую-то функциональность, которая не поддерживается какой-то платформой, совершенно нормально что этот API будет нерабочим в ней.

Вы должны следить за тем, чтобы приложение не падало в этом случае и всё было тщательно задокументировано. Также вы должны запросить отсутствующую функциональность с этой платформы, чтобы ваш плагин стал завершённым.

Избегайте использования специфичных для платформы API-методов

Flutter не привязан к какой-либо платформе, поэтому и в приложениях на Flutter не должно быть платформенных методов. Например, если у вас такой код:

if (Platform.isIos) {
  myPlugin.doIOSThing();
} else if (Platform.isAndroid) {
  myPlugin.doAndroidThing();
}

то переместите в плагин всю заботу о платформах и пишите так:

myPlugin.doThing();

Избегайте поддержки только одной платформы

Возможно, вы хотите начать с малого и написать плагин только под Android. Но к несчастью, после публикации его в каталоге, пользователи неподдерживаемых платформ будут сильно разочарованы в нём.

Однако, есть и примеры обратного: Android Intent. Intent-ы существуют только в Android, поэтому существование такого плагина совершенно нормально.

Сделайте плагин удобным для чтения и тестирования

Как правило, ваш плагин должен быть написан в основном на Dart.

  • Нативный слой как правило сложен для тестирования, т.к написан с применением библиотек, не работающих в эмуляторах.
  • Flutter написан большей частью на Dart. Приложения Flutter написаны на чистом Dart. При трассировке кода легче всего будет, если большая часть логики описана на Dart.

Основная причина использования нативного слоя — когда реализация под какую-то платформу требует сохранения состояния или сделать какую-то низкоуровневую обработку. Как пример — биометрическая аутентификация, которая имеет сложный жизненный цикл под Android и требует реализацию нативными средствами.

При написании расширяемого нативного кода, разбивайте функциональность на разные классы, которые можно будет легко покрыть юнит-тестами.

В идеале, нативный слой будет просто ожидать вызовов метода, пересылая их библиотеке, возвращая затем результат в Dart. Если же требуется выполнить какую-либо дополнительную работу, стремитесь описать её на стороне Dart. В конце концов, вы напишете меньше кода, так как логика, вероятно, будет одинакова на всех платформах.

Избегайте писать статические (или глобальные) методы

Вместо такого подхода:

Future<User> authenticate() async {
  // код...
}

используйте:

class AuthenticatePlugin {
  Future<User> authenticate() async {
    // код...
  }
}

это сделает плагин более удобным для тестирования на эмуляторах.

Почитайте также Stateful-виджеты должны исчезнуть: Stateful Builder

Плагины это один из лучших способов расширить функциональность  Flutter. Поделитесь в комментариях своим опытом создания плагинов!

Написано по материалам статьи «Writing a good Flutter plugin»

Подписывайтесь на новости Flutter! https://t.me/flutterdaily

Создание хорошего плагина Flutter

Разработчик: java, kotlin, c#, javascript, dart, 1C, python, php.

Пишите: @ighar. Buy me a coffee, please :).

Flutter и перспектива

Создание первого приложения Flutter

Немного поиграем с 3D и виджетом Transform

В этой статье мы создадим небольшое приложение, демонстрирующее работу виджета Transform по отрисовке 3D перспективы. Мы увидим, как легко это сделать с Flutter, при том, что это сделает не каждый на нативных виджетах.

Ниже скрин приложения в работе (маленький кружок показывает позицию пальца пользователя на экране):

Flutter и перспектива

Приступим

Создайте проект командой flutter create или же средствами вашей IDE. Добавьте два виджета в наше приложение:  Transform и GestureDetector.

Первый:

// v1: move default app to separate function with fixed name
// Add transform widget, rotate and perspective
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Perspective',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key); // changed

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  Offset _offset = Offset(0.4, 0.7); // new

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Transform(  // Transform widget
      transform: Matrix4.identity()
        ..setEntry(3, 2, 0.001) // perspective
        ..rotateX(_offset.dy)
        ..rotateY(_offset.dx),
      alignment: FractionalOffset.center,
      child: _defaultApp(context),
    );
  }

  _defaultApp(BuildContext context) {  // new
    return Scaffold(
      appBar: AppBar(
        title: Text('The Matrix 3D'), // changed
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

}

Вот что должно получиться при запуске:

Flutter и перспектива

Здесь мы немного почистили типовой код, убрав ненужные комментарии и уже ненужное в Dart 2 ключевое слово new. Мы переместили часть представления (метод build из _MyHomePageState) в отдельный метод _defaultApp (строки 49–74). И для простоты  присвоили название прямо в AppBar (строка 52), вместо передачи его параметром в MyHomePage.

Виджет Transform

Добавленный виджет Transform описан в строках 39–46. Посмотрим на него внимательнее. Transform принимает 3D матрицу перехода, т.е. Matrix4. Почему 3D матрица? Разве Flutter не для двумерной графики?

Практически все современные смартфоны, за исключением самых слабых, имеют невероятно быстрый GPU, оптимизированный для 3D графики. Следовательно, практически всё, что вы видите на смартфоне, это обработка в 3D, даже изначально двумерные объекты. Немного странно, да?

Изменяя параметры матрицы, мы манипулируем отображением представления (даже в 3D!). Типичные трансформации включают перемещение, поворот, изменение масштаба и перспективы. Создаём экземпляр матрицы методом identity (строка 40), затем трансформируем его. Трансформации не коммутативны, поэтому нам необходимо определять их в правильном порядке. Законченная матрица будет отправлена GPU для трансформации затронутых ею объектов.

Трансформация это довольно непростая тема, но если вы хотите узнать больше про неё, погуглите материалы по 3D графике, а также  по матрицам перехода и однородным координатам.

Перспектива

Первая трансформация (строка 41) затрагивает изменение перспективы. Перспектива делает удалённые объекты меньше. Установим настройки матрицы так: ряд 3, колонка 2, увеличение 0.001.

Что же за число 0.001? Путём увеличения и уменьшения этого значения, поиграйте с перспективой — это будет похоже на  увеличение/уменьшение картинки в объективе камеры. Чем больше это число, тем более выражена перспектива — как будто вы стоите ближе к объекту.

Flutter предоставляет метод makePerspectiveMatrix, но в нём куча параметров — для настройки соотношения сторон, поля зрения и ближних и дальних плоскостей — а это пока много больше, чем нам необходимо, поэтому мы пока выставим параметры матрицы напрямую.

Повороты

Затем в строках 42 и 43 мы задаём два поворота на основе значения переменной _offset (в стр. 29; а ниже мы используем эту же переменную для отслеживания положения пальца пользователя). И что удивительно, поворот по оси X зависит от смещения Y, а поворот по оси Y — от смещения X. Почему так?

Flutter и перспектива

Рассмотрим это изображение, на котором зелеными стрелками указаны оси X и Y. Эти оси начинаются в верхнем левом углу дисплея (именно поэтому ось Y указывает вниз), но наша программа устанавливает начало координат (в строке 44) из центра дисплея.

Поворот задаётся по отношению к оси, метод rotateX определяет поворот вокрут оси X, которая отклоняется по направлению оси Y (вверх-вниз). Точно так же, rotateY отклоняется в направлении X (лево-право) (вокруг оси Y). Поэтому rotateX контролируется с _offset.dy и rotateY с _offset.dx.

Также здесь есть ось Z, которая идёт перпендикулярно экрану, таким образом значение Z положительно при удалении от зрителя. И метод rotateZ поворачивает объект в плоскости дисплея.

Взаимодействие

Ну и наконец мы должны добавить виджет GestureDetector:

// v2: add Gesture detector
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Perspective',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key); // changed

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  Offset _offset = Offset.zero; // changed

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Transform(  // Transform widget
      transform: Matrix4.identity()
        ..setEntry(3, 2, 0.001) // perspective
        ..rotateX(0.01 * _offset.dy) // changed
        ..rotateY(-0.01 * _offset.dx), // changed
      alignment: FractionalOffset.center,
      child: GestureDetector( // new
        onPanUpdate: (details) => setState(() => _offset += details.delta),
        onDoubleTap: () => setState(() => _offset = Offset.zero),
        child: _defaultApp(context),
      )
    );
  }

  _defaultApp(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('The Matrix 3D'), // changed
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

}

В строке 28 _offset инициализируется в значении нуля. Строки 44–48 определяют GestureDetector, отслеживающий два вида жестов: перемещение (напр., движения пальца по экрану) и двойной тап. В строке 45 увеличиваем количество движений (в пикселях) в переменной _offset. В строке 46 обнуляем _offset при двойном тапе пользователя по экрану. И для обоих жестов метод setState() перерисовывает экран.

В строках 41 и 42 смещение (в пикселях) умножается на 0.01 для удобства расчета вращения (оно указывается в радианах, где полное вращение это 2π , т.е. приблизительно 6.28  — таким образом для полного вращения потребуется перемещение на 628 пикселей).

Готово!

Конечно, ни один из этих объектов не является по-настоящему трёхмерным. Все они двумерные (плоские) (даже искусственные тени от AppBar и FAB). Однако, это не мешает нам крутить их в трёхмерном пространстве как угодно.

Ещё один пример

Flutter и перспектива

Итак, сделаем красивый псевдотрёхмерный эффект, наподобие такого:

Flutter и перспектива

Как это работает

На первый взгляд, идея проста: у нас есть набор элементов, каждый из которых разбит на половинки, может вращаться вокруг оси X, открывая следующий за ним элемент.

Как это воплотить в коде? Разобьём эту задачу на две:

  • Разрезаем элемент на две половины
  • Вращаем одну половинку вокруг оси X

Почитав документацию Flutter, я нашёл два виджета, подходящих для этой задачи: ClipRect и Transform.

Реализация

  • Разрезаем элемент на две половины:

Виджет ClipRect имеет параметр clipper для установки параметров изображения, но также есть другой способ использования ClipRect, в комбинации с Align:

class FlipWidget extends StatelessWidget {
  Widget child;

  FlipWidget({Key key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ClipRect(
            child: Align(
          alignment: Alignment.topCenter,
          heightFactor: 0.5,
          child: child,
        )),
        Padding(
          padding: EdgeInsets.only(top: 2.0),
        ),
        ClipRect(
            child: Align(
          alignment: Alignment.bottomCenter,
          heightFactor: 0.5,
          child: child,
        )),
      ],
    );
  }
}

Пробуем:

Flutter и перспектива

Готово. К этому добавим, что child позволяет нам свободно управлять содержимым анимации (текстом, картинкой, да чем угодно).

  • Вращаем одну половинку вокруг оси X:

Виджет Transform имеет параметр transform типа Matrix4 для выбора вида применяемой трансформации, также Matrix4 имеет конструктор rotationX(), похоже, что мы можем его использовать для верхней половинки панели:

@override
Widget build(BuildContext context) {
   return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Transform(
          transform: Matrix4.rotationX(pi / 4),
          alignment: Alignment.bottomCenter,
          child: ClipRect(
              child: Align(
            alignment: Alignment.topCenter,
            heightFactor: 0.5,
            child: child,
          )),
        ),
        ...
      ],
    );
}

Пробуем:

Flutter и перспектива

Правда, это похоже на эффект масштабирования?

Изменим передаваемые значения в Matrix4 должно всё исправить:

...
Transform(
  transform: Matrix4.identity()..setEntry(3, 2, 0.006)..rotateX(pi / 4),
  alignment: Alignment.bottomCenter,
  child: ClipRect(
      child: Align(
    alignment: Alignment.topCenter,
    heightFactor: 0.5,
    child: child,
  )),
),
...

Пробуем:

Flutter и перспектива

Осталось добавить анимацию для нашего виджета. Здесь немного сложнее. Фактически, каждая панель содержит контент с обеих сторон (спереди и сзади), но в один момент времени видна только одна сторона. Думаю, что нам нужно создать анимацию, в которой панели поворачиваются вверх — она будет состоять из двух этапов (последовательно), первый — перевернуть нижнюю половину вверх и показать нижнюю половину следующей панели, в то же время скрыть нижнюю половину текущей панели, а второй этап — перевернуть верхнюю половину в том же направлении и открыть верхнюю половину следующего, тут же спрятав верхнюю половину текущей:

Flutter и перспектива

Полный код можно скачать здесь.

Вот что получим в итоге:

Flutter и перспектива

Написано по материалам статей «Perspective on Flutter» и «Make 3D flip animation in Flutter»

Если вы только начинаете разрабатывать на Flutter, обратите внимание на статью Создание первого приложения Flutter и продолжение.

Подписывайтесь на новости Flutter! https://t.me/flutterdaily

Flutter и перспектива

Разработчик: java, kotlin, c#, javascript, dart, 1C, python, php.

Пишите: @ighar. Buy me a coffee, please :).

Сканер штрихкодов на Flutter

Создание первого приложения Flutter

Мне всегда хотелось попробовать сделать сканер штрихкодов под Android, но никогда не находилось достаточно мотивации для этого… Но не сейчас 🙂

Сканер штрихкодов на Flutter
Общий вид приложения

В поиске нужного пакета для Flutter я нашел barcode_scan

Начнём

Сканер штрихкодов на Flutter
Добавляем зависимости

Добавляем зависимость barcode_scan : “0.0.4”  в файл pubspec.yaml.

Если вы только начинаете разрабатывать на Flutter, обратите внимание на статью Создание первого приложения Flutter и продолжение.

Затем добавьте следующую строку в Android Manifest вашего приложения:

<activity android:name="com.apptreesoftware.barcodescan.BarcodeScannerActivity"/>
Сканер штрихкодов на Flutter
Измененный Android Manifest.xml

При клике на кнопку Capture Image, начнётся сканирование.

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

Сканер штрихкодов на Flutter
Ошибка в случае не предоставления доступа

Если разрешение получено, произойдёт считывание изображения со штрихкодом и на экран покажется сообщение с текстом кода:

Сканер штрихкодов на Flutter
Штрихкод отсканирован

Кусочек кода сканирования :

Сканер штрихкодов на Flutter
Сканирование кода

Вот и всё! Кратко о том же на видео:

Полный код программы можно скачать здесь https://github.com/AseemWangoo/flutter_programs/blob/master/barcode.dart

Как написать плагин для Flutter?

Перевод статьи Barcode Scanner in Flutter

Подписывайтесь на новости Flutter! https://t.me/flutterdaily

Сканер штрихкодов на Flutter

Разработчик: java, kotlin, c#, javascript, dart, 1C, python, php.

Пишите: @ighar. Buy me a coffee, please :).

Вызов Flutter: WhatsApp

Сегодня мы предпримем попытку воссоздать UI главного экрана приложения Whatsapp под Android с помощью Flutter.

Основное внимание будет уделено именно UI, а не реализации функционала обмена сообщениями.

Если вы только начинаете разрабатывать на Flutter, обратите внимание на статью Создание первого приложения Flutter и продолжение.

Приступим

Главный экран WhatsApp состоит из:

  1. AppBar с кнопками поиска и меню
  2. Четырёх вкладок внизу AppBar
  3. Вкладка камеры для создания фотографии
  4. Многофункциональной FloatingActionButton
  5. Вкладка “Chats” со списком всех бесед
  6. Вкладка “Status” для обзора всех статусов
  7. Вкладка “Calls” с историей звонков

Настройка проекта

Создайте проект Flutter  именем whatsapp_ui, удалите весь код кроме кода, отрисовывающего пустой экран с верхней панелью:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("WhatsApp"),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            
          ],
        ),
      ),
    );
  }
}

Панель AppBar

AppBar содержит наименование приложения и два действия: Поиск и меню.

Добавим этот код в AppBar,

appBar: new AppBar(
  title: new Text("WhatsApp", style: TextStyle(color: Colors.white, fontSize: 22.0, fontWeight: FontWeight.w600),),
  actions: <Widget>[
    Padding(
      padding: const EdgeInsets.only(right: 20.0),
      child: Icon(Icons.search),
    ),
    Padding(
      padding: const EdgeInsets.only(right: 16.0),
      child: Icon(Icons.more_vert),
    ),
  ],
  backgroundColor: whatsAppGreen,
),

И получим:

Вызов Flutter: WhatsApp

Вкладки / табы

Вкладки реализуются как расширение AppBar и Flutter позволяет легко создать их.

У AppBar есть поле “bottom”, в котором и будут наши вкладки:

bottom: TabBar(
  tabs: [
    Tab(icon: Icon(Icons.camera_alt),),
    Tab(child: Text("CHATS"),),
    Tab(child: Text("STATUS",)),
    Tab(child: Text("CALLS",)),
  ], indicatorColor: Colors.white,
),

Также нам понадобится TabController.

Создадим его:

TabController tabController;

@override
void initState() {
  // TODO: implement initState
  super.initState();

  tabController = TabController(vsync: this, length: 4);

}

Укажем контроллер  полю “controller” в TabBar

bottom: TabBar(
  tabs: [
    Tab(icon: Icon(Icons.camera_alt),),
    Tab(child: Text("CHATS"),),
    Tab(child: Text("STATUS",)),
    Tab(child: Text("CALLS",)),
  ], indicatorColor: Colors.white,
  controller: tabController,
),

И в TabBarView

body: TabBarView(
  controller: tabController,
  children: [
    Icon(Icons.camera_alt),
    Text("Chat Screen"),
    Text("Status Screen"),
    Text("Call Screen"),
  ],
),
Вызов Flutter: WhatsApp

Перед тем, как перейти на реализацию страниц, добавим страницы, которые будут привязаны к вкладкам. Переделаем существующий код “body” в Scaffold таким образом:

body: TabBarView(
  children: [
    Icon(Icons.camera_alt),
    Text("Chat Screen"),
    Text("Status Screen"),
    Text("Call Screen"),
  ],
),

Здесь в children перечислены страницы, соотвествующие вкладкам. И в данный момент страница представлена виджетом Text.

Floating Action Button

Действие Плавающей кнопки меняется в зависимости от того, с какой страницы вызвана.

Добавим FloatingActionButton в Scaffold.

floatingActionButton: FloatingActionButton(
  onPressed: () {
  },
  child: fabIcon,
  backgroundColor: whatsAppGreenLight,
),

Поле “fabIcon” хранит картинку, которая будет представлена пользователю в зависимости от выбранного экрана.

Для отслеживания смены вкладки, добавим listener в TabController.

tabController = TabController(vsync: this, length: 4)
  ..addListener(() {
    
  });

Теперь, когда контроллер вкладки может отслеживать её изменения, изменим картинку в FAB.

tabController = TabController(vsync: this, length: 4)
  ..addListener(() {
    setState(() {
      switch(tabController.index) {
        case 0:
          break;
        case 1:
          fabIcon = Icons.message;
          break;
        case 2:
          fabIcon = Icons.camera_enhance;
          break;
        case 3:
          fabIcon = Icons.call;
          break;
      }
    });
  });
Вызов Flutter: WhatsApp

Продолжим,

Экран чата

Экран чата (Chat Screen) включает список сообщений, которые необходимо вывести. Для создания списка сообщений используем ListView.builder().

Вот так будет выглядеть элемент списка чатов.

Вызов Flutter: WhatsApp

Этот виджет представляет собой строку с картинкой и ещё одну строку.

Внутри второй строки располагается колонка, включающая одну строку и текстовый виджет.

В строке указано название и дата сообщения.

Создадим модель сообщения чата (Chat Item Model) как класс для хранения деталей элемента списка.

class ChatItemModel {
  
  String name;
  String mostRecentMessage;
  String messageDate;
  
  ChatItemModel(this.name, this.mostRecentMessage, this.messageDate);
  
}

Для краткости я пропустил добавление картинки профиля

itemBuilder: (context, position) {
  ChatItemModel chatItem = ChatHelper.getChatItem(position);

  return Column(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: <Widget>[
            Icon(
              Icons.account_circle,
              size: 64.0,
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Row(
                      mainAxisAlignment:
                          MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Text(
                          chatItem.name,
                          style: TextStyle(
                              fontWeight: FontWeight.w500,
                              fontSize: 20.0),
                        ),
                        Text(
                          chatItem.messageDate,
                          style: TextStyle(color: Colors.black45),
                        ),
                      ],
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 2.0),
                      child: Text(
                        chatItem.mostRecentMessage,
                        style: TextStyle(
                            color: Colors.black45, fontSize: 16.0),
                      ),
                    )
                  ],
                ),
              ),
            )
          ],
        ),
      ),
      Divider(),
    ],
  );
},

Результат после создания списка:

Вызов Flutter: WhatsApp

Таким же образом мы можем создавать другие вкладки и на других экранах. Полный пример выложен на GitHub.

Ссылка на GitHub: https://github.com/deven98/WhatsappFlutter

Перевод статьи «Flutter Challenge: WhatsApp»

Подписывайтесь на новости Flutter! https://t.me/flutterdaily

Вызов Flutter: WhatsApp

Разработчик: java, kotlin, c#, javascript, dart, 1C, python, php.

Пишите: @ighar. Buy me a coffee, please :).

Добавляем поисковый фильтр в RecyclerView в Android

Добавляем поисковый фильтр в RecyclerView в Android

Сегодня мы разберём пример добавления поиска в RecyclerView. Это несложно и мы используем поисковый виджет из Toolbar для ввода поискового запроса. Для наглядности, я создам приложение, аналогичное адресной книге, в котором мы сможем искать нужный контакт по имени или номеру телефона.

1. Фильтр поиска RecyclerView – getFilter()

В Android есть класс Filterable для отбора данных по условию. Обычно для этого переопределяется метод getFilter() в классе адаптера, в котором по условию отфильтровываются только нужные данные из списка. Ниже приведён пример метода getFilter() для поиска контакта по имени или номеру телефона из списка контактов.

@Override
    public Filter getFilter() {
        return new Filter() {
            @Override
            protected FilterResults performFiltering(CharSequence charSequence) {
                String charString = charSequence.toString();
                if (charString.isEmpty()) {
                    contactListFiltered = contactList;
                } else {
                    List<Contact> filteredList = new ArrayList<>();
                    for (Contact row : contactList) {
 
                        // здесь мы отбираем нужные данные 
                        if (row.getName().toLowerCase().contains(charString.toLowerCase()) || row.getPhone().contains(charSequence)) {
                            filteredList.add(row);
                        }
                    }
 
                    contactListFiltered = filteredList;
                }
 
                FilterResults filterResults = new FilterResults();
                filterResults.values = contactListFiltered;
                return filterResults;
            }
 
            @Override
            protected void publishResults(CharSequence charSequence, FilterResults filterResults) {
                contactListFiltered = (ArrayList<Contact>) filterResults.values;
 
                // обновляем список отфильтрованных данных
                notifyDataSetChanged();
            }
        };
    }
2. JSON примера

Для этого примера я буду использовать json с адреса https://api.androidhive.info/json/contacts.json . Он содержит список контактов, каждый из которых содержит имя, номер телефона и изображение профиля.

[{
        "name": "Tom Hardy",
        "image": "https://api.androidhive.info/json/images/tom_hardy.jpg",
        "phone": "(541) 754-3010"
    },
    {
        "name": "Johnny Depp",
        "image": "https://api.androidhive.info/json/images/johnny.jpg",
        "phone": "(452) 839-1210"
    }
]
Создаём проект

1. Создайте новый проект в Android Studio (File ⇒ New Project) и выберите Basic Activity в списке шаблонов.

2. Откройте build.gradle из папки app и добавьте зависимости RecyclerView, Glide и Volley:

build.gradle
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    // ...
 
    // recycler view
    implementation 'com.android.support:recyclerview-v7:26.1.0'
 
    // библиотека для работы с изображениями glide
    implementation 'com.github.bumptech.glide:glide:4.3.1'
 
    // http библиотека volley 
    implementation 'com.android.volley:volley:1.0.0'
    implementation 'com.google.code.gson:gson:2.6.2'
 
}

3. Замените файлы ресурсов strings.xml, dimens.xml, colors.xml таким образом:

strings.xml

<resources>
    <string name="app_name">RecyclerView Search</string>
    <string name="action_settings">Settings</string>
    <string name="toolbar_title">Contacts</string>
    <string name="action_search">Search</string>
    <string name="search_hint">Type name…</string>
</resources>



dimens.xml

<resources>
    <dimen name="fab_margin">16dp</dimen>
    <dimen name="activity_margin">16dp</dimen>
    <dimen name="thumbnail">40dp</dimen>
    <dimen name="row_padding">10dp</dimen>
    <dimen name="contact_name">15dp</dimen>
    <dimen name="contact_number">12dp</dimen>
</resources>



colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#111</color>
    <color name="colorPrimaryDark">#FFF</color>
    <color name="colorAccent">#ea3732</color>
    <color name="contact_name">#333333</color>
    <color name="contact_number">#8c8c8c</color>
</resources>

4. Скачайте файл res.zip и добавьте изображения из него в папку res. В этих папках также присутствует иконка поиска в тулбар.

5. Создайте класс MyApplication.java, расширяющий класс Application:


package info.androidhive.recyclerviewsearch;
 
import android.app.Application;
import android.text.TextUtils;
 
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.toolbox.Volley;
 
public class MyApplication extends Application {
 
    public static final String TAG = MyApplication.class
            .getSimpleName();
 
    private RequestQueue mRequestQueue;
 
    private static MyApplication mInstance;
 
    @Override
    public void onCreate() {
        super.onCreate();
        mInstance = this;
    }
 
    public static synchronized MyApplication getInstance() {
        return mInstance;
    }
 
    public RequestQueue getRequestQueue() {
        if (mRequestQueue == null) {
            mRequestQueue = Volley.newRequestQueue(getApplicationContext());
        }
 
        return mRequestQueue;
    }
 
    public <T> void addToRequestQueue(Request<T> req, String tag) {
        // зададим tag по-умолчанию, если он пуст
        req.setTag(TextUtils.isEmpty(tag) ? TAG : tag);
        getRequestQueue().add(req);
    }
 
    public <T> void addToRequestQueue(Request<T> req) {
        req.setTag(TAG);
        getRequestQueue().add(req);
    }
 
    public void cancelPendingRequests(Object tag) {
        if (mRequestQueue != null) {
            mRequestQueue.cancelAll(tag);
        }
    }
}

6. Откройте файл AndroidManifest.xml и добавьте MyApplication в тег . Также добавьте разрешение INTERNET, т.к. нам необходимо будет делать запросы по http.



<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="info.androidhive.recyclerviewsearch">
 
    <uses-permission android:name="android.permission.INTERNET" />
 
    <application
        android:name=".MyApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar">
 
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

7. Для разбора json нам понадобится класс POJO для сериализации. Создайте класс Contact.java, добавьте в него поля «имя» (name), «картинка» (image) и «номер телефона» (phone).

package info.androidhive.recyclerviewsearch;
 
public class Contact {
    String name;
    String image;
    String phone;
 
    public Contact() {
    }
 
    public String getName() {
        return name;
    }
 
    public String getImage() {
        return image;
    }
 
    public String getPhone() {
        return phone;
    }
}

8. Создайте класс MyDividerItemDecoration.java. В нём мы добавим отступ слева к линии разделения элементов списка.

package info.androidhive.recyclerviewsearch;
 
import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.PorterDuff;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.TypedValue;
import android.view.View;
 
/**
 * Created by ravi on 17/11/17.
 */
 
public class MyDividerItemDecoration  extends RecyclerView.ItemDecoration {
 
    private static final int[] ATTRS = new int[]{
            android.R.attr.listDivider
    };
 
    public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;
 
    public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;
 
    private Drawable mDivider;
    private int mOrientation;
    private Context context;
    private int margin;
 
    public MyDividerItemDecoration(Context context, int orientation, int margin) {
        this.context = context;
        this.margin = margin;
        final TypedArray a = context.obtainStyledAttributes(ATTRS);
        mDivider = a.getDrawable(0);
        a.recycle();
        setOrientation(orientation);
    }
 
    public void setOrientation(int orientation) {
        if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {
            throw new IllegalArgumentException("invalid orientation");
        }
        mOrientation = orientation;
    }
 
    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        if (mOrientation == VERTICAL_LIST) {
            drawVertical(c, parent);
        } else {
            drawHorizontal(c, parent);
        }
    }
 
    public void drawVertical(Canvas c, RecyclerView parent) {
        final int left = parent.getPaddingLeft();
        final int right = parent.getWidth() - parent.getPaddingRight();
 
        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            final int top = child.getBottom() + params.bottomMargin;
            final int bottom = top + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left + dpToPx(margin), top, right, bottom);
            mDivider.draw©;
        }
    }
 
    public void drawHorizontal(Canvas c, RecyclerView parent) {
        final int top = parent.getPaddingTop();
        final int bottom = parent.getHeight() - parent.getPaddingBottom();
 
        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            final int left = child.getRight() + params.rightMargin;
            final int right = left + mDivider.getIntrinsicHeight();
            mDivider.setBounds(left, top + dpToPx(margin), right, bottom - dpToPx(margin));
            mDivider.draw©;
        }
    }
 
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        if (mOrientation == VERTICAL_LIST) {
            outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
        } else {
            outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
        }
    }
 
    private int dpToPx(int dp) {
        Resources r = context.getResources();
        return Math.round(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, r.getDisplayMetrics()));
    }
}
Создаём Adapter с фильтром

Итак, ресурсы готовы, приступим к написанию класса адаптера. Это главный компонент нашей статьи, будьте внимательны.

9. Создайте представление (layout) user_row_item.xml с описанной ниже разметкой. Это представление отображает один контакт списка. В нём два TextView для отображения имени и номера телефона и ImageView для вывода картинки контакта.

user_row_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:paddingBottom="@dimen/row_padding"
    android:paddingLeft="@dimen/activity_margin"
    android:paddingRight="@dimen/activity_margin"
    android:paddingTop="@dimen/row_padding">
 
    <ImageView
        android:id="@+id/thumbnail"
        android:layout_width="@dimen/thumbnail"
        android:layout_height="@dimen/thumbnail"
        android:layout_centerVertical="true"
        android:layout_marginRight="@dimen/row_padding" />
 
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/thumbnail"
        android:fontFamily="sans-serif-medium"
        android:textColor="@color/contact_name"
        android:textSize="@dimen/contact_name" />
 
    <TextView
        android:id="@+id/phone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_toRightOf="@id/thumbnail"
        android:textColor="@color/contact_number"
        android:textSize="@dimen/contact_number" />
 
</RelativeLayout>

10. Создайте класс ContactsAdapter.java, реализующий Filterable, в котором вас попросят переопределить метод getFilter().

При этом в методе getFilter() строка поиска будет передана методу performFiltering(). Интерфейс ContactsAdapterListener содержит вызов метода onContactSelected() при выборе контакта из списка.

package info.androidhive.recyclerviewsearch;
 
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Filter;
import android.widget.Filterable;
import android.widget.ImageView;
import android.widget.TextView;
 
import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestOptions;
 
import java.util.ArrayList;
import java.util.List;
 
public class ContactsAdapter extends RecyclerView.Adapter<ContactsAdapter.MyViewHolder>
        implements Filterable {
    private Context context;
    private List<Contact> contactList;
    private List<Contact> contactListFiltered;
    private ContactsAdapterListener listener;
 
    public class MyViewHolder extends RecyclerView.ViewHolder {
        public TextView name, phone;
        public ImageView thumbnail;
 
        public MyViewHolder(View view) {
            super(view);
            name = view.findViewById(R.id.name);
            phone = view.findViewById(R.id.phone);
            thumbnail = view.findViewById(R.id.thumbnail);
 
            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    // отправим выбранный контакт в callback
                    listener.onContactSelected(contactListFiltered.get(getAdapterPosition()));
                }
            });
        }
    }
 
 
    public ContactsAdapter(Context context, List<Contact> contactList, ContactsAdapterListener listener) {
        this.context = context;
        this.listener = listener;
        this.contactList = contactList;
        this.contactListFiltered = contactList;
    }
 
    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.user_row_item, parent, false);
 
        return new MyViewHolder(itemView);
    }
 
    @Override
    public void onBindViewHolder(MyViewHolder holder, final int position) {
        final Contact contact = contactListFiltered.get(position);
        holder.name.setText(contact.getName());
        holder.phone.setText(contact.getPhone());
 
        Glide.with(context)
                .load(contact.getImage())
                .apply(RequestOptions.circleCropTransform())
                .into(holder.thumbnail);
    }
 
    @Override
    public int getItemCount() {
        return contactListFiltered.size();
    }
 
    @Override
    public Filter getFilter() {
        return new Filter() {
            @Override
            protected FilterResults performFiltering(CharSequence charSequence) {
                String charString = charSequence.toString();
                if (charString.isEmpty()) {
                    contactListFiltered = contactList;
                } else {
                    List<Contact> filteredList = new ArrayList<>();
                    for (Contact row : contactList) {
 
                        if (row.getName().toLowerCase().contains(charString.toLowerCase()) || row.getPhone().contains(charSequence)) {
                            filteredList.add(row);
                        }
                    }
 
                    contactListFiltered = filteredList;
                }
 
                FilterResults filterResults = new FilterResults();
                filterResults.values = contactListFiltered;
                return filterResults;
            }
 
            @Override
            protected void publishResults(CharSequence charSequence, FilterResults filterResults) {
                contactListFiltered = (ArrayList<Contact>) filterResults.values;
                notifyDataSetChanged();
            }
        };
    }
 
    public interface ContactsAdapterListener {
        void onContactSelected(Contact contact);
    }
}
5. Добавляем виджет поиска

Нам осталось добавить SearchView в Toolbar, отрисовать RecyclerView, прочитав json и передать поисковый запрос в adapter.

11. Откройте / создайте файл menu_main.xml в папке res ⇒ menus и добавьте в него виджет SearchView, также сделаем его видимым всегда.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="info.androidhive.recyclerviewsearch.MainActivity">
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search_black_24dp"
        android:orderInCategory="100"
        android:title="@string/action_search"
        app:showAsAction="always"
        app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>

12. В папке res ⇒ xml создайте xml файл searchable.xml (если папки xml нет, создайте её)

<?xml version="1.0" encoding="utf-8"?>
<searchable xmlns:android="http://schemas.android.com/apk/res/android"
    android:hint="@string/search_hint"
    android:label="@string/app_name" />

13. Откройте файл AndroidManifest.xml и настройте поиск:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="info.androidhive.recyclerviewsearch">
 
    <uses-permission android:name="android.permission.INTERNET" />
 
    <application ...>
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar">
 
            <meta-data
                android:name="android.app.searchable"
                android:resource="@xml/searchable" />
 
            <intent-filter>
                <action android:name="android.intent.action.SEARCH" />
            </intent-filter>
 
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>

14. Откройте файлы главной activity activity_main.xml и content_main.xml и добавьте элемент RecyclerView.


activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="info.androidhive.recyclerviewsearch.MainActivity">
 
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">
 
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@android:color/white"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
 
    </android.support.design.widget.AppBarLayout>
 
    <include layout="@layout/content_main" />
 
</android.support.design.widget.CoordinatorLayout>




content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="info.androidhive.recyclerviewsearch.MainActivity"
    tools:showIn="@layout/activity_main">
 
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="vertical" />
 
</RelativeLayout>

15. Откройте файл MainActivity.java и добавьте нижеописанный код.

> В методе fetchContacts() запрос Volley получает json. Полученный json сериализуется с помощью Gson и все контакты из него добавляются в список. Вызов mAdapter.notifyDataSetChanged() перерисовывает RecyclerView.

> В onCreateOptionsMenu() создаётся меню и выводится SearchView.

> searchView.setOnQueryTextListener() ожидает ввод текста в поле поиска от пользователя. Введённый запрос затем передаётся адаптеру через mAdapter.getFilter().filter(query), затем RecyclerView обновляется, показывая только отфильтрованные данные.

> onContactSelected() вызывается при выборе контакта в списке.

MainActivity.java

package info.androidhive.recyclerviewsearch;
 
import android.app.SearchManager;
import android.content.Context;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.SearchView;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
 
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.JsonArrayRequest;
import com.google.gson.Gson;
import com.google.gson.reflect.TypeToken;
 
import org.json.JSONArray;
 
import java.util.ArrayList;
import java.util.List;
 
public class MainActivity extends AppCompatActivity implements ContactsAdapter.ContactsAdapterListener {
    private static final String TAG = MainActivity.class.getSimpleName();
    private RecyclerView recyclerView;
    private List<Contact> contactList;
    private ContactsAdapter mAdapter;
    private SearchView searchView;
 
    // url для получения контактов в json
    private static final String URL = "https://api.androidhive.info/json/contacts.json";
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
 
        // делаем красивым toolbar 
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setTitle(R.string.toolbar_title);
 
        recyclerView = findViewById(R.id.recycler_view);
        contactList = new ArrayList<>();
        mAdapter = new ContactsAdapter(this, contactList, this);
 
        // белый фон строки состояния
        whiteNotificationBar(recyclerView);
 
        RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(getApplicationContext());
        recyclerView.setLayoutManager(mLayoutManager);
        recyclerView.setItemAnimator(new DefaultItemAnimator());
        recyclerView.addItemDecoration(new MyDividerItemDecoration(this, DividerItemDecoration.VERTICAL, 36));
        recyclerView.setAdapter(mAdapter);
 
        fetchContacts();
    }
 
    /**
     * получает json посредством http-запроса
     */
    private void fetchContacts() {
        JsonArrayRequest request = new JsonArrayRequest(URL,
                new Response.Listener<JSONArray>() {
                    @Override
                    public void onResponse(JSONArray response) {
                        if (response == null) {
                            Toast.makeText(getApplicationContext(), "Couldn't fetch the contacts! Pleas try again.", Toast.LENGTH_LONG).show();
                            return;
                        }
 
                        List<Contact> items = new Gson().fromJson(response.toString(), new TypeToken<List<Contact>>() {
                        }.getType());
 
                        // добавляем контакты в список
                        contactList.clear();
                        contactList.addAll(items);
 
                        // обновляем recycler view
                        mAdapter.notifyDataSetChanged();
                    }
                }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                // ошибка в получении json
                Log.e(TAG, "Error: " + error.getMessage());
                Toast.makeText(getApplicationContext(), "Error: " + error.getMessage(), Toast.LENGTH_SHORT).show();
            }
        });
 
        MyApplication.getInstance().addToRequestQueue(request);
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
 
        // Ассоциируем настройку поиска с SearchView
        SearchManager searchManager = (SearchManager) getSystemService(Context.SEARCH_SERVICE);
        searchView = (SearchView) menu.findItem(R.id.action_search)
                .getActionView();
        searchView.setSearchableInfo(searchManager
                .getSearchableInfo(getComponentName()));
        searchView.setMaxWidth(Integer.MAX_VALUE);
 
        // отслеживаем изменения текста в поисковом поле
        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                // фильтруем recycler view при окончании ввода
                mAdapter.getFilter().filter(query);
                return false;
            }
 
            @Override
            public boolean onQueryTextChange(String query) {
                // фильтруем recycler view при изменении текста
                mAdapter.getFilter().filter(query);
                return false;
            }
        });
        return true;
    }
 
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Обрабатываем меню здесь. Нажатия на Home/Up
        // будут автоматически обработаны так, как указано в
        // родительской activity в AndroidManifest.xml.
        int id = item.getItemId();
 
        //noinspection SimplifiableIfStatement
        if (id == R.id.action_search) {
            return true;
        }
 
        return super.onOptionsItemSelected(item);
    }
 
    @Override
    public void onBackPressed() {
        // при нажатии кнопки "назад" закрываем поиск
        if (!searchView.isIconified()) {
            searchView.setIconified(true);
            return;
        }
        super.onBackPressed();
    }
 
    private void whiteNotificationBar(View view) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            int flags = view.getSystemUiVisibility();
            flags |= View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR;
            view.setSystemUiVisibility(flags);
            getWindow().setStatusBarColor(Color.WHITE);
        }
    }
 
    @Override
    public void onContactSelected(Contact contact) {
        Toast.makeText(getApplicationContext(), "Selected: " + contact.getName() + ", " + contact.getPhone(), Toast.LENGTH_LONG).show();
    }
}
Добавляем поисковый фильтр в RecyclerView в Android

Надеюсь, я понятно описал как фильтровать данные RecyclerView. Если у вас, всё ещё есть вопросы, пишите их в комментариях.

Happy Coding!

Источник: «Android RecyclerView adding Search Filter»

Добавляем поисковый фильтр в RecyclerView в Android

Разработчик: java, kotlin, c#, javascript, dart, 1C, python, php.

Пишите: @ighar. Buy me a coffee, please :).