Tutorial 5: Create reusable view using xml layout file

In this tutorial I will create a reusable view AttachmentView and use it.

Derive AttachmentView from FlexCustomBaseView and make event binding

// AttachmentView.h
@interface AttachmentView : FlexCustomBaseView
@end

// AttachmentView.m
#import "AttachmentView.h"

@interface AttachmentView()
{
    UIView* _attachParent;   // it will be binded from layout file
}
@end

@implementation AttachmentView
// here, you can do some extra initialization
-(void)onInit{
    _flexibleWidth = NO;
    _flexibleHeight = YES;
}
-(void)removeCell:(UIGestureRecognizer*)sender
{
    UIView* cell = sender.view;
    [cell removeFromSuperview];
    [_attachParent markDirty];
}
// this function will be binded from layout file. this will show you
// how to add views dynamically
-(void)onAddAttachment
{
    UITapGestureRecognizer *tap=[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(removeCell:)];
    UIView* cell = [[UIView alloc]init];
    
    [cell enableFlexLayout:YES];
    [cell addGestureRecognizer:tap];
    
    [cell setLayoutAttrStrings:@[
                                 @"width",@"100%",
                                 @"height",@"44",
                                 @"marginTop",@"5",
                                 @"marginBottom",@"5",
                                 @"alignItems",@"center",
                                 @"justifyContent",@"center",
                                 ]];
    [cell setViewAttr:@"bgColor" Value:@"#e5e5e5"];
    [_attachParent addSubview:cell];
    
    UILabel* label=[UILabel new];
    [label enableFlexLayout:YES];
    [label setViewAttrStrings:@[
                                @"fontSize",@"16",
                                @"color",@"red",
                                @"text",@"点我删除",
                                ]];
    [cell addSubview:label];
    
    [_attachParent markDirty];
}
@end

Create xml layout file with name 'AttachmentView.xml'

<?xml version="1.0" encoding="utf-8"?>
<UIView layout="flex:1,margin:10">
    <UILabel attr="fontSize:16,color:#333333,text:附件"/>
    <FlexContainerView name="_attachParent" layout="marginTop:5,marginBottom:5"/>
    <FlexTouchView onPress="onAddAttachment" attr="underlayColor:#e5e5e5">
        <UIImageView layout="" attr="source:select.png"/>
    </FlexTouchView>
</UIView>

Use AttachmentView in layout file

<?xml version="1.0" encoding="utf-8"?>
<UIView layout="flex:1,margin:10">
     <UIView layout="height:10" attr="bgColor:#e5e5e5"/>
     <AttachmentView/>
     <UIView layout="height:10" attr="bgColor:#e5e5e5"/>   
</UIView>