README.md · OSCHINA-MIRROR/youngsoft-MyLinearLayout

Логотип

MyLayout (2017.4.11)

MyLayout — это простой и удобный Objective-C-фреймворк для макетов в iOS. MyLayout предоставляет несколько простых функций для создания различных сложных интерфейсов. В него включены функции, такие как: Auto Layout и Size Class в iOS, пять классов макета в Android, float и flex-box в HTML/CSS. Версия MyLayout на Swift названа: TangramKit

Китайский (упрощённый): 中文说明

Использование* Есть контейнерный вид S с шириной 100 и высотой, которая равна сумме высот всех подвидов. Четыре подвида A, B, C и D расположены сверху вниз.

Подвид A имеет левый отступ 20% ширины S, правый отступ 30% ширины S, а также высоту, равную ширине A.
Подвид B имеет левый отступ 40, заполненную ширину до оставшейся ширины S и высоту 40.
Подвид C имеет заполненную ширину до S и высоту 40.
Подвид D имеет правый отступ 20, ширину 50% ширины S и высоту 40.

objective-cmarkdown MyLinearLayout *S = [MyLinearLayout linearLayoutWithOrientation:MyLayoutViewOrientation_Vert]; S.subviewSpace = 10; S.widthSize.equalTo(@100);

UIView *A = UIView.new;
A.leftPos.equalTo(@0.2);
A.rightPos.equalTo(@0.3);
A.heightSize.equalTo(A.widthSize);
[S addSubview:A];

UIView *B = UIView.new;
B.leftPos.equalTo(@40);
B.widthSize.equalTo(@60);
B.heightSize.equalTo(@40);
[S addSubview:B];

UIView *C = UIView.new;
C.leftPos.equalTo(@0);
C.rightPos.equalTo(@0);
C.heightSize.equalTo(@40);
[S addSubview:C];

UIView *D = UIView.new;
D.rightPos.equalTo(@20);
D.widthSize.equalTo(S.widthSize).multiply(0.5);
D.heightSize.equalTo(@40);
[S addSubview:D];


Текстовый контекст отсутствует в данном примере, поэтому он представлен без изменений, как указано в правиле перевода.

# Архитектура

