В этом выпуске я расскажу о функциональности, очень похожей на ScrollView в Xml. Что касается соединения, я также буду обсуждать представленные ниже представления, а именно:

  • Текст и его атрибуты
  • Столбец
  • Ряд
  • Распорка
  • Делитель
  • TextStyle
  • Максимальное количество строк
  • Модификатор
  • TextOverflow
  • Аннотированная строка и некоторые важные параметры.

Примечание: я начну с предположения, что читатели знают о создании приложения Jetpack Compose с нуля, о функциях MaterialTheme, Composable, Preview и т. Д. Но если вы не знаете, то можете просто обратиться к моему эпизоду 1 из этой серии. Ссылка приведена ниже.



Jetpack Compose (Series 1: Basics Ep1) - Просто текстовое приложение
Как и в наши дни, происходит много вещей. Скорее всего, будет в мобильной индустрии с Android, IOS, Flutter и т. Д. И… medium.com



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

Примечание. Этот выпуск включает в себя обсуждение только тех функций, которые в настоящее время доступны в Jetpack Compose Version 0.1.0-dev08. В будущем может произойти отказ от поддержки некоторых атрибутов и функций или, возможно, их расширение. Так что проверяйте версию во время разработки.

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

implementation 'androidx.ui:ui-foundation:0.1.0-dev08'

Синхронизируйте свой проект и перейдите к файлу MainActivity.kt. Создайте настраиваемую функцию с именем TextLayout с некоторыми параметрами в ней. Также сделайте эту функцию компонуемой, добавив аннотацию в ее верхней части, как показано ниже:

@Composable
fun TextLayout(
    mText: String,
    mTextStyle: TextStyle? = null,
    mMaxLines: Int? = null,
    mModifier: Modifier? = null,
    mTextOverflow: TextOverflow? = null
) {
    //Code here...
}

Параметры поясняются следующим образом:

  • mText - имеет строковый тип данных и используется для получения значения строкового формата, которое необходимо отобразить.
  • mTextStyle - содержит стиль текста, который необходимо присвоить строковому значению.
  • mMaxLines - имеет тип int и используется для ограничения количества отображаемых строк в строке.
  • mModifier - модификаторы используются для внесения определенных изменений в визуализированные данные.
  • mTextOverflow - используется для проверки и предоставления указанного свойства всякий раз, когда текст переполняется.

Затем добавьте функцию Text в блок TextLayout.

Text(
    text = mText,
    style = mTextStyle ?: TextStyle.Default,
    maxLines = mMaxLines ?: Int.MAX_VALUE,
    modifier = mModifier ?: Modifier.padding(16.dp),
    overflow = mTextOverflow ?: TextOverflow.Clip
)

Затем, продвигаясь вперед, создайте настраиваемую функцию с именем LayoutContainer и добавьте поверх нее аннотацию Composable. Поместите в него VerticalScoller. Пусть VerticalScroller выполняет функцию Column примерно так:

@Composable
fun LayoutContainer() {
    VerticalScroller {
        Column {
            //Code here...
        }
    }
}

VerticalScroller ()

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

Столбец()

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

Затем вызовите функцию TextLayout и передайте в нее единственный строковый параметр, как показано ниже:

TextLayout(mText = "Simple Text")

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

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

TextLayout(
    mText = "Text with bigger font size",
    mTextStyle = TextStyle(
        fontSize = 24.sp
    )
)

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

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

TextLayout(
    mText = "Text with Red color",
    mTextStyle = TextStyle(
        color = Color.Red
    )
)

Затем этот код используется для выделения стиля шрифта текста полужирным путем передачи атрибута fontWeight, как показано ниже:

TextLayout(
    mText = "Text in bold",
    mTextStyle = TextStyle(
        fontWeight = FontWeight.Bold
    )
)

Затем этот код используется для преобразования текста в курсив, применяя к нему атрибут fontFamily, как показано ниже:

TextLayout(
    mText = "Text in a cursive font family",
    mTextStyle = TextStyle(
        fontFamily = FontFamily.Cursive
    )
)

Приведенный ниже код изменяет строку, применяя

  • fontStyle = Используется для предоставления определенного стиля текстовым данным.
  • maxLines - он может ограничить количество строк, которые должны быть видны из общего количества строк в строке.
  • модификатор - используется для внесения изменений в строку ввода с помощью заполнения.
TextLayout(
    mText = "Text with Italic font style, restricted as maximum lines as one. " +
            "Also Providing the padding of 24 density pixels to start, top and end od it. " +
            "And the end, text will get overflowed and end with an ellipsis of 3 dots.",
    mTextStyle = TextStyle(
        fontStyle = FontStyle.Italic
    ),
    mMaxLines = 2,
    mModifier = Modifier.padding(start = 24.dp, top = 24.dp, end = 24.dp),
    mTextOverflow = TextOverflow.Ellipsis
)

Теперь добавьте разделитель, добавив весь этот код, как показано ниже:

Spacer(modifier = Modifier.padding(top = 8.dp))

Предусмотрена прокладка для обеспечения минимального расстояния сверху от других компонентов.

Прокладка ()

Это компонент, представляющий макет пустого пространства, размер которого можно определить с помощью модификаторов LayoutWidth, LayoutHeight и LayoutSize.

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

Divider(color = Color.LightGray)

Мы можем установить конкретный цвет для разделителя соответственно с помощью параметра цвета.

Разделитель ()

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

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

val mAnnotatedString = AnnotatedString {
    append("The text has multi color property.")
    addStyle(
        style = SpanStyle(
            color = Color.LightGray
        ),
        start = 4,
        end = 8
    )
    addStyle(
        style = SpanStyle(
            color = Color.Blue
        ),
        start = 12,
        end = 17
    )
}
Text(text = mAnnotatedString, modifier = Modifier.padding(16.dp))

Divider(color = Color.DarkGray)

Затем, чтобы два разных текста отображались в одной строке, мы используем row, предоставляя модификатор для их одновременной настройки. Стиль содержит некоторые атрибуты, которые показывают различную разницу между ними обоими, а именно:

  • textDecoration - украшения для рисования на тексте.
  • background - цвет фона для текста.
  • textAlign - выравнивание текста по строкам абзаца.
  • letterSpacing - количество пробелов (в em), которые нужно добавить между каждой буквой.
Row(modifier = Modifier.fillMaxWidth()) {
    TextLayout(
        mText = "Text with an underline",
        mTextStyle = TextStyle(
            textDecoration = TextDecoration.Underline,
            background = Color.Cyan
        )
    )

    TextLayout(
        mText = "Text with letter spacing",
        mTextStyle = TextStyle(
            textAlign = TextAlign.Center,
            color = Color.Green,
            letterSpacing = TextUnit.Companion.Em(2)
        )
    )
}

И в конце работы всех пользовательских функций добавьте функцию MaterialTheme () внутри функции setContent () и вызовите в ней составную функцию LayoutContainer (), как показано ниже:

setContent {
    MaterialTheme {
        LayoutContainer()
    }
}

И это конец. Запустите код и проверьте вывод.

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



Akshay-Sawant / Compose-Studio
Участвуйте в разработке Akshay-Sawant / Compose-Studio, создав учетную запись на GitHub. github.com



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