使用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];