BaseUIFrame

@EDITER BY 冷寒

BaseUIFrame — это базовый UI-фреймворк, созданный на основе QMUI.

Использование

BaseUIFrame доступен для скачивания на jitpack. Для использования фреймворка выполните следующие шаги:

Шаг 1

В файле build.gradle в корне проекта добавьте:

allprojects {
    repositories {
        ....
        maven { url "https://jitpack.io" }
    }
}

Шаг 2

В файле build.gradle приложения добавьте зависимость:

dependencies {
    compile 'com.github.24kpk:BaseUIFrame:1.0.1'
}

Шаг 3

В ресурсах приложения укажите стиль:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="BaseUIFrameAppTheme">
        <!-- Customize your theme here. -->
        ......
    </style>

</resources>

Шаг 4

Инициализируйте фреймворк:

public class YourApplication extends Application {

    @Override public void onCreate() {
        super.onCreate();

        /**
         * По умолчанию вызываются методы initDir(), initLog(false), initExceptionHandler().
         */
        BasicConfig.getInstance(this).init();

        или

        /**
         * Пользовательская конфигурация. Вызываются методы initDir() (инициализация SDCard для кэширования),
         * initLog() (настройка логирования) и initExceptionHandler() (сбор информации об исключениях).
         */
        BasicConfig.getInstance(this)
            .initDir() // или initDir(rootDirName)
            .initExceptionHandler()
            .initLog(true);

        // Другие методы инициализации логирования:
        /**
         * @param tag Идентификатор журнала.
         */
        initLog(tag)

        /**
         * @param tag Идентификатор журнала. Может быть пустым.
         * @param isDebug true: логирование всех событий, false: без логирования.
         */
        initLog(tag, isDebug)

        /**
         * @param tag Идентификатор журнала, может быть пустым.
         * @param methodCount Количество отображаемых строк метода, по умолчанию 2.
         * @param isHideThreadInfo Скрывать ли информацию о потоке, по умолчанию отображается.
         * @param adapter Пользовательский вывод логов.
         * @param isDebug true: логирование всех событий, false: без логирования.
         */
        initLog(tag, methodCount, isHideThreadInfo, adapter, isDebug)
    }
}

Основные компоненты

QMUIRoundButton

Этот компонент позволяет удобно задавать закруглённые углы, цвет рамки, толщину рамки и цвет фона. Обратите внимание: поскольку закруглённые углы этого компонента реализованы через фон View, они могут конфликтовать с native android:background.

Если в XML использовать android:background для задания фона, этот фон не будет работать.
Если после создания View задать фон с помощью #setBackgroundResource(int), этот фон заменит эффект закруглённых углов.

Чтобы задать значения закруглённых углов, цвета рамки, толщины рамки и цвета фона в XML, используйте атрибуты com.qmuiteam.qmui.R.styleable#QMUIRoundButton.

Задаётся половина высоты кнопки:

app:qmui_isRadiusAdjustBounds="true"

Для указания направления закругления используются:

app:qmui_radiusTopLeft="8dp"
app:qmui_radiusTopRight="8dp"
app:qmui_radiusBottomLeft="8dp"
app:qmui_radiusBottomRight="8dp"

Пример кода:

<com.qmuiteam.qmui.widget.roundwidget.QMUIRoundButton
    android:id="@+id/test1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:paddingBottom="10dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="10dp"
    android:text="Задаётся половина высоты"
    app:qmui_isRadiusAdjustBounds="true"/>

QMUIDialog

Диалоговое окно сообщения (синяя кнопка):

new QMUIDialog.MessageDialogBuilder(mActivity)
    .setTitle("Заголовок")
    .setMessage("Вы уверены, что хотите отправить?")
    .addAction("Отмена", new QMUIDialogAction.ActionListener() {
        @Override
        public void onClick(QMUIDialog dialog, int index) {
            dialog.dismiss();
        }
    }).addAction("Подтвердить", new QMUIDialogAction.ActionListener() {
        @Override
        public void onClick(QMUIDialog dialog, int index) {
            ToastUtil.showToast("Нажата кнопка подтверждения");
            dialog.dismiss();
        }
    })
    .show();

Диалоговое окно сообщения (красная кнопка):

addAction(0,"Удалить",QMUIDialogAction.ACTION_PROP_NEGATIVE, new QMUIDialogAction.ActionListener() {
    @Override
``` ### Обработка нажатия кнопки «确定»

`@Override`

`public void onClick(QMUIDialog dialog, int index) {`

    `CharSequence text = builder.getEditText().getText();`

    `if (text != null && text.length() > 0) {`
        `ToastUtil.showToast("Ваш псевдоним: " + text);`
        `dialog.dismiss();`
    `}`
    `else {`
        `ToastUtil.showToast("Пожалуйста, введите псевдоним");`
    `}`
`}`

### Адаптация диалогового окна под высоту клавиатуры

`QMUIKeyboardHelper.showKeyboard(autoTestDialogBuilder.getEditText(), true);`

### QMUIEmptyView

`<com.qmuiteam.qmui.widget.QMUIEmptyView`

    `android:id="@+id/emptyView"`
    `android:layout_width="match_parent"`
    `android:layout_height="match_parent"`
    `android:layout_marginTop="?attr/qmui_topbar_height"`
    `android:background="@color/qmui_config_color_white"`
    `app:qmui_title_text="Я — QMUIEmptyView"`
    `app:qmui_detail_text="Переключайте моё состояние через меню в правом верхнем углу">`

### Метод show() для QMUIProgressBar

`/\*\*`

`* Отображение emptyView.`

`* @param loading Нужно ли отображать индикатор загрузки.`

`* @param titleText Текст заголовка, если не нужен, то null.`

`* @param detailText Детальный текст, если не нужен, то null.`

`* @param buttonText Текст кнопки, если не нужна кнопка, то null.`

`* @param onButtonClickListener Обработчик нажатия на кнопку, если кнопка не нужна, то null.`

`*/`

`public void show(boolean loading, String titleText, String detailText, String buttonText, OnClickListener onButtonClickListener) {`

    `setLoadingShowing(loading);`
    `setTitleText(titleText);`
    `setDetailText(detailText);`
    `setButton(buttonText, onButtonClickListener);`
    `show();`
`}`

### Прямоугольный QMUIProgressBar

`<com.qmuiteam.qmui.widget.QMUIProgressBar`

    `android:id="@+id/rectProgressBar"`
    `android:layout_width="match_parent"`
    `android:layout_height="24dp"`
    `android:textColor="@color/qmui_config_color_white"`
    `android:textSize="16sp"`
    `app:qmui_background_color="@color/qmui_config_color_gray_8"`
    `app:qmui_progress_color="@color/app_color_blue_2"`
    `app:qmui_type="type_rect">`

### Круглый QMUIProgressBar

`<com.qmuiteam.qmui.widget.QMUIProgressBar`

    `android:id="@+id/circleProgressBar"`
    `android:layout_width="250dp"`
    `android:layout_height="250dp"`
    `android:layout_marginTop="30dp"`
    `android:textColor="?attr/qmui_config_color_gray_4"`
    `android:textSize="22sp"`
    `app:qmui_background_color="?attr/qmui_config_color_gray_8"`
    `app:qmui_progress_color="@color/app_color_blue_2"`
    `app:qmui_stroke_width="15dp"`
    `app:qmui_type="type_circle">`

### Установка текста для QMUIProgressBar

`mRectProgressBar.setQMUIProgressBarTextGenerator(new QMUIProgressBar.QMUIProgressBarTextGenerator() {`

    `/\*\*`

    `* Генерирует текст для QMUIProgressBar.`

    `* @param progressBar Прогресс-бар, для которого генерируется текст.`

    `* @param value Текущее значение прогресса.`

    `* @param maxValue Максимальное значение прогресса.`

    `*/`

    `public String generateText(QMUIProgressBar progressBar, int value, int maxValue) {`
        `return value + "/" + maxValue;`
    `}`
`});`

### QMUIGroupListView

**QMUIGroupListView** — это универсальный список, который часто используется в настройках приложения.

Обратите внимание, что его родительский класс — не `android.widget.ListView`, а `LinearLayout`. Обычно требуется добавить внешний слой `ScrollView`, чтобы обеспечить прокрутку.

Он предоставляет концепцию **Section**, которая позволяет разделить список на блоки. Подробнее см. `QMUIGroupListView.Section`.

Пример использования:

`QMUIGroupListView groupListView = new QMUIGroupListView(context);`

`// section 1`

`QMUIGroupListView.newSection(context)`

    `.setTitle("Section Title 1")`
    `.setDescription("Это описание Section 1")`
    `.addItemView(groupListView.createItemView("item 1"), new OnClickListener() {`
        `/\*\*`
        
        `* Обрабатывает нажатие на элемент списка.`
        
        `*/`
        `@Override`
        `public void onClick(View v) {`
            `Toast.makeText(context, "section 1 item 1", Toast.LENGTH_SHORT).show();`
        `}`
    `) .addItemView(groupListView.createItemView("item 2"), new OnClickListener() {`
        `/\*\*`
        
        `* Обрабатывает нажатие на элемент списка.`
        
        `*/`
        `@verride`
        `public void onClick(View v) { /* ... */ }` Тост.makeText(контекст, «раздел 1 пункт 2», Toast.LENGTH_SHORT).show();
                 }
             })
             // Устанавливаем стиль разделительной линии
             .setSeparatorDrawableRes(
                     R.drawable.list_group_item_single_bg,
                     R.drawable.personal_list_group_item_top_bg,
                     R.drawable.list_group_item_bottom_bg,
                     R.drawable.personal_list_group_item_middle_bg)
             // Если нет заголовка, добавляем заголовок по умолчанию [Раздел n]
             .setUseDefaultTitleIfNone(true)
             // По умолчанию используется заполнение TitleView для раздела, можно установить false, чтобы отменить его
             .setUseTitleViewForSectionSpace(false)
             .addTo(groupListView);
        
        // раздел 2
        QMUIGroupListView.newSection(контекст)
             .setTitle("Заголовок раздела 2")
             .setDescription("Это описание Section 2")
             .addItemView(groupListView.createItemView("пункт 1"), новый OnClickListener() {
                 @Override
                 public void onClick(View v) {
                     Тост.makeText(контекст, "раздел 2 пункт 1", Toast.LENGTH_SHORT).show();
                 }
             })
             .addItemView(groupListView.createItemView("пункт 2"), новый OnClickListener() {
                 @Override
                 public void onClick(View v) {
                     Тост.makeText(контекст, "раздел 2 пункт 2", Toast.LENGTH_SHORT).show();
                 }
             });

