What is editor in android

Navigation Editor — новый инструмент в Android Studio

В Android Studio появился интересный инструмент для быстрого прототипирования экранов активностей. Как говорят авторы на своей страничке — это пока только предварительная проба пера и данный инструмент ещё будет дорабатываться. Редактор может оказаться полезным как дизайнерам, так и начинающим разработчикам.
Я решил немного поиграться с редактором.

Итак, вы запустили Android Studio и создали простой пример с одной кнопкой. Идём в меню и выбираем Tools | Android | Navigation Editor. На экране появится новая вкладка файла main.nvg.xml и сам редактор, на котором можно увидеть форму своей активности с кнопкой и со стрелочкой, которая соединяется с пунктом меню Settings. Пока ничего интересного.
Дальше начинается магия. Щелкаем правой кнопкой мыши в любом месте редактора и вызываем контекстное меню New Activity. .

Появляется стандартный мастер по созданию новой активности. Заполняем поля и двигаемся дальше.

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

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

Однако продолжим. Нам захотелось сделать переход со второй активности на третью. Опять вызываем контекстное меню и создаём новый экран. Но на этот раз между второй и третьей активностью не будет связи.

Не беда. Делаем двойной щелчок по второму экрану и оказываемся в редакторе разметки. Добавляем кнопку и возвращаемся обратно в Navigation Editor. Изменения автоматически применятся и мы увидим добавленную кнопку. Теперь выбираем эту кнопку, зажимаем клавишу Shift и тянем кнопку к третьей активности. Когда вы отпустите мышку, то появится стрелка, идущая от кнопки к третьему экрану.

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

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

Должен признаться, за год я так и не привык к студии и по-прежнему предпочитаю старый добрый Eclipse. Но Гугл делает всё возможное, чтобы заставить перейти разработчиков на новую среду разработки. Я пока записываю для себя новинки на отдельную страничку, но никак не решусь полностью перейти в стан поклонников Android Studio/IntelliJ

Источник

Редактор кода на Android: часть 1

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

Вступление

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

Я решил разделить статью на 2 части, в первой мы поэтапно напишем оптимизированную подсветку синтаксиса и нумерацию строк, а во второй добавим автодополнение кода и подсветку ошибок.

Для начала составим список того, что наш редактор должен уметь:

• Подсвечивать синтаксис
• Отображать нумерацию строк
• Показывать варианты автодополнения (расскажу во второй части)
• Подсвечивать синтаксические ошибки (расскажу во второй части)

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

MVP — простой текстовый редактор

На данном этапе проблем возникнуть не должно — растягиваем EditText на весь экран, указываем gravity , прозрачный background чтобы убрать полосу снизу, размер шрифта, цвет текста и т.д. Я люблю начинать с визуальной части, так мне становится проще понять чего не хватает в приложении, и над какими деталями ещё стоит поработать.

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

Подсветка синтаксиса

Как только мы ознакомились с требованиями к редактору, пора переходить к самому интересному.

Очевидно, чтобы контролировать весь процесс — реагировать на ввод, отрисовывать номера строк, нам придется писать CustomView наследуясь от EditText . Накидываем TextWatcher чтобы слушать изменения в тексте и переопределяем метод afterTextChanged , в котором и будем вызывать метод отвечающий за подсветку:

Q: Почему мы используем TextWatcher как переменную, ведь можно реализовать интерфейс прямо в классе?
A: Так уж получилось, что у TextWatcher есть метод который конфликтует c уже существующим методом у TextView :

Оба этих метода имеют одинаковое название и одинаковые аргументы, да и смысл вроде у них тот же, но проблема в том что метод onTextChanged у TextView вызовется вместе с onTextChanged у TextWatcher . Если проставить логи в тело метода, то увидим что onTextChanged вызовется дважды:

Это очень критично если мы планируем добавлять функционал Undo/Redo. Также нам может понадобится момент, в котором не будут работать слушатели, в котором мы сможем очищать стэк с изменениями текста. Мы ведь не хотим, чтобы после открытия нового файла можно было нажать Undo и получить совершенно другой текст. Хоть об Undo/Redo в этой статье говориться не будет, важно учитывать этот момент.

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

Но вернёмся к подсветке.

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

Сейчас нам важно знать только две вещи:

1. Pattern определяет что конкретно нам нужно найти в тексте
2. Matcher будет пробегать по всему тексту в попытках найти то, что мы указали в Pattern

