редактор кода для телефона
Да, вы можете кодировать на ходу: 7 лучших HTML-редакторов для Android
Для чего вы используете устройство Android? Звонить по телефону? Facebook? Gaming? Читаете новости? Кодирование?
Да, все верно — кодирование на вашем Android-устройстве не только возможно, но и популярно. Лучшие редакторы HTML в Google Play Store загружались миллионы раз, что доказывает, что как профессионалы, так и энтузиасты все чаще рассматривают операционную систему как жизнеспособную платформу для повышения
Если вам нужно кодировать на ходу, вам нужно прочитать эту статью. Я собираюсь представить вам семь лучших приложений HTML-редактора для вашего Android-устройства.
1. HTML-редактор Lite для WebMaster
HTML Editor Lite — это редактор исходного кода, который поддерживает файлы JavaScript, CSS, PHP и HTML.
Он не предлагает много дополнительных функций, но он делает основы очень хорошо. Они включают подсветку синтаксиса, нумерацию строк, специальные экранные кнопки кодирования и встроенный файловый менеджер. Он также обеспечивает поддержку FTP-сервера.
По сравнению с некоторыми другими редакторами, о которых я расскажу позже, функции не кажутся очень обширными, но у подхода без излишеств есть преимущество: приложение легкое и быстрое в использовании.
Бесплатная версия имеет некоторые ограничения, включая ограниченную поддержку автозавершения кода и отсутствие режима предварительного просмотра. Премиум-версия за 4 доллара снимает эти ограничения.
2. AWD
AWD — сокращение от «Android Web Developer» — это интегрированная среда разработки для веб-разработчиков.
Приложение поддерживает языки PHP, CSS, JS, HTML и JSON, и вы можете управлять удаленными проектами и работать с ними, используя FTP, FTPS, SFTP и WebDAV.
Он предлагает несколько функций, которые вы можете ожидать — такие как подсветка кода, завершение кода, нумерация строк и предварительный просмотр — но также включает в себя некоторые интересные функции, которые ставят приложение на свое место в этом списке. Они включают в себя функцию поиска и замены (которая включает в себя регулярные выражения), проверку ошибок и, возможно, наиболее соблазнительно, автоматическое улучшение кода одним щелчком мыши.
Приложение также предоставляет неограниченные действия отмены / повтора, частое автоматическое сохранение и интеграцию с Git.
Скачать: AWD (бесплатно)
3. DroidEdit
DroidEdit сравним с Notepad ++ в Windows. В дополнение к обычной четверке HTML, PHP, CSS и JavaScript, он также поддерживает C, C ++, C #, Java, Python, Ruby, Lua, LaTeX и SQL. На мой взгляд, приложение также может похвастаться лучшей подсветкой синтаксиса среди всех приложений в этом списке — цветовые контрасты более яркие и их легко отслеживать.
Самая захватывающая платная функция — это поддержка Dropbox, Google Drive и Box. Вы сможете автоматически сохранять все свои проекты прямо в облаке, что позволит вам с легкостью забирать их на других устройствах в тот же день. Он также добавляет поддержку SFTP, пользовательские темы и корневой режим.
Бесплатная версия поддерживается рекламой.
Скачать: DroidEdit (бесплатно)
4. Редактор кода Quoda
Quoda Code Editor не так известен, как некоторые другие предложения в этой статье, но многие энтузиасты кодирования клянутся им.
Приложение имеет один из самых разнообразных языков программирования. Поддерживаются ActionScript, C, C ++, C #, CSS, Haskell, HTML, Java, JavaScript, Lisp, Lua, Markdown, Objective-C, Perl, PHP, Python, Ruby, SQL, Visual Basic и XML.
Скачать: Quoda Code Editor (бесплатно)
5. Текстовый редактор Jota
Как следует из названия, Jota — это прежде всего текстовый редактор, но он также идеально подходит для кодирования и написания HTML.
Имея почти пять миллионов загрузок и почти безупречный пятизвездочный рейтинг, приложение является одним из самых скачиваемых и самых популярных загрузок в этом списке.
Он может поддерживать 1 000 000 символов, имеет настраиваемую подсветку синтаксиса и может даже использоваться в качестве редактора SL4A (Scripting Layer для Android).
Скачать: текстовый редактор Jota (бесплатно)
6. Помощник
AIDE — это сокращение от «Интегрированная среда разработки Android».
Помимо образовательной стороны приложения, оно предлагает проверку ошибок в реальном времени, завершение кода, отладчик Java и тестирование приложения одним щелчком мыши.
AIDE также совместим с двумя наиболее популярными IDE для настольных компьютеров — Eclipse и Android Studio. Это означает, что если вы работаете с приложением, вы можете перенести свой проект с рабочего стола на мобильный и не столкнуться с проблемами.
Скачать: AIDE (бесплатно)
7. писатель
Я закончу свой список с помощью anWriter. Это бесплатный редактор HTML, который также поддерживает CSS, JavaScript и LaTeX. Если вы обновитесь до профессиональной версии, вы также получите поддержку PHP и SQL.
Приложение может работать со всеми новейшими технологиями, используемыми в Интернете, включая HTML 5, CSS 3, jQuery, Bootstrap и Angular, оно имеет функцию автозаполнения для всех поддерживаемых языков и предлагает подсветку синтаксиса.
Он также позволяет просматривать веб-страницы, которые вы закодировали в приложении, и предупреждать о любых ошибках благодаря консоли ошибок JavaScript.
Лучше всего то, что anWriter намного легче, чем некоторые другие приложения IDE, о которых я уже говорил. Общий размер составляет менее 2 МБ.
Скачать: anWriter (бесплатно)
Вы кодируете на своем устройстве Android?
Это семь лучших HTML-редакторов и приложений для Android. Хотя многие из них предлагают аналогичные основные функции, именно дополнительные функции и платные версии помогут определить, подходит ли приложение для ваших нужд.
Если вы не уверены, какое приложение использовать, лучше всего посоветовать протестировать все семь и посмотреть, какое из них лучше всего подходит для вашего рабочего процесса.
Теперь это для вас. Я хотел бы знать, если вы используете свое устройство Android для кодирования. Если да, пожалуйста, дайте мне знать, какой редактор вы используете. Почему вы выбрали его, и что делает его уникальным?
Первоначально написано Дэнни Штибен 13 мая 2013 года.
Редактор кода на Android: часть 1
Перед тем как закончить работу над своим редактором кода я много раз наступал на грабли, наверное декомпилировал десятки похожих приложений, и в данной серии статей я расскажу о том чему научился, каких ошибок можно избежать и много других интересных вещей.
Вступление
Привет всем! Судя из названия вполне понятно о чем будет идти речь, но всё же я должен вставить свои пару слов перед тем как перейти к коду.
Я решил разделить статью на 2 части, в первой мы поэтапно напишем оптимизированную подсветку синтаксиса и нумерацию строк, а во второй добавим автодополнение кода и подсветку ошибок.
Для начала составим список того, что наш редактор должен уметь:
MVP — простой текстовый редактор
На этом этапе я так же сделал загрузку/сохранение файлов в память. Код приводить не буду, в интернете переизбыток примеров работы с файлами.
Подсветка синтаксиса
Как только мы ознакомились с требованиями к редактору, пора переходить к самому интересному.
Q: Почему мы используем TextWatcher как переменную, ведь можно реализовать интерфейс прямо в классе?
A: Так уж получилось, что у TextWatcher есть метод который конфликтует c уже существующим методом у TextView :
Это очень критично если мы планируем добавлять функционал Undo/Redo. Также нам может понадобится момент, в котором не будут работать слушатели, в котором мы сможем очищать стэк с изменениями текста. Мы ведь не хотим, чтобы после открытия нового файла можно было нажать Undo и получить совершенно другой текст. Хоть об Undo/Redo в этой статье говориться не будет, важно учитывать этот момент.
Соответственно, чтобы избежать такой ситуации можно использовать свой метод установки текста вместо стандартного setText :
Но вернёмся к подсветке.
Во многих языках программирования есть такая замечательная штука как RegEx, это инструмент позволяющий искать совпадения текста в строке. Рекомендую как минимум ознакомится с его базовыми возможностями, потому что рано или поздно любому программисту может понадобится «вытащить» какой-либо кусочек информации из текста.
Сейчас нам важно знать только две вещи:
Т.к я пишу редактор для JavaScript, вот небольшой паттерн с ключевыми словами языка:
Конечно, слов тут должно быть гораздо больше, а ещё нужны паттерны для комментариев, строк, чисел и т.д. но моя задача заключается в демонстрации принципа, по которому можно найти нужный контент в тексте.
Далее с помощью Matcher мы пройдёмся по всему тексту и установим спаны:
Поясню: мы получаем объект Matcher у Pattern, и указываем ему область для поиска в символах (Соответственно с 0 по text.length это весь текст). Далее вызов matcher.find() вернёт true если в тексте было найдено совпадение, а с помощью вызовов matcher.start() и matcher.end() мы получим позиции начала и конца совпадения в тексте. Зная эти данные, мы можем использовать метод setSpan для раскраски определённых участков текста.
Итак, запускаем!
Дело в том что метод setSpan работает медленно, сильно нагружая UI Thread, а учитывая что метод afterTextChanged вызывается после каждого введенного символа, писать код становится одним мучением.
Поиск решения
Первое что приходит в голову — вынести тяжелую операцию в фоновый поток. Но тяжелая операция тут это setSpan по всему тексту, а не регулярки. (Думаю, можно не объяснять почему нельзя вызывать setSpan из фонового потока).
Немного поискав тематических статей узнаем, что если мы хотим добиться плавности, придётся подсвечивать только видимую часть текста.
Точно! Так и сделаем! Вот только… как?
Оптимизация
Нам главное, чтобы выполнялась такая логика:
Таким образом, код редактора превращается в нечто подобное:
Как понять, какой текст попадает в видимую область?
Буду ссылаться на эту статью, там автор предлагает использовать примерно такой способ:
И он работает! Теперь вынесем topVisibleLine и bottomVisibleLine в отдельные методы и добавим пару дополнительных проверок, на случай если что-то пойдёт не так:
Последнее что остаётся сделать — пройтись по полученному списку спанов и раскрасить текст:
Не пугайтесь страшного if ‘а, он всего лишь проверяет попадает ли спан из списка в видимую область.
Ну что, работает?
Работает, вот только при редактировании текста спаны не обновляются, исправить ситуацию можно очистив текст от всех спанов перед наложением новых:
Ещё один косяк — после закрытия клавиатуры кусок текста остаётся неподсвеченным, исправляем:
Главное не забыть указать adjustResize в манифесте.
Скроллинг
Говоря про скроллинг снова буду ссылаться на эту статью. Автор предлагает ждать 500 мс после окончания скроллинга, что противоречит моему чувству прекрасного. Я не хочу дожидаться пока прогрузится подсветка, я хочу видеть результат моментально.
Так же автор приводит аргумент что запускать парсер после каждого «проскроленного» пикселя затратно, и я полностью с этим согласен (вообще рекомендую полностью ознакомится с его статьей, она небольшая, но там много интересного). Но дело в том, что у нас уже есть готовый список спанов, и нам не нужно запускать парсер.
Достаточно вызывать метод отвечающий за обновление подсветки:
Нумерация строк
Для начала определим что будем рисовать:
Для этого напишем функцию, которая будет обновлять отступ перед отрисовкой:
Эта часть была самая запутанная из всех, но если вдумчиво прочитать несколько раз (поглядывая на код), то всё станет понятно.
Приступим к рисованию
К сожалению, если мы хотим использовать стандартный андройдовский перенос текста на новую строку то придется поколдовать, что займет у нас много времени и ещё больше кода, которого хватит на целую статью, поэтому дабы сократить ваше время (и время модератора хабра), мы включим горизонтальный скроллинг, чтобы все строки шли одна за другой:
Ну а теперь можно приступать к рисованию, объявим переменные с типом Paint :
После чего переопределяем метод onDraw :
Смотрим на результат
Выглядит круто.
Для красоты можно ещё перекрасить отступ в другой цвет, визуально выделить строку на которой находится курсор, но это я уже оставлю на ваше усмотрение.
Заключение
В этой статье мы написали отзывчивый редактор кода с подсветкой синтаксиса и нумерацией строк, а в следующей части добавим удобное автодополнение кода и подсветку синтаксических ошибок прямо во время редактирования.
Также оставлю ссылку на исходники моего редактора кода на GitHub, там вы найдёте не только те фичи о которых я рассказал в этой статье, но и много других которые остались без внимания.
Задавайте вопросы и предлагайте темы для обсуждения, ведь я вполне мог что-то упустить.
Koder Code Editor 4+
Reny Mustika
Снимки экрана
Описание
«Editing code on your iPad should never be that difficult again»
—KillerStartups—
«The developers at iCodeLabs have done a great job optimizing the iPad’s real estate for code editing»
—theiphoneappreview—
«The app for instant project creation and code editing, perfect for developers and programmers on the go.»
—tipsfortablets—
Koder is a code editor for iPad and iPhone. It does have many features including syntax highlighting, snippet manager, tabbed editing, find and replace code, editor theme, remote and local files connections, and many more.
With Koder you can code anytime and anywhere, no matter if you’re at your desk or while on the go
NEWEST
— Support Dark Theme
— Compatibility with iOS 13
BUG REPORT/ PROBLEMS/ IDEAS :
If you have any problems when using Koder, or you have ideas for Koder improvement, please mention us or message us directly at twiter @koderapp