![Демо](https://raw.githubusercontent.com/youngsoft/MyLinearLayout/master/MyLayout/MyLayoutClass.png)

### MyLayoutPos
`MyLayoutPos` представляет положение представления. `UIView` предоставляет шесть расширенных переменных: `leftPos`, `topPos`, `bottomPos`, `rightPos`, `centerXPos`, `centerYPos` для установки отступа представления или расстояния между собой и другими. Вы можете использовать метод `equalTo`, чтобы установить значение `NSNumber`, `MyLayoutPos` или `NSArray<MyLayoutPos*>`. Есть также шесть простых переменных: `myLeft`, `myTop`, `myBottom`, `myRight`, `myCenterX`, `myCenterY` для установки значения `NSNumber`. Например: `A.leftPos.equalTo(@10); <==> A.myLeft = 10;`### MyLayoutSize
`MyLayoutSize` представляет размер представления. `UIView` предоставляет две расширенные переменные: `widthSize`, `heightSize` для установки ширины и высоты представления. Вы можете использовать метод `equalTo`, чтобы установить значение `NSNumber`, `MyLayoutSize` или `NSArray<MyLayoutSize*>`. Также есть две простые переменные: `myWidth`, `myHeight` для установки значения `NSNumber`. Например: `A.widthSize.equalTo(@10); <==> A.myWidth = 10;`### MyLinearLayout
> Эквивалентен: UIStackView в iOS и LinearLayout в Android.

Линейное представление — это одномерное представление, где подпредставления располагаются последовательно согласно порядку добавления (сверху вниз или слева направо). Поэтому ограничения относительно начала и размера подпредставлений устанавливаются в порядке добавления. Подпредставления, расположенные сверху вниз, называются вертикальным линейным представлением, а те, что расположены слева направо, — горизонтальным линейным представлением.

![Пример](https://raw.githubusercontent.com/youngsoft/MyLinearLayout/master/MyLayout/ll.png)

Пример кода:

```objective-c
-(void)loadView
{
    [super loadView];
    
    MyLinearLayout *S = [MyLinearLayout linearLayoutWithOrientation:MyLayoutViewOrientation_Vert];
    S.myWidth = 120;
    S.subviewSpace = 10;
    
    UIView *A = [UIView new];
    A.myLeft = A.myRight = 5;
    A.myHeight = 40;
    [S addSubview:A];
    
    UIView *B = [UIView new];
    B.myLeft = 20;
    B.myWidth = B.myHeight = 40;
    [S addSubview:B];
    
    UIView *C = [UIView new];
    C.myRight = 40;
    C.myWidth = 50;
    C.myHeight = 40;
    [S addSubview:C];
    
    UIView *D = [UIView new];
    D.myLeft = D.myRight = 10;
    D.myHeight = 40;
    [S addSubview:D];
    
    [self.view addSubview:S];
    S.backgroundColor = [UIColor redColor];
    A.backgroundColor = [UIColor greenColor];
    B.backgroundColor = [UIColor blueColor];
    C.backgroundColor = [UIColor orangeColor];
    D.backgroundColor = [UIColor cyanColor];
}

MyRelativeLayout

Эквивалентен: AutoLayout для iOS и RelativeLayout для Android.RelativeLayout — это виджет макета, который располагает и позиционирует вложенные элементы с помощью взаимных ограничений. Вложенные элементы в RelativeLayout не зависят от порядка добавления, а располагаются и позиционируются путём установки ограничений этих элементов.

Пример кода:


-(void)loadView
{
    [super loadView];
    
    MyRelativeLayout *S = [MyRelativeLayout new];
    S.widthSize.equalTo(@170);
    S.heightSize.equalTo(@280);
    
    UIView *A = [UIView new];
    A.leftPos.equalTo(@20);
    A.topPos.equalTo(@20);
    A.widthSize.equalTo(@40);
    A.heightSize.equalTo(A.widthSize);
    [S addSubview:A];
    
    UIView *B = [UIView new];
    B.leftPos.equalTo(A.centerXPos);
    B.topPos.equalTo(A.bottomPos).offset(10);
    B.widthSize.equalTo(@60);
    B.heightSize.equalTo(A.heightSize);
    [S addSubview:B];
    
    UIView *C = [UIView new];
    C.leftPos.equalTo(B.rightPos).offset(10);
    C.bottomPos.equalTo(B.bottomPos);
    C.widthSize.equalTo(@40);
    C.heightSize.equalTo(B.heightSize).multiply(0.5);
    [S addSubview:C];
    
    UIView *D = [UIView new];
    D.bottomPos.equalTo(C.topPos).offset(10);
    D.rightPos.equalTo(@15);
    D.heightSize.equalTo(A.heightSize);
    D.widthSize.equalTo(D.heightSize);
    [S addSubview:D];
    
    UIView *E = [UIView new];
    E.centerYPos.equalTo(@0);
    E.centerXPos.equalTo(@0);
    E.heightSize.equalTo(@40);
    E.widthSize.equalTo(S.widthSize).add(-20);
    [S addSubview:E];
    //.. F, G
    
    [self.view addSubview:S];
    S.backgroundColor = [UIColor redColor];
    A.backgroundColor = [UIColor greenColor];
    B.backgroundColor = [UIColor blueColor];
    C.backgroundColor = [UIColor orangeColor];
    D.backgroundColor = [UIColor cyanColor];
    E.backgroundColor = [UIColor magentaColor];
}

```### MyFrameLayout
> Эквивалентен: `FrameLayout` для Android. Размещение рамок — это вид разметки, при котором подэлементы могут накладываться друг на друга и располагаться в специальных местах относительно `SupperView`. Положение и размер подэлементов не зависят от порядка их добавления и создаются зависимости с `SupperView`. Размещение рамок делит вертикальное направление на верхнюю часть, центральную вертикальную часть и нижнюю часть, а горизонтальное направление — на левую сторону, центральную горизонтальную часть и правую сторону. Любой из подэлементов может располагаться либо в вертикальной ориентации, либо в горизонтальной ориентации. ![Пример эффекта отображения](https://raw.githubusercontent.com/youngsoft/MyLinearLayout/master/MyLayout/fl.png)Пример кода:

```objective-c

-(void)loadView
{
    [super loadView];
    
    MyFrameLayout *S = [MyFrameLayout new];
    S.mySize = CGSizeMake(320,500);
    
    UIView *A = [UIView new];
    A.mySize = CGSizeMake(40,40);
    [S addSubview:A];
    
    UIView *B = [UIView new];
    B.mySize = CGSizeMake(40,40);
    B.myRight = 0;
    [S addSubview:B];
    
    UIView *C = [UIView new];
    C.mySize = CGSizeMake(40,40);
    C.myCenterY = 0;
    [S addSubview:C];
    
    UIView *D = [UIView new];
    D.mySize = CGSizeMake(40,40);
    D.myCenter = CGPointZero;
    [S addSubview:D];
    
    //..E, F, G
    
    [self.view addSubview:S];
    S.backgroundColor = [UIColor redColor];
    A.backgroundColor = [UIColor greenColor];
    B.backgroundColor = [UIColor blueColor];
    C.backgroundColor = [UIColor orangeColor];
    D.backgroundColor = [UIColor cyanColor];  
}

MyTableLayout

Эквивалентен: TableLayout в Android и таблице в HTML.

Таблица — это макет, который располагает подмакеты в виде таблицы с несколькими рядами и столбцами. Сначала вы должны создать ряд и добавить его в макет таблицы, затем добавить подмакеты в ряд. Если ряды расположены сверху вниз, то макет называется вертикальной таблицей, где подмакеты располагаются слева направо; если ряды расположены слева направо, то макет называется горизонтальной таблицей, где подмакеты располагаются сверху вниз.

Пример эффекта отображения

Пример кода:objective-cmarkdown -(void)loadView { [super loadView];

MyTableLayout *S = [MyTableLayout tableLayoutWithOrientation:MyLayoutViewOrientation_Vert];
S.wrapContentWidth = YES;
S.subviewHSpace = 10;
S.subviewVSpace = 10;

[S addRow:MTLSIZE_WRAPCONTENT colSize:MTLSIZE_WRAPCONTENT];

UIView *A = [UIView new];
A.mySize = CGSizeMake(50,40);
[S addSubview:A];

UIView *B = [UIView new];
B.mySize = CGSizeMake(100,40);
[S addSubview:B];

UIView *C = [UIView new];
C.mySize = CGSizeMake(30,40);
[S addSubview:C];

[S addRow:MTLSIZE_WRAPCONTENT colSize:MTLSIZE_WRAPCONTENT];

UIView *D = [UIView new];
D.mySize = CGSizeMake(200,40);
[S addSubview:D];

// ... E, F

[self.view addSubview:S];
S.backgroundColor = [UIColor redColor];
A.backgroundColor = [UIColor greenColor];
B.backgroundColor = [UIColor blueColor];
C.backgroundColor = [UIColor orangeColor];
D.backgroundColor = [UIColor cyanColor];

}

```### МойFlowLayout
> Эквивалентен: flexbox CSS3.```Поточная композиция представляет собой макет, который располагает подмакеты в нескольких строках в зависимости от добавленного порядка. При достижении ограничений по количеству или размеру подмакетов начинается новая строка с перестроением. Ограничения могут быть вертикальными или горизонтальными, поэтому поточная композиция делится на: макет с ограничением по количеству вертикально, макет с ограничением по размеру вертикально, макет с ограничением по колич�数量上的错误应该被纠正为：数量或大小的限制。以下是修正后的文本：

---

Поточная композиция представляет собой макет, который располагает подмакеты в нескольких строках в зависимости от добавленного порядка. При достижении ограничений по количеству или размеру подмакетов начинается новая строка с перестроением. Ограничения могут быть вертикальными или горизонтальными, поэтому поточная композиция делится на: макет с ограничением по количеству вертикально, макет с ограничением по размеру вертикально, макет с ограничением по количеству горизонтально, макет с ограничением по размеру горизонтально. Поточная композиция часто используется при регулярной расстановке подмакетов и может частично заменять UICollectionView. MyFlowLayout реализует большую часть функциональности flex-box из HTML/CSS.

![Пример работы](https://raw.githubusercontent.com/youngsoft/MyLinearLayout/master/MyLayout/fll.png)

Пример кода:

```objective-c
-(void)loadView
{
    [super loadView];
    
    MyFlowLayout *S = [MyFlowLayout flowLayoutWithOrientation:MyLayoutViewOrientation_Vert arrangedCount:4];
    S.wrapContentHeight = YES;
    S.myWidth = 300;
    S.padding = UIEdgeInsetsMake(10, 10, 10, 10);
    S.gravity = MyGravity_Horz_Fill;
    S.subviewSpace = 10;
    
    for (int i = 0; i < 10; i++)
    {
        UIView *A = [UIView new];
        A.heightSize.equalTo(A.widthSize);
        [S addSubview:A];
        
        A.backgroundColor = [UIColor greenColor];

    }
    
    
    [self.view addSubview:S];
    S.backgroundColor = [UIColor redColor];
}

MyFloatLayout

Эквивалентен: float CSS.

---Плавающий макет представляет собой макет, где подмакеты плавают в указанном направлении. Когда пространство недостаточно для размещения всех подмакетов, они автоматически занимают лучшее доступное место. Концепция плавающего макета основана на технологии плавающего позиционирования из HTML/CSS, что позволяет создавать нерегулярные макеты. В зависимости от ориентации плавания, плавающий макет можно разделить на лево-правый плавающий макет и верхо-низальный плавающий макет. Пример работы

Пример кода:


    - (void)loadView {
        [super loadView];

        MyFloatLayout *S = [MyFloatLayout floatLayoutWithOrientation:MyLayoutViewOrientation_Vert];
        S.wrapContentHeight = YES;
        S.padding = UIEdgeInsetsMake(10, 10, 10, 10);
        S.subviewSpace = 10;
        S.myWidth = 300;

        UIView *A = [[UIView alloc] init];
        A.mySize = CGSizeMake(80, 70);
        [S addSubview:A];

        UIView *B = [[UIView alloc] init];
        B.mySize = CGSizeMake(150, 40);
        [S addSubview:B];

        UIView *C = [[UIView alloc] init];
        C.mySize = CGSizeMake(70, 40);
        [S addSubview:C];

        UIView *D = [[UIView alloc] init];
        D.mySize = CGSizeMake(100, 140);
        [S addSubview:D];

        UIView *E = [[UIView alloc] init];
        E.mySize = CGSizeMake(150, 40);
        E.reverseFloat = YES;
        [S addSubview:E];

        UIView *F = [[UIView alloc] init];
        F.mySize = CGSizeMake(120, 60);
        [S addSubview:F];

        [[self view] addSubview:S];
        S.backgroundColor = [UIColor redColor];
        A.backgroundColor = [UIColor greenColor];
        B.backgroundColor = [UIColor blueColor];
        C.backgroundColor = [UIColor orangeColor];
        D.backgroundColor = [UIColor cyanColor];
        E.backgroundColor = [UIColor blackColor];
        F.backgroundColor = [UIColor whiteColor];
    }

MyPathLayout

Единственная характеристика лейаута представления iOS.

Линейный путь представляет собой лейаут представления, где подэлементы располагаются по заданному пути. Вам необходимо предоставить функциональное уравнение, координату и тип расстояния для создания этого пути, после чего все подэлементы будут равномерно распределены по нему. Линейный путь часто используется для создания уникальных и эстетичных пользовательских интерфейсов.

Пример кода:


    - (void)loadView {
        [super loadView];

        MyPathLayout *S = [[MyPathLayout alloc] init];
        S.mySize = CGSizeMake(320, 320);
        S.coordinateSetting.isReverse = YES;
        S.coordinateSetting.origin = CGPointMake(0.5, 0.2);

        S.polarEquation = ^ (CGFloat angle) {
            return 80 * (1 + cos(angle));
        };

        for (int i = 0; i < 4; i++) {
            UIView *A = [[UIView alloc] init];
            A.mySize = CGSizeMake(40, 40);
            [S addSubview:A];

            A.backgroundColor = [UIColor greenColor];
        }
    }

    [self.view addSubview:S];
    S.backgroundColor = [UIColor redColor];
}

МоёSizeClass

Эквивалентен: Размерным классам iOS.

МоёLayout предоставляет поддержку размерным классам с целью обеспечения соответствия различным размерам экранов устройств. Вы можете комбинировать размерные классы со всеми шестью видами представлений макета, чтобы идеально подстроиться под интерфейсы всех устройств. Есть два расширения метода UIView:


-(instancetype)fetchLayoutSizeClass:(MySizeClass)sizeClass;
-(instancetype)fetchLayoutSizeClass:(MySizeClass)sizeClass copyFrom:(MySizeClass)srcSizeClass;

чтобы установить характеристики размерных классов, как показано ниже:


//по умолчанию это все размерные классы
MyLinearLayout *rootLayout = [MyLinearLayout linearLayoutWithOrientation:MyLayoutViewOrientation_Vert];
    rootLayout.padding = UIEdgeInsetsMake(10, 10, 10, 10);
    rootLayout.wrapContentHeight = NO;
    rootLayout.gravity = MyGravity_Horz_Fill;

//MySizeClass_wAny | MySizeClass_hCompact — это горизонтальное положение iPhone.
MyLinearLayout *lsc = [rootLayout fetchLayoutSizeClass:MySizeClass_wAny | MySizeClass_hCompact copyFrom:MySizeClass_wAny | MySizeClass_hAny];
```    lsc.orientation = MyLayoutViewOrientation_Horz;
    lsc.wrapContentWidth = NO;
    lsc.gravity = MyGravity_Vert_Fill;

```markdown
## Пример демонстрации

![Демонстрационный эффект](https://raw.githubusercontent.com/youngsoft/MyLinearLayout/master/MyLayout/layoutdemo1.gif)
![Демонстрационный эффект](https://raw.githubusercontent.com/youngsoft/MyLinearLayout/master/MyLayout/layoutdemo2.gif)
![Демонстрационный эффект](https://raw.githubusercontent.com/youngsoft/MyLinearLayout/master/MyLayout/layoutdemo3.gif)
![Демонстрационный эффект](https://raw.githubusercontent.com/youngsoft/MyLinearLayout/master/MyLayout/layoutdemo4.gif)
![Демонстрационный эффект](https://raw.githubusercontent.com/youngsoft/MyLinearLayout/master/MyLayout/layoutdemo5.gif)
![Демонстрационный эффект](https://raw.githubusercontent.com/youngsoft/MyLinearLayout/master/MyLayout/layoutdemo6.gif)
![Демонстрационный эффект](https://raw.githubusercontent.com/youngsoft/MyLinearLayout/master/MyLayout/layoutdemo7.gif)

## Как начать работу [Скачайте MyLayout](https://github.com/youngsoft/MyLinearLayout/archive/master.zip) и попробуйте включённые примеры приложений для iPad и iPhone

Прочтите часто задаваемые вопросы (FAQ) или статьи ниже:
```[http://www.jianshu.com/p/4c1eb0dd676f](http://www.jianshu.com/p/4c1eb0dd676f) Описание основ и принципов layout  
[http://blog.csdn.net/yangtiang/article/details/46483999](http://blog.csdn.net/yangtiang/article/details/46483999) Линейный layout  
[http://blog.csdn.net/yangtiang/article/details/46795231](http://blog.csdn.net/yangtiang/article/details/46795231) Относительный layout  
[http://blog.csdn.net/yangtiang/article/details/46492083](http://blog.csdn.net/yangtiang/article/details/46492083) Frame Layout  
[http://blog.csdn.net/yangtiang/article/details/48011431](http://blog.csdn.net/yangtiang/article/details/48011431) Table Layout  
[http://blog.csdn.net/yangtiang/article/details/50652946](http://blog.csdn.net/yangtiang/article/details/50652946) Stack Layout  
[http://www.jianshu.com/p/0c075f2fdab2](http://www.jianshu.com/p/0c075f2fdab2) Flaring Layout  

Потому что мой английский слаб, поэтому я могу поддерживать только статьи на китайском языке, и я надеюсь, что кто-то поможет мне перевести на английский.## Коммуникация


- Если вам нужна помощь, используйте Stack Overflow или Baidu. (Добавьте тег 'mylayout')
- Если вы хотите связаться со мной, используйте *qq:156355113 или weibo:Оуян Дацзе или email:obq0387_cn@sina.com*
- Если вы нашли ошибку и можете предоставить шаги для надёжного воспроизведения её, откройте проблему.
- Если у вас есть запрос на новую функцию, откройте проблему.
- Если вы хотите внести свой вклад, отправьте запрос на пулл.


## Установка

MyLayout поддерживает несколько методов установки библиотеки в проект.
### Копирование в ваш проект
1. Копируйте папку `Lib` из демонстрационного проекта в ваш проект
2. Добавьте `#import "MyLayout.h"` в ваш файл PCH вашего проекта или в указанный заголовочный файл.

### Установка с помощью CocoaPods

CocoaPods — это менеджер зависимостей для Objective-C, который автоматизирует и упрощает процесс использования сторонних библиотек, таких как MyLayout, в ваших проектах. Вы можете установить его с помощью следующей команды:

`$ gem install cocoapods`

Чтобы интегрировать MyLayout в ваш проект Xcode с использованием CocoaPods, укажите его в вашем файле Podfile:

source 'https://github.com/CocoaPods/Specs.git' platform :ios, '7.0'

pod 'MyLayout', '~> 1.3.5'


Затем выполните следующую команду:

`$ pod install`



## Часто задаваемые вопросы* Если использование MyLayout приводит к 100%-ной загрузке ЦП из-за конфликта ограничений, проверьте настройки ограничений подчинённых элементов.
* Если приложение исключается во время выполнения метода MyBaseLayout `willMoveToSuperview`, это не имеет значения; просто удалите настройку исключения через CMD+7.
* Если вы устанавливаете `wrapContentWidth` или `wrapContentHeight` вместе с `widthSize` или `heightSize` в представлении, возможно, возникнет конфликт ограничений.
* Если вы устанавливаете представление как корневое представление `UIViewController`, убедитесь, что `wrapContentWidth` и `wrapContentHeight` установлены как `NO`.
- Только подчинённые элементы `MyLinearLayout` и `MyFrameLayout` поддерживают относительные отступы.
- Если подчинённый элемент добавлен в представление, метод `setFrame` может устанавливать размер, но не положение.## Лицензия

MyLayout распространяется под лицензией MIT. Подробнее см. в LICENSE.

## История версий
**[CHANGELOG.md](CHANGELOG.md)**

OSCHINA-MIRROR/youngsoft-MyLinearLayout

MyLayout (2017.4.11)

Китайский (упрощённый): 中文说明

Использование* Есть контейнерный вид S с шириной 100 и высотой, которая равна сумме высот всех подвидов. Четыре подвида A, B, C и D расположены сверху вниз.

MyRelativeLayout

MyTableLayout

MyFloatLayout

MyPathLayout

МоёSizeClass

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

Введение

Обновления

Участники

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

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

MyLayout (2017.4.11)

Китайский (упрощённый): 中文说明

Использование* Есть контейнерный вид S с шириной 100 и высотой, которая равна сумме высот всех подвидов. Четыре подвида A, B, C и D расположены сверху вниз.

MyRelativeLayout

MyTableLayout

MyFloatLayout

MyPathLayout

МоёSizeClass

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

Введение

Обновления

Участники

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

OSCHINA-MIRROR/youngsoft-MyLinearLayout