Swift 3 - 在文本

时间:2017-12-17 05:04:57

标签: swift button

在Android中,我可以通过创建一个包含2个孩子的LinearLayout - ImageViewTextView来完成此自定义按钮,并且只需控制布局属性(并添加onClick,等,以重新创建按钮功能)。使用权重,我可以使用图像比例填充按钮,同时允许文本的适当比例。

例如:

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

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="5"
    android:layout_marginTop="-8dp"
    android:src="@mipmap/icon_test" />

<TextView
    android:id="@+id/my_button_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    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>

产地:

Button example

在Swift 3中最合适的方法是什么?我已经读过使用插图来控制定位(甚至设置负面&#34;左边和#34;插入图像以将其放置在文本上方),但图像尺寸必须手动管理。我也已经意识到将图像设置为背景会使其缩放,但我不希望文本与图像重叠。我的思维过程是可以有一个&#34;解决方法&#34;类似于我上面的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 个答案:

答案 0 :(得分:0)

以下是如何实现这一目标的示例:

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)

结果将是:

enter image description here

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