Π Π°Π·Π½ΠΎΠ΅

ΠžΡΠ½ΠΎΠ²Ρ‹ вСрстки: ΠšΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡ‚ΡŒ Π² CSS | ΠžΡΠ½ΠΎΠ²Ρ‹ соврСмСнной вСрстки

01.10.2023

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

ΠšΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡ‚ΡŒ Π² CSS | ΠžΡΠ½ΠΎΠ²Ρ‹ соврСмСнной вСрстки

Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ для доступа ΠΊ 15+ бСсплатным курсам ΠΏΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ с Ρ‚Ρ€Π΅Π½Π°ΠΆΠ΅Ρ€ΠΎΠΌ

Π’ΠΈΠ΄Π΅ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Π½ΠΎ ΠΈΠ·-Π·Π° Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹.

Π’ ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΌ ΡƒΡ€ΠΎΠΊΠ΅ Π±Ρ‹Π»Π° Ρ€Π°Π·ΠΎΠ±Ρ€Π°Π½Π° вторая Ρ‡Π°ΡΡ‚ΡŒ словосочСтания ΠšΠ°ΡΠΊΠ°Π΄Π½Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй. ΠœΡ‹ ΠΈΠ·ΡƒΡ‡ΠΈΠ»ΠΈ, ΠΊΠ°ΠΊ Π·Π°ΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ стили ΠΊ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ HTML элСмСнтам. Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ слова каскадныС.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡ‚ΡŒ? ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ сСбС каскад Π²ΠΎΠ΄ΠΎΠΏΠ°Π΄ΠΎΠ². Π’ Π½ΠΈΡ… Π²ΠΎΠ΄Π° ΠΏΠ΅Ρ€Π΅Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π²ΠΎΠ΄ΠΎΠΏΠ°Π΄Π° Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΈ Ρ‚Π°ΠΊ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° это всС Π½Π΅ ΡƒΠΉΠ΄Π΅Ρ‚ Π² ΠΎΠ±Ρ‰ΠΈΠΉ бассСйн.

Π’ CSS слово ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡ‚ΡŒ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚Π°ΠΊΠΎΠ΅ ΠΆΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. Π’ качСствС Π²ΠΎΠ΄Ρ‹ Ρƒ нас CSS свойства. Они ΠΌΠΎΠ³ΡƒΡ‚ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡ‚ΡŒ β€” Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ языка CSS Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ свойства Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°ΡΡˆΠΈΡ€ΡΡ‚ΡŒ свойства Π² сСлСкторах.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ описаниС достаточно слоТноС, Π½ΠΎ Π΄Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅. Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„ с двумя классами: text-bold ΠΈ text-dark. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ класс Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π²Π΅Ρ‡Π°Ρ‚ΡŒ Π·Π° ΠΆΠΈΡ€Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ тСкста, Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π·Π° установку Ρ‚Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°. Π’Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ сСлСктор ΠΏΠΎ Ρ‚Π΅Π³Ρƒ ΠΈ ΡƒΠΊΠ°ΠΆΠ΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° 24 пиксСля.

<p>
  Какой-Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ интСрСсный тСкст ΠΎΠ± интСрСсной Π²Π΅Ρ‰ΠΈ. ΠžΡ‡Π΅Π½ΡŒ интСрСсно.
</p>

Π’ CSS Ρ„Π°ΠΉΠ»Π΅ ΡƒΠΊΠ°ΠΆΠ΅ΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ стили:

p {
  font-size: 24px;
}
.text-bold {
  font-weight: bold;
}
.text-dark {
  color: #333333;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ воспроизвСсти этот ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ тСкст выводится Ρ‚Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° ΠΈ с ΠΆΠΈΡ€Π½Ρ‹ΠΌ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ΠΌ. Π‘Ρ‚ΠΈΠ»ΠΈ ΠΎΡ‚ классов

text-bold ΠΈ text-dark слоТились ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈΡΡŒ ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Ρƒ. Π’Π°ΠΊΠΆΠ΅ тСкст ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ 24 пиксСля, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ для сСлСктора ΠΏΠΎ Ρ‚Π΅Π³Ρƒ.

Π˜Ρ‚ΠΎΠ³ΠΎΠ²Ρ‹ΠΌΠΈ стилями для нашСго ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Π° Π±ΡƒΠ΄ΡƒΡ‚:

 {
  color: #333333;
  font-weight: bold;
  font-size: 24px;
}

Π­Ρ‚ΠΎ ΠΈ Π΅ΡΡ‚ΡŒ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡ‚ΡŒ стилСй CSS. Π₯ΠΎΡ‚ΡŒ ΠΌΡ‹ ΠΈ использовали Ρ€Π°Π·Π½Ρ‹Π΅ сСлСкторы ΠΈ классы для описания, Π½ΠΎ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ ΠΎΠ½ΠΈ ΡΡƒΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ.

ΠŸΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ сСлСкторов

Π’Π°ΠΆΠ½ΠΎΠΉ Ρ‡Π΅Ρ€Ρ‚ΠΎΠΉ CSS являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ сСлСкторов ΠΈΠΌΠ΅ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚. Если стили ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΡ€Π΅Ρ‡Π°Ρ‚ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Ρƒ Π² Ρ€Π°Π·Π½Ρ‹Ρ… сСлСкторах, Ρ‚ΠΎ вступаСт Π² Π΄Π΅Π»ΠΎ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Π°. Π Π°Π·Π±Π΅Ρ€Π΅ΠΌ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅. Π’ΠΎΠ·ΡŒΠΌΠ΅ΠΌ ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„ с классом

red ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ blue. Установим ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° для тСкста. Для всСх ΠΆΠ΅ ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„ΠΎΠ² Π² тСкстС установим Π·Π΅Π»Π΅Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚.

p {
  color: green;
}
.red {
  color: red;
}
#blue {
  color: blue;
}
<p>Какого ΠΆΠ΅ Ρ†Π²Π΅Ρ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„?</p>

ΠŸΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ дальшС ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ этот ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² любом ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΌ Π²Π°ΠΌ мСстС.

Как Π²Ρ‹ смогли Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, тСкст ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Π° Π±ΡƒΠ΄Π΅Ρ‚ синим. Но ΠΏΠΎΡ‡Π΅ΠΌΡƒ Ρ‚Π°ΠΊ? ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, Π΄Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ синий Ρ†Π²Π΅Ρ‚ Π² CSS ΡƒΠΊΠ°Π·Π°Π½ самым послСдним? Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС Π½Π΅Ρ‚. Π”Π°ΠΆΠ΅ Ссли ΠΌΡ‹ пСрСмСстим сСлСктор ΠΏΠΎ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρƒ Π² самый Π²Π²Π΅Ρ€Ρ…, ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„ всС Ρ€Π°Π²Π½ΠΎ останСтся синим.

ВсС Π΄Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ сСлСктор ΠΏΠΎ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρƒ ΠΈΠΌΠ΅Π΅Ρ‚ самый высокий ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚. ВстрСтив Π΅Π³ΠΎ, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π±ΡƒΠ΄Π΅Ρ‚ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ эти стили самыми Π²Π°ΠΆΠ½Ρ‹ΠΌΠΈ для страницы ΠΈ Π² случаС ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΡ€Π΅Ρ‡ΠΈΠΉ Π²ΠΎΠ·ΡŒΠΌΠ΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ ΠΈΠ· стилСй для ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°.

Условно ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΡΡ‚Π°Π²ΠΈΡ‚ΡŒ сСлСкторы Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ порядкС ΠΏΠΎ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Ρƒ:

  1. Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ ΠΏΠΎ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρƒ (#blue)
  2. Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ ΠΏΠΎ классу (.red)
  3. Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ ΠΏΠΎ Ρ‚Π΅Π³Ρƒ (p)

Π“Π΄Π΅ 1 β€” самый высокий ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚, Π° 3

β€” самый Π½ΠΈΠ·ΠΊΠΈΠΉ.

Π Π°Π·Π±Π΅Ρ€Π΅ΠΌ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

p {
  color: blue;
  font-weight: bold;
}
.important {
  color: purple;
  font-style: italic;
}
#intro {
  color: green;
}
<p>ИндСйскиС ΠΏΠ»Π΅ΠΌΠ΅Π½Π° ΠœΠ°Π½Π°Ρ…Π°Ρ‚Ρ‚ΠΎΡƒ ΠΈ ΠšΠ°Π½Π°Ρ€ΡΠΈ.</p>

Π­Ρ‚ΠΎΡ‚ тСкст Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°ΠΊΠ»ΠΎΠ½Π½Ρ‹ΠΌ, ΠΆΠΈΡ€Π½Ρ‹ΠΌ ΠΈ Π·Π΅Π»Π΅Π½Ρ‹ΠΌ. И Π²ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ:

  • Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ ΠΏΠΎ Ρ‚Π΅Π³Ρƒ p:
    • Π”ΠΎΠ±Π°Π²ΠΈΡ‚ синий Ρ†Π²Π΅Ρ‚
    • Π”ΠΎΠ±Π°Π²ΠΈΡ‚ ΠΆΠΈΡ€Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅
  • Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ ΠΏΠΎ классу . important:
    • Π—Π°ΠΌΠ΅Π½ΠΈΡ‚ синий Ρ†Π²Π΅Ρ‚ Π½Π° ΠΏΡƒΡ€ΠΏΡƒΡ€Π½Ρ‹ΠΉ
    • Π‘Π΄Π΅Π»Π°Π΅Ρ‚ тСкст курсивным
  • Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ ΠΏΠΎ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρƒ
    #intro
    :
    • Π—Π°ΠΌΠ΅Π½ΠΈΡ‚ ΠΏΡƒΡ€ΠΏΡƒΡ€Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ Π½Π° Π·Π΅Π»Π΅Π½Ρ‹ΠΉ

ПослС всСх Ρ‚Π°ΠΊΠΈΡ… ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠΉ ΠΈΡ‚ΠΎΠ³ΠΎΠ²Ρ‹Π΅ стили для ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Π° слоТатся ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

 {
  color: green;
  font-weight: bold;
  font-style: italic;
}

Π’Π°ΠΆΠ½ΠΎ: Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ сСлСктор ΠΏΠΎ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρƒ ΠΈΠΌΠ΅Π΅Ρ‚ самый высокий ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ ΠΈ ΠΏΠ΅Ρ€Π΅Π±ΠΈΠ²Π°Π΅Ρ‚ всС стили классов, Ρ‚ΠΎ Π΅Π³ΠΎ использованиС считаСтся Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΉ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΎΠΉ. Π£ΠΊΠ°Π·Π°Π² стили для ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°, ΠΌΡ‹ лишаСм сСбя возмоТности ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ стили с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ классов. Π­Ρ‚ΠΎ Π±Ρ‹Π²Π°Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ для создания ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Ρ… ΠΊ дСйствиям ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ сайтов, ΠΊΠΎΠ³Π΄Π° Π½Π° Π΅Π³ΠΎ дСйствия ΠΌΡ‹ мСняСм внСшний Π²ΠΈΠ΄ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… элСмСнтов.


ΠŸΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ свойств

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρƒ вас Π²ΠΎΠ·Π½ΠΈΠΊ вопрос, Π° Ρ‡Ρ‚ΠΎ случится, Ссли элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ нСсколько классов, свойства ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΡ€Π΅Ρ‡Π°Ρ‚ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Ρƒ? Π—Π΄Π΅ΡΡŒ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΏΠΎ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡƒ

Β«ΠšΡ‚ΠΎ послСдний, Ρ‚ΠΎΡ‚ ΠΈ ΠΏΡ€Π°Π²Β». ΠŸΡ€ΠΎΡ‰Π΅ всСго это Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅:

.alert {
  color: gray;
}
.alert-error {
  color: red;
}
<p>Π’Π°ΠΆΠ½ΠΎΠ΅ сообщСниС! Π‘ΠΎΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅ красного Ρ†Π²Π΅Ρ‚Π°</p>

ΠžΡ‚Ρ‚Π°Π»ΠΊΠΈΠ²Π°ΡΡΡŒ ΠΎΡ‚ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ° каскадности, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π²Π½Π°Ρ‡Π°Π»Π΅ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚ сСлСктор .alert ΠΈ установит сСрый Ρ†Π²Π΅Ρ‚ тСкста. Π”Π°Π»Π΅Π΅ Π΅ΠΌΡƒ встрСтится сСлСктор .alert-error, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ красный Ρ†Π²Π΅Ρ‚. И Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ просто ΠΏΠ΅Ρ€Π΅Π·Π°ΠΏΠΈΡˆΠ΅Ρ‚ сСрый Ρ†Π²Π΅Ρ‚ Π½Π° красный. ΠŸΠΎΡ€ΡΠ΄ΠΎΠΊ классов Π² HTML Π² Π΄Π°Π½Π½ΠΎΠΌ случаС Π½Π΅ ΠΈΠ³Ρ€Π°Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ Ρ€ΠΎΠ»ΠΈ. Π”Π°ΠΆΠ΅ Π² Ρ‚Π°ΠΊΠΎΠΌ случаС

<p>Π’Π°ΠΆΠ½ΠΎΠ΅ сообщСниС! Π‘ΠΎΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅ красного Ρ†Π²Π΅Ρ‚Π°</p>

Ρ†Π²Π΅Ρ‚ тСкста Π±ΡƒΠ΄Π΅Ρ‚ красным. Π­Ρ‚ΠΎ наглядно ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ CSS ΠΎΡ‚ HTML. Если ΠΆΠ΅ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ мСстами сСлСкторы Π² CSS, Ρ‚ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΈ ΠΈΡ‚ΠΎΠ³ΠΎΠ²Ρ‹Π΅ стили.

.alert-error {
  color: red;
}
.alert {
  color: gray;
}
<p>Π’Π°ΠΆΠ½ΠΎΠ΅ сообщСниС! Π‘ΠΎΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅ сСрого Ρ†Π²Π΅Ρ‚Π°</p>

ВСс сСлСкторов

Π’ΠΎ врСмя Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ ситуации, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠ΄Π½ΠΈ сСлСкторы Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ больший вСс, Ρ‡Π΅ΠΌ Π΄Ρ€ΡƒΠ³ΠΈΠ΅.

ΠŸΡ€ΠΈΡ‡Π΅ΠΌ ΠΈΡ… мСсторасполоТСниС Π² CSS Ρ„Π°ΠΉΠ»Π΅ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ особого значСния:

<textarea></textarea>
.form-input {
  height: 50px;
}
textarea {
  height: 200px;
}

Какой высоты Π±ΡƒΠ΄Π΅Ρ‚ элСмСнт <textarea>? ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΎΡ‚Π²Π΅Ρ‚ β€” 50px, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ сСлСктор ΠΏΠΎ классу ΠΈΠΌΠ΅Π΅Ρ‚ больший ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚, Ρ‡Π΅ΠΌ сСлСктор ΠΏΠΎ Ρ‚Π΅Π³Ρƒ. Но ΠΊΠ°ΠΊ ΠΆΠ΅ Π·Π°Π΄Π°Ρ‚ΡŒ высоту Π² 200px ΠΈ Π½Π΅ Π²Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ классы? Достаточно ΠΏΠΎΠ΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊ Ρ‚Π΅Π³Ρƒ Π΅Ρ‰Π΅ ΠΈ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ класса:

