使用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];
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章