ChromeLikeTabSwitcher
, .
allprojects {
repositories {
maven {
url 'https://s01.oss.sonatype.org/content/repositories/releases/'
}
}
}
dependencies {
implementation('com.gitee.chinasoft_ohos:ChromeLikeTabSwitcher:1.0.1')
implementation('com.gitee.chinasoft_ohos:ChromeLikeTabSwitcher_ohos_util:1.0.0')
implementation('com.gitee.chinasoft_ohos:ChromeLikeTabSwitcher_java_util:1.0.0')
implementation('com.gitee.chinasoft_ohos:ChromeLikeTabSwitcher_materialviewlibrary:1.0.0')
......
}
Проект можно запустить напрямую в sdk6, DevEco Studio2.2 beta1. Если не запускается, удалите файлы .gradle, .idea, build, gradle, build.gradle и создайте новый проект с учётом вашей версии. Скопируйте файлы из нового проекта в корневой каталог.
В качестве переключателя табов используется пользовательский вид TabSwitcher. Его можно добавить в активность или фрагмент через код или XML-ресурсы. Вот пример кода на XML, который показывает, как добавить вид в XML-ресурс макета:
<?xml version="1.0" encoding="utf-8"?>
<de.mrapp.tabswitcher.colorUi.widget.ColorDirectionalLayout
ohos:id="$+id:root"
xmlns:ohos="http://schemas.huawei.com/res/ohos"
xmlns:app="http://schemas.huawei.com/apk/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical"
ohos:theme_prefix="main">
<de.mrapp.tabswitcher.TabSwitcher
ohos:id="$+id:tab_switcher"
ohos:height="match_parent"
ohos:width="match_parent"
app:emptyView="$layout:empty_view"
app:tabIcon="$media:ic_file_outline_18dp"
...
/>
</de.mrapp.tabswitcher.colorUi.widget.ColorDirectionalLayout>
При создании экземпляра TabSwitcher через код Java можно использовать все свойства, указанные в примере выше.
TabSwitcher tabSwitcher = new TabSwitcher(context);
tabSwitcher.showAddTabButton(createAddTabButtonListener());
tabSwitcher.setToolbarNavigationIcon(ResourceTable.Media_ic_plus_white_24dp, createAddTabListener());
Каждый экземпляр Tab представляет собой вкладку. Пример создания новой вкладки и добавления её в переключатель:
Tab tab = new Tab("Title");
PacMap parameters = new PacMap();
tab.setIcon(ResourceTable.Media_ic_file_outline_18dp);
...
tab.setParameters(parameters);
Чтобы задать внешний вид вкладки в TabSwitcher, необходимо реализовать класс TabSwitcherDecorator и применить его к переключателю через метод setDecorator. Это часто используемый адаптер для заполнения ListView, RecyclerView и других подобных структур. Необходимо переопределить методы onInflateView и onShowTab. Первый используется для расширения представления, которое будет использоваться в вкладке, а второй позволяет настроить представление в зависимости от текущего состояния. Метод findComponentById можно использовать для ссылки на представление внутри метода onShowTab, что обеспечивает лучшую производительность.
Если для разных вкладок используются разные представления, то необходимо также переопределить методы getViewTypeCount и getViewType. Первый возвращает общее количество различных представлений, которые расширяются методом onInflateView, а второй должен возвращать различные целые числа для каждой вкладки, чтобы указать тип представления. Для выполнения перевода необходимо больше контекста. Однако я могу предложить перевод текста без учёта неизвестных мне деталей:
toolbar.setOnMenuItemClickListener(tabSwitcher, createToolbarMenuListener());
TabSwitcher.setupWithToolbar(tabSwitcher, toolbar, createTabSwitcherButtonListener());
return view;
}
@Override
public void onShowTab(@NonNull Context context, @NonNull TabSwitcher tabSwitcher,
@NonNull View view, @NonNull Tab tab, int index, int viewType,
@Nullable Bundle savedInstanceState) {
Text textView = findComponentById(ResourceTable.Id_title);
textView.setText((String) tab.getTitle());
Toolbar toolbar = findComponentById(ResourceTable.Id_toolbar);
toolbar.addMenuClickListener();
toolbar.setVisibility(tabSwitcher.isSwitcherShown() ? Component.HIDE : Component.VISIBLE);
if (toolbar.getMenu() != null) {
String theme_name = getThemeValue("theme_name");
if ("dark".equals(theme_name)) {
toolbar.getMenu().setImageSrc(de.mrapp.tabswitcher.ResourceTable.Media_more_menu_white);
toolbar.setButtonColor(1, Color.WHITE);
} else {
toolbar.getMenu().setImageSrc(de.mrapp.tabswitcher.ResourceTable.Media_more_menu);
toolbar.setButtonColor(0.5f, Color.DKGRAY);
}
}
ColorUiUtil.changeTheme(view, getContext().getTheme());
if (viewType == 1) {
LogUtil.loge("=== onShowTab viewType -> 1");
TextField editText = findComponentById(ResourceTable.Id_edit);
if (savedInstanceState == null) {
editText.setText("");
}
editText.requestFocus();
} else if (viewType == 2 && state != null) {
LogUtil.loge("=== onShowTab viewType -> 2");
ListContainer listView = findComponentById(ResourceTable.Id_list);
state.loadItems(listView);
}
}
@Override
public int getViewTypeCount() {
return 3;
}
@Override
public int getViewType(@NonNull Tab tab, int index) {
Bundle parameters = tab.getParameters();
return parameters != null ? parameters.getInt("view_type") : 0;
}
@Override
public void onSaveInstanceState(@NonNull View view, @NonNull Tab tab, int index,
int viewType, @NonNull Bundle outState) {
// Store the tab's current state in the Bundle outState if necessary
}
``` **Перевод текста на русский язык:**
И позволяет переключать видимость переключателя опций вкладки, класс `TabSwitcherButton` открыт библиотекой.
Он реализует пользовательский `ImageButton`, который реализует интерфейс `TabSwitcherListener`, чтобы отображаемое количество опций
оставалось актуальным.
Внешний вид кнопки определяется классом `TabSwitcherDrawable`. Если `TabSwitcherButton` должен быть частью меню панели инструментов,
он должен быть включён в ресурсы меню. Конкретное использование показано ниже:
**Использование метода TabSwitcherDrawable:**
private void initImage() { image = new Image(getContext());
Resource resource = convertRes(getContext(), ResourceTable.Media_tab_switcher_drawable_background);
//The drawable, который используется кнопкой изображения.
drawable = new TabSwitcherDrawable(getContext(), resource);
image.setImageElement(drawable);
StackLayout.LayoutConfig imageParams = new LayoutConfig(StackLayout.LayoutConfig.MATCH_PARENT, StackLayout.LayoutConfig.MATCH_PARENT);
imageParams.alignment = TextAlignment.CENTER;
addComponent(image, imageParams);
}
**Использование метода TabSwitcherButton:**
TabSwitcherButton actionView = new TabSwitcherButton(getContext()); DirectionalLayout.LayoutConfig actionConfig = new LayoutConfig(); int tabHeight = (int) PixelUtil.fp2px(DimensionUtil.parseDimension(getContext().getString(ResourceTable.String_tablet_tab_height))); actionConfig.height = tabHeight; actionConfig.width = tabHeight; addComponent(actionView, actionConfig);
Чтобы зарегистрировать меню `TabSwitcherButton` в качестве слушателя, можно использовать статический метод `setupWithMenu` класса `TabSwitcher`. Он автоматически внедрит все элементы в меню для всех элементов и зарегистрирует `TabSwitcherButton` как
определённый слушатель `TabSwitcher`. Когда один из этих кнопок будет нажат, он может быть выбран и вызван. Следующий код показывает, как использовать этот метод с любым меню:
```java
TabSwitcher.setupWithMenu(tabSwitcher, menu, new OnClickListener() { /* ... */ });
Если меню, которое является частью самого переключателя вкладок, должно быть настроено, можно использовать следующий вызов метода:
TabSwitcher.setupWithMenu(tabSwitcher, new OnClickListener() { /* ... */ });
По умолчанию библиотека будет использовать светлую тему TabSwitcher
. Однако библиотека TabSwitcher
помимо темы также имеет предопределённую тёмную тему.
Следующий снимок экрана показывает внешний вид тёмной темы:
Класс TabSwitcher
предоставляет метод setEmptyView
, который можно использовать для указания пользовательского представления, отображаемого при пустом переключателе опций.
Можно выбрать продолжительность анимации для отображения или скрытия указанного представления. Первая возможность использования метода setEmptyView
— указать экземпляр класса ohos.agp.components.Component
:
Component component = // ... inflate component
tabSwitcher.setEmptyView(component);
Или setEmpyView
можно использовать, указав идентификатор ресурса макета представления:
tabSwitcher.setEmptyView(ResourceTable.Id_empty_view);
Когда переключатель опций пуст, пример отображаемого представления-заполнителя можно увидеть на следующем снимке экрана:
Это представление будет охватывать TabSwitcher
, используя метод View
setPadding
, чтобы применить заполнение ко всем опциям и их родительскому представлению. Основная цель этого поведения — применить оконные вставки при использовании полупрозрачных состояний и/или навигационных панелей, как это видно в примере приложения библиотеки. Следующий пример кода демонстрирует, как вставить оконную вставку в переключатель опций OnApplyWindowInsetsListener
с помощью активности. Его следует использовать в методе onCreate
активности.
tabSwitcher.getComponentTreeObserver().addWindowBoundListener(
new ComponentTreeObserver.WindowBoundListener() {
@Override
public void onWindowBound() {
int left = main_root.getLeft();
int top = main_root.getTop();
int right = main_root.getRight();
int bottom = main_root.getBottom();
float touchableAreaTop = top;
if (tabSwitcher.getLayout() == Layout.TABLET) {
// touchableAreaTop += getResources().getDimensionPixelSize(R.dimen.tablet_tab_container_height);
}
LogUtil.loge("===" + left + ":" + top + ":" + right + ":" + bottom);
int actionBarSize = (int) PixelUtil.fp2px(DimensionUtil.parseDimension(tabSwitcher.getContext().getString(ResourceTable.String_actionBarSize)));
LogUtil.loge("===" + actionBarSize);
RectFloat touchableArea = new RectFloat(left, touchableAreaTop, right, touchableAreaTop + actionBarSize);
tabSwitcher.addDragGesture(
new SwipeGesture.Builder().setTouchableArea(touchableArea).create());
tabSwitcher.addDragGesture(
new PullDownGesture.Builder().setTouchableArea(touchableArea).create());
}
@Override
public void onWindowUnbound() {
}
}
);
CodeCheck: тестирование кода без исключений.
CloudTest: тестирование кода без исключений.
Вирусное сканирование: успешно.
Текущая версия demo: основные функции не отличаются от исходного компонента.
1.0.2 1.0.1 1.0.0 0.0.1-СНАПШОТ
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )