# ScalableLayout

**Repository Path**: baijuncheng-open-source/ScalableLayout

## Basic Information

- **Project Name**: ScalableLayout
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-22
- **Last Updated**: 2021-07-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

鸿蒙版的可扩展布局。
====================

Class: com.ssomai.ohos.scalablelayout.ScalableLayout

每种不同的设备尺寸只有一种布局!<br/>
====================

ScalableLayout 是一种新布局，可帮助您在任何屏幕尺寸和任何布局尺寸上保持一致的 UI。
ScalableLayout 可用于替代布局 (i.e. StackLayout, DirectionalLayout, etc.) 并为您正确缩放所有子视图。
UI小部件，如 Text 或 Image 获得相对的 (x,y) 坐标和相对的 (width, height) 值来自 ScalableLayout。
ScalableLayout 然后根据这些值放置和调整小部件的大小。
您可以通过导入一个 java 文件来使用 ScalableLayout。
您可以在项目中将 ScalableLayout 与 Java 或 XML 结合使用。
ScalableLayout 用于 EverySing Karaoke 应用程序，该应用程序在 2013 年 Google Play 应用程序奖中获奖。

该库作为 AAR 推送到 Maven Central，因此您只需要在 build.gradle 中添加以下依赖项。
```groovy
dependencies {
  implementation 'com.gitee.baijuncheng-open-source:ScalableLayout:1.0.1'
}
```

# Simple example in Java
```java
// 启动 ScalableLayout 实例，宽度为 400，高度为 200。
// 这是一个相对单位，不是像素或倾角。
ScalableLayout sl = new ScalableLayout(this, 400, 200);

// 在 ScalableLayout 实例中放置一个 Text 实例。
Text tv = new Text(this);

// 使用以下参数放置 Text。左：20，上：40，宽：100，高：30。
// 它将根据其父 ScalableLayout 的大小自动放置和缩放。
sl.addComponents(tv, 20f, 40f, 100f, 30f);

// 将 Text 的文字大小设置为 20。它会自动缩放。
sl.setScale_TextSize(tv, 20f);

// Text 的所有原始方法都可以正常工作。
ShapeElement bg = new ShapeElement();
bg.setRgbColor(RgbColor.fromArgbInt(0xFFFFFF00));
tv.setText("test");
tv.setBackground(bg);


// 在 ScalableLayout 实例中放置一个 Image 实例。
Image iv = new Image(this);

// 使用以下参数放置图像。左：200，上：30，宽：50，高：50。
// 它将根据其父 ScalableLayout 的大小自动放置和缩放。
sl.addComponents(iv, 200f, 30f, 50f, 50f);

// 当然，Image 的所有原始方法都可以正常工作。
iv.setPixelMap(ResourceTable.Media_icon);
```

# Simple example in XML
```xml
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    xmlns:app="http://schemas.huawei.com/res/ohos-auto"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <com.ssomai.ohos.scalablelayout.ScalableLayout
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#FFB80D74"
        app:scale_base_height="120"
        app:scale_base_width="506"
        >

        <Text
            ohos:id="$+id:txtView"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="#FFE50F0F"
            ohos:max_text_lines="1"
            ohos:text="testscalab"
            ohos:text_alignment="left|vertical_center"
            ohos:truncation_mode="ellipsis_at_end"
            app:scale_height="120"
            app:scale_left="50"
            app:scale_left_baseposition="left"
            app:scale_textsize="90"
            app:scale_top="0"
            app:scale_width="0"
            app:textview_wrapcontent_direction="right"
            app:textview_wrapcontent_movesiblings="true"
            app:textview_wrapcontent_resizesurrounded="false"
            app:textview_wrapcontent_scale_maxwidth="286"
            />

        <Component
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="$color:holo_green_dark"
            app:scale_height="100"
            app:scale_width="100"
            />

    </com.ssomai.ohos.scalablelayout.ScalableLayout>


    <StackLayout
        ohos:id="$+id:parent"
        ohos:height="0vp"
        ohos:width="match_parent"
        ohos:weight="1"/>


```

不同分辨率设备上的 ScalableLayout 示例。
====================
<img src="/pic/pic.png" width="360" height="640" />


## License
```
   Copyright 2017 ssomai.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```