### QMUITipDialog ###
Для часто используемых типов диалоговых окон подсказок используйте `QMUITipDialog.Builder` для инициализации

    dialog = builder.setIconType(QMUITipDialog.Builder.ICON_TYPE_FAIL)
                            .setTipWord("подсказка типа сбоя")
                            .create();
Для пользовательских типов диалоговых окон подсказок используйте `QMUITipDialog.CustomBuilder` для инициализации

    dialog = new QMUITipDialog.CustomBuilder(mActivity)
                            .setContent(R.layout.tipdialog_custom)
                            .create();

### QMUIRadiusImageView ###
По умолчанию: эффект круга
Установите цвет и ширину границы

    app:qmui_border_color="?attr/qmui_config_color_gray_6"
    app:qmui_border_width="2dp"
По умолчанию нет эффекта клика. Если требуется эффект клика, включите clickable и установите эффект выбора

    android:clickable="true"
    app:qmui_selected_border_color="?attr/qmui_config_color_gray_4"
    app:qmui_selected_border_width="1px"
    app:qmui_selected_mask_color="?attr/qmui_config_color_gray_8"
По умолчанию эффект круга. Если нужен эффект эллипса

    app:qmui_is_oval="true"
    app:qmui_is_circle="false"
При установке прямоугольного эффекта `app:qmui_is_circle="false"` && `app:qmui_is_oval="false"` можно настроить закруглённые углы

    app:qmui_corner_radius="15dp"

### QMUIVerticalTextView ###
QMUIVerticalTextView реализует вертикальное выравнивание текста. Для не CJK (китайский, японский, корейский) символов применяется поворот на 90 градусов.

### QMUIPopup ###
Трудно контролировать при инициализации QMUIPopup

### QMUILinkTextView ###
QMUILinkTextView автоматически распознаёт URL, телефон, адрес электронной почты.

Можно настроить событие клика по ссылке через `setOnLinkClickListener(QMUILinkTextView.OnLinkClickListener)`.

OSCHINA-MIRROR/leexoyo888-BaseUIFrame

BaseUIFrame

Использование

Шаг 1

Шаг 2

Шаг 3

Шаг 4

Основные компоненты

QMUIRoundButton

QMUIDialog

Опубликовать ( 0 )

Введение

Обновления

Участники

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

OSCHINA-MIRROR/leexoyo888-BaseUIFrame .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

BaseUIFrame

Использование

Шаг 1

Шаг 2

Шаг 3

Шаг 4

Основные компоненты

QMUIRoundButton

QMUIDialog

Опубликовать ( 0 )

Введение

Обновления

Участники

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

OSCHINA-MIRROR/leexoyo888-BaseUIFrame