.form-input {
  height: 50px;
}
textarea.form-input {
  height: 200px;
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ для элСмСнта <textarea> Π±ΡƒΠ΄Π΅Ρ‚ установлСна высота Π²

200px. Π­Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ благодаря Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Ρ‹ Β«ΡΠΊΠ»Π°Π΄Ρ‹Π²Π°ΡŽΡ‚ΡΡΒ» Π² Ρ€Π°ΠΌΠΊΠ°Ρ… ΠΎΠ΄Π½ΠΎΠ³ΠΎ сСлСктора. Для большСго понимания Ρ‚Π°ΠΊΠΈΡ… слоТСний ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ±Ρ‰ΠΈΠΉ вСс сСлСктора опрСдСляСтся трСмя Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ, Π³Π΄Π΅:

  1. ΠŸΠ΅Ρ€Π²Π°Ρ Ρ†ΠΈΡ„Ρ€Π° ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ количСство ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ² Π² сСлСкторС
  2. Вторая Ρ†ΠΈΡ„Ρ€Π° ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ количСство классов Π² сСлСкторС
  3. Π’Ρ€Π΅Ρ‚ΡŒΡ Ρ†ΠΈΡ„Ρ€Π° ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ количСство Ρ‚Π΅Π³ΠΎΠ² Π² сСлСкторС

ΠœΠΎΠΆΠ΅Ρ‚ Π·Π²ΡƒΡ‡Π°Ρ‚ΡŒ слоТно, Π½ΠΎ концСпция простая. Π Π°Π·Π±Π΅Ρ€Π΅ΠΌ ΠΏΡ€ΠΎΡˆΠ»Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

<textarea></textarea>
.form-input {
  height: 50px;
}
textarea {
  height: 200px;
}
  • Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ .form-input
    состоит ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ класса, поэтому Π² качСствС Π²Ρ‚ΠΎΡ€ΠΎΠΉ Ρ†ΠΈΡ„Ρ€Ρ‹ поставим Π΅Π΄ΠΈΠ½ΠΈΡ†Ρƒ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ: 010
  • Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ textarea состоит ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π°. ЗаписываСм Π΅Π΄ΠΈΠ½ΠΈΡ†Ρƒ Π² Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ разряд нашСго числа: 001

Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ понятно, Ρ‡Ρ‚ΠΎ 010 > 001, поэтому свойства Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΈΠΌΠ΅ΡŽΡ‚ больший ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚. ΠœΡ‹ Π·Π°Ρ…ΠΎΡ‚Π΅Π»ΠΈ это ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΠ»ΠΈ наш сСлСктор:

.form-input {
  height: 50px;
}
textarea.form-input {
  height: 200px;
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ порядок сил Π²ΠΎ всСлСнной Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ измСнился:

  • Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ .form-input состоит ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ класса, поэтому Π² качСствС Π²Ρ‚ΠΎΡ€ΠΎΠΉ Ρ†ΠΈΡ„Ρ€Ρ‹ поставим Π΅Π΄ΠΈΠ½ΠΈΡ†Ρƒ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ: 010
  • Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ textarea.form-input
    состоит ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ класса ΠΈ Ρ‚Π΅Π³Π°. ЗаписываСм Π΅Π΄ΠΈΠ½ΠΈΡ†Ρƒ Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΈ Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ разряд нашСго числа: 011

ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ 010 < 011, Π° Π·Π½Π°Ρ‡ΠΈΡ‚ свойства Π²Π½ΡƒΡ‚Ρ€ΠΈ сСлСктора textarea. form-input Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ больший ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚.

Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ Ρ‚Π΅ ΠΈΠ»ΠΈ ΠΈΠ½Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΡ‡Π΅ΠΌΡƒ всС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΡΡ‚Π°Ρ€Π°ΡŽΡ‚ΡΡ максимально ΡƒΠΉΡ‚ΠΈ ΠΎΡ‚ слоТных сСлСкторов. ΠŸΡ€ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠΈ ΠΎΠΏΡ‹Ρ‚Π° Π²Ρ‹ всС Ρ€Π΅ΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ вСс Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π° ΡƒΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, ΠΊΠ°ΠΊ расставлСны ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Ρ‹.


Π‘Π°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½Π°Ρ Ρ€Π°Π±ΠΎΡ‚Π°

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» index.html

Π½Π° своСм ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅.

Π’Π½ΡƒΡ‚Ρ€ΠΈ HTML располоТитС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ запись:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>НСбольшая вёрстка</title>
  <style>
    div {
      width: 500px;
      height: 500px;
      background: #333333;
    }
    #main {
      color: white;
      width: 750px;
    }
    .text-white {
      color: white;
    }
    .alert {
      height: 350px;
      color: gray;
    }
    div {
      background: blue;
    }
    .alert-warning {
      background: #000000;
      color: yellow;
    }
  </style>
</head>
<body>
  <div>Какой-Ρ‚ΠΎ тСкст</div>
</body>
</html>

ΠŸΡ€ΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ²ΡˆΠΈΠΉΡΡ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚


ΠžΡΡ‚Π°Π»ΠΈΡΡŒ вопросы? Π—Π°Π΄Π°ΠΉΡ‚Π΅ ΠΈΡ… Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Β«ΠžΠ±ΡΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅Β»

Π’Π°ΠΌ отвСтят ΠΊΠΎΠΌΠ°Π½Π΄Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Π₯СкслСта ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ студСнты

Об ΠΎΠ±ΡƒΡ‡Π΅Π½ΠΈΠΈ Π½Π° Π₯СкслСтС

Блочная модСль | ΠžΡΠ½ΠΎΠ²Ρ‹ соврСмСнной вСрстки

Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ для доступа ΠΊ 15+ бСсплатным курсам ΠΏΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ с Ρ‚Ρ€Π΅Π½Π°ΠΆΠ΅Ρ€ΠΎΠΌ

Π’ΠΈΠ΄Π΅ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Π½ΠΎ ΠΈΠ·-Π·Π° Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹.

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ сСбС процСсс ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΡΡ‚Π²Π° Π΄ΠΎΠΌΠ°. Условно Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° нСсколько этапов: Π²ΠΎΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ структуры Π΄ΠΎΠΌΠ° ΠΈ Π΅Π³ΠΎ ΠΎΡ‚Π΄Π΅Π»ΠΊΠ°. ΠŸΡ€ΠΈ Π²ΠΎΠ·Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π΄ΠΎΠΌΠ° ΠΌΡ‹ Π·Π°Π»ΠΈΠ²Π°Π΅ΠΌ Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚, Π²ΠΎΠ·Π²ΠΎΠ΄ΠΈΠΌ стСны, устанавливаСм ΠΊΡ€Ρ‹ΡˆΡƒ. ПослС этого ΡƒΠΆΠ΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊ покраскС Π΄ΠΎΠΌΠ°, устанавливаСм ΠΎΠΊΠ½Π° ΠΈ занимаСмся Π΄Π΅ΠΊΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.

ΠŸΡ€ΠΎΡ†Π΅ΡΡ создания вСрстки ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠΈΠΌΠΈ процСссами. Π’ Π½Π΅ΠΉ Ρ‚Π°ΠΊ ΠΆΠ΅ Π²Π°ΠΆΠ½Π° Ρ€ΠΎΠ»ΡŒ возвСдСния структуры ΠΈ ΠΎΡ‚Π΄Π΅Π»ΠΊΠΈ. Для этого ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ нСсколько основных Ρ‚ΠΈΠΏΠΎΠ² элСмСнтов:

  • Π‘Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты (Block level). Π­Ρ‚ΠΈ элСмСнты ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‚ Π·Π° каркас страницы.
  • Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты (Inline level). Они ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ Π½Π°ΠΌ Π² процСссС стилизации страницы ΠΈΠ»ΠΈ добавлСния Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… частСй.

Π’Π°ΠΆΠ½ΠΎ: сами ΠΏΠΎ сСбС элСмСнты HTML Π½Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌΠΈ ΠΈΠ»ΠΈ строчными. HTML β€” всСго лишь Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°. Π—Π° Ρ‚ΠΎ, Π±ΡƒΠ΄Π΅Ρ‚ элСмСнт Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌ ΠΈΠ»ΠΈ строчным, ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ CSS. Для всСх HTML-Ρ‚Π΅Π³ΠΎΠ² ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ стандартныС ΠΌΠΎΠ΄Π΅Π»ΠΈ Π²Ρ‹Π²ΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ настроСны Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, поэтому понятиС Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… ΠΈ строчных элСмСнтов ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ соотносят с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌΠΈ Ρ‚Π΅Π³Π°ΠΌΠΈ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ стандартноС ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Π½Π° страницу. Π’ ΡƒΡ€ΠΎΠΊΠ°Ρ… соотвСтствиС Ρ‚Π΅Π³ΠΎΠ² ΠΈ значСния условно, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ это ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS свойства display.

Π‘Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты

Основная ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтов β€” ΠΎΠ½ΠΈ Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ всю Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΡƒΡŽ ΠΈΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ. Из-Π·Π° этого Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты Π΄ΠΎ ΠΈ послС Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтов Π½Π΅ Π²ΡΡ‚Π°ΡŽΡ‚ Π² ΠΎΠ΄ΠΈΠ½ ряд с Π½ΠΈΠΌΠΈ, Π° Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π΄ΠΎ ΠΈΠ»ΠΈ послС Π½ΠΈΡ…, Π½ΠΎ ΡƒΠΆΠ΅ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ строкС.

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ Ρƒ вас Π΅ΡΡ‚ΡŒ ΡˆΠΊΠ°Ρ„ ΠΈ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ с ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ, Ρ€Π°Π²Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Π΅ ΡˆΠΊΠ°Ρ„Π°. Π’ этом случаС ΠΌΡ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ рядом Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ для этого Ρƒ нас Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ пространства. ЕдинствСнноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ β€” ΠΊΠ»Π°ΡΡ‚ΡŒ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°. Π‘Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты Π²Π΅Π΄ΡƒΡ‚ сСбя Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

Π’ HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅ Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

<div>ΠšΠΎΡ€ΠΎΠ±ΠΊΠ° β„–1</div>
<div>ΠšΠΎΡ€ΠΎΠ±ΠΊΠ° β„–2</div>
<div>ΠšΠΎΡ€ΠΎΠ±ΠΊΠ° β„–3</div>

На ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ этой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΡƒΠΆΠ΅ стало понятно, Ρ‡Ρ‚ΠΎ элСмСнт <div> являСтся Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌ элСмСнтом. Он Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всю Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, ΠΈ ΠΈΠ·-Π·Π° этого Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты Π½Π΅ Π²ΡΡ‚Π°ΡŽΡ‚ с Π½ΠΈΠΌ Π² ΠΎΠ΄ΠΈΠ½ ряд.

Π‘Ρ‚ΠΎΠΈΡ‚ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ понятиС Β«Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всю Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½ΡƒΒ». Π§Ρ‚ΠΎ ΠΆΠ΅ ΠΈΠΌΠ΅Π½Π½ΠΎ скрываСтся Π·Π° этой доступной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ? Π¨ΠΈΡ€ΠΈΠ½Π° всСй страницы, ΡˆΠΈΡ€ΠΈΠ½Π° экрана ΠΈΠ»ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° Π΄ΠΎΡ€ΠΎΠ³ΠΈ Π±Π»ΠΈΠ· Π΄Π΅Ρ€Π΅Π²Π½ΠΈ Π Π°ΠΊΡƒΡˆΠΊΠΈ? На самом Π΄Π΅Π»Π΅ доступная ΡˆΠΈΡ€ΠΈΠ½Π° β€” вся доступная ΡˆΠΈΡ€ΠΈΠ½Π° родитСля. Π’ΠΎ Π΅ΡΡ‚ΡŒ, Ссли наш Π±Π»ΠΎΠΊ Π»Π΅ΠΆΠΈΡ‚ Π²Π½ΡƒΡ‚Ρ€ΠΈ <body>, Ρ‚ΠΎ эта ΡˆΠΈΡ€ΠΈΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π²Π½Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ <body>. Π‘Ρ‚ΠΎΠΈΡ‚ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ <body>, Ρ‚Π°ΠΊ сразу измСнится ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта Π²Π½ΡƒΡ‚Ρ€ΠΈ.

КакиС ΠΆΠ΅ Π΅Ρ‰Π΅ элСмСнты ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌΠΈ? На самом Π΄Π΅Π»Π΅ ΠΈΡ… Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ просто Π΄Π΅Π»Π°Ρ‚ΡŒ пСрСчислСниС Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ Π²Π΅Ρ€Π½ΠΎ. Π’ процСссС углублСния Π² вСрстку Π²Ρ‹ сами ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚Π΅, ΠΊΠ°ΠΊΠΈΠ΅ элСмСнты ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌΠΈ. ΠžΡΠ½ΠΎΠ²Π½Ρ‹ΠΌΠΈ ΠΆΠ΅ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌΠΈ элСмСнтами ΡΠ²Π»ΡΡŽΡ‚ΡΡ:

  • <div>
  • <p>
  • Π’Π΅Π³ΠΈ списков: <ul>/<ol>/<li>
  • Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ: <h2>/<h3>/<h4>/<h5>/<h5>/<h6>

Π’Π½ΡƒΡ‚Ρ€ΡŒ Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтов ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты. Π­Ρ‚ΠΎ позволяСт Π½Π°ΠΌ Π΄Π΅Π»Π°Ρ‚ΡŒ ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ вСрстку, опСрируя Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ созданы.

<div>
  <div>
    <h2>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΡ‚Π°Ρ‚ΡŒΠΈ</h2>
  </div>
  <div>
    <p>А здСсь находится тСкст ΡΡ‚Π°Ρ‚ΡŒΠΈ</p>
  </div>
</div>

Как Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅, Π²Π½ΡƒΡ‚Ρ€ΡŒ Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтов <div> ΠΌΡ‹ ΠΏΠΎΠ»ΠΎΠΆΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚Π°ΠΊΠΈΠ΅ ΠΆΠ΅ Π±Π»ΠΎΠΊΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„. Вакая Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡ‚ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π΄ΠΎΡΡ‚ΠΈΠ³Π°Ρ‚ΡŒ любого уровня.


Π’Π°ΠΆΠ½ΠΎ: Ρ…ΠΎΡ‚ΡŒ HTML ΠΈ позволяСт бСсконСчно Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊΠΈ Π΄Ρ€ΡƒΠ³ Π² Π΄Ρ€ΡƒΠ³Π°, Π»ΡƒΡ‡ΡˆΠ΅ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ Π·Π΄Ρ€Π°Π²Ρ‹ΠΉ смысл. Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ процСсс Π²Ρ‹Π²ΠΎΠ΄Π° вСрстки достаточно Π΄ΠΎΠ»Π³ΠΈΠΉ для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ². На это тратится довольно ΠΌΠ½ΠΎΠ³ΠΎ рСсурсов. И Ρ‡Π΅ΠΌ большС Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡ‚ΡŒ Π±Π»ΠΎΠΊΠΎΠ² Π΄Ρ€ΡƒΠ³ Π² Π΄Ρ€ΡƒΠ³Π°, Ρ‚Π΅ΠΌ слоТнСС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΈ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Ρƒ всС это ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ


Π’Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡ‚ΡŒ Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтов Π΄Ρ€ΡƒΠ³ Π² Π΄Ρ€ΡƒΠ³Π° ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ нСсколькими ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ:

  1. НСльзя Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ
  2. НСльзя Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Ρ‹ Π² ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Ρ‹

Π‘ΠΊΠΎΡ€Π΅Π΅ всСго с этим Ρƒ вас ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ‚, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ сСбС ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° достаточно Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ.

Для создания Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚Π΅Π³ <div>. Он Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… стилСй, ΠΊΡ€ΠΎΠΌΠ΅ Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ отобраТСния. Π­Ρ‚ΠΈΠΌ Ρ‚Π΅Π³ΠΎΠΌ оборачиваСтся связанная информация, ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ каркасы ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Но Ρ‚Π΅Π³ Π½Π΅ являСтся сСмантичным, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½Π΅ нСсСт смысловой Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ сСмантичСских элСмСнтах Π±ΡƒΠ΄Π΅Ρ‚ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΡƒΡ€ΠΎΠΊΠ΅

Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты

Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΎΡ‚Π΄Π΅Π»ΠΎΡ‡Π½Ρ‹ΠΌ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠΌ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ участки тСкста, ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π»ΠΎΠ³ΠΈΠΊΠΈ, ΠΊΠ°ΠΊ Π² случаС со ссылками. Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½Ρ‹ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌ. Они Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ всю Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ ΠΈΠ·-Π·Π° этого Π½Π΅ происходит пСрСноса сосСдних элСмСнтов.

Π”Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π² ΠΏΡ€ΠΎΡˆΠ»Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ строчный элСмСнт:

<div>
  <div>
    <h2>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΡ‚Π°Ρ‚ΡŒΠΈ</h2>
  </div>
  <div>
    <p>А <a href="#">здСсь</a> находится тСкст ΡΡ‚Π°Ρ‚ΡŒΠΈ</p>
  </div>
</div>

Π§Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ? ΠœΡ‹ ΠΎΠ±Π΅Ρ€Π½ΡƒΠ»ΠΈ слово здСсь Π² ссылку, которая ΡƒΠ²Π΅Π΄Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π² Ρ‚ΠΎ мСсто, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ ΡƒΠΊΠ°ΠΆΠ΅ΠΌ. Π§Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ этого Ρ‚Π΅Π³Π°? Бсылка станСт синСго Ρ†Π²Π΅Ρ‚Π° ΠΈ появится ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅. Но сам тСкст останСтся Π½Π° мСстС, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΡˆΠΈΡ€ΠΈΠ½Π° ссылки Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π²Π½Π° ΡˆΠΈΡ€ΠΈΠ½Π΅ слова здСсь.

Если ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ наши строчныС элСмСнты Π² Π²ΠΈΠ΄Π΅ ΠΊΠΎΡ€ΠΎΠ±ΠΎΠΊ, Ρ‚ΠΎ ΠΎΠ½ΠΈ располоТатся ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

Π­Ρ‚ΠΎ главная ΠΎΡ‚Π»ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Ρ‡Π΅Ρ€Ρ‚Π° строчных элСмСнтов. Помимо этого Π΅ΡΡ‚ΡŒ ваТная ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ, связанная с ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ свойств width ΠΈ height Π² CSS. Для строчных элСмСнтов эти свойства Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚. Π˜Ρ… ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π½Π΅ даст Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ эффСкта.

НаиболСС часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌΠΈ строчными элСмСнтами ΡΠ²Π»ΡΡŽΡ‚ΡΡ:

  • <span>
  • <a>
  • Π’Π΅Π³ΠΈ выдСлСния тСкста: <i>/<em>/<b>/<strong>

Π’Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ строчныС элСмСнты Π²Π½ΡƒΡ‚Ρ€ΡŒ строчных. Π­Ρ‚ΠΎ распространСнная ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°, которая Π²Π°ΠΌ пригодится. НапримСр:

<span>
  Π”Π»ΠΈΠ½Π½Ρ‹ΠΉ тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ ΠΎΠ±Π΅Ρ€Π½ΡƒΠ»ΠΈ Π² строчный элСмСнт span. Π’Π½ΡƒΡ‚Ρ€ΠΈ span ΠΌΡ‹
  Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Π³ <i>i</i>, <strong>strong</strong> ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅.
</span>

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ <span> для Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… стилСй Π²Π½ΡƒΡ‚Ρ€ΠΈ Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтов, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„ΠΎΠ². НапримСр,

<p>Π₯СкслСт β€” <span>ΠΎΠ½Π»Π°ΠΉΠ½</span> курсы ΠΏΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ</p>

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ <span> для создания Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… стилСй, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ для Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° ΠΈΠ»ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Π°


Π’Π°ΠΆΠ½ΠΎ: Π½Π΅ Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°ΠΉΡ‚Π΅ Π²Π½ΡƒΡ‚Ρ€ΡŒ строчных элСмСнтов Π±Π»ΠΎΡ‡Π½Ρ‹Π΅. Π­Ρ‚ΠΎ Π½Π°Ρ€ΡƒΡˆΠ°Π΅Ρ‚ сСмантику ΠΈ услоТняСт Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°


Блочная модСль Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°

Π•Ρ‰Π΅ Π΄ΠΎ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с CSS ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ элСмСнты Π½Π° Π²Π°ΡˆΡƒ страницу. Помимо СстСствСнных свойств высоты ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹, любой элСмСнт Π½Π° страницС ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ свойства:

  • padding β€” Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы элСмСнта
  • margin β€” Π’Π½Π΅ΡˆΠ½ΠΈΠ΅ отступы ΠΎΡ‚ элСмСнта
  • border β€” Π’ΠΈΠ΄ΠΈΠΌΡ‹Π΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнта

КаТдоС ΠΈΠ· Π½ΠΈΡ… Π½Π΅ просто выполняСт Ρ‚Ρƒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, которая ΡƒΠΊΠ°Π·Π°Π½Π°, Π½ΠΎ ΠΈ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ влияСт Π½Π° ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹Π΅ значСния высоты ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ элСмСнта.

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ Ρƒ нас Π΅ΡΡ‚ΡŒ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ со стороной 150 пиксСлСй. ΠœΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΊ Π½Π΅ΠΌΡƒ Ρ€Π°ΠΌΠΊΡƒ Π² 2 пиксСля, Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ отступ Π² 10 пиксСлСй с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ стороны ΠΈ ΠΏΠΎ 20 пиксСлСй внСшнСго отступа с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ стороны.

Бколько мСста Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ наш ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ Π½Π° страницС? Для этого Π½Π°ΠΌ Π½Π°Π΄ΠΎ ΡΡƒΠΌΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ всС значСния.

Π¨ΠΈΡ€ΠΈΠ½Π°: 150px (Π½Π°Ρ‡Π°Π»ΡŒΠ½Π°Ρ ΡˆΠΈΡ€ΠΈΠ½Π°) + 2px (Π³Ρ€Π°Π½ΠΈΡ†Π° справа) + 2px (Π³Ρ€Π°Π½ΠΈΡ†Π° слСва) + 10px (Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ отступ справа) + 10px (Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ отступ слСва) + 20px (Π’Π½Π΅ΡˆΠ½ΠΈΠΉ отступ справа) + 20px (Π’Π½Π΅ΡˆΠ½ΠΈΠΉ отступ слСва) = 214px

Высота: 150px (Π½Π°Ρ‡Π°Π»ΡŒΠ½Π°Ρ высота) + 2px (Π³Ρ€Π°Π½ΠΈΡ†Π° свСрху) + 2px (Π³Ρ€Π°Π½ΠΈΡ†Π° снизу) + 10px (Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ отступ свСрху) + 10px (Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ отступ снизу) + 20px (Π’Π½Π΅ΡˆΠ½ΠΈΠΉ отступ свСрху) + 20px (Π’Π½Π΅ΡˆΠ½ΠΈΠΉ отступ снизу) = 214px

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅

Π’ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ Π»ΡŽΠ±Ρ‹ΠΌ ΠΎΠ½Π»Π°ΠΉΠ½ сСрвисом, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΌΠ΅Π΅Ρ‚ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ HTML Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ. НапримСр, https://htmlcodeeditor.com/ .

Π’ΡΡ‚Π°Π²ΡŒΡ‚Π΅ Π² Π»Π΅Π²ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ:

<div>
  <div>
    <h2>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΡ‚Π°Ρ‚ΡŒΠΈ</h2>
  </div>
  <div>
    <p>А здСсь находится тСкст ΡΡ‚Π°Ρ‚ΡŒΠΈ</p>
  </div>
</div>

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ ΠΈ строчныС Ρ‚Π΅Π³ΠΈ, Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ ΠΈΡ…. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.


Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹
  1. ВСрстка тСкста. Бписки β€” HTML Basics: Π£Ρ€ΠΎΠΊ 3

ΠžΡΡ‚Π°Π»ΠΈΡΡŒ вопросы? Π—Π°Π΄Π°ΠΉΡ‚Π΅ ΠΈΡ… Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Β«ΠžΠ±ΡΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅Β»

Π’Π°ΠΌ отвСтят ΠΊΠΎΠΌΠ°Π½Π΄Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Π₯СкслСта ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ студСнты

Об ΠΎΠ±ΡƒΡ‡Π΅Π½ΠΈΠΈ Π½Π° Π₯СкслСтС

ΠžΡΠ½ΠΎΠ²Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ | ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ | Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Android

ΠœΠ°ΠΊΠ΅Ρ‚ опрСдСляСт Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ структуру интСрфСйса ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ с вашим ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ. Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² Π΄Π΅ΡΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Android прСдоставляСт ряд Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ, каноничСских ΠΎΡ‚ΠΏΡ€Π°Π²Π½Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ отобраТСния ΠΈ позиционирования ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

Π’Ρ‹Π²ΠΎΠ΄Ρ‹

  • Π£Π²Π°ΠΆΠ°ΠΉΡ‚Π΅ бСзопасныС области устройства, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ части ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ дисплСй Π²Ρ‹Ρ€Π΅Π·Ρ‹, вставки ΠΎΡ‚ края Π΄ΠΎ края, Π±ΠΎΠΊΠΎΠ²Ρ‹Π΅ дисплСи, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹Π΅ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ ΠΈ систСмныС Π±Π°Ρ€Ρ‹.

  • Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ: ΠžΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€ΠΎΠΉ.

    Π£Π²Ρ‹, ваш Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π²ΠΈΠ΄Π΅ΠΎ HTML5. Π­Ρ‚ΠΎ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ! Π’Ρ‹ всС Π΅Ρ‰Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π΅Π³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²ΠΈΠ΄Π΅ΠΎΠΏΠ»Π΅Π΅Ρ€Π°. Π’ΠΈΠ΄Π΅ΠΎ 1: ΠžΠ±Π΅ΡΠΏΠ΅Ρ‡Π΅Π½ΠΈΠ΅ Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° для взаимодСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ

ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅: Π‘ΡƒΠ΄ΡŒΡ‚Π΅ остороТны, закрывая содСрТимоС ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€ΠΎΠΉ.
  • БохраняйтС основныС взаимодСйствия, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ основная навигация, Π½Π° доступном экранС ΠΎΠ±Π»Π°ΡΡ‚ΡŒ.

    Рисунок 1. ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ дСйствий (FAB) ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ видная ΠΈ доступная Ρ‚ΠΎΡ‡ΠΊΠ° взаимодСйствия
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ сдСрТиваниС для Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ связанного содСрТимого, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΏΠΎ содСрТимому ΠΈ дСйствия.

    Рисунок 2. ΠšΠ°Ρ€Ρ‚Ρ‹ , ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ явноС Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ для Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ дСйствиями
  • ΠžΠ±Π΅ΡΠΏΠ΅Ρ‡ΡŒΡ‚Π΅ согласованноС Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΡ…ΠΎΠΆΠ΅Π³ΠΎ содСрТимого ΠΈ элСмСнтов ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.

    НС слСдуСт: Π½Π°Ρ€ΡƒΡˆΠ°Ρ‚ΡŒ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΠΎΡΡ‚ΡŒ Π½Π΅Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎΠ΅ располоТСниС ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Ρ… элСмСнтов, ΠΈΠ·-Π·Π° Ρ‡Π΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ бСссистСмно.

    Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ: ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ постоянный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°ΠΊ элСмСнты.

    Рисунок 3: НС Π½Π°Ρ€ΡƒΡˆΠ°ΠΉΡ‚Π΅ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΠΎΡΡ‚ΡŒ
  • НС ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅ΡΡŒ ΠΏΠΎΡ€Ρ‚Ρ€Π΅Ρ‚Π½ΠΎΠΉ ΠΈΠ»ΠΈ ΠΈΠ΄Π΅Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ: рассмотритС Π΄Ρ€ΡƒΠ³ΠΎΠΉ аспСкт ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ, классы Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒΡΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ.

  • НС ΠΏΠ΅Ρ€Π΅Π³Ρ€ΡƒΠΆΠ°ΠΉΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ слишком большим количСством дСйствий Π·Π° просмотр.

  • ΠŸΡ€ΠΈ создании ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ содСрТимоС Π΄ΠΎΠ»ΠΆΠ½ΠΎ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅. ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅, ограничСния ΠΈΠ»ΠΈ условия Π³Ρ€Π°Π²ΠΈΡ‚Π°Ρ†ΠΈΠΈ. Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Ρ‚ΠΎ, ΠΊΠ°ΠΊ изобраТСния Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° ΠΈΡ… ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ для ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ отобраТСния.

Части Ρ‚ΠΈΠΏΠΈΡ‡Π½ΠΎΠ³ΠΎ экрана прилоТСния Android

Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Android состоят ΠΈΠ· областСй, Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Ρ… систСмными панСлями, ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ Ρ‚Π΅Π»ΠΎ.

Рисунок 4: Части прилоТСния Android: систСмныС ΠΏΠ°Π½Π΅Π»ΠΈ (1), Ρ€Π°ΠΉΠΎΠ½ плавания (2), ΠΈ основной тСкст (3)

БистСмныС ΠΏΠ°Π½Π΅Π»ΠΈ

Π‘Ρ‚Ρ€ΠΎΠΊΠ° состояния ΠΈ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, вмСстС Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Π΅ систСмными панСлями, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ Π²Π°ΠΆΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, Ρ‚Π°ΠΊΡƒΡŽ ​​как ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ заряда Π±Π°Ρ‚Π°Ρ€Π΅ΠΈ, врСмя ΠΈ увСдомлСния, ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ прямоС взаимодСйствиС с устройством ΠΈΠ· любого мСста. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ систСмС Π±Π°Ρ€Ρ‹.

БистСмныС ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½Π΅ΠΎΡ‚ΡŠΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ интСрфСйса устройства. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΈΡ… Π² Ρ‚ΠΎΠΏ слой Π²Π°ΡˆΠΈΡ… Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ экрана. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡˆΠΈΠ±ΠΎΡ‡Π½ΠΎ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ†Π΅Π»ΡŒ состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΈΡ…, Π²Ρ‹ упуститС ΠΏΡ€ΠΈ ΠΈΡ… стилизации, ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹ΠΌ.

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ полосы Π² качСствС Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ слоя. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ android:navigationBarColor ΠΈ android:statusBarColor для примСнСния Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΊ систСмным полосам Π² вашСм ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Ρ‚Π΅ΠΌΠ°.

Рисунок 5: БистСмныС ΠΏΠ°Π½Π΅Π»ΠΈ (1)

ΠžΠ±Π»Π°ΡΡ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

Навигация прСдставляСт Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ возмоТности, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ доступ ΠΊ Π²Π°ΠΆΠ½Ρ‹ΠΌ дСйствиям ΠΈΠ»ΠΈ Π½Π° ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅ Android.

Рис. 6: ΠžΠ±Π»Π°ΡΡ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ (2)

ΠžΠ±Π»Π°ΡΡ‚ΡŒ Ρ‚Π΅Π»Π°

ΠžΠ±Π»Π°ΡΡ‚ΡŒ Ρ‚Π΅Π»Π° содСрТит содСрТимоС экрана. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Ρ‚Π΅Π»Π° состоит ΠΈΠ· Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ. Он Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒΡΡ ΠΏΠΎΠ΄ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ ΠΈ систСмой Π±Π°Ρ€Π½Ρ‹Π΅ Ρ€Π΅Π³ΠΈΠΎΠ½Ρ‹.

ΠžΠ±ΡŠΡΠ²ΠΈΡ‚ΡŒ WindowCompat.setDecorFitsSystemWindows(ΠΎΠΊΠ½ΠΎ, лоТь) для вставки ΠΎΡ‚ края Π΄ΠΎ края.

Рисунок 7: ΠžΠ±Π»Π°ΡΡ‚ΡŒ Ρ‚Π΅Π»Π°

Для опрСдСлСния подходящСй ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ ΠΈ шаблонов Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ для вашСго ΠΌΠ°ΠΊΠ΅Ρ‚, ΡΡ‚Ρ€Π΅ΠΌΠΈΡ‚Π΅ΡΡŒ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ с вашим ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π΅ вашСго прилоТСния. Π­Ρ‚ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ вас Π΄ΠΈΠ·Π°ΠΉΠ½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ Π½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, создавая ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ.

Бостав ΠΈ структура ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΏΠΎΡ‚ΠΎΠΊ ΠΈ Ρ€ΠΈΡ‚ΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ структуры ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² сдСрТивания для ваш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

Базовая структура: ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ поля ΠΈ ΠΊΠΎΠ»ΠΎΠ½Π½Ρ‹ для Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠ³Ρ€Π°ΠΆΠ΄Π΅Π½ΠΈΠΉ

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ созданиС Ρ†Π΅Π»ΡŒΠ½ΠΎΠΉ конструкции с согласованными ограТдСниями, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ поля ΠΈ столбцы ΠΊ вашим ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌ.

Поля ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» ΠΌΠ΅ΠΆΠ΄Ρƒ Π»Π΅Π²Ρ‹ΠΌ ΠΈ ΠΏΡ€Π°Π²Ρ‹ΠΌ краями экрана ΠΈ содСрТимого. Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ поля для ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° составляСт 16 dp, Π½ΠΎ поля Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ большиС экраны. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Ρ‚Π΅Π»Π° вашСго прилоТСния ΠΈ дСйствия Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… ΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ этим полям.

На этом шагС Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ вставку бСзопасных Π·ΠΎΠ½ ΠΈΠ»ΠΈ вставок. Вставки систСмной ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΏΠΎΠΏΠ°Π΄Π°Π½ΠΈΠ΅ Π²Π°ΠΆΠ½Ρ‹Ρ… дСйствий ΠΏΠΎΠ΄ систСмныС ΠΏΠ°Π½Π΅Π»ΠΈ. Π‘ΠΌ. НарисуйтС свой ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π·Π° систСмной панСлью для получСния ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

Рисунок 8: Поля (1) ΠΈ вставка систСмной ΠΏΠ°Π½Π΅Π»ΠΈ (2)

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ столбцы для создания Π³ΠΈΠ±ΠΊΠΎΠΉ структуры сСтки для согласованного выравнивания ΠΈ для обСспСчСния Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ опрСдСлСния ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΏΡƒΡ‚Π΅ΠΌ раздСлСния содСрТимого Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π»Π° ΠΎΠ±Π»Π°ΡΡ‚ΡŒ. ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈΠ΄Π΅Ρ‚ Π² областях экрана, содСрТащих столбцы. Π­Ρ‚ΠΈ столбцы ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ структуру Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ, обСспСчивая ΡƒΠ΄ΠΎΠ±Π½ΡƒΡŽ структуру для ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ элСмСнты.

Рисунок 9: ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ экраны часто дСлятся Π½Π° Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ столбца

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ сСтка столбцов для выравнивания содСрТимого с Π±Π°Π·ΠΎΠ²ΠΎΠΉ сСткой Π½ΠΎ сохраняйтС Π³ΠΈΠ±ΠΊΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹. Π‘Π΅Ρ‚ΠΊΠ° столбца ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ Ρ„Π°ΠΊΡ‚ΠΎΡ€Ρ‹, измСняя Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ столбцов ΠΈ количСство столбцов ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ нСобходимости. Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Ρ‚ΠΎΡ‡ΠΊΠ°Ρ…, позволяя Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ содСрТимоС. Π˜Π·Π±Π΅Π³Π°ΠΉΡ‚Π΅ Π±Ρ‹Ρ‚ΡŒ слишком Π΄Π΅Ρ‚Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ с сСткой столбцов, для этого ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° базовая сСтка: обСспСчСниС согласованных Π΅Π΄ΠΈΠ½ΠΈΡ† расстояния.

Π‘ΡƒΠ΄ΡŒΡ‚Π΅ остороТны ΠΏΡ€ΠΈ создании ΡΠΎΠΏΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ сСтки рядов, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ это ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎ ориСнтациям ΠΈ Ρ„ΠΎΡ€ΠΌ-Ρ„Π°ΠΊΡ‚ΠΎΡ€Π°ΠΌ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ установлСниС ΠΏΡ€Π°Π²ΠΈΠ» заполнСния обСспСчит Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡƒΡŽ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ.

Π£Π²Ρ‹, ваш Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π²ΠΈΠ΄Π΅ΠΎ HTML5. Π­Ρ‚ΠΎ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ! Π’Ρ‹ всС Π΅Ρ‰Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π΅Π³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²ΠΈΠ΄Π΅ΠΎΠΏΠ»Π΅Π΅Ρ€Π°. Π’ΠΈΠ΄Π΅ΠΎ 2: НачинаСм Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ копию Π² структуру ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Поля Π·Π°Ρ‰ΠΈΡ‰Π°ΡŽΡ‚ содСрТимоС ΠΎΡ‚ ΠΊΡ€Π°Π΅Π² экрана. ΠšΠΎΠ»ΠΎΠ½Π½Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ согласованная структура ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»ΠΎΠ² ΠΈ выравнивания.

ИспользованиС сдСрТивания для Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ элСмСнтов

ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ относится ΠΊ совмСстному использованию ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ² ΠΈ Π²ΠΈΠ΄ΠΈΠΌΡ‹Ρ… элСмСнтов для ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΡƒ. ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ β€” это Ρ„ΠΎΡ€ΠΌΠ°, которая прСдставляСт собой Π·Π°ΠΌΠΊΠ½ΡƒΡ‚Ρ‹ΠΉ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ. Π’ ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ схоТиС содСрТаниС ΠΈΠ»ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ ΠΎΡ‚Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΈΡ… ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠ΅ пространство, Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΈ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΠΈ.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠΈΠ΅ элСмСнты вмСстС с ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠΌ ΠΈΠ»ΠΈ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π΅.

Рисунок 10: Π Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π½Π° Π΄Π²Π΅ большиС Π³Ρ€ΡƒΠΏΠΏΡ‹ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ основная копия

НСявноС Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ пустоС пространство для Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ содСрТимого для создания Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ явноС сдСрТиваниС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ‚Π°ΠΊΠΈΠ΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹, ΠΊΠ°ΠΊ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒ Π»ΠΈΠ½ΠΈΠΈ ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ для Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

На ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ рисункС ΠΏΠΎΠΊΠ°Π·Π°Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования нСявного Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ основной экзСмпляр. Π‘Π΅Ρ‚ΠΊΠ° столбцов ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для выравнивания ΠΈ создания Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹ явно содСрТатся Π² ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°Ρ…. ИспользованиС ΠΈΠΊΠΎΠ½ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ ΠΈ иСрархия Ρ‚ΠΈΠΏΠΎΠ² для большСго Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ раздСлСния.

Рисунок 11: ΠŸΡ€ΠΈΠΌΠ΅Ρ€ нСявного вмСщСния

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°

Android ΠΈΠΌΠ΅Π΅Ρ‚ нСсколько способов ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ элСмСнтов ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΡ… ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ силу тяТСсти, ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅.

Рисунок 12: ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ , ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π·Π°Ρ‰ΠΈΡ‚Π½ΠΎΠΉ ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ элСмСнтов

Гравитация являСтся стандартом для размСщСния ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ большСго ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… случаСв использования. На ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ рисункС ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π½Π°Ρ‡Π°Π»ΠΎ ΠΈ Ρ†Π΅Π½Ρ‚Ρ€ (1), Π²Π΅Ρ€Ρ… ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ (2), Π²Π½ΠΈΠ·Ρƒ слСва (3), ΠΈ ΠΊΠΎΠ½Π΅Ρ† ΠΈ ΠΏΡ€Π°Π²ΠΎ (1).

Рисунок 13: Гравитация позиционирования Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ просмотров
ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π΅ΡˆΠ°ΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для размСщСния динамичСского содСрТимого, ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ устройства ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ экрана. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ фиксированными ΠΈΠ»ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ.

ΠžΡ‚ΠΌΠ΅Ρ‡Π°Ρ, ΠΊΠ°ΠΊ изобраТСния ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² своих ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°Ρ… с ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ выглядит Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ выглядСло нСзависимо ΠΎΡ‚ контСкста устройства, Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС основной фокус изобраТСния ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½Ρ‹ΠΌ. Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹, изобраТСния ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ слишком малСнькими ΠΈΠ»ΠΈ большими для ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π½Π΅ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ послСдствия.

Рисунок 14: Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½ΠΎΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ обСспСчиваСт располагаСтся ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° нСзависимо ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° устройства

НСобозначСнноС содСрТимоС ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΎΠΆΠΈΠ΄Π°Π΅Ρ‚Π΅ ΠΈΠ»ΠΈ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅.

Рис. 15: НСобозначСнноС содСрТимоС ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½Ρ‹Π΅ способы
Π—Π°ΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚

МногиС элСмСнты ΠΈΠΌΠ΅ΡŽΡ‚ встроСнныС взаимодСйствия, ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ слотов ΠΈΠ»ΠΈ подмости. НСкоторыС элСмСнты ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ ΠΎΡΡ‚Π°Π²Π°Π»ΠΈΡΡŒ фиксированными, Π° Π½Π΅ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Π»ΠΈ Π½Π° измСнСния. ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ дСйствий (FAB), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ содСрТат Π²Π°ΠΆΠ½Ρ‹Π΅ дСйствия.

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ AlignmentLine для создания настраиваСмых Π»ΠΈΠ½ΠΈΠΉ выравнивания, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΌΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ. ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для выравнивания ΠΈ позиционирования своих Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтов.

Рисунок 16: НС Π½Π°Ρ€ΡƒΡˆΠ°Ρ‚ΡŒ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΠΎΡΡ‚ΡŒ

НС Π΄Π΅Π»Π°Ρ‚ΡŒ: Π½Π°Ρ€ΡƒΡˆΠ°Ρ‚ΡŒ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΠΎΡΡ‚ΡŒ Π½Π΅ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Ρ‹, ΠΊΠ°ΠΊ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ бСссистСмным.

Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ: ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°ΠΊ элСмСнты.

Компоновка ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²

ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» 3 ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° ΠΈΠΌΠ΅ΡŽΡ‚ собствСнныС ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ ΠΈ состояния для взаимодСйствия ΠΈ содСрТания.

Compose прСдоставляСт ΡƒΠ΄ΠΎΠ±Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ для объСдинСния ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² Π² ΠΎΠ±Ρ‰ΠΈΠ΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ экрана. БоставныС элСмСнты, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Scaffold, ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ слоты для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡ‚ΡƒΡŽΡ‰ΠΈΠ΅ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты экрана. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π΅ ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ°.

ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΈ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

Если вашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ содСрТит нСсколько ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² назначСния для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΌΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠ°Ρ€Ρ‹ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ прилоТСниями. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρƒ ΠΌΠ½ΠΎΠ³ΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ ΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠΎΠ΄Π΅Π»ΠΈ для этих ΠΏΠ°Ρ€, ваш ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятным для Π½ΠΈΡ….

Компоновка ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

ПанСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ ящик ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² качСствС основной Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ для Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΡ… прСдставлСний ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈ основных ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² назначСния Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

ПанСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΎΡ‚ Ρ‚Ρ€Π΅Ρ… Π΄ΠΎ пяти ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² назначСния ΠΏΠΎ всСму ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ. Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ прСобразуСтся Π² Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΡƒΡŽ Ρ€Π΅ΠΉΠΊΡƒ для Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экраны.

Π₯отя панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ пяти ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² назначСния, шаблон Π½Π΅ Ρ‚Π°ΠΊ ΠΈΠ΄Π΅Π°Π»Π΅Π½, ΠΊΠ°ΠΊ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΈΠ·-Π·Π° нСобходимости Π΄ΠΎΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π΄ΠΎ вСрхняя ΠΏΠ»Π°Π½ΠΊΠ° Π½Π° ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ….

Рисунок 17: ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π² панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» 3 Π’ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈ ниТняя панСль ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π²Ρ‚ΠΎΡ€ΠΈΡ‡Π½Ρ‹Π΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ основным навигация ΠΈΠ»ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² прСдставлСниях Π΄Π΅Ρ‚Π΅ΠΉ.

Рис. 18. Π’ΠΊΠ»Π°Π΄ΠΊΠΈ Π΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ ΠΊΠ°ΠΊ Π²Ρ‚ΠΎΡ€ΠΈΡ‡Π½Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ для Π³Ρ€ΡƒΠΏΠΏΠΎΠ²ΠΎΠ΅ ΠΎΠ΄Π½ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ содСрТимоС (Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅)

ДСйствия ΠΌΠ°ΠΊΠ΅Ρ‚Π°

ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»Π΅Π½ΠΈΠ΅ элСмСнтов управлСния, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ дСйствия. ΠžΠ±Ρ‰ΠΈΠ΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ дСйствия Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° дСйствия (FAB) ΠΈ мСню.

Для дСйствий Π²Ρ‹ΡΡˆΠ΅ΠΉ ваТности FAB прСдоставляСт большой ΠΈ замСтная ΠΊΠ½ΠΎΠΏΠΊΠ° для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. ΠžΠ±Π΅ΡΠΏΠ΅Ρ‡ΡŒΡ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ дСйствиС Π·Π° Ρ€Π°Π· Π² этот ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ. FAB ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… ΠΈ Π² Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ΅, которая Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя этикСтка. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Scaffold, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ FAB, ΡƒΠ±Π΅Π΄ΠΈΠ²ΡˆΠΈΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ всСгда Π²ΠΈΠ΄Π΅Π½ Π΄Π°ΠΆΠ΅ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅.

Рисунок 19: ΠŸΠ»Π°Π²Π°ΡŽΡ‰Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° дСйствия (FAB), ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π°Ρ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ для быстрого добавлСния растСний Π² Π³Π°Π»Π΅Ρ€Π΅ΡŽ растСний

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ второстСпСнныС дСйствия Π½Π° Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ»ΠΈ, Ссли ΠΎΠ½Π° сгруппирована рядом связанный ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π° страницС.

Рисунок 20: ДСйствиС оповСщСния Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΡ€ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ подробностСй (слСва) ΠΈ Π·Π½Π°Ρ‡ΠΎΠΊ пСрСполнСния Π² строкС элСмСнта списка (справа)

Для Π»ΡŽΠ±Ρ‹Ρ… Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… дСйствий, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ быстро ΠΈΠ»ΠΈ часто, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ эти дСйствия Π² Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΌ мСню.

ΠšΠ°Π½ΠΎΠ½ΠΈΡ‡Π΅ΡΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ каноничСскиС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π² качСствС ΠΎΡ‚ΠΏΡ€Π°Π²Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ, Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΠΊ использованию ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ, ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊ распространСнным случаям использования ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌ экрана. Π­Ρ‚ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ эстСтичный ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ, ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹ΠΉ ΠΈΠ· ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π° 3 руководство.

Рисунок 21: ΠšΠ°Π½ΠΎΠ½ΠΈΡ‡Π΅ΡΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹

ΠŸΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° Android Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ спСциализированныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅Π»Π°ΡŽΡ‚ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² простыми ΠΈ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΌΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Jetpack Compose ΠΈΠ»ΠΈ API прСдставлСний.

ΠœΠ°ΠΊΠ΅Ρ‚ с ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΌ списком

ΠœΠ°ΠΊΠ΅Ρ‚ с ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΌ списком позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ списки элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΠΈΡΠ°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ, ΠΏΠΎΡΡΠ½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ ΠΈΠ»ΠΈ другая Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ информация β€” Π΄Π΅Ρ‚Π°Π»ΡŒ ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚Π°. Для ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² экрана Π²ΠΈΠ΄Π΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ список ΠΈΠ»ΠΈ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΉ Π²ΠΈΠ΄. ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ коллСкция содСрТимого Π² Π²ΠΈΠ΄Π΅ строк, списки ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½Π΅Π½Π½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² для ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. List-detail идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΎΠ±ΠΌΠ΅Π½Π° сообщСниями, ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ΠΎΠ² ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚ΠΎΠ², Ρ„Π°ΠΉΠ»ΠΎΠ²Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΈΠ»ΠΈ любоС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ содСрТимоС ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Π² Π²ΠΈΠ΄Π΅ списка элСмСнтов ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ статичСским ΠΈΠ»ΠΈ динамичСским.

  • ДинамичСский ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ β€” это ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ вашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ обслуТиваСт Β«Π½Π° Π»Π΅Ρ‚ΡƒΒ» ΠΈ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈΠ»ΠΈ ΠΎΡ‚Ρ€Π°ΠΆΠ°Ρ‚ΡŒ прСдпочтСния ΠΈΠ»ΠΈ дСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. НапримСр, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ сСбС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с фотографиями с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡ‹ΠΌ списком созданных ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ большС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π­Ρ‚ΠΈ изобраТСния ΡΠ²Π»ΡΡŽΡ‚ΡΡ динамичСским ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ.
  • БтатичСскоС содСрТимоС прСдставляСт собой ТСстко Π·Π°ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ содСрТимоС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ внСсСниС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ нСпосрСдствСнно Π² ΠΊΠΎΠ΄ вашСго прилоТСния. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ статичСского ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°: изобраТСния ΠΈ тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ.

Π€Π°ΠΉΠ» Now in Android Figma обСспСчиваСт нСсколько ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹. Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Π° одномСрная коллСкция содСрТимого.

Рисунок 22: ΠžΠ΄Π½ΠΎΠΌΠ΅Ρ€Π½Π°Ρ коллСкция содСрТимого

Бписки ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² 3 для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΉ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ Π² спискС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΈ спСц.

ΠœΠ°ΠΊΠ΅Ρ‚ Ρ„ΠΈΠ΄Π°

Рис. 23: ЀотогалСрСя Π² Π²ΠΈΠ΄Π΅ сСтки являСтся распространСнным Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ Ρ„ΠΈΠ΄Π°

Компоновка Ρ„ΠΈΠ΄Π° упорядочиваСт эквивалСнтныС элСмСнты ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² настраиваСмой сСткС для быстрый, ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ просмотр большого количСства ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. (Π’ΠΈΠ΄Π΅Ρ‚ΡŒ ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» 3 Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΏΠΎ использованию ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ Π² ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ.) ΠšΠ°Π½Π°Π»Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ конфигурация Π½Π° основС списка ΠΈΠ»ΠΈ сСтки Π½Π° ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹Ρ… дисплСях, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π½Π° ΠΊΠ°Ρ€Ρ‚Π°Ρ… ΠΈΠ»ΠΈ ΠΏΠ»ΠΈΡ‚ΠΊΠ°. ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ динамичСским, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠ½ «подаСтся» ΠΈΠ· динамичСского внСшнСго источника. источник, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ API.

ΠœΠ°ΠΊΠ΅Ρ‚ сСтки состоит ΠΈΠ· строк ΠΈ столбцов, состоящих ΠΈΠ· ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅ΠΌΡ‹Ρ… ΠΈΠ»ΠΈ явныС ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ сдСрТивания. (Π‘ΠΌ. содСрТаниС Π½Π° этом страницу для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.) ΠœΠ°ΠΊΠ΅Ρ‚ сСтки ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π±ΠΎΠ»Π΅Π΅ ТСстко ΠΈΠ»ΠΈ Π² ΡˆΠ°Ρ…ΠΌΠ°Ρ‚Π½ΠΎΠΌ порядкС Π²Π°Ρ€ΡŒΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ строки ΠΈ столбцы. Оба Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»ΠΎΠ² ΠΈ Π»ΠΎΠ³ΠΈΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π·Π°ΠΏΡƒΡ‚Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. РуководящиС ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ изучСния ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π° 3 ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Ρ„ΠΈΠ΄ΠΎΠ².

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΊΠ°Π½Π°Π»Π° Π² Compose с ΠΎΡ‚Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ списками ΠΈΠ»ΠΈ ΠΎΡ‚Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ сСтками, ΠΈΠ»ΠΈ Π² просмотрах с RecyclerView ΠΈΠ»ΠΈ CardView .

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΏΠ°Π½Π΅Π»ΠΈ

Для мобильного прСдставлСния ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ содСрТимоС ΠΈΠ»ΠΈ элСмСнты управлСния. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Π² Ρ„ΠΎΡ€ΠΌΠ΅ листов ΠΈΠ»ΠΈ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ², ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ основному Π²ΠΈΠ΄Ρƒ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ сфокусированным ΠΈ Π½Π΅Π·Π°Π³Ρ€ΠΎΠΌΠΎΠΆΠ΄Π΅Π½Π½Ρ‹ΠΉ. ΠžΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с руководством M3 ΠΏΠΎ использованию каноничСской ΠΎΠΏΠΎΡ€Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ. ΠΌΠ°ΠΊΠ΅Ρ‚.

Рисунок 24: НиТниС листы ΠΌΠΎΠ³ΡƒΡ‚ Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ Π² качСствС Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ содСрТимого для основной Π²ΠΈΠ΄

Π£Π·Π½Π°ΠΉΡ‚Π΅ ΠΎ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… M3 для Π½ΠΈΠΆΠ½ΠΈΡ… листов.

ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ

Π’Π²ΠΎΠ΄Ρ‹, содСрТимоС ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ дСйствия ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π° ΠΈΠ»ΠΈ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌ. ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ, Π½ΠΎ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ слСдуйтС ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠ΅, столбцам ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°ΠΌ.

ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ Ρ‚ΠΈΠΏΠΎΠ² ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ². НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€ΡƒΡΠ΅Π»ΡŒ ΠΈΠ»ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° с Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ. Или Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠ°Ρ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° с Π΄Π°Π½Π½Ρ‹ΠΌΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ списка.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ содСрТимоС Π² ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… строках ΠΈΠ»ΠΈ столбцах с Π»Π΅Π½ΠΈΠ²Ρ‹ΠΌΠΈ строками ΠΈ Π»Π΅Π½ΠΈΠ²Ρ‹ΠΌΠΈ столбцы.

Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎΠ± основах ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ Compose ΠΈ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ составляСт ΠΊΠΎΠΌΠΏΠΎΠ½ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚.

Рисунок 25. ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ Π³Ρ€ΡƒΠΏΠΏ, списков ΠΈ сСток.

АутСнтификация β€” это ΠΎΠ±Ρ‰ΠΈΠΉ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ рисункС.

Рис. 26. АутСнтификация Π² качСствС ΠΎΠ±Ρ‰Π΅Π³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°

ΠŸΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ β€” Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ распространСнный ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ Π² иммСрсивном Ρ€Π΅ΠΆΠΈΠΌΠ΅.

Рисунок 27: ΠŸΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ Π² иммСрсивном Ρ€Π΅ΠΆΠΈΠΌΠ΅

Если Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ с прСдставлСниями вмСсто создания, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ConstraintLayout для размСщСния прСдставлСний Π² соотвСтствии с ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡΠΌΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΠ΄Π½ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Π΅ прСдставлСния ΠΈ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ большиС ΠΈ слоТныС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹. ConstraintLayout позволяСт Π²Π°ΠΌ ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ пСрСтаскивания вмСсто Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ XML с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ создании ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ².

Адаптация ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ²

Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½ β€” это ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΊ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ Ρ‚ΠΎΡ‡ΠΊΠΈ останова ΠΈ устройства. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ ΠΌΡ‹ считаСм ΡˆΠΈΡ€ΠΈΠ½Ρƒ устройства ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, Π³Π΄Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒΡΡ ΠΈΠ»ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ. И Web, ΠΈ Android ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π³ΠΈΠ±ΠΊΠΈΠ΅ сСтки ΠΈ изобраТСния, для создания ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π»ΡƒΡ‡ΡˆΠ΅ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΡŽΡ‚ Π½Π° ΠΈΡ… контСкст.

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΏΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ, ΠΊΠ°ΡΠ°ΡŽΡ‰ΠΈΠ΅ΡΡ Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΊ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌ экрана, см. Руководство Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° ΠΏΠΎ созданию Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π² Compose ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ M3 Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ большой экран Android каноничСская галСрСя для вдохновСния ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ большого экрана ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹.

Π₯отя Π½Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ доступно Π½Π° экранС любого Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΎΠ½ΠΎ позволяСт вашим ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ большС свободы Π² ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ эргономики, удобства использования ΠΈ качСства ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

  • Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ экраны (ΡΠΎΠΎΠ±Ρ‰Π°Ρ‚ΡŒ основныС ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ ΠΈΠ»ΠΈ вашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅) с Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ классов Π² качСствС Ρ‚ΠΎΡ‡Π΅ΠΊ останова, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ.
  • Или создавайтС ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ дСйствовал быстро, указывая, ΠΊΠ°ΠΊΠΈΠΌ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. ограничиваСтся, Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ΡΡ ΠΈΠ»ΠΈ пСрСкомпоновываСтся.

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ свСдСния ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ… см. Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ Material Design 3 (M3) Understanding layout. страница.

Webviews

Webview β€” это прСдставлСниС, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰Π΅Π΅ Π²Π΅Π±-страницы Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ. Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв ΠΌΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ использованиС стандартного Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Chrome, для доставки ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ. К ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ руководство ΠΏΠΎ Π²Ρ‹Π·ΠΎΠ²Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° с Π½Π°ΠΌΠ΅Ρ€Π΅Π½ΠΈΠ΅.

ΠžΡΠ½ΠΎΠ²Ρ‹ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΊΠΈ здания | ΠžΡΠ½ΠΎΠ²Ρ‹

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π·Π΄Π°Π½ΠΈΠΉ Π² Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π½ΠΎΠΉ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅?

Π‘Ρ€Π°Π·Ρƒ послС окончания унивСрситСта приступайтС ΠΊ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ Π·Π΄Π°Π½ΠΈΠΉ с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… условий.

Π’Π°ΠΌ слСдуСт ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ этот пост, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° являСтся Π½Π΅ΠΎΡ‚ΡŠΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π½Ρ‹Ρ… Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ спроСктированноС Π·Π΄Π°Π½ΠΈΠ΅ Π½Π° участкС.

ΠŸΡ€ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΎΠΊ Π·Π΄Π°Π½ΠΈΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ пространствах Π²Π½ΡƒΡ‚Ρ€ΠΈ здания ΠΊΠ°ΠΊ ΠΎ Π·ΠΎΠ½Π°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ΡΡ, ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ΡΡ, Π° ΠΈΠ½ΠΎΠ³Π΄Π° ΠΈ Π΄ΠΎΠΌΠΈΠ½ΠΈΡ€ΡƒΡŽΡ‚ Π΄Ρ€ΡƒΠ³ Π½Π°Π΄ Π΄Ρ€ΡƒΠ³ΠΎΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ β€” Π² зависимости ΠΎΡ‚ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Ρ‚ΠΈΠΏΠ° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±Π°.

Π― надСюсь, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹, Π²Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠΉΠΌΠ΅Ρ‚Π΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ трСбования ΠΈ сообраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²ΠΎΠΊ Π·Π΄Π°Π½ΠΈΠΉ ΠΊΠ°ΠΊ Π² ΠΏΠ»Π°Π½Π΅, Ρ‚Π°ΠΊ ΠΈ Π² Ρ€Π°Π·Ρ€Π΅Π·Π΅.

‍

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ поста:

ΠžΠ±Π·ΠΎΡ€
ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΈ ограничСния
Π―Π΄Ρ€Π° (Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅/структурныС)
ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°
Π’ΠΈΡ€Π°ΠΆ
ΠŸΠΎΠΆΠ°Ρ€Π½Π°Ρ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ
ΠšΠ»ΠΈΠΌΠ°Ρ‚
Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

‍

Руководящим ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠΌ для всСх Π·Π΄Π°Π½ΠΈΠΉ являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ всСгда Π΅ΡΡ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΈ ограничСния Π² ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‰Π΅ΠΉ Ρ€Π°ΠΌΠΊΠΈ ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ массива.

НСобходимо ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ:

  • ΠŸΠ΅Ρ€ΠΈΠΌΠ΅Ρ‚Ρ€
  • ΠžΠ±Ρ‰Π°Ρ Π΄Π»ΠΈΠ½Π°
  • Π”Π»ΠΈΠ½Π° самого Π΄Π»ΠΈΠ½Π½ΠΎΠ³ΠΎ фасада для ΠΏΡ€ΠΈΠ»Π΅Π³Π°ΡŽΡ‰Π΅ΠΉ подъСздной Π΄ΠΎΡ€ΠΎΠΆΠΊΠΈ
  • ΠŸΠ»ΠΎΡ‰Π°Π΄ΡŒ
  • На этаТ
  • ВсС Π·Π΄Π°Π½ΠΈΠ΅ (общая ΠΏΠ»ΠΎΡ‰Π°Π΄ΡŒ) /Доступная ΠΏΠ»ΠΎΡ‰Π°Π΄ΡŒ ΠΏΠΎΠ»Π°)
  • Высота
  • НиТС максимальной высоты, Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½Π½ΠΎΠΉ властями (AMSL)
  • ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ этаТСй ΠΈ высота ΠΌΠ΅ΠΆΠ΄Ρƒ этаТами
  • ΠšΡƒΠ±ΠΈΡ‡Π΅ΡΠΊΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹
  • ΠžΠ±Ρ‰ΠΈΠ΅ кубичСскиС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ для расчСта подъСзда ΠΊ ΠΏΠΎΠΆΠ°Ρ€Π½Ρ‹ΠΌ машинам
  • ΠŸΠ»ΠΎΡ‰Π°Π΄ΡŒ основания
  • ΠŸΠ»ΠΎΡ‰Π°Π΄ΡŒ фасада / ΠΏΡ€ΠΎΠ΅ΠΌΡ‹
  • Π‘Π²Π΅Π΄ΠΈΡ‚Π΅ ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΡƒ ΡΠΊΡΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ Π½Π° Π·Π°ΠΏΠ°Π΄, ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΠ² Π·Π΄Π°Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π½Π°ΠΊΠ»ΠΎΠ½ΠΈΠ² ΠΏΠ»ΠΎΡΠΊΠΎΡΡ‚ΡŒ фасада Π² сторону.

Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ эти ограничСния Π±ΡƒΠ΄ΡƒΡ‚ установлСны, Π½Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ аспСкты здания. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ свСдСния см. Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ€Π°Π·Π΄Π΅Π»Π°Ρ….

