CollapsingToolbarLayout
글꼴 크기와 서체 를 변경하고 싶습니다 . 어떻게 할 수 있습니까?
답변:
우리는 코드의하자로 다이빙을하기 전에 먼저 결정있어 textSize
우리를 위해 CollapsingToolbarLayout
. Google은라는 웹 사이트를 게시했습니다 material.io
.이 웹 사이트는 또한 타이포그래피 를 다루는 가장 좋은 방법을 설명합니다 .
에서 사용할 권장 글꼴 크기를 설명하는 "제목"범주에 대해 언급 한 문서입니다 sp
.
이 기사에서는 권장되는 CollapsingToolbarLayout's
확장 크기를 언급하지 않았지만 라이브러리 com.android.support:design
는 TextAppearance
우리의 경우를 제공합니다 . 소스를 파헤 치면 크기가 34sp
(기사에 언급되지 않음) 밝혀졌습니다 .
그렇다면 접힌 크기는 어떻습니까? 운 좋게도 기사는 무언가를 언급했고 그것은입니다 20sp
.
그리고 최고의 TextAppearance
에 맞는 지금까지 있다는 접힌 모드가되어 TextAppearance.AppCompat.Title
우리의 동안 확장 된 모드 TextAppearance
입니다 TextAppearance.Design.CollapsingToolbar.Expanded
.
위의 모든 예제를 살펴보면 모든 예제 는 특정 요구 사항이없는 한 작업을 수행 할 것이라고 말할 수 있는 일반 버전의 글꼴을 사용합니다 Roboto regular
.
글꼴 자체를 다운로드하는 데 너무 많은 작업이 필요할 수 있습니다. 필요한 모든 Roboto 글꼴이있는 라이브러리를 사용하는 것은 어떻습니까? 그래서 저는 Roboto를위한 서예 라이브러리 (예 : Typer) 를 소개합니다 .
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)
}
Typer 라이브러리가 업데이트 되었기 때문에 이것은 2019 년 업데이트입니다! 저는 도서관의 저자이기도합니다.
다음과 같이 새로운 공개 방법을 사용하여 CollapsingToolbarLayout
축소 및 확장 제목의 서체를 설정할 수 있습니다.
final Typeface tf = Typeface.createFromAsset(context.getAssets(), "fonts/FrutigerLTStd-Light.otf");
collapsingToolbar.setCollapsedTitleTypeface(tf);
collapsingToolbar.setExpandedTitleTypeface(tf);
이것은 디자인 지원 라이브러리 23.1.0에 추가 된 것으로 보이며 매우 환영받는 추가입니다.
setTitle(String)
메서드를 사용할 수 있습니다 CollapsingToolbarLayout
.
다음과 같이 할 수 있습니다.
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
CollapsingToolbarLayout toolbar_layout =findViewById(R.id.toolbar_layout); toolbar_layout.setExpandedTitleColor(Color.BLACK);
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>
여기에 모든 답변을 추가하기 위해 AppTheme에서 스타일을 참조하여 적용하려는 위치에 관계없이 xml에서 작동하지 않았습니다. 현재 지원 라이브러리 27.1.1을 사용하고 있습니다.
프로그래밍 방식으로 만 작동했습니다.
Typeface typeface = ResourcesCompat.getFont(this, R.font.my_custom_font);
collapsingToolbarLayout.setCollapsedTitleTypeface(typeface);
collapsingToolbarLayout.setExpandedTitleTypeface(typeface);
해결책이있는 것 같습니다.
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) {
}
}
코드는 여기
<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>
글꼴 크기 또는 부모를 변경합니다.
<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>
이제 글꼴을 리소스 https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html 로 정의 할 수 있습니다.
res-> font->
폴더에 글꼴 넣기
<?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)