Android工具栏中心标题和自定义字体

我试图找出正确的方法来使用自定义字体的工具栏标题，并在工具栏中心(客户端需求)。

目前，我正在使用良好的老ActionBar，我正在设置标题为空值，并使用setCustomView把我的自定义字体TextView和中心使用ActionBar. layoutparams。

有更好的办法吗?使用新的工具栏作为我的动作栏。

451010 次浏览
小开
最佳答案

要在Toolbar中使用自定义标题，你所需要做的就是记住Toolbar只是一个花哨的ViewGroup，所以你可以像这样添加自定义标题:

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?android:attr/actionBarSize"
android:background="@color/action_bar_bkgnd"
app:theme="@style/ToolBarTheme" >




<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:layout_gravity="center"
android:id="@+id/toolbar_title" />




</android.support.v7.widget.Toolbar>

这意味着你可以随意设置TextView的样式，因为它只是一个普通的TextView。在你的activity中，你可以像这样访问标题:

Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title);
小开

我们没有直接访问工具栏标题TextView，所以我们使用反射来访问它。

  private TextView getActionBarTextView() {
TextView titleTextView = null;


try {
Field f = mToolBar.getClass().getDeclaredField("mTitleTextView");
f.setAccessible(true);
titleTextView = (TextView) f.get(mToolBar);
} catch (NoSuchFieldException e) {
} catch (IllegalAccessException e) {
}
return titleTextView;
}
小开

下面是一个依赖标题文本的方法，从Toolbar中找到TextView实例。

  public static TextView getToolbarTitleView(ActionBarActivity activity, Toolbar toolbar){
ActionBar actionBar = activity.getSupportActionBar();
CharSequence actionbarTitle = null;
if(actionBar != null)
actionbarTitle = actionBar.getTitle();
actionbarTitle = TextUtils.isEmpty(actionbarTitle) ? toolbar.getTitle() : actionbarTitle;
if(TextUtils.isEmpty(actionbarTitle)) return null;
// can't find if title not set
for(int i= 0; i < toolbar.getChildCount(); i++){
View v = toolbar.getChildAt(i);
if(v != null && v instanceof TextView){
TextView t = (TextView) v;
CharSequence title = t.getText();
if(!TextUtils.isEmpty(title) && actionbarTitle.equals(title) && t.getId() == View.NO_ID){
//Toolbar does not assign id to views with layout params SYSTEM, hence getId() == View.NO_ID
//in same manner subtitle TextView can be obtained.
return t;
}
}
}
return null;
}
小开

工具栏标题是可设置样式的。你所做的任何定制都必须在主题中进行。我给你们举个例子。

工具栏布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
style="@style/ToolBarStyle.Event"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="@dimen/abc_action_bar_default_height_material" />

风格:

<style name="ToolBarStyle" parent="ToolBarStyle.Base"/>


<style name="ToolBarStyle.Base" parent="">
<item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>


<style name="ToolBarStyle.Event" parent="ToolBarStyle">
<item name="titleTextAppearance">@style/TextAppearance.Widget.Event.Toolbar.Title</item>
</style>


<style name="TextAppearance.Widget.Event.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<!--Any text styling can be done here-->
<item name="android:textStyle">normal</item>
<item name="android:textSize">@dimen/event_title_text_size</item>
</style>
小开

布局:

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="@color/action_bar_bkgnd"
app:theme="@style/ToolBarTheme" >


<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:layout_gravity="center"
android:gravity="center"
android:id="@+id/toolbar_title" />
</android.support.v7.widget.Toolbar>

代码:

    Toolbar mToolbar = parent.findViewById(R.id.toolbar_top);
TextView mToolbarCustomTitle = parent.findViewById(R.id.toolbar_title);


//setup width of custom title to match in parent toolbar
mToolbar.postDelayed(new Runnable()
{
@Override
public void run ()
{
int maxWidth = mToolbar.getWidth();
int titleWidth = mToolbarCustomTitle.getWidth();
int iconWidth = maxWidth - titleWidth;


if (iconWidth > 0)
{
//icons (drawer, menu) are on left and right side
int width = maxWidth - iconWidth * 2;
mToolbarCustomTitle.setMinimumWidth(width);
mToolbarCustomTitle.getLayoutParams().width = width;
}
}
}, 0);
小开

