Рубрика «layout» - 2

в 12:59, , рубрики: css, html, javascript, layout, position: sticky

Have you ever wondered how to track when elements with positions: sticky become fixed? Eric Bidelman has an amazing post on this topic, go and read it now.

I've found some difficulties while using it in my project. Here they are:

  1. It breaks encapsulation. sticky-change event relates to header element, but you have to insert sentinels to header's parent (and make it position: relative).
  2. It involves lots of factors that should be consistent and their connection is not always obvious. For example you can't set --default-padding greater than 40px, which is top-sentinel's height.
  3. You can't track block in the middle of an article.

Let's try to improve it!

Читать полностью »

в 7:05, , рубрики: android, android cutout, Android P, Android sdk, design, layout, Блог компании FunCorp, дизайн мобильных приложений, разработка мобильных приложений, Разработка под android

Горел сентябрь 2007 года. Шёл сентябрь 2017 года, Apple вернули моду на чёлку, представив iPhone X. Неудивительно, что наши друзья из Китая, недолго думая, скопировали этот дизайн у Apple (хотя самая первая мини-чёлка была ещё в Essential Phone, который не взлетел). Но что мы видим сейчас? Huawei P20, Asus Zenfone 5, OnePlus 6, Motorola One Power, Xiaomi Redmi 6 и другие более-менее известные производители уже выпускают или анонсировали телефоны с чёлкой. Samsung и Google остались последними оплотами в этой гонке за хайпом борьбе за безрамочность. Или нет? По слухам, Google Pixel 3 XL тоже будет с этой хренью с изящным вырезом. Что ж, нам, как разработчикам, остаётся только оптимизировать свои приложения под этот вырез, чтобы пользователи смогли продолжать комфортно ими пользоваться. За подробностями прошу под кат.

«Поясняем за чёлку» в Android P. Что делать с Android Cutout? - 1
Читать полностью »

в 13:40, , рубрики: activity, activity state, CustomView, layout, layoutmanager, ui/ux, view, Блог компании Яндекс, интерфейсы, клавиатуры, консистентность, разработка мобильных приложений, Разработка под android, сохранение состояния

Мы опубликуем несколько лекций Школы мобильной разработки 2017 года. Эта школа — часть проекта Яндекса «Мобилизация». Здесь можно найти видеокурсы, составленные по итогам «Мобилизации» прошлого года.

Лекцию «Advanced UI» прочитал Дмитрий Свирихин — разработчик из команды мобильной Яндекс.Почты. Дмитрий объясняет, как при разработке интерфейса Android-приложения решать самые распространённые проблемы.

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

Читать полностью »

в 14:50, , рубрики: ios development, layout, mobile development, obj-c, swift, xcode, разработка мобильных приложений, разработка под iOS

What we have?

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

Как мы размещаем элементы на экране?

  • Qt предлагает использовать контейнеры, умеющие внутри себя располагать элементы определенным образом. Вкладывая эти контейнеры друг в друга, можно получить необходимую расстановку.
  • WPF/XAML предлагает аналогичные контейнеры.
  • Android предлагает аналогичные контейнеры + систему констреинтов.
  • iOS предлагает Autolayout. Нужно описать набор ограничений (уравнений), непротиворечиво и однозначно описывающих расположение элементов. Решив систему уравнений с этими ограничениями, движок получит координаты и размеры элементов.
  • У Delphi есть anchors: прибивание краев к контейнеру. Очень похоже на resizing masks в iOS.
  • В web на сколько я понимаю используется вкладывание друг в друга контейнеров, поведение которых описывается стилями.

What problem with this?

We need to use code for special cases

Описанные инструменты заточены под типовые случаи, зачастую мы не можем (или можем, но это сильно неудобно) описать расположение какого-то элемента с помощью этих инструментов. Приходится делать это в коде. Логика описания layout'а размазывается по нескольким местам.

Должен быть способ лучше.

Читать полностью »

в 0:42, , рубрики: autolayout, calayer, cglayout, iOS, layout, open source, swift, uikit, uiview, разработка мобильных приложений, разработка под iOS

Привет!
Хочу представить мою последнюю open-source разработку — CGLayout — вторая система разметки в iOS после Autolayout, основанная на ограничениях.

CGLayout — новая система автоматического layout'а в iOS - 1

"Очередная система автолайаута… Зачем? Для чего?" — наверняка подумали вы.
Действительно iOS сообществом создано уже немало layout-библиотек, но ни одна так и не стала по-настоящему массовой альтернативой ручному layout`у, не говоря уже про Autolayout.

CGLayout работает с абстрактными сущностями, что позволяет одновременно использовать UIView, CALayer и not rendered объекты для построения разметки. Также имеет единое координатное пространство, что позволяет строить зависимости между элементами, находящимися на разных уровнях иерархии. Умеет работать в background потоке, легко кешируется, легко расширяется и многое-многое другое.
CGLayout функциональный продукт, у которого есть хорошие перспективы развиться в большой проект.

Читать полностью »

в 15:05, , рубрики: css, flexbox, html, layout, Specification, браузеры, Разработка веб-сайтов

Я всегда считал, что с flexbox довольно легко работать — глоток свежего воздуха после стольких лет float'ов и clearfix'ов.

Правда недавно я обнаружил что борюсь с ним; что-то растягивалось, когда я не думал, что оно должно тянуться. Я поправил здесь, другой элемент сжался. Я починил это, что-то другое ушло за экран. Что во имя Джорджа Буша происходит?

В конце концов, все заработало, но солнце село, а мой процесс был привычной игрой с CSS. Или… как называется та игра, где надо ударить крота, а затем другой крот выпрыгивает и надо ударить и его тоже?

Как бы там ни было, я решил что пора вести себя как взрослый разработчик и выучить flexbox должным образом. Но вместо того, чтобы прочитать 10 очередных блог-постов, я решил отправиться прямиком к исходнику и прочитать The CSS Flexible Box Layout Module Level 1 Spec

Вот хорошие отрывки.

Читать полностью »

в 17:22, , рубрики: Auto Layout, iOS разработка, layout, LayoutKit, performance, swift, разработка под iOS

Введение

Привет, меня зовут Ник Снайдер и я инженер-программист в компании LinkedIn. Сегодня я хочу рассказать вам историю об Auto Layout:

  1. Как мы в LinkedIn используем его.
  2. Проблемы, с которыми мы встретились.
  3. Почему в некоторых ситуациях мы прекратили использовать Auto Layout.
  4. И что мы используем вместо него.

Хорошие новости

Я бы хотел начать с хороших новостей:

  1. Мы в LinkedIn широко используем Auto Layout. Это наш основной метод построения интерфейсов во всех наших приложениях.
  2. Auto Layout мощный инструмент, который облегчает поддержку:
    1. Различных размеров экрана;
    2. Языков с написанием справа налево.

Плохие новости

Плохие новости заключаются в том, что производительность Auto Layout недостаточно хороша:

  1. Не масштабируется для сложных иерархий view (из последующего изложения будет ясно, что речь идет о нелинейном увеличении времени расчета при линейном росте количества view — прим. перев.).
  2. Мы наблюдали регресс производительности, на некоторых релизах iOS.
  3. Производительность может оказаться непредсказуемо плохой для некоторых разметок интерфейса (здесь и далее layout переведено как «разметка» — прим. перев.).

Читать полностью »

в 3:00, , рубрики: jquery plugins, layout, masonry, верстка, Чулан

Masonry (разработчик David DeSandro) это JQuery-плагин позволяющий быстро и просто организовать динамический layout блоков разного размера практически без потери места, а если подобрать соответствующие размеры блокам — то без пустых мест вовсе.
JQuery Masonry — динамический layout
Под динамическим layout`ом имеется ввиду, что блоки будут располагаться в контейнере в зависимости от его размеров, максимально рационально заполняя его пространство, тем самым экономя место на странице.
Читать полностью »

в 10:17, , рубрики: android, Android support percent, layout, multi screen hell, Разработка под android

Когда я впервые столкнулся с разметкой макетов в Android, со всеми этими FrameLayout, LinearLayout, RelativeLayout. С понятиями веса и гравитации для элементов интерфейса. Я недоумевал, почему нельзя было сделать так, как давно уже делается в html. Где есть возможность указать разметку в процентах? И вот, наконец такая возможность появилась. Появилась она конечно не вчера, но я на нее наткнулся только сейчас, и статей на хабре, с чем это едят не нашел.

image

Итак, что же нужно для того, чтобы пощупать это счастье? Нужно совсем немного, открыть build.gradle своего приложения, добавить туда строку

dependencies {
    compile 'com.android.support:percent:23.4.0'
}

и выполнить синхронизацию.

Всё, все прелести разметки в процентах вам доступны, по крайней мере для minSDK 14 (меньше я не проверял).
Читать полностью »

в 5:27, , рубрики: framework, java, java ee, layout, liquibase, vaadin, ооп, Программирование, разработка, разработка приложений

В 2016 многие из нас пообещали себе новые свершения, например, прочесть отложенную книгу, освоить новый вид спорта или язык программирования т.п. Изучение новых технологий в чем-то сродни вышеописанным действиям. Итак, для таких энтузиастов небольшой обзор про удобные «инструменты» для разработки web-приложений на языке Java.
Новый цикл статей будет посвящена Vaadin и Liquibase.
В статье расскажу о нескольких этапах для начала знакомства с этим FrameWork-ом(Vaadin), с его помощью попробуем создать интерфейс и «обернуть» файлы(xml) для работы с Liquibase. Это статья будет первой. Приятного чтения друзья.
Читать полностью »

123
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js