1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/chinasoft3_ohos-ChromeLikeTabSwitcher

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Это зеркальный репозиторий, синхронизируется ежедневно с исходного репозитория.
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

ChromeLikeTabSwitcher

Проект

  • Название проекта: ChromeLikeTabSwitcher.
  • Серия: openharmony, компонент для адаптации сторонних компонентов.
  • Функционал: библиотека, имитирующая переключение табов в браузере Chrome.
  • Состояние переноса: основная функциональность реализована.
  • Вызовы: отсутствуют.
  • Версия разработки: SDK6, DevEco Studio2.2 beta1.
  • Базовая версия: tag 0.4.6.

Демонстрация эффекта

  • Перемещение вверх и вниз по главной странице.

  • Функция UNDO.

  • Добавление новой вкладки.

, .

Инструкция по установке

  1. В файле build.gradle в корневом каталоге проекта:
allprojects {
    repositories {
        maven {
            url 'https://s01.oss.sonatype.org/content/repositories/releases/'
        }
    }
}
  1. В файле build.gradle модуля entry:
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 пуст

Класс 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 )

Вы можете оставить комментарий после Вход в систему

Введение

ChromeLikeTabSwitcher — это библиотека, имитирующая переключение между вкладками в браузере Chrome. Расширить Свернуть
Apache-2.0
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://gitlife.ru/oschina-mirror/chinasoft3_ohos-ChromeLikeTabSwitcher.git
git@gitlife.ru:oschina-mirror/chinasoft3_ohos-ChromeLikeTabSwitcher.git
oschina-mirror
chinasoft3_ohos-ChromeLikeTabSwitcher
chinasoft3_ohos-ChromeLikeTabSwitcher
master