使用XIB+UIVIew自定义一个如下的页面,
- 创建一个XIB然后添加内容(后面有XIB对应的源代码,可以粘贴到空xib文件中生产该页面)
- 创建
WriterInfoView
类继承UIView
,下面有WriterInfoView
的实现文件可以直接使用 - 需要设置Xib的属性如下,绑定到
WriterInfoView
中
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中添加WriterInfoView
到self.view
里面,需要注意的地方是,在viewDidLoad
方法中添加并且设置frame,WriterInfoView
对象的高度会减少navigationbar的高度,需要延迟到viewDidLayoutSubviews
方法中调用才正常。如果是使用tableView,添加到headerView中则没有问题,此为记
WriterInfoView* view = [WriterInfoView writerInfoView];
[self.view addSubview:view];