‍

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ проСктирования Π·Π΄Π°Π½ΠΈΠΉ

‍

Π―Π΄Ρ€Π° – Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΈ структурныС

Β«Π―Π΄Ρ€Π°Β» ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ основныС ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ для всСх многоэтаТных Π·Π΄Π°Π½ΠΈΠΉ. Они Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ находятся Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ этаТС Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ Ρ‚ΠΎΠΌ ΠΆΠ΅ мСстС, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ ΠΏΠΎ всСму зданию.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠΌ этого ΡΠ²Π»ΡΡŽΡ‚ΡΡ согласованныС структурныС ядра ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ прСдоставлСния основных услуг для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ этаТа — Π·Π° счСт прСдотвращСния Π»ΡŽΠ±Ρ‹Ρ… Π½Π΅Π½ΡƒΠΆΠ½Ρ‹Ρ… ΠΈ ΠΈΠ·Π±Ρ‹Ρ‚ΠΎΡ‡Π½Ρ‹Ρ… Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… Π»ΠΈΠ½ΠΈΠΉ обслуТивания. Π­Ρ‚ΠΈ ядра Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ Π² качСствС ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· основных конструкций, Π·Π°ΠΊΡ€Π΅ΠΏΠ»ΡΡŽΡ‰ΠΈΡ… здания.

