使用XIB自定义UIView

使用XIB+UIVIew自定义一个如下的页面,

  1. 创建一个XIB然后添加内容(后面有XIB对应的源代码,可以粘贴到空xib文件中生产该页面)
    xib界面
  2. 创建WriterInfoView类继承UIView,下面有WriterInfoView的实现文件可以直接使用
  3. 需要设置Xib的属性如下,绑定到WriterInfoView
    xib界面的属性设置

xib的源码如下

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="11762" systemVersion="16A323" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
    <device id="retina4_7" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="11757"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <view contentMode="scaleToFill" id="iN0-l3-epB" customClass="WriterInfoView">
            <rect key="frame" x="0.0" y="0.0" width="341" height="246"/>
            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
            <subviews>
                <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="FTb-Y3-Lvj">
                    <rect key="frame" x="145.5" y="20" width="50" height="50"/>
                    <color key="backgroundColor" red="0.07945281127986048" green="1" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                    <constraints>
                        <constraint firstAttribute="height" constant="50" id="cxe-zc-opM"/>
                        <constraint firstAttribute="width" constant="50" id="zQd-FY-aPp"/>
                    </constraints>
                </imageView>
                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Namename" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ahv-TW-9MS">
                    <rect key="frame" x="126.5" y="78" width="88" height="21"/>
                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
                    <nil key="textColor"/>
                    <nil key="highlightedColor"/>
                </label>
                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Singapore" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="CDX-WH-gCS">
                    <rect key="frame" x="136" y="107" width="69.5" height="18"/>
                    <fontDescription key="fontDescription" type="system" pointSize="15"/>
                    <nil key="textColor"/>
                    <nil key="highlightedColor"/>
                </label>
                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="●" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="TDf-Cw-xkh">
                    <rect key="frame" x="120.5" y="111" width="7.5" height="10"/>
                    <fontDescription key="fontDescription" type="system" pointSize="8"/>
                    <nil key="textColor"/>
                    <nil key="highlightedColor"/>
                </label>
                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="●" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="TcI-nN-O8H">
                    <rect key="frame" x="213.5" y="111" width="7.5" height="10"/>
                    <fontDescription key="fontDescription" type="system" pointSize="8"/>
                    <nil key="textColor"/>
                    <nil key="highlightedColor"/>
                </label>
                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="MMOsiter" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="loG-O4-Tu8">
                    <rect key="frame" x="44.5" y="107" width="68" height="18"/>
                    <fontDescription key="fontDescription" type="system" pointSize="15"/>
                    <nil key="textColor"/>
                    <nil key="highlightedColor"/>
                </label>
                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Fans 11657" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="X5t-AC-TzO">
                    <rect key="frame" x="229" y="107" width="76.5" height="18"/>
                    <fontDescription key="fontDescription" type="system" pointSize="15"/>
                    <nil key="textColor"/>
                    <nil key="highlightedColor"/>
                </label>
                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" verticalCompressionResistancePriority="749" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="OkJ-OI-7dD">
                    <rect key="frame" x="16" y="133" width="309" height="100.5"/>
                    <string key="text">XXXX is a gamer chick that enjoys playing healers in MMOs. She enjoys the social interaction and the raiding intensity of MMOs. She also enjoys writing guides that help newbies and verterans alike to suceed in their game.</string>
                    <fontDescription key="fontDescription" type="system" pointSize="14"/>
                    <nil key="textColor"/>
                    <nil key="highlightedColor"/>
                </label>
            </subviews>
            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
            <constraints>
                <constraint firstItem="ahv-TW-9MS" firstAttribute="top" secondItem="FTb-Y3-Lvj" secondAttribute="bottom" constant="8" id="9f4-9d-Dxz"/>
                <constraint firstItem="ahv-TW-9MS" firstAttribute="centerX" secondItem="iN0-l3-epB" secondAttribute="centerX" id="BhJ-Ij-c5K"/>
                <constraint firstItem="CDX-WH-gCS" firstAttribute="leading" secondItem="TDf-Cw-xkh" secondAttribute="trailing" constant="8" id="DAd-tl-Up3"/>
                <constraint firstItem="OkJ-OI-7dD" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="16" id="EGy-1q-1jh"/>
                <constraint firstItem="X5t-AC-TzO" firstAttribute="leading" secondItem="TcI-nN-O8H" secondAttribute="trailing" constant="8" id="EUi-vB-aOD"/>
                <constraint firstItem="FTb-Y3-Lvj" firstAttribute="centerX" secondItem="iN0-l3-epB" secondAttribute="centerX" id="HlH-nq-NdP"/>
                <constraint firstItem="OkJ-OI-7dD" firstAttribute="top" secondItem="X5t-AC-TzO" secondAttribute="bottom" constant="8" id="Kbi-nV-UUx"/>
                <constraint firstItem="TDf-Cw-xkh" firstAttribute="leading" secondItem="loG-O4-Tu8" secondAttribute="trailing" constant="8" id="O1U-cJ-aC6"/>
                <constraint firstItem="TcI-nN-O8H" firstAttribute="centerY" secondItem="CDX-WH-gCS" secondAttribute="centerY" id="Upf-lK-GMR"/>
                <constraint firstAttribute="trailing" secondItem="OkJ-OI-7dD" secondAttribute="trailing" constant="16" id="V2z-wX-1St"/>
                <constraint firstItem="CDX-WH-gCS" firstAttribute="centerX" secondItem="iN0-l3-epB" secondAttribute="centerX" id="VID-Y0-xga"/>
                <constraint firstItem="TcI-nN-O8H" firstAttribute="leading" secondItem="CDX-WH-gCS" secondAttribute="trailing" constant="8" id="W4g-HE-tbF"/>
                <constraint firstItem="CDX-WH-gCS" firstAttribute="centerY" secondItem="loG-O4-Tu8" secondAttribute="centerY" id="WSl-wB-M3r"/>
                <constraint firstItem="X5t-AC-TzO" firstAttribute="centerY" secondItem="loG-O4-Tu8" secondAttribute="centerY" id="Zsb-1w-XCe"/>
                <constraint firstItem="FTb-Y3-Lvj" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" constant="20" id="dj7-rC-pt9"/>
                <constraint firstItem="CDX-WH-gCS" firstAttribute="centerY" secondItem="TDf-Cw-xkh" secondAttribute="centerY" id="gYB-2w-S4d"/>
                <constraint firstItem="CDX-WH-gCS" firstAttribute="top" secondItem="ahv-TW-9MS" secondAttribute="bottom" constant="8" id="oXQ-Ne-KIc"/>
            </constraints>
            <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
            <connections>
                <outlet property="fansNumLabel" destination="X5t-AC-TzO" id="vWs-Zz-iwO"/>
                <outlet property="headImageView" destination="FTb-Y3-Lvj" id="yec-f4-oYD"/>
                <outlet property="headTopCons" destination="dj7-rC-pt9" id="FIg-xf-IPk"/>
                <outlet property="locationLabel" destination="CDX-WH-gCS" id="uF3-GE-UQJ"/>
                <outlet property="locationTopCons" destination="oXQ-Ne-KIc" id="mI5-Yy-Dnl"/>
                <outlet property="nameLabel" destination="ahv-TW-9MS" id="inS-1F-7Bp"/>
                <outlet property="nameTopCons" destination="9f4-9d-Dxz" id="uIS-K7-Mdk"/>
                <outlet property="tagLabel" destination="loG-O4-Tu8" id="N2K-Ae-lGS"/>
                <outlet property="writerContentLeftCons" destination="EGy-1q-1jh" id="qEH-Wb-iX1"/>
                <outlet property="writerContentRightCons" destination="V2z-wX-1St" id="cBd-tv-Mn6"/>
                <outlet property="writerContentTopCons" destination="Kbi-nV-UUx" id="N3F-yt-awE"/>
                <outlet property="writerInfoContentLabel" destination="OkJ-OI-7dD" id="ODo-MN-U6s"/>
                <outletCollection property="separatorPoints" destination="TcI-nN-O8H" id="qXc-zz-9Ml"/>
                <outletCollection property="separatorPoints" destination="TDf-Cw-xkh" id="LCb-xH-tEn"/>
            </connections>
            <point key="canvasLocation" x="-9.5" y="-289"/>
        </view>
    </objects>
