xcode Swift Card用户界面设计

t40tm48m 于 2022-11-26 发布在 Swift

关注(0)|答案(3)|浏览(201)

我只是想知道什么是一个组件，使一个用户界面设计卡的ios应用程序？因为我看到了很多这些很酷的卡设计在pinterest上，我想知道如何使它。像什么是组件，使这样的设计。
我在网上冲浪，发现他们大多使用新的SwiftUI来进行这种设计，但我想知道有没有可能的方法来使它与一个普通的故事板？我仍然不明白它的组件一样，它是使用按钮，自定义设计与Xib或它使用常规的tableview或什么？
如果有任何好的图书馆从椰子我也想知道。
这是我想问的卡片设计类型：
[

还有一个链接的有点相同的设计，以及我看到从pinterest：
https://pin.it/694Q8hb
如果有人知道如何用标准的故事板来制作这个，比如组件是什么，或者有没有来自cocopods的库，请告诉我，因为我想为我的论文做这种类型的设计，我已经开发了一半，我只想做一个好的设计，我认为这种卡片设计类型在我的应用程序上看起来很完美。干杯伙计们：）

xcode

来源：https://stackoverflow.com/questions/63760125/swift-card-ui-design

3条答案

按热度按时间

eqqqjvef1#

从这些图像中获得外观的最简单方法是UIView：

自定义背景
使用view.layer.cornerRadius设置拐角半径
阴影效果
UILabel s和UIImageView s作为子视图
可能是一个自定义的touchesBegan和touchesEnded实现，使其行为像一个按钮。

视图可以包含在tableview中，删除自定义的分隔符和填充物。
另外：代码重用是你的朋友！把这些规范放在一个可重用的类中，当你需要那个设计的时候，你可以重用它。

赞(0）回复(0）举报 2022-11-26

uubf1zoe2#

这在SwiftUI中可以很容易地完成。你可以使用VStack（或者LazyVStack或者LazyVGrid）来设置列表视图（比TableViews简单得多），然后创建一个自定义的、可重用的视图，看起来像其中一个视图，并将其设置为Button中的Label。下面是一些代码（经过简化），让你开始使用：

import SwiftUI

struct CustomView: View {
    var body: some View {
        VStack {
            Button(action: {
                print("First button pressed")
            }, label: {
                CustomRowView(buttonTitle: "First Button")
            })
            
            Button(action: {
                print("Second button pressed")
            }, label: {
                CustomRowView(buttonTitle: "Second Button")
            })
            
            Button(action: {
                print("Third button pressed")
            }, label: {
                CustomRowView(buttonTitle: "Third Button")
            })

            
            Spacer()
        }
        .padding()
    }
}

struct CustomRowView: View {
    
    @State var buttonTitle: String
    
    var body: some View {
        Text(buttonTitle)
            .frame(maxWidth: .infinity)
            .foregroundColor(.white)
            .padding(.vertical, 40)
            .background(Color.blue)
            .cornerRadius(12)
    }
}

struct CustomViewsz_Previews: PreviewProvider {
    static var previews: some View {
        CustomView()
    }
}

赞(0）回复(0）举报 2022-11-26

fhg3lkii3#

我给你的视图层次我希望你能理解它。

从第一张图片寻址第一个屏幕