Я хочу изменить размер шрифта CollapsingToolbarLayout
и его гарнитуру. Как я могу этого добиться?
Как изменить шрифт и размер CollapsingToolbarLayout?
Ответы (9)
Обновлять
Прежде чем мы углубимся в код, давайте сначала определим textSize
для нашего CollapsingToolbarLayout
. Google опубликовал веб-сайт под названием material.io
, на этом веб-сайте также объясняется, как лучше всего обращаться с Типографика.
В статье упоминается категория «Заголовок», в которой также объясняется рекомендуемый размер шрифта для использования в sp
.
Хотя в статье никогда не упоминался рекомендуемый CollapsingToolbarLayout's
расширенный размер, библиотека com.android.support:design
предоставляет TextAppearance
для нашего случая. При некотором копании с исходником выясняется, что размер 34sp
(в статье не упоминается).
Так как насчет свернутого размера? К счастью, в статье что-то упоминалось, и это 20sp
.
На данный момент лучшим TextAppearance
, который подходит для свернутого режима, является TextAppearance.AppCompat.Title
, а для нашего расширенного режима TextAppearance
– TextAppearance.Design.CollapsingToolbar.Expanded
.
Если вы посмотрите на все наши примеры выше, все они используют REGULAR версию шрифта, и можно с уверенностью сказать, что Roboto regular
выполнит эту задачу, если у вас нет особых требований.
Загрузка самих шрифтов может оказаться слишком сложной задачей, почему бы не использовать библиотеку со всеми необходимыми шрифтами Roboto? Поэтому я представляю библиотеку каллиграфии для Roboto, например. Тайпер.
dependencies {
implementation 'com.android.support:design:28.0.0'
implementation 'com.rhexgomez.typer:typer-roboto:2.0.0'
}
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="@style/TextAppearance.Design.CollapsingToolbar.Expanded"
app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
Ява
// Java example
CollapsingToolbarLayout collapsingToolbar = findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setCollapsedTitleTypeface(TyperRoboto.ROBOTO_REGULAR());
collapsingToolbar.setExpandedTitleTypeface(TyperRoboto.ROBOTO_REGULAR());
Котлин
// Kotlin example
collapsing_toolbar.apply {
setCollapsedTitleTypeface(TyperRoboto.ROBOTO_REGULAR)
setExpandedTitleTypeface(TyperRoboto.ROBOTO_REGULAR)
}
Это обновление 2019 года, потому что обновлена библиотека Typer! Я также являюсь автором библиотеки.
Вы можете использовать новые общедоступные методы на CollapsingToolbarLayout
, чтобы установить шрифт для свернутого и расширенного заголовка, например:
final Typeface tf = Typeface.createFromAsset(context.getAssets(), "fonts/FrutigerLTStd-Light.otf");
collapsingToolbar.setCollapsedTitleTypeface(tf);
collapsingToolbar.setExpandedTitleTypeface(tf);
Кажется, это было добавлено в библиотеку поддержки дизайна 23.1.0, и это очень долгожданное дополнение.
setTitle(String)
для экземпляра CollapsingToolbarLayout
.
- person Neal Sanche; 09.02.2017
Вы можете сделать что-то вроде этого:
mCollapsingToolbarLayout.setTitle(getTitle());
mCollapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.ExpandedAppBar);
mCollapsingToolbarLayout.setCollapsedTitleTextAppearance(R.style.CollapsedAppBar);
Соответствующий стиль textview может быть:
<style name="ExpandedAppBar" parent="@android:style/TextAppearance.Medium">
<item name="android:textSize">28sp</item>
<item name="android:textColor">#000</item>
<item name="android:textStyle">bold</item>
</style>
<style name="CollapsedAppBar" parent="@android:style/TextAppearance.Medium">
<item name="android:textSize">24sp</item>
<item name="android:textColor">@color/white</item>
<item name="android:textStyle">normal</item>
</style>
также см. здесь для справки.
Toolbar.setTitleTextColor()
или app:titleTextColor
из Toolbar
не меняет цвет заголовка панели инструментов, когда он заключен в CollapsingToolbarLayout
- person patrickjason91; 13.07.2017
CollapsingToolbarLayout toolbar_layout =findViewById(R.id.toolbar_layout); toolbar_layout.setExpandedTitleColor(Color.BLACK);
- person abbasalim; 30.12.2018
mCollapsingToolbar.setTitle(getTitle());
mCollapsingToolbar.setExpandedTitleTextAppearance(R.style.ExpandedAppBar);
mCollapsingToolbar.setCollapsedTitleTextAppearance(R.style.CollapsedAppBar);
<style name="ExpandedAppBar" parent="@android:style/TextAppearance.Medium">
<item name="android:textSize">28sp</item>
<item name="android:textColor">#000</item>
<item name="android:textStyle">bold</item>
</style>
<style name="CollapsedAppBar" parent="@android:style/TextAppearance.Medium">
<item name="android:textSize">24sp</item>
<item name="android:textColor">@color/white</item>
<item name="android:textStyle">normal</item>
</style>
<style name="ExpandedAppBarPlus1" parent="@android:style/TextAppearance.Medium">
<item name="android:textSize">28.5sp</item>
<item name="android:textColor">#000</item>
<item name="android:textStyle">bold</item>
</style>
<style name="CollapsedAppBarPlus1" parent="@android:style/TextAppearance.Medium">
<item name="android:textSize">24.5sp</item>
<item name="android:textColor">@color/white</item>
<item name="android:textStyle">normal</item>
</style>
Ссылка здесь CollapsingToolbarLayout setTitle работает неправильно
Чтобы добавить ко всем ответам здесь, у меня не сработало в xml, где бы я ни пытался применить, в AppTheme, ссылаясь на стили. В настоящее время я использую библиотеку поддержки 27.1.1.
Работало только программно.
Typeface typeface = ResourcesCompat.getFont(this, R.font.my_custom_font);
collapsingToolbarLayout.setCollapsedTitleTypeface(typeface);
collapsingToolbarLayout.setExpandedTitleTypeface(typeface);
Код здесь
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout"
android:layout_width="match_parent"
app:expandedTitleTextAppearance="@style/Toolbar.TitleText"
app:collapsedTitleTextAppearance="@style/Toolbar.TitleText"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="@dimen/expanded_toolbar_title_margin_start"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
Добавьте эти строки кода в макет CollapsingToolbarLayout.
app:expandedTitleTextAppearance="@style/Toolbar.TitleText"
app:collapsedTitleTextAppearance="@style/Toolbar.TitleText"
И код, который приведен ниже, в style.xml
<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">16sp</item>
</style>
Похоже, у меня есть решение:
private void makeCollapsingToolbarLayoutLooksGood(CollapsingToolbarLayout collapsingToolbarLayout) {
try {
final Field field = collapsingToolbarLayout.getClass().getDeclaredField("mCollapsingTextHelper");
field.setAccessible(true);
final Object object = field.get(collapsingToolbarLayout);
final Field tpf = object.getClass().getDeclaredField("mTextPaint");
tpf.setAccessible(true);
((TextPaint) tpf.get(object)).setTypeface(Typeface.createFromAsset(getAssets(), "Roboto-Bold.ttf"));
((TextPaint) tpf.get(object)).setColor(getResources().getColor(R.color.ice));
} catch (Exception ignored) {
}
}
Измените размер шрифта или родителя.
<style name="expandedappbar" parent="@android:style/TextAppearance.Medium"> //Change Medium to Small
<item name="android:textSize">28sp</item> <!--Or Change the font size -->
<item name="android:textColor">@color/white</item>
<item name="android:textStyle">bold</item>
</style>
<style name="collapsedappbar" parent="@android:style/TextAppearance.Medium">
<item name="android:textSize">18sp</item>
<item name="android:textColor">@color/white</item>
</style>
В Android 8.0 (уровень API 26) появилась новая функция «Шрифты в XML».
Теперь вы можете определять шрифты как ресурс https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html
- Поместите свои шрифты в папку
res-> font->
- Определить файл font.xml
<?xml version="1.0" encoding="utf-8"?> <font-family xmlns:android="http://schemas.android.com/apk/res/android"> <font android:fontStyle="normal" android:fontWeight="400" android:font="@font/lobster_regular" /> <font android:fontStyle="italic" android:fontWeight="400" android:font="@font/lobster_italic" /> </font-family>
следующий набор
val typeface = ResourcesCompat.getFont(this, R.font.lobster_regular)
htab_collapse_toolbar.setCollapsedTitleTypeface(typeface)
htab_collapse_toolbar.setExpandedTitleTypeface(typeface)