</document>

WriterInfoView.m文件,可以在awakeFromNib方法中处理约束的值,字体、字号等相关的属性设置,添加了一个工厂方法+ (instancetype)writerInfoView来返回XIB对应的WriterInfoView对象

//
//  WriterInfoView.m
//  mmosite
//
//  Created by aron on 2017/3/13.
//  Copyright © 2017年 qingot. All rights reserved.
//

#import "WriterInfoView.h"

@interface WriterInfoView () {
    CGFloat _contentOffY;
}

@property (weak, nonatomic) IBOutlet UIImageView *headImageView;
@property (weak, nonatomic) IBOutlet UILabel *nameLabel;
@property (weak, nonatomic) IBOutlet UILabel *locationLabel;
@property (weak, nonatomic) IBOutlet UILabel *tagLabel;
@property (weak, nonatomic) IBOutlet UILabel *fansNumLabel;
@property (weak, nonatomic) IBOutlet UILabel *writerInfoContentLabel;

@property (strong, nonatomic) IBOutletCollection(UILabel) NSArray *separatorPoints;

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *headTopCons;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *nameTopCons;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *locationTopCons;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *writerContentTopCons;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *writerContentLeftCons;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *writerContentRightCons;

@end

@implementation WriterInfoView

+ (instancetype)writerInfoView {
    WriterInfoView* view = [[NSBundle mainBundle] loadNibNamed:@"WriterInfoView" owner:self options:nil].firstObject;
    return view;
}