НСсущиС стСны ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ этих Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… ядСр ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ:

  • Π›ΠΈΡ„Ρ‚Ρ‹/Π»ΠΈΡ„Ρ‚Ρ‹
  • ЛСстницы
  • БСрвисныС стояки
  • ΠœΠ΅Ρ…Π°Π½ΠΈΡ‡Π΅ΡΠΊΠΈΠ΅ ΡƒΠ·Π»Ρ‹ ΠΈ Π°Π³Ρ€Π΅Π³Π°Ρ‚Ρ‹ – Π²ΠΎΠ΄Π°, Π³Π°Π·, канализация
  • ΠŸΠΎΠΆΠ°Ρ€Π½Π°Ρ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ β€” сухой/ΠΌΠΎΠΊΡ€Ρ‹ΠΉ стояк
  • ЭлСктричСство β€” связь, Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½, ΠΊΠ°Π±Π΅Π»ΠΈ
  • Π’ΡƒΠ°Π»Π΅Ρ‚Ρ‹

Π­Ρ‚ΠΈ ΠΆΠΈΠ»Ρ‹ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ симмСтрично для простоты проСктирования (Ρ‚. Π΅. ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ ΠΆΠΈΠ»Π΅ с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ стороны ΠΈΠ»ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΆΠΈΠ»Ρ‹)

