OSCHINA-MIRROR/HarmonyOS-tpc-FlycoRoundView

FlycoRoundView

Введение

Библиотека помогает сделать встроенные представления OpenHarmony удобными и простыми в использовании, а также позволяет сократить количество ресурсов, связанных с прямоугольными формами.

Демо

Инструкции по использованию

TextViewDefault

При нажатии на TextView Default цвет фона меняется, а цвет текста остаётся прежним.

<com.flyco.roundview.RoundTextView
 ohos:id="$+id:rtv_1"
 ohos:height="match_content"
 ohos:width="match_content"
 ohos:clickable="true"
 ohos:padding="10vp"
 ohos:text="TextView Default"
 ohos:text_color="#383838"
 rv:rv_backgroundColor="#ffffff"
 rv:rv_backgroundPressColor="#383838"
 rv:rv_strokeColor="#383838"
 rv:rv_strokeWidth="1vp"
 rv:rv_textPressColor="#ffffff"/>

RadiusHalfHeight

Делает радиус вида равным половине высоты и округляет его. При нажатии на Radius HalfHeight цвет фона становится синим, а цвет текста — белым.

<com.flyco.roundview.RoundTextView
 ohos:id="$+id:rtv_2"
 ohos:height="match_content"
 ohos:width="match_content"
 ohos:alignment="center"
 ohos:bottom_padding="10vp"
 ohos:clickable="true"
 ohos:left_margin="20vp"
 ohos:left_padding="18vp"
 ohos:long_click_enabled="true"
 ohos:right_padding="18vp"
 ohos:text="Radius Half Height"
 ohos:text_color="#03A9F4"
 ohos:top_padding="10vp"
 rv:rv_backgroundColor="#ffffff"
 rv:rv_backgroundPressColor="#03A9F4"
 rv:rv_isRadiusHalfHeight="true"
 rv:rv_isRippleEnable="false"
 rv:rv_strokeColor="#03A9F4"
 rv:rv_strokePressColor="#6D8FB0"
 rv:rv_strokeWidth="1vp"
 rv:rv_textPressColor="#ffffff"/>

TetView Radius 10vp

При нажатии цвет TextView Radius10vp меняется в соответствии с ожиданиями, что видно в пользовательском интерфейсе.

<com.flyco.roundview.RoundTextView
 ohos:id="$+id:rtv_3"
 ohos:height="match_content"
 ohos:width="200vp"
 ohos:alignment="center"
 ohos:bottom_margin="10vp"
 ohos:bottom_padding="10vp"
 ohos:ellipsize="end"
 ohos:left_padding="18vp"
 ohos:right_padding="18vp"
 ohos:singleLine="true"
 ohos:text="TextView Radius 10dpTextView Radius 10vp"
 ohos:text_color="#383838"
 ohos:top_padding="10vp"
 rv:rv_backgroundColor="#F6CE59"
 rv:rv_cornerRadius="10vp"/>

Radius Top Left

Radius TopLeft отображает закруглённый угол в верхней левой части.

<com.flyco.roundview.RoundTextView
 ohos:height="match_content"
 ohos:width="0vp"
 ohos:padding="10vp"
 ohos:right_margin="2.5vp"
 ohos:text="Radius TopLeft"
 ohos:text_alignment="center"
 ohos:text_color="#ffffff"
 ohos:weight="1"
 rv:rv_backgroundColor="#DE88A5"
 rv:rv_cornerRadius_TL="10vp"/>

Radius Top Right

Radius TopRight отображается с закруглённым углом в верхней правой части.

<com.flyco.roundview.RoundTextView
 ohos:height="match_content"
 ohos:width="0vp"
 ohos:padding="10vp"
 ohos:right_margin="2.5vp"
 ohos:text="Radius TopRight"
 ohos:text_alignment="center"
 ohos:text_color="#ffffff"
 ohos:weight="1"
 rv:rv_backgroundColor="#DE88A5"
 rv:rv_cornerRadius_TR="10vp"/>

Radius Bottom Left

Radius BottomLeft отображается с закруглённым углом в нижней левой части.

<com.flyco.roundview.RoundTextView
 ohos:height="match_content"
 ohos:width="0vp"
 ohos:padding="10vp"
 ohos:right_margin="2.5vp"
 ohos:text="Radius Bottom Left"
 ohos:text_alignment="center"
 ohos:text_color="#ffffff"
 ohos:weight="1"
 rv:rv_backgroundColor="#DE88A5"
 rv:rv_cornerRadius_BL="10vp"/>

Radius Bottom Right

Radius BottomRight отображается с закруглённым углом в нижней правой части.

<com.flyco.roundview.RoundTextView
 ohos:height="match_content"
 ohos:width="0vp"
 ohos:padding="10vp"
 ohos:right_margin="2.5vp"
 ohos:text="Radius Bottom Right"
 ohos:text_alignment="center"
 ohos:text_color="#ffffff"
 ohos:weight="1"
 rv:rv_backgroundColor="#DE88A5"
 rv:rv_cornerRadius_BR="10vp"/>

FrameLayout

The FrameLayout

Как и ожидается, FrameLayout отображается в пользовательском интерфейсе с изображением и закруглёнными углами со всех четырёх сторон.

<com.flyco.roundview.RoundFrameLayout
    ohos:height="match_content"
    ohos:width="150vp"
    ohos:bottom_margin="10vp"
    ohos:padding="10vp"
    rv:rv_backgroundColor="#009688"
    rv:rv_cornerRadius="5vp">

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="center"
        ohos:text="FrameLayout"
        ohos:text_color="#ffffff"/>
</com.flyco.roundview.RoundFrameLayout>

Linear Layout

Linear Layout отображается в пользовательском интерфейсе вместе с изображением, фон заполнен цветом, как и ожидается.

<com.flyco.roundview.RoundLinearLayout
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:alignment="center"
    ohos:bottom_margin="10vp"
    ohos:left_padding="18vp"
    ohos:orientation="vertical"
    ohos:right_padding="18vp"
    ohos:text_color="#ffffff"
    ohos:top_padding="2vp"
    rv:rv_backgroundColor="#E45171"
    rv:rv_cornerRadius="5vp">

    <Image
        ohos:height="30vp"
        ohos:width="30vp"
        ohos:image_src="$media:ic_portrait"
        ohos:scale_mode="inside"
        ohos:text_color="#ffffff"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="LinearLayout"
        ohos:text_color="#ffffff"/>

</com.flyco.roundview.RoundLinearLayout>

Relative Layout

Relative Layout отображается в пользовательском интерфейсе вместе с изображением, фон заполнен цветом, как и ожидалось.

<com.flyco.roundview.RoundRelativeLayout
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:bottom_margin="10vp"
    ohos:bottom_padding="10vp"
    ohos:left_padding="18vp"
    ohos:right_padding="18vp"
    ohos:text_color="#ffffff"
    ohos:top_padding="10vp"
    rv:rv_backgroundColor="#655989"
    rv:rv_isRadiusHalfHeight="true">

    <Image
        ohos:id="$+id:iv_portrait"
        ohos:height="30vp"
        ohos:width="30vp"
        ohos:image_src="$media:ic_portrait"
        ohos:scale_mode="inside"
        ohos:text_color="#ffffff"
        ohos:vertical_center="true"/>

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:left_margin="5vp"
        ohos:right_of="$+id:iv_portrait"
        ohos:text="RelativeLayout"
        ohos:text_color="#ffffff"
        ohos:vertical_center="true"/>
</com.flyco.roundview.RoundRelativeLayout>

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

Способ 1: Сгенерируйте har-пакет из библиотеки и добавьте его в папку lib. Добавьте следующий код в gradle проекта:

implementation fileTree(dir: 'libs', include: ['.jar', '.har'])

* **Способ 2:**

allprojects{ repositories{ mavenCentral() } }

implementation 'io.openharmony.tpc.thirdlib:FlycoRoundView:1.0.1'

| Имя | Формат | Описание |
|:---:|:---:|:---:|
| rv_backgroundColor | color | Цвет фона |
| rv_backgroundPressColor | color | Цвет нажатого фона |
| rv_cornerRadius | dimension | Радиус прямоугольника фона, единица измерения vp |
| rv_strokeWidth | dimension | Ширина обводки прямоугольника фона, единица измерения vp |
| rv_strokeColor | color |Цвет обводки прямоугольника фона |
| rv_strokePressColor | color |Цвет нажатой обводки прямоугольника фона |
| rv_textPressColor | color |Цвет текста при нажатии |
| rv_isRadiusHalfHeight | boolean | Радиус углов равен половине высоты |
| rv_isWidthHeightEqual | boolean | Ширина и высота равны максимальному значению из них |
| rv_cornerRadius_TL | dimension | Радиус верхнего левого угла, единица измерения vp |
| rv_cornerRadius_TR | dimension | Радиус верхнего правого угла, единица измерения vp |
| rv_cornerRadius_BL | dimension | Радиус нижнего левого угла, единица измерения vp |
| rv_cornerRadius_BR | dimension | Радиус нижнего правого угла, единица измерения vp |