- (void)awakeFromNib {
    [super awakeFromNib];
    
    // 处理一些属性的设置
    _headTopCons.constant = convertLength(92.0f/3);
    _nameTopCons.constant = convertLength(58.0f/3);
    _locationTopCons.constant = convertLength(58.0f/3);
    _writerContentTopCons.constant = convertLength(80.0f/3);
    _writerContentLeftCons.constant = convertLength(76.0f/3);
    _writerContentRightCons.constant = convertLength(76.0f/3);
    
    // 字体
    _nameLabel.font = [FontConfig writerNameFont];
    _tagLabel.font = [FontConfig writerTagFont];
    _locationLabel.font = [FontConfig writerTagFont];
    _fansNumLabel.font = [FontConfig writerTagFont];
    _writerInfoContentLabel.font = [FontConfig writerInfoFont];
    
    // 颜色
    _nameLabel.textColor = [ColorConfig writerNameColor];
    _tagLabel.textColor = [ColorConfig writerTagColor];
    _locationLabel.textColor = [ColorConfig writerTagColor];
    _fansNumLabel.textColor = [ColorConfig writerTagColor];
    _writerInfoContentLabel.textColor = [ColorConfig writerInfoColor];
    for (UILabel* separatorPointLabel in _separatorPoints) {
        separatorPointLabel.textColor = [ColorConfig writerTagColor];
    }
}

- (void)updateConstraints {
    [super updateConstraints];
    
    _contentOffY = _writerInfoContentLabel.frame.origin.y;
    
    DBLog(@"===");

}

- (void)layoutSubviews {
    [super layoutSubviews];
    
    _contentOffY = _writerInfoContentLabel.frame.origin.y;
    
    [self p_updateFrame];
    
    // 处理子View的布局
    DBLog(@"===");
}

#pragma mark - ......::::::: public :::::::......

- (void)setupContent:(NSString*)content {
    _writerInfoContentLabel.text = content;
}

- (void)p_updateFrame {
    CGSize simulateSize = [_writerInfoContentLabel sizeThatFits:CGSizeMake(_writerInfoContentLabel.frame.size.width, 10000)];
    CGRect viewFrame = self.frame;
    viewFrame.size.height = _contentOffY + simulateSize.height + convertLength(80.0f/3);
    self.frame = viewFrame;
}

@end

使用,在ViewController中添加WriterInfoViewself.view里面,需要注意的地方是,在viewDidLoad方法中添加并且设置frame,WriterInfoView对象的高度会减少navigationbar的高度,需要延迟到viewDidLayoutSubviews方法中调用才正常。如果是使用tableView,添加到headerView中则没有问题,此为记

WriterInfoView* view = [WriterInfoView writerInfoView];
[self.view addSubview:view];
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值