‍

Π–ΠΈΠ»Ρ‹ Π² Building Design

Β  Β  Β  Β  Β 

‍

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°

Β«ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°Β» относится ΠΊ Π΄Π΅ΡΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈΠ»ΠΈ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ люди Π±ΡƒΠ΄ΡƒΡ‚ Π΄Π΅Π»Π°Ρ‚ΡŒ Π² Π΄Π°Π½Π½ΠΎΠΌ пространствС Π²Π½ΡƒΡ‚Ρ€ΠΈ здания.

Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ:

  • Π’ΠΈΠΏ помСщСния (торговая, офисная, производствСнная, ΠΎΠ±Ρ‰Π΅ΠΆΠΈΡ‚ΠΈΠ΅/ΠΆΠΈΠ»ΠΎΠ΅ ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅, склад/склад, Ρ…Ρ€Π°Π½Π΅Π½ΠΈΠ΅/ΠΏΠ΅Ρ€Π΅Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° опасных ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ², общСствСнноС ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅)
  • ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΏΠΎΠ΄ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹/ΠΏΡƒΡ‚Π΅ΡˆΠ΅ΡΡ‚Π²ΠΈΡ
  • ΠŸΠ»ΠΎΡ‰Π°Π΄ΡŒ ΠΈ высота для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ пространства
  • Π‘Π»ΠΈΠ·ΠΎΡΡ‚ΡŒ ΠΊ ядрам
  • Π˜Π΅Ρ€Π°Ρ€Ρ…ΠΈΡ
  • ΠŸΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ (ΠΊΠ°ΠΊΠΎΠ΅ пространство ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ ΠΈΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ?)
  • ΠŸΠΎΡΡ‚ΠΎΡΠ½Π½Π°Ρ ΠΈΠ»ΠΈ врСмСнная ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°
  • 900 07 ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π² ΠΏΡ€ΠΎΡ…ΠΎΠ΄Π½Ρ‹Π΅ помСщСния (ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎΠ± Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅)

Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅, Ρ‚ΠΈΠΏ, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ располоТСниС этих ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹Ρ… Π·ΠΎΠ½ слСдуСт ΠΎΠ±ΡΡƒΠ΄ΠΈΡ‚ΡŒ с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ заинтСрСсованными сторонами Π½Π° Ρ€Π°Π½Π½Π΅ΠΌ этапС проСктирования.

Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Циркуляции ΠΈΒ ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ Π·ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Π·Π΄Π°Π½ΠΈΠΉ

‍

Циркуляция

«Циркуляция» относится ΠΊ двиТСнию Π²Π½ΡƒΡ‚Ρ€ΠΈ здания.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

  • ΠŸΡƒΠ½ΠΊΡ‚ отправлСния ΠΈ назначСния
  • ΠŸΡƒΠ½ΠΊΡ‚ А Π² ΠΏΡƒΠ½ΠΊΡ‚ Π’ (ΠΎΡ‚Π·Ρ‹Π² ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚Π° ΠΈΠ· ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹)
  • ΠžΡ‚Π²Π΅Ρ‚Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΡΠ΅Ρ‚ΡŒ ΠΏΡƒΡ‚Π΅ΠΉ
  • НаправлСниС
  • Π›ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ ΠΈΠ»ΠΈ органичСский
  • 9 0007 Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ (ΠΈΠ»ΠΈ сочСтаниС Ρ‚ΠΎΠ³ΠΎ ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ)
  • Direct vs Messy
  • Π’Π΅Π»ΠΈΡ‡ΠΈΠ½Π°
  • Π¨ΠΈΡ€ΠΈΠ½Π° пространства Π² соотвСтствии с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ Ρ‚ΠΎΠ»ΠΏΡ‹ ΠΈΠ»ΠΈ сигнальной ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠ΅ΠΉ
  • Π”Π»ΠΈΠ½Π°
  • ΠŸΡƒΡ‚Π΅ΡˆΠ΅ΡΡ‚Π²ΠΈΠ΅ ΠΈ ΠΎΠΏΡ‹Ρ‚
  • ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²Π΅Π½Π½ΠΎΠ΅ пространство
  • ΠŸΡƒΠ±Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΈ частныС ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚Ρ‹
  • Π’ΠΈΠΏΡ‹
  • ЛСстницы
  • ΠšΠΎΡ€ΠΈΠ΄ΠΎΡ€Ρ‹
  • Π›ΠΈΡ„Ρ‚Ρ‹
  • ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠ΅ пространство
  • ΠŸΠ°Π½Π΄ΡƒΡΡ‹

Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ циркуляции ΠΈΒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅

Циркуляция Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Π·Π΄Π°Π½ΠΈΠΉ

‍

ΠŸΠΎΠΆΠ°Ρ€Π½Π°Ρ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ

Когда Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ ΠΏΠΎΠΆΠ°Ρ€Π½ΠΎΠΉ бСзопасности, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Ρ‚Ρ€ΠΈ аспСкта: —
ΠŸΡ€ΠΎΠΉΠ΄Π΅Π½Π½ΠΎΠ΅ расстояниС, Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π½Π° Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ° ΠΈ срСдства эвакуации:

ΠŸΡ€ΠΎΠΉΠ΄Π΅Π½Π½ΠΎΠ΅ расстояниС

  • РасстояниС ΠΎΡ‚ ΡƒΠ΄Π°Π»Π΅Π½Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ Π΄ΠΎ фасада Π΄Π²Π΅Ρ€ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄Π° Π·Π°Ρ‰ΠΈΡ‰Π΅Π½Π½Ρ‹ΠΉ ΠΊΠΎΡ€ΠΈΠ΄ΠΎΡ€/лСстница Π²Ρ‹Ρ…ΠΎΠ΄Π°
  • ΠžΠ΄Π½ΠΎΡΡ‚ΠΎΡ€ΠΎΠ½Π½ΠΈΠΉ ΠΈΠ»ΠΈ двусторонний эвакуационный Π²Ρ‹Ρ…ΠΎΠ΄
  • ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ Π²Ρ‹Ρ…ΠΎΠ΄Π½Ρ‹Ρ… Π΄Π²Π΅Ρ€Π΅ΠΉ

ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ пассаТиров ΠΈ срСдства эвакуации

  • Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΡ€ΠΈΠ΄ΠΎΡ€ΠΎΠ² ΠΈ лСстничных ΠΊΠ»Π΅Ρ‚ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ трСбованиям ΠΏΠΎΠΆΠ°Ρ€Π½ΠΎΠΉ бСзопасности
  • ΠžΡ…Ρ€Π°Π½ΡΠ΅ΠΌΡ‹Π΅ ΠΊΠΎΡ€ΠΈΠ΄ΠΎΡ€Ρ‹
  • Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ ΠΈΠ»ΠΈ внСшниС Π²Ρ‹Ρ…ΠΎΠ΄Ρ‹
  • Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ ΠΈΠ»ΠΈ внСшниС Π²Ρ‹Ρ…ΠΎΠ΄Ρ‹
  • ДостаточноС количСство Π²Ρ‹Ρ…ΠΎΠ΄ΠΎΠ² Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ этаТС

Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ ΠŸΡ€Π°Π²ΠΈΠ»Π°Ρ… ΠΏΠΎΠΆΠ°Ρ€Π½ΠΎΠΉ бСзопасности.

‍

ΠŸΠΎΠΆΠ°Ρ€Π½Π°Ρ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Π·Π΄Π°Π½ΠΈΠΉ

Β  Β  Β  Β  Β 

‍

ΠšΠ»ΠΈΠΌΠ°Ρ‚

Помимо выполнСния Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊ зданию, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ испытываСт, Π½Π°Ρ…ΠΎΠ΄ΡΡΡŒ Π² Π·Π΄Π°Π½ΠΈΠΈ. Π­Ρ‚ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя Ρ‚Π΅ΠΏΠ»ΠΎΠ²ΠΎΠΉ ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚ ΠΈ освСщСниС.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

  • РасполоТСниС ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΏΡ€ΠΎΠ΅ΠΌΠΎΠ²
  • ΠŸΠΎΠΏΠ΅Ρ€Π΅Ρ‡Π½Π°Ρ вСнтиляция Ρ‡Π΅Ρ€Π΅Π· циркуляционныС помСщСния ΠΈΠ»ΠΈ вСнтиляционныС ΠΊΠΎΠ»ΠΎΠ΄Ρ†Ρ‹
  • ΠžΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΡ здания – ΠΏΠΎ возмоТности ΠΈΠ·Π±Π΅Π³Π°Ρ‚ΡŒ Π·Π°ΠΏΠ°Π΄Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΌΠΎΠ²
  • ИспользованиС стратСгии затСнСния фасада, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, выступы ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π΅Π±Ρ€Π° для Π·Π°Ρ‰ΠΈΡ‚Ρ‹
  • Π‘Ρ‚Ρ€Π°Ρ‚Π΅Π³ΠΈΠΈ Π΄Π½Π΅Π²Π½ΠΎΠ³ΠΎ освСщСния – Ρ‡Π΅Ρ€Π΅Π· свСтовыС люки ΠΈΠ»ΠΈ отвСрстия ΠΎΡ‚ ΠΏΠΎΠ»Π° Π΄ΠΎ ΠΏΠΎΡ‚ΠΎΠ»ΠΊΠ°
Π£Ρ‡Π΅Ρ‚ климатичСских условий ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Π·Π΄Π°Π½ΠΈΠΉ

‍

‍

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅, Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² ΠΈ Ρ‚ΠΈΠΏΠΎΠ»ΠΎΠ³ΠΈΠΉ пространств со всСми заинтСрСсованными сторонами — Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠΎΠΌ, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ, ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ€Π°ΠΌΠΈ Π² области ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΡΡ‚Π²Π°, ΠΌΠ΅Ρ…Π°Π½ΠΈΠΊΠΈ ΠΈ элСктротСхники, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ цСлостный ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ здания.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *