Существует ли официальный API для централизованного заголовка на панели инструментов, как в популярных приложениях для Android, в новом дизайне материалов? - PullRequest
0 голосов
/ 25 февраля 2019

Фон

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

https://material.io/develop/android/components/app-bar-layout/

Однако в последнее время кажется, чтов некоторых приложениях заголовок центрируется, даже если слева и справа нет симметричного содержимого.Пример: Приложение "Сообщения" :

enter image description here

И "Приложение "Новости Google" :

enter image description here

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

enter image description here

Некоторые люди любят называть это «материальным дизайном 2.0», поскольку в нем обновляются разные вещи.

Проблема

Хотя существует множество подобных вопросов о StackOverflow с того времени, когда он назывался «ActionBar» (пример здесь ), здесь все по-другому, потому что он должен иметь библиотеку поддержки (AKA) Android-X ") есть способ справиться с этим правильно, потому что все изменилось, и теперь Google должен поддерживать его, поскольку это является частью руководящих принципов и частью различных приложений для Android.

То, что я пробовал

Я попытался добавить представление на панели инструментов, но даже покрасив представление, вы можете увидеть, что оно на самом деле не центрировано, автоматически, и это до добавления дополнительных элементов действия или кнопки вверх:

enter image description here

activity_main.xml

<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"
        tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:theme="@style/AppTheme.AppBarOverlay">

        <androidx.appcompat.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="match_parent" android:layout_height="match_parent" android:text="title"
                      android:gravity="center" android:background="#33ff0000"
                      android:id="@+id/titleTextView"/>
        </androidx.appcompat.widget.Toolbar>

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

</androidx.coordinatorlayout.widget.CoordinatorLayout>

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

Существует также более приятный обходной путь:одна панель инструментов на каждой стороне, и сделать TextView иметь запас, который является максимальным для обоих.Для этого есть даже библиотека: « Toolbar-Center-Title » ... Но опять же, это обходной путь.Не то, о чем я спрашиваю.

Вопрос

Есть ли теперь официальный способ иметь центрированный заголовок на панели инструментов, независимо от того, сколько элементов действий есть, и независимо от того, что находится на другой стороне (кнопка вверх,например) ?

Если так, как это можно сделать?

ПРИМЕЧАНИЕ. Опять же, меня не интересуют обходные пути.Есть много обходных путей, и я могу думать об этом самостоятельно.

Ответы [ 3 ]

0 голосов
/ 04 марта 2019

Как насчет textAlignment="center"?RelativeLayout делает трюк, когда AppCompatTextView установил layout_width="match_parent";например:

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:android="http://schemas.android.com/apk/res/android">

    <androidx.appcompat.widget.LinearLayoutCompat
        android:id="@+id/customView"
        android:minHeight="?android:attr/actionBarSize"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:gravity="top">

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

            <!-- Home Button -->
            <include
                layout="@layout/button_home_menu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="start"/>

            <androidx.appcompat.widget.LinearLayoutCompat
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="8dp">

                <androidx.appcompat.widget.AppCompatTextView
                    android:id="@+id/title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/app_name"
                    android:textAlignment="center"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textSize="18sp"
                    android:textStyle="bold"/>

                <androidx.appcompat.widget.AppCompatTextView
                    android:id="@+id/subtitle"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/app_version"
                    android:textAlignment="center"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textSize="12sp"
                    android:textStyle="bold"/>

            </androidx.appcompat.widget.LinearLayoutCompat>

        </RelativeLayout>

    </androidx.appcompat.widget.LinearLayoutCompat>

</layout>

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

0 голосов
/ 09 марта 2019

Нет официального способа сделать это, но создание подклассов обеспечивает большую часть охвата без сумасшедших уловок.

https://gist.github.com/bmc08gt/40a151e93969f2633b9b92bca4b31e83

0 голосов
/ 04 марта 2019

TL; DR: Нет, в настоящее время нет официального способа центрировать заголовок на панели инструментов.


Не думаю, что существует официальный способ сделать этопо крайней мере пока.Но я знаю, что фреймворк Flutter поддерживает это, и это довольно просто: вам просто нужно передать centerTitle: true конструктору панели приложений, как описано в этом ответе .И есть хороший шанс, что приложения, о которых вы упоминали в своем вопросе, были созданы с помощью Flutter, поскольку оба они от Google.

Я думаю, что ближайший обходной путь к вашему ожидаемому макету - это TextView поверх панели инструментов., как показано здесь :

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar">
        </android.support.v7.widget.Toolbar>

        <TextView
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name"/>

    </RelativeLayout>
</android.support.design.widget.AppBarLayout>

Но было бы неплохо, если бы официальный API Android мог поддерживать это так же, как это делает флаттер.Может быть, вы хотите отправить запрос на отслеживание проблем Material Components для Android ?

...