没有工具栏TextView，我们可以自定义字体使用下面的代码

getSupportActionBar().setDisplayShowTitleEnabled(false);
or
getActionBar().setDisplayShowTitleEnabled(false);


public void updateActionbar(String title){
SpannableString spannableString = new SpannableString(title);
spannableString.setSpan(new TypefaceSpanString(this,  "futurastdmedium.ttf"),
0, spannableString.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
mToolbar.setTitle(spannableString);
}
小开

我不知道appcompat库中是否有任何变化，但这是相当微不足道的，不需要反射。

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);


// loop through all toolbar children right after setting support
// action bar because the text view has no id assigned


// also make sure that the activity has some title here
// because calling setText() with an empty string actually
// removes the text view from the toolbar


TextView toolbarTitle = null;
for (int i = 0; i < toolbar.getChildCount(); ++i) {
View child = toolbar.getChildAt(i);


// assuming that the title is the first instance of TextView
// you can also check if the title string matches
if (child instanceof TextView) {
toolbarTitle = (TextView)child;
break;
}
}
小开

我用这个问题的解决方案:

 public static void applyFontForToolbarTitle(Activity a){
Toolbar toolbar = (Toolbar) a.findViewById(R.id.app_bar);
for(int i = 0; i < toolbar.getChildCount(); i++){
View view = toolbar.getChildAt(i);
if(view instanceof TextView){
TextView tv = (TextView) view;
if(tv.getText().equals(a.getTitle())){
tv.setTypeface(getRuneTypefaceBold(a));
break;
}
}
}
}

对于重心，我认为有必要将布局参数水平更改为match_parent，然后:

tv.setGravity(Gravity.CENTER);
小开

我使用这个解决方案:

static void centerToolbarTitle(@NonNull final Toolbar toolbar) {
final CharSequence title = toolbar.getTitle();
final ArrayList<View> outViews = new ArrayList<>(1);
toolbar.findViewsWithText(outViews, title, View.FIND_VIEWS_WITH_TEXT);
if (!outViews.isEmpty()) {
final TextView titleView = (TextView) outViews.get(0);
titleView.setGravity(Gravity.CENTER);
final Toolbar.LayoutParams layoutParams = (Toolbar.LayoutParams) titleView.getLayoutParams();
layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT;
toolbar.requestLayout();
//also you can use titleView for changing font: titleView.setTypeface(Typeface);
}
}
小开 
Typeface face= Typeface.createFromAsset(getAssets(), "font/font.ttf"); // your custom font
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTypeface(face);
setSupportActionBar(toolbar);

其他教程:

  1. Android工具栏示例
  2. 在Android中使用自定义字体
  3. ActionBar教程与示例
小开

尽管向工具栏添加文本视图可以解决标题样式限制的问题，但它存在一个问题。因为我们没有将它添加到布局中，所以我们对它的宽度没有太多的控制。我们可以使用wrap_content或match_parent。

现在考虑这样一个场景，我们将searchView作为工具栏右边缘的一个按钮。如果标题内容较多，它将位于按钮上方，使其模糊。除了为标签设置宽度外，没有办法控制这个，如果你想要一个响应式设计，这是你不想做的事情。

所以，这里有一个解决方案，为我工作，这是略有不同，从添加一个文本视图到工具栏。相反，将工具栏和文本视图添加到相对布局中，并确保文本视图位于工具栏的顶部。然后我们可以使用适当的边距，并确保文本视图显示在我们想要它显示的地方。

确保将工具栏设置为不显示标题。

下面是这个解决方案的XML:

<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary">


<android.support.v7.widget.Toolbar
android:theme="@style/ThemeOverlay.AppCompat.Dark"
android:id="@+id/activity_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:titleTextAppearance="@style/AppTheme.TitleTextView"
android:layout_marginRight="40dp"
android:layoutMode="clipBounds">


<android.support.v7.widget.SearchView
android:id="@+id/search_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:foregroundTint="@color/white" />
</android.support.v7.widget.Toolbar>


<TextView
android:id="@+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="90dp"
android:text="@string/app_name"
android:textSize="@dimen/title_text_size"
android:textColor="@color/white"
android:lines="1"
android:layout_marginLeft="72dp"
android:layout_centerVertical="true" />


</RelativeLayout>

解决了上面提到的@ankur-chaudhary问题。

小开 
    public class TestActivity extends AppCompatActivity {
private Toolbar toolbar;


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setContentView(R.layout.activity_test);


toolbar = (Toolbar) findViewById(R.id.tool_bar); // Attaching the layout to the toolbar object
setSupportActionBar(toolbar);


customizeToolbar(toolbar);
}


public void customizeToolbar(Toolbar toolbar){
// Save current title and subtitle
final CharSequence originalTitle = toolbar.getTitle();
final CharSequence originalSubtitle = toolbar.getSubtitle();


// Temporarily modify title and subtitle to help detecting each
toolbar.setTitle("title");
toolbar.setSubtitle("subtitle");


for(int i = 0; i < toolbar.getChildCount(); i++){
View view = toolbar.getChildAt(i);


if(view instanceof TextView){
TextView textView = (TextView) view;




if(textView.getText().equals("title")){
// Customize title's TextView
Toolbar.LayoutParams params = new Toolbar.LayoutParams(Toolbar.LayoutParams.WRAP_CONTENT, Toolbar.LayoutParams.MATCH_PARENT);
params.gravity = Gravity.CENTER_HORIZONTAL;
textView.setLayoutParams(params);


// Apply custom font using the Calligraphy library
Typeface typeface = TypefaceUtils.load(getAssets(), "fonts/myfont-1.otf");
textView.setTypeface(typeface);


} else if(textView.getText().equals("subtitle")){
// Customize subtitle's TextView
Toolbar.LayoutParams params = new Toolbar.LayoutParams(Toolbar.LayoutParams.WRAP_CONTENT, Toolbar.LayoutParams.MATCH_PARENT);
params.gravity = Gravity.CENTER_HORIZONTAL;
textView.setLayoutParams(params);


// Apply custom font using the Calligraphy library
Typeface typeface = TypefaceUtils.load(getAssets(), "fonts/myfont-2.otf");
textView.setTypeface(typeface);
}
}
}


// Restore title and subtitle
toolbar.setTitle(originalTitle);
toolbar.setSubtitle(originalSubtitle);
}
}
小开

试一试

@Override
public void onBackPressed() {
if(getTitle().equals(getResources().getString(R.string.app_name))) {
super.onBackPressed();}
else {
//set visiblity
}
}
小开 
private void makeTitleCenter(String title, Toolbar toolbar) {
if (title != null && !TextUtils.isEmpty(title.trim())) {
final String tag = " ";
if (getSupportActionBar() != null) {
getSupportActionBar().setTitle(tag);
}
TextView titleTv = null;
View leftBtn = null;
for (int i = 0; i < toolbar.getChildCount(); i++) {
View view = toolbar.getChildAt(i);
CharSequence text = null;
if (view instanceof TextView && (text = ((TextView) view).getText()) != null && text.equals(tag)) {
titleTv = (TextView) view;
} else if (view instanceof ImageButton) {
leftBtn = view;
}
}
if (titleTv != null) {
final TextView fTitleTv = titleTv;
final View fLeftBtn = leftBtn;
fTitleTv.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
fTitleTv.getViewTreeObserver().removeOnGlobalLayoutListener(this);
int leftWidgetWidth = fLeftBtn != null ? fLeftBtn.getWidth() : 0;
fTitleTv.setPadding(DimenUtil.getResources().getDisplayMetrics().widthPixels / 2 - leftWidgetWidth - fTitleTv.getWidth() / 2, 0, 0, 0);
fTitleTv.requestLayout();
}
});
}
}
}
小开

我解出了这个解，这是下面的代码:

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" >


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Order History"
android:layout_gravity="center"
android:id="@+id/toolbar_title"
android:textSize="17sp"
android:textStyle="bold"
android:textColor="@color/colorWhite"
/>


</android.support.v7.widget.Toolbar>

并且你可以改变标题/标签，在活动中，写一个下面的代码:

Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);

TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title); mTitle.setText(“@string /....");

小开

这只是为了帮助使用@MrEngineer13回答与@Jonik和@Rick Sanchez评论以正确的顺序连接所有片段，以帮助轻松实现标题居中!!

使用TextAppearance.AppCompat.Widget.ActionBar.Title的布局:

    <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay">


<TextView
android:id="@+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_gravity="center" />


</android.support.v7.widget.Toolbar>

以正确的顺序实现方法:

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
TextView mTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);


setSupportActionBar(toolbar);
mTitle.setText(toolbar.getTitle());


getSupportActionBar().setDisplayShowTitleEnabled(false);

请不要忘记给@MrEngineer13回答投票!!

下面是一个示例项目ToolbarCenterTitleSample

enter image description here

希望能帮助到别人;)

小开

你可以用下面的like

 <android.support.v7.widget.Toolbar
android:id="@+id/top_actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppThemeToolbar">


<TextView
android:id="@+id/pageTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
</android.support.v7.widget.Toolbar>
小开

没有人提到过这一点，但是Toolbar有一些属性:

app:titleTextColor用于设置标题文本颜色

app:titleTextAppearance用于设置标题文本外观

app:titleMargin用于设置空白

还有其他特定边距，如marginStart等。

小开

设置android:gravity="center"对我有用

没有造型，什么都没有。工具栏基本上是一个ViewGroup，你需要做的就是设置元素的重力。

        <android.support.v7.widget.Toolbar
android:id="@+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:background="@color/partial_transparent"
android:gravity="center"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
小开

因为android.support.v7.appcompat 24.2 Toolbar有方法setTitleTextAppearance，你可以在没有外部textview的情况下设置它的字体。

在styles.xml中创建新样式

<style name="RobotoBoldTextAppearance">
<item name="android:fontFamily">@font/roboto_condensed_bold</item>
</style>

并使用它

mToolbar.setTitleTextAppearance(this, R.style.RobotoBoldTextAppearance);
小开

定义以下类:

public class CenteredToolbar extends Toolbar {


private TextView centeredTitleTextView;


public CenteredToolbar(Context context) {
super(context);
}


public CenteredToolbar(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}


public CenteredToolbar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}


@Override
public void setTitle(@StringRes int resId) {
String s = getResources().getString(resId);
setTitle(s);
}


@Override
public void setTitle(CharSequence title) {
getCenteredTitleTextView().setText(title);
}


@Override
public CharSequence getTitle() {
return getCenteredTitleTextView().getText().toString();
}


public void setTypeface(Typeface font) {
getCenteredTitleTextView().setTypeface(font);
}


private TextView getCenteredTitleTextView() {
if (centeredTitleTextView == null) {
centeredTitleTextView = new TextView(getContext());
centeredTitleTextView.setTypeface(...);
centeredTitleTextView.setSingleLine();
centeredTitleTextView.setEllipsize(TextUtils.TruncateAt.END);
centeredTitleTextView.setGravity(Gravity.CENTER);
centeredTitleTextView.setTextAppearance(getContext(), R.style.TextAppearance_AppCompat_Widget_ActionBar_Title);


Toolbar.LayoutParams lp = new Toolbar.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
lp.gravity = Gravity.CENTER;
centeredTitleTextView.setLayoutParams(lp);


addView(centeredTitleTextView);
}
return centeredTitleTextView;
}
}

.．.然后使用它来代替常规的Toolbar，就像这样:

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent">


<your.packagename.here.CenteredToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:title="@string/reset_password_page_title"/>


<!-- Other views -->


</RelativeLayout>

在Activity中仍然需要这两行代码(与标准Toolbar一样):