Может не совсем корректно описал, но принцип работы такой.

Т.к я пишу редактор для JavaScript, вот небольшой паттерн с ключевыми словами языка:

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

Далее с помощью Matcher мы пройдёмся по всему тексту и установим спаны:

Поясню: мы получаем объект Matcher у Pattern, и указываем ему область для поиска в символах (Соответственно с 0 по text.length это весь текст). Далее вызов matcher.find() вернёт true если в тексте было найдено совпадение, а с помощью вызовов matcher.start() и matcher.end() мы получим позиции начала и конца совпадения в тексте. Зная эти данные, мы можем использовать метод setSpan для раскраски определённых участков текста.

Существует много видов спанов, но для перекраски текста обычно используется ForegroundColorSpan .

Итак, запускаем!

Дело в том что метод setSpan работает медленно, сильно нагружая UI Thread, а учитывая что метод afterTextChanged вызывается после каждого введенного символа, писать код становится одним мучением.

Поиск решения

Первое что приходит в голову — вынести тяжелую операцию в фоновый поток. Но тяжелая операция тут это setSpan по всему тексту, а не регулярки. (Думаю, можно не объяснять почему нельзя вызывать setSpan из фонового потока).

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

Точно! Так и сделаем! Вот только… как?

Оптимизация

Хоть я и упомянул что нас заботит только производительность метода setSpan , всё же рекомендую выносить работу RegEx в фоновой поток чтобы добиться максимальной плавности.

Нам нужен класс, который будет в фоне обрабатывать весь текст и возвращать список спанов.
Конкретной реализации приводить не буду, но если кому интересно то я использую AsyncTask работающий на ThreadPoolExecutor . (Да-да, AsyncTask в 2020)

Нам главное, чтобы выполнялась такая логика:

1. В beforeTextChanged останавливаем Task который парсит текст
2. В afterTextChanged запускаем Task который парсит текст
3. По окончанию своей работы, Task должен вернуть список спанов в TextProcessor , который в свою очередь подсветит только видимую часть

И да, спаны тоже будем писать свои собственные:

Таким образом, код редактора превращается в нечто подобное:

Т.к конкретной реализации обработки в фоне я не показал, представим что мы написали некий JavaScriptStyler , который в фоне будет делать всё тоже самое что мы делали до этого в UI Thread — пробегать по всему тексту в поисках совпадений и заполнять список спанов, а в конце своей работы вернёт результат в setSpansCallback . В этот момент запустится метод updateSyntaxHighlighting , который пройдётся по списку спанов и отобразит только те, что видны в данный момент на экране.

Как понять, какой текст попадает в видимую область?

Буду ссылаться на эту статью, там автор предлагает использовать примерно такой способ:

И он работает! Теперь вынесем topVisibleLine и bottomVisibleLine в отдельные методы и добавим пару дополнительных проверок, на случай если что-то пойдёт не так:

Последнее что остаётся сделать — пройтись по полученному списку спанов и раскрасить текст:

Не пугайтесь страшного if ‘а, он всего лишь проверяет попадает ли спан из списка в видимую область.

Ну что, работает?

Работает, вот только при редактировании текста спаны не обновляются, исправить ситуацию можно очистив текст от всех спанов перед наложением новых:

Ещё один косяк — после закрытия клавиатуры кусок текста остаётся неподсвеченным, исправляем:

Главное не забыть указать adjustResize в манифесте.

Скроллинг

Говоря про скроллинг снова буду ссылаться на эту статью. Автор предлагает ждать 500 мс после окончания скроллинга, что противоречит моему чувству прекрасного. Я не хочу дожидаться пока прогрузится подсветка, я хочу видеть результат моментально.

Так же автор приводит аргумент что запускать парсер после каждого «проскроленного» пикселя затратно, и я полностью с этим согласен (вообще рекомендую полностью ознакомится с его статьей, она небольшая, но там много интересного). Но дело в том, что у нас уже есть готовый список спанов, и нам не нужно запускать парсер.

Достаточно вызывать метод отвечающий за обновление подсветки:

Нумерация строк

Если мы добавим в разметку ещё один TextView то будет проблематично их между собой связать (например, синхронно обновлять размер текста), да и если у нас большой файл то придется полностью обновлять текст с номерами после каждой введенной буквы, что не очень круто. Поэтому будем использовать стандартные средства любой CustomView — рисование на Canvas в onDraw , это и быстро, и не сложно.

