uiscrollview - 顶部菜单栏中的单个按钮下划线
问题描述
- 如图MyTopBar 所示， 我在滚动视图中有 5 个 uibutton。我将它用作导航/顶部栏
- 我只想在 5 个按钮中的选定按钮上实现下划线效果。图像目标
- 我看到了一些图书馆，但它没有像我预期的那样工作
- 我将刷新相同的视图，所以这不是很有用
- 有人能告诉我实现这种下划线效果的简单方法吗？
解决方案
有多种方法可以做到这一点。这是一种方法...
- 将按钮放在水平堆栈视图中
- 添加 a
UIView作为您的“下划线视图”
对于您的“下划线视图”：
- 将高度约束设置为 4
- 设置顶部约束等于堆栈视图的底部
- 设置 widthAnchor 等于第一个按钮 widthAnchor，常量 8（宽 4 点）
- 设置 centerXAnchor 等于第一个按钮 centerXAnchor
将宽度和中心锚点连接到@IBOutlet自定义类中的 s。
当一个按钮被点击时：
- 停用宽度和 centerX 约束
- 将它们设置为点击按钮
- 重新激活它们
- 如果需要，动画到位
这是示例实现的代码：
protocol TopBarButtonTapProtocol {
func didSelect(_ sender: UIButton)
}
class MyTopBar: UIView {
var delegate: TopBarButtonTapProtocol?
@IBOutlet var theStack: UIStackView!
@IBOutlet var uView: UIView!
@IBOutlet var uWidth: NSLayoutConstraint!
@IBOutlet var uCenter: NSLayoutConstraint!
override func didMoveToWindow() {
super.didMoveToWindow()
let btns = theStack.arrangedSubviews
btns.forEach { v in
guard let btn = v as? UIButton else {
fatalError("Stack view must contain buttons only!")
}
btn.addTarget(self, action: #selector(didTap(_:)), for: .touchUpInside)
}
}
@objc func didTap(_ sender: UIButton) -> Void {
uCenter.isActive = false
uWidth.isActive = false
uCenter = uView.centerXAnchor.constraint(equalTo: sender.centerXAnchor)
uWidth = uView.widthAnchor.constraint(equalTo: sender.widthAnchor, constant: 8)
uCenter.isActive = true
uWidth.isActive = true
UIView.animate(withDuration: 0.3) {
self.layoutIfNeeded()
}
delegate?.didSelect(sender)
}
}
class TestMyTopBarViewController: UIViewController, TopBarButtonTapProtocol {
@IBOutlet var myTopBar: MyTopBar!
override func viewDidLoad() {
super.viewDidLoad()
myTopBar.delegate = self
}
func didSelect(_ sender: UIButton) {
print("Top Bar button selected:", sender.currentTitle)
}
}
这是示例故事板的来源：
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="16096" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="abg-zX-CIL">
<device id="retina4_7" orientation="portrait" appearance="light"/>
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="16087"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--Test My Top Bar View Controller-->
<scene sceneID="Jte-e1-dR6">
<objects>
<viewController id="abg-zX-CIL" customClass="TestMyTopBarViewController" customModule="MiniScratch" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="TsC-q0-s74">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="kx6-5a-S6X" customClass="MyTopBar" customModule="MiniScratch" customModuleProvider="target">
<rect key="frame" x="0.0" y="0.0" width="375" height="46"/>
<subviews>
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="BXS-ke-LLN">
<rect key="frame" x="0.0" y="0.0" width="375" height="46"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" spacing="16" translatesAutoresizingMaskIntoConstraints="NO" id="Gtj-bJ-9xt">
<rect key="frame" x="16" y="8" width="406" height="30"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="ljU-s4-4DJ">
<rect key="frame" x="0.0" y="0.0" width="65" height="30"/>
<state key="normal" title="FOR YOU">
<color key="titleColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</state>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="242-wz-PkM">
<rect key="frame" x="81" y="0.0" width="75" height="30"/>
<state key="normal" title="TRENDING">
<color key="titleColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</state>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="c15-qj-lxv">
<rect key="frame" x="172" y="0.0" width="34" height="30"/>
<state key="normal" title="NEW">
<color key="titleColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</state>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="5DP-bs-qBc">
<rect key="frame" x="222" y="0.0" width="75" height="30"/>
<state key="normal" title="FEATURED">
<color key="titleColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</state>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="ZfK-40-1VN">
<rect key="frame" x="313" y="0.0" width="93" height="30"/>
<state key="normal" title="BOOKMARKS">
<color key="titleColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</state>
</button>
</subviews>
</stackView>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="974-mZ-VM1">
<rect key="frame" x="12" y="38" width="73" height="4"/>
<color key="backgroundColor" systemColor="systemRedColor" red="1" green="0.23137254900000001" blue="0.18823529410000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="height" constant="4" id="rvK-8e-XTq"/>
</constraints>
</view>
</subviews>
<constraints>
<constraint firstItem="Gtj-bJ-9xt" firstAttribute="trailing" secondItem="Zfb-Kx-C2I" secondAttribute="trailing" constant="16" id="4nw-75-kgv"/>
<constraint firstItem="974-mZ-VM1" firstAttribute="centerX" secondItem="ljU-s4-4DJ" secondAttribute="centerX" id="9Ig-gt-a62"/>
<constraint firstItem="Gtj-bJ-9xt" firstAttribute="leading" secondItem="Zfb-Kx-C2I" secondAttribute="leading" constant="16" id="EGu-UL-6tD"/>
<constraint firstItem="Gtj-bJ-9xt" firstAttribute="bottom" secondItem="Zfb-Kx-C2I" secondAttribute="bottom" id="Fby-qZ-GyD"/>
<constraint firstItem="974-mZ-VM1" firstAttribute="width" secondItem="ljU-s4-4DJ" secondAttribute="width" constant="8" id="GNh-W8-umn"/>
<constraint firstItem="974-mZ-VM1" firstAttribute="top" secondItem="Gtj-bJ-9xt" secondAttribute="bottom" id="QeJ-UW-lPh"/>
<constraint firstItem="Gtj-bJ-9xt" firstAttribute="top" secondItem="Zfb-Kx-C2I" secondAttribute="top" constant="8" id="gXv-a7-43N"/>
<constraint firstItem="x1k-em-xS5" firstAttribute="bottom" secondItem="Gtj-bJ-9xt" secondAttribute="bottom" constant="8" id="yQ5-dH-18H"/>
</constraints>
<viewLayoutGuide key="contentLayoutGuide" id="Zfb-Kx-C2I"/>
<viewLayoutGuide key="frameLayoutGuide" id="x1k-em-xS5"/>
</scrollView>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstAttribute="trailing" secondItem="BXS-ke-LLN" secondAttribute="trailing" id="1Qh-mv-QIl"/>
<constraint firstItem="BXS-ke-LLN" firstAttribute="top" secondItem="kx6-5a-S6X" secondAttribute="top" id="XBR-Uf-huR"/>
<constraint firstItem="BXS-ke-LLN" firstAttribute="leading" secondItem="kx6-5a-S6X" secondAttribute="leading" id="YyI-HM-ve8"/>
<constraint firstAttribute="bottom" secondItem="BXS-ke-LLN" secondAttribute="bottom" id="ioI-y3-Lmd"/>
</constraints>
<connections>
<outlet property="theStack" destination="Gtj-bJ-9xt" id="5XU-eX-2NB"/>
<outlet property="uCenter" destination="9Ig-gt-a62" id="TxH-Bf-Hy0"/>
<outlet property="uView" destination="974-mZ-VM1" id="BZ0-ne-Fcb"/>
<outlet property="uWidth" destination="GNh-W8-umn" id="aFq-4f-sQu"/>
</connections>
</view>
</subviews>
<color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
<constraints>
<constraint firstItem="kx6-5a-S6X" firstAttribute="top" secondItem="u6w-w1-8iK" secondAttribute="top" id="KhJ-Id-pdJ"/>
<constraint firstItem="kx6-5a-S6X" firstAttribute="trailing" secondItem="u6w-w1-8iK" secondAttribute="trailing" id="R2z-YZ-Vkl"/>
<constraint firstItem="kx6-5a-S6X" firstAttribute="leading" secondItem="u6w-w1-8iK" secondAttribute="leading" id="ifV-RN-a6g"/>
</constraints>
<viewLayoutGuide key="safeArea" id="u6w-w1-8iK"/>
</view>
<navigationItem key="navigationItem" id="cpA-Qb-gmu">
<barButtonItem key="rightBarButtonItem" systemItem="add" id="mAr-W2-GXa">
<connections>
<action selector="addBtnPressed:" destination="abg-zX-CIL" id="OIu-lZ-j2s"/>
</connections>
</barButtonItem>
</navigationItem>
<connections>
<outlet property="myTopBar" destination="kx6-5a-S6X" id="Ssi-YG-3F2"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="wfE-oG-abp" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="1703" y="1657"/>
</scene>
</scenes>
</document>
下面是它在运行时的样子，按钮向左滚动，“精选”按钮被选中：
推荐阅读
- php - Symfony 依赖注入器和建立学说
- database - Neo4j中Null节点之间的建立关系
- c++ - -1073741571 (0xC00000FD) 代码块 C++ 中的错误
- api - 仅当我的 API 在 Vuejs 的上下文中返回“null”字符串类型时，如何显示“未连接”
- excel - VBA 单元格偏移替换以前的单元格值
- powershell - 分配给 $null 的对象属性不测试 $null 为真
- fiware - FIWARE - iotagent-node-lib 支持 ngsiVersion “ld”
- node.js - Firestore 云功能找不到要更新的文档
- java - 我们如何在 Java 中实现日期拆分/中断
- javascript - 变异等待数组被大json文件填充，vuex