Toolbar toolbar = (Toolbar) findViewByid(R.id.toolbar); // note that your activity doesn't need to know that it is actually a custom Toolbar
setSupportActionBar(binding.toolbar);

就是这样!你不需要隐藏标准的左对齐标题，不需要重复相同的XML代码，等等，只要使用CenteredToolbar，就像默认的Toolbar一样。您还可以通过编程方式设置自定义字体，因为现在可以直接访问TextView。希望这能有所帮助。

小开

设置自定义字体的一种非常快速和容易的方法是使用自定义的titleTextAppearance和fontFamily:

添加到styles.xml:

<style name="ToolbarTitle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">16sp</item>
<item name="android:textColor">#FF202230</item>
<item name="android:fontFamily">@font/varela_round_regular</item>
</style>

在你的res文件夹中创建一个字体文件夹(例如:varela_round_regular.ttf)

阅读官方指南，找出更多https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html

小开

我花了几天时间寻找一个通用的解决方案。我的工具栏与android菜单和导航图标。

首先，您需要创建自定义工具栏类。这个类必须计算标题居中的位置(填充):

    class CenteredToolbar @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0)
: Toolbar(context, attrs, defStyleAttr) {


init {
addOnLayoutChangeListener(object : View.OnLayoutChangeListener {
override fun onLayoutChange(v: View?, left: Int, top: Int, right: Int, bottom: Int, oldLeft: Int, oldTop: Int, oldRight: Int, oldBottom: Int) {
val titleTextView = findViewById<TextView>(R.id.centerTitle)


val x = titleTextView.x.toInt()
val x2 = x + titleTextView.width


val fullWidth = width
val fullCenter = fullWidth / 2


val offsetLeft = Math.abs(fullCenter - x)
val offsetRight = Math.abs(x2 - fullCenter)
val differOffset = Math.abs(offsetLeft - offsetRight)


if (offsetLeft > offsetRight) {
titleTextView.setPadding(differOffset, 0, 0, 0)
} else if (offsetRight > offsetLeft) {
titleTextView.setPadding(0, 0, differOffset, 0)
}


removeOnLayoutChangeListener(this)
}
})
}


override fun setTitle(resId: Int) = getTitleView().setText(resId)


override fun setTitle(title: CharSequence?) = getTitleView().setText(title)


fun getTitleView(): TextView = findViewById(R.id.centerTitle)


}

其次，你需要创建布局工具栏:

<CenteredToolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar">


<TextView
android:id="@+id/centerTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>


</CenteredToolbar>

这是所有

小开

更新自@MrEngineer13的回答:要在任何情况下对齐标题中心，包括汉堡图标，选项菜单，你可以在工具栏中添加FrameLayout，如下所示:

   <android.support.v7.widget.Toolbar
android:id="@+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="@color/action_bar_bkgnd"
app:theme="@style/ToolBarTheme" >


<FrameLayout android:layout_width="match_parent"
android:layout_height="match_parent">


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:layout_gravity="center"
style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:id="@+id/toolbar_title" />


</FrameLayout>


</android.support.v7.widget.Toolbar>
小开

自定义字体在工具栏，你可以覆盖textView字体的风格，然后每个textView在你的应用程序也工具栏标题字体自动改变 我测试它在Android studio 3.1.3

在风格上这样做:

<style name="defaultTextViewStyle" parent="android:Widget.TextView">
<item name="android:fontFamily">@font/your_custom_font</item>
</style>

然后在你的主题中使用这个:

<item name="android:textViewStyle">@style/defaultTextViewStyle</item>
小开

我找到了另一种方法来添加自定义工具栏，而不需要任何额外的Java/Kotlin代码。

  • 首先:创建一个XML与您的自定义工具栏布局AppBarLayout作为父:

    <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">


<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay">


<ImageView
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginEnd="@dimen/magin_default"
android:src="@drawable/logo" />


</android.support.v7.widget.Toolbar>

    < / p >

  • 第二:在你的布局中包含工具栏:

    <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/blue"
tools:context=".app.MainAcitivity"
tools:layout_editor_absoluteY="81dp">


<include
layout="@layout/toolbar_inicio"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />


<!-- Put your layout here -->


</android.support.constraint.ConstraintLayout>
小开

要在工具栏中使用自定义标题，您可以添加一个自定义标题，如:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="5dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark">




<LinearLayout
android:id="@+id/lnrTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical">


<TextView
android:id="@+id/txvHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:gravity="center"
android:ellipsize="end"
android:maxLines="1"
android:text="Header"
android:textColor="@color/white"
android:textSize="18sp" />




</LinearLayout>




</android.support.v7.widget.Toolbar>

Java代码:

Toolbar toolbar = findViewById(R.id.toolbar);


setSupportActionBar(toolbar);


if (getSupportActionBar() == null)
return;


getSupportActionBar().setTitle("Title");


getSupportActionBar().setDisplayHomeAsUpEnabled(true);
小开

在我看来，你有两个选择:

1)编辑工具栏XML。当你的工具栏在XML中添加时，它通常看起来像这样:

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
app:popupTheme="@style/AppTheme.PopupOverlay"/>

如果你想自定义它，只需在最后删除'/'，并使它像这样:

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
app:popupTheme="@style/AppTheme.PopupOverlay">


<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">


<ImageView
android:id="@+id/toolbar_iv"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />


<TextView
android:id="@+id/toolbar_tv"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/toolbar_iv"
app:layout_constraintTop_toTopOf="parent" />


</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>

这样你就可以有一个工具栏和自定义文本视图和徽标。

2)编程改变本机textview和图标:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setIcon(R.drawable.ic_question_mark);
getSupportActionBar().setTitle("Title");

在工具栏中设置任何内容之前，请确保工具栏不为空。

小开

你可以像这样在工具栏中有一个自定义TextView:

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="@color/action_bar_bkgnd"
app:theme="@style/ToolBarTheme" >


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:layout_gravity="center"
android:id="@+id/toolbar_title" />




</android.support.v7.widget.Toolbar>

这将使文本居中。如果你想在普通的Toolbar中添加自定义字体，可以创建<style>:

<style android:name="ToolbarFont">
<item android:fontFamily = "@font/fontName" />
</style>

并将其添加到工具栏:

toolbar.setTitleTextAppearance(this, R.style.ToolbarFont);

对于工具栏中的textview，你可以用fontFamily属性定义它:

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="@color/action_bar_bkgnd"
app:theme="@style/ToolBarTheme" >


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:layout_gravity="center"
android:id="@+id/toolbar_title"
android:fontFamily="@font/fontFamily" />




</android.support.v7.widget.Toolbar>
小开

我也遇到了同样的问题，通过在MainActivity中这样做来解决

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
TextView mTitle = (TextView) toolbar.findViewById(R.id.toolbar_title);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);

碎片化

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
if (view == null) {
// Inflate the layout for this fragment
view = inflater.inflate(R.layout.fragment_example, container, false);
init();
}
getActivity().setTitle("Choose Fragment");
return view;
}


@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
inflater.inflate(R.menu.example_menu, menu);
}
小开

你只需要在你的工具栏布局中添加以下一行:

app:contentInsetStart="0dp"
小开

尝试在单独的视图中使用工具栏和标题。在右端取一个视图，并赋予它们等于工具栏权重的权重。这样你的小个子就会放在中间。

<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay"
android:background="@color/white_color">
<LinearLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white_color">


<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
android:background="@color/white_color"
app:popupTheme="@style/AppTheme.PopupOverlay"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:layout_weight="0.2"


app:contentInsetStartWithNavigation="0dp"
app:navigationIcon="@color/greyTextColor">
</android.support.v7.widget.Toolbar>




<com.an.customfontview.CustomTextView
android:id="@+id/headingText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.6"
android:gravity="center"
android:text="Heading"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textColor="@color/colorPrimary"
android:textSize="@dimen/keyboard_number"
android:layout_gravity="center_horizontal|center_vertical"
app:textFontPath="fonts/regular.ttf" />
<ImageView
android:id="@+id/search_icon"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:visibility="visible"
android:layout_weight="0.2"
android:layout_gravity="center_horizontal|center_vertical"
android:src="@drawable/portfolio_icon"/>
</LinearLayout>


</android.support.design.widget.AppBarLayout>
小开

您可以在xml文件中插入这段代码

 <androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimaryDark"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar">


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:textColor="#000000"
android:textSize="20dp"
android:id="@+id/toolbar_title" />


</androidx.appcompat.widget.Toolbar>
小开
这是我用一个导航图标和一个文本视图所做的 现在您可以进行扩展，以便在任何需要的地方应用它。但是你必须在每个

的活动上应用它 
(toolbar[0] as AppCompatTextView).let {
it.viewTreeObserver.addOnDrawListener {
it.layoutParams = it.layoutParams.apply {
width = Toolbar.LayoutParams.MATCH_PARENT
(this as ViewGroup.MarginLayoutParams).apply {
marginEnd = toolbar[1].width
}
}
it.textAlignment = View.TEXT_ALIGNMENT_CENTER
}


}
小开

材料组件1.4.0-alpha02中的MaterialToolbar现在可以通过将titleCentered属性设置为true来将工具栏的标题居中:

<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">


<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/topAppBar"
style="@style/Widget.MaterialComponents.Toolbar.Primary"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:titleCentered="true" />


</com.google.android.material.appbar.AppBarLayout>
小开

使用com.google.android.material.appbar.MaterialToolbar和app:titleCentered="true"标记

<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:titleCentered="true" />
小开

我不知道是否有人有这个问题，但使用额外的文本视图是不好的，因为你必须自己管理标题，使用反射是最糟糕的，因为id在添加progurad规则时发生了变化。 最简单和准确的答案是使用材质工具栏，它具有标题居中的属性 

app:titleCentered
小开 
  @Composable
fun topAppBar() {
CenterAlignedTopAppBar(
title = {
Text(
"Top App Bar"
)
},
navigationIcon = {
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Default.ArrowBack,
contentDescription = "Back"
)
}
},
actions = {
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Default.MoreVert,
contentDescription = "More",
)
}
},
colors = TopAppBarDefaults.smallTopAppBarColors(
containerColor = MaterialTheme.colorScheme.secondaryContainer
)
)
}
}
小开

现在使用材质设计3，我们可以在中间对齐标题，而不需要做额外的工作，也不需要在工具栏中添加文本视图

在build.gradle文件中添加以下依赖项

implementation 'com.google.android.material:material:1.6.1'

为了使标题在中心对齐，我们需要正确地使用下面的内容

 app:titleCentered="true"

为了在中心对齐字幕，我们需要使用下面的属性

app:subtitleCentered="true"

示例代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">


<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">


<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/topAppBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="AskNilesh"
app:subtitle="Nilesh"
app:subtitleCentered="true"
app:menu="@menu/top_app_bar"
app:titleCentered="true"
app:navigationIcon="@drawable/ic_android_black_24dp" />


</com.google.android.material.appbar.AppBarLayout>


<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">




</androidx.core.widget.NestedScrollView>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

输出

enter image description here

小开

对于材质组件，从版本1.4.x作为在文档中有描述开始，你可以使用MaterialToolbar。

只要将属性app:titleCentered和/或app:subtitleCentered属性添加到你的MaterialToolbar上的true。

喜欢的东西:

    <com.google.android.material.appbar.MaterialToolbar
android:id="@+id/topAppBar"
app:titleCentered="true"
... />

enter image description here

对于使用Material3包的组成，你可以简单地使用< >强CenterAlignedTopAppBar < / >强:

CenterAlignedTopAppBar(
title = { Text("Centered TopAppBar") },
navigationIcon = {
IconButton(onClick = { /* doSomething() */ }) {
Icon(
imageVector = Icons.Filled.Menu,
contentDescription = "Localized description"
)
}
}
)

enter image description here

如果你正在使用Compose和Material2包，则没有内置组件，但你可以自定义TopAppBar内内容的布局，如这个答案中所述。


提交答案