Для начала определим что будем рисовать:

• Номера строк
• Вертикальную линию, отделяющую поле ввода от номеров строк

Предварительно необходимо вычислить и установить padding слева от редактора, чтобы не было конфликтов с напечатанным текстом.

Для этого напишем функцию, которая будет обновлять отступ перед отрисовкой:

Для начала мы узнаем кол-во строк в EditText (не путать с кол-вом » \n » в тексте), и берем кол-во символов от этого числа. Например, если у нас 100 строк, то переменная gutterDigitCount будет равна 3, потому что в числе 100 ровно 3 символа. Но допустим, у нас всего 1 строка — а значит отступ в 1 символ будет визуально казаться маленьким, и для этого мы используем переменную count , чтобы задать минимально отображаемый отступ в 3 символа, даже если у нас меньше 100 строк кода.

Эта часть была самая запутанная из всех, но если вдумчиво прочитать несколько раз (поглядывая на код), то всё станет понятно.

Далее устанавливаем отступ предварительно вычислив widestNumber и widestWidth .

Приступим к рисованию

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

Ну а теперь можно приступать к рисованию, объявим переменные с типом Paint :

Где-нибудь в init блоке установим цвет текста и цвет разделителя. Важно помнить, что если вы поменяйте шрифт текста, то шрифт Paint ‘а придется применять вручную, для этого советую переопределить метод setTypeface . Аналогично и с размером текста.

После чего переопределяем метод onDraw :

Смотрим на результат

Выглядит круто.

Что же мы сделали в onDraw ? Перед вызовом super -метода мы обновили отступ, после чего отрисовали номера только в видимой области, ну и под конец провели вертикальную линию, визуально отделяющую нумерацию строк от редактора кода.

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

Заключение

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

Также оставлю ссылку на исходники моего редактора кода на GitHub, там вы найдёте не только те фичи о которых я рассказал в этой статье, но и много других которые остались без внимания.

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

Источник

Top 7: Best free code editors apps for Android

Carlos Delgado

• September 23, 2021
• 240.5K views

See our top of 7 from the best free code editors applications for software developers.

As an enthusiast developer, I write and read a lot of code every single day without exception. However, not always you can take your laptop and work wherever you want for different reasons. Nowadays, everybody has a Smartphone that is small as a hand. Many developers say that that’s already an impediment because you can’t work comfortably, but we do not all think in the same way (i mean, not all of us have huge fingers).

In this top, we will share with you a collection of 7 from the best free code editors applications available for the Android Platform.

Recommendations

If you want to enjoy your development experience while you work with any of the apps in this top, we recommend you to use an appropriate keyboard like Hacker’s keyboard. This keyboard is available on the Play Store.

7. Dcoder

Dcoder is a mobile coding IDE especially designed to hone your coding skills on mobile. It is a complete package to learn and comprehend the programming languages from a wide range e.g from C to Ruby. It includes Rich text editor supporting syntax highlight and packed with all the necessary tools required to give you all the edge an IDE or Code Compiler can give. The compile process is made through cloud APIs, that means that these features aren’t available without internet.

Not only you can code, you can debug the code to see compilation errors and Result on the same screen. Its more alike port of your favourite Code Editors like Notepad++ or Sublime Text with compilation power. It offers Custom Themes too, Editable font Size for the Editor and much more. This app offers in-app purchases.

6. Quoda Code Editor

Quoda is a sophisticated and easy to use source code editor or IDE, much like Notepad++, Textmate or Sublime Text, with integrated support for SFTP/FTP(S) servers and cloud storage (Dropbox and Google Drive). Other features include downloading URL source code, Code-completion, auto-encoding detection, brace matching, auto-indentation, line bookmarking, colour picker, HTML formatting, and even more — many of these unmatched by other Android IDEs or text editors.

If you want to code productively away from your PC, Quoda is a must have, allowing you to carry a text editor and IDE like Notepad++, Textmate or Sublime Text in your pocket to code when on the move.

5. QuickEdit

QuickEdit is a fast, stable and full featured text editor for Android devices. It has been optimized for both phone and tablet, it’s of high performance and real time feedback on large text files (more than 10,000 lines). The speed and responsiveness is very good if you compare it with other text editor apps on Google Play. It can be used as a text editor or code editor for normal text files and programming files. It will automatically detect the character encoding of your files, but you can still change it as you wish.

QuickEdit allows you to Access files from recently opened or added files collections, FTP, Google Drive, Dropbox and OneDrive and has syntax highlight for more than 40 languages like C++, C#, Java, XML, Javascript, Markdown, PHP, Perl, Python, Ruby, Smali, Swift, etc. QuickEdit has the ability to edit system files on rooted devices too.

4. anWriter Free

anWriter HTML editor helps you to write code: It offers an autocompletion support for: HTML, CSS, JavaScript, LaTeX (PHP, SQL in pro version). It supports modern technologies: It offers an autocompletion support for HTML 5, CSS 3, jQuery, Bootstrap, and Angular It supports FTP: You can download a file from the FTP server, send a file to the FTP server, and browse directories on the FTP server. It allows previewing web pages in application: Allow you to get a quick preview of your web page in an internal viewer. You don’t need to open a browser. The integrated viewer has a JS error console.

With anWriter you will significantly increase your coding speed, compared with a usual notepad. anWriter is much lighter than most IDE, but at the same time much more powerful, than most of notepad like editors.

3. Pocket Editor

Pocket Editor is meant to be used as an integrated development environment (IDE), text editor, and code editor for Android. It offers syntax highlighting, code completion, and other features for languages like:

• JavaScript, HTML, CSS, JSON, XML, and SQL
• PHP
• SQL
• Java, C, C++, C#, Objective-C, Swift, Kotlin
• Ruby
• Python, R, Perl, Lua
• Go, Rust, Elixir, Elm, TypeScript
• Cobol, Fortran, Pascal, Ada, and Assembly
• YAML, TOML, and Markdown

And many more. It offers many features to enhance your performance while you work. Although this app is closed-source, it is totally free and it doesn’t have ads. Pocket Editor is a product by Our Code World.

2. Turbo-Editor

Simple, Powerful and Open Source Text Editor for Android. Built following the latest Android Guidelines to make the experience the most intuitive on the Phone but also on Tablets.

1. DroidEdit Free

DroidEdit is a text and source code editor (similar to Notepad++ or gedit) for android tablets and phones. Take your work everywhere with this application, code while you’re waiting for the bus or when you’re relaxing in a nice beach (i don’t know why someone would code on vacations but, whatever). Don’t rush to your office if you receive an emergency call asking you to change some code. Just pick your mobile phone and edit everything you need. This app supports Emmet Tools, expand simple expressions into full fledged HTML code automagically.

The ad supported version has exactly the same functionality as the paid version except it doesn’t have SFTP support, Dropbox support, Custom themes and root mode.

Honorable mentions

These are some applications that although they aren’t listed in the top, they deserve to be mentioned as they still rock !

Our Code Editor Free

Our Code Editor Free is an integrated development environment (IDE),text editor, code editor for Android. Our Code Editor offers many features to enhance your performance while you work. Download and edit files from many sources (sftp,dropbox), an useful autocomplete and many highlight themes. Ideal for tablets, cell phone and other android devices. No account or internet connection required (excluding dropbox and SFTP), just download, install run and start coding ! The code files will be managed locally on your device.

Our Code Editor supports code folding, Live syntax checker (for a couple of languages), cut, copy, and paste functionality, Search and replace with regular expressions

Although this app is closed-source, it is totally free and it doesn’t have ads. Our Code Editor Free was written by Our Code World .

Codeanywhere

Codeanywhere is a text, code and markup editor, that has been redesigned and reengineered to be light, fast, and mobile-friendly. Connect to your FTP, SFTP Servers, Dropbox or Github account and easily manipulate your resources, folders or files just with the swipe of your finger. Share and collaborate on projects or just a single file — from wherever you are, and of course quickly edit code with our keyboard that has been customised for developers on the go. Codeanywhere also works on the desktop (Mac and PC).

Apparently the Codeanywhere app doesn’t allow to edit local files from your device, only from remote sources.

Enlightened

Enlightened is an elegant, minimalist code editor for Android. Its purpose is similar to that of other lightweight code editors: it allows you to edit text and code of many different languages. Think of it as a kind of Notepad++ for Android devices. At the same time, its goal is to stay minimalistic and intuitive. It has absolutely no ads, intrusive permissions, or other nonsense. This app is not stable and have some bugs, however the app has potential and its improvable, that’s why it’s worth to mention it.

If you know another awesome free code editor application, please share it with the community in the comment box.

Источник