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

OSCHINA-MIRROR/youngsoft-MyLinearLayout

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

Версия Лицензия Платформа Поддержка Weibo QQ GitHub stars

Логотип

MyLayout (2017.4.11)

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

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

Использование* Есть контейнерный вид 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)**

Комментарии ( 0 )

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

Введение

A powerful iOS view layout library, suitable for all kinds of screen size. Don't need to learn AutoLayout and SizeClass. You can use LinearLayout, RelativeLayout,FrameLayout,TableLayout,FlowLayout to create you UI Layout Развернуть Свернуть
MIT
Отмена

Обновления

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

Участники

все

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

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