Swift 3 - 在文本上方创建带有可缩放图像的按钮的最合适方法

Posted

技术标签:

【中文标题】Swift 3 - 在文本上方创建带有可缩放图像的按钮的最合适方法【英文标题】:Swift 3 - Most appropriate way to create a button with a scalable image above text 【发布时间】:2017-12-17 05:04:57 【问题描述】:

android 中,我可以通过创建一个带有 2 个孩子的 LinearLayout 和一个 ImageView 和一个 TextView 来完成这个自定义按钮,并且只需控制布局属性(并添加 onClick 等以重新创建按钮功能) )。使用权重,我能够让图像比例填充按钮,同时允许文本的适当比例。

例如:

<LinearLayout
    android:id="@+id/my_button"
    android:layout_
    android:layout_
    android:layout_weight="1"
    android:background="@drawable/button_background"
    android:clickable="true"
    android:focusable="true"
    android:onClick="onClickFunction"
    android:orientation="vertical" >

<ImageView
    android:layout_
    android:layout_
    android:layout_weight="5"
    android:layout_marginTop="-8dp"
    android:src="@mipmap/icon_test" />

<TextView
    android:id="@+id/my_button_text"
    android:layout_
    android:layout_
    android:layout_weight="1"
    android:text="Button Text"
    android:textSize="14sp"
    android:textAllCaps="true"
    android:textStyle="bold"
    android:textColor="@color/text_color"
    android:textAlignment="center" />
</LinearLayout>

生产:


在 Swift 3 中最合适的方法是什么?我已经阅读了有关使用插图控制定位的信息(甚至在图像上设置负的“左”插图以将其定位在文本上方),但必须手动管理图像尺寸。我还知道将图像设置为背景会使其缩放,但我不想让文本与图像重叠。我的思考过程是,可能存在类似于我上面针对 Android 的示例的“解决方法”,但我怀疑解决方案是否类似。

此外,我非常依赖 IB(我的应用程序不是很复杂,因此很容易管理),所以到目前为止我将它用于我的按钮:

import UIKit

@IBDesignable
class RoundButton: UIButton 

@IBInspectable var cornerRadius: CGFloat = 0
    didSet
    self.layer.cornerRadius = cornerRadius
    


@IBInspectable var borderWidth: CGFloat = 0
    didSet
        self.layer.borderWidth = borderWidth
    


@IBInspectable var borderColor: UIColor = UIColor.clear
    didSet
        self.layer.borderColor = borderColor.cgColor
    


如果不是要求太多,我希望能够以此为基础。

【问题讨论】:

【参考方案1】:

以下是实现该目标的示例:

let btnSort   = UIButton(type: .system)
    btnSort.frame =  CGRect(x: 2, y: 74, width: 140, height: 140)
    btnSort.tintColor = UIColor.white
    btnSort.setImage(UIImage(named:"lamp"), for: .normal)
    btnSort.imageEdgeInsets = UIEdgeInsets(top: 6,left: 20,bottom: 30,right: 20)
    btnSort.titleEdgeInsets = UIEdgeInsets(top: 100,left: -250,bottom: 0,right: 0)
    btnSort.setTitle("BUTTON TEXT", for: .normal)
    btnSort.layer.borderWidth = 1.0
    btnSort.backgroundColor = UIColor.red
    btnSort.layer.borderColor = UIColor.white.cgColor
    self.view.addSubview(btnSort)

结果将是:

这是original 的帖子。我已根据您的要求更改了EdgeInsets

【讨论】:

我应该把这段代码放在哪里,以便在界面生成器中看到结果?在问题中,我表明我有自己的按钮类。我可以将其纳入其中吗?如果可以,如何?

以上是关于Swift 3 - 在文本上方创建带有可缩放图像的按钮的最合适方法的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 Canvas 中可拖动、可缩放的图像

如何在带有文本的图像上方创建透明的深色叠加层?

可以实现 UIScrollView 与可缩放和方面适合的内容?

SVG(可缩放矢量图形)

在可缩放的滚动视图中禁用图像视图缩放

Andrid5.0新特性——SVG(可缩放矢量图形)