Swift卡用户界面设计

Question

我只是想知道为ios应用程序制作Ui设计卡的组件是什么？因为我在pinterest上看到了很多很酷的卡片设计，我想知道怎么做。比如做这样一个设计的组件是什么。

我在网上冲浪，发现他们大多使用新的SwiftUI来做那种设计，但我想知道有没有可能只用一个普通的故事板就能做出来？我仍然不明白它的组件是使用按钮，还是使用常规的tableview，还是使用常规的tableview？

如果cocoapods有什么好的库，我也很想知道。

这是我想问的卡片设计的类型：

[

​

​

​

​

​

还有一个我在pinterest上看到的类似设计的链接：

https://pin.it/694Q8hb

如果有人知道如何用一个标准的故事板来做这件事，比如组件是什么，如果有来自cocoapods的库，请让我知道，因为我想为我的论文做这种类型的设计，我已经开发了一半，我只是想做一个好的设计，我认为这种卡片设计类型在我的应用程序上看起来很完美。干杯，伙计们:)

Answer 1

从这些图像中获取外观的最简单方法是使用以下内容的UIView：

阴影阴影A自定义背景和设置角半径使用view.layer.cornerRadius

• A

• views

• Probably

• s as UIImageViewviews

• Probably自定义touchesBegan和touchesEnded实现，以使其行为类似于按钮。

视图可以包含在表视图中，删除自定义分隔符和内容。

还有:代码重用是你的朋友！将这些规范放在一个可重用的类中，您可以在需要该设计时重用该类。

Answer 2

这可以在SwiftUI中很容易地完成。您可以使用VStack (或LazyVStack或LazyVGrid)来设置列表视图(比TableViews容易得多)，然后创建一个自定义的、可重用的视图，该视图看起来像其中一个视图，并将其设置为按钮中的标签。以下是一些(简化的)代码，可以帮助您入门：

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()
    }
}

Answer 3

我给你的是视图层次结构，希望你能理解。

寻址来自第一个Pic的第一个屏幕

存储桶1:用户存储桶2：

• View
• TableView
• Section
  • TableViewCell.xib
    • Header
    • CollectionView
    • CollectionViewCell1.xib

• 第3部分:快照
  • TableViewCell.xib
    • Header
    • CollectionView
    • CollectionViewCell2.xib

来自第一张图片的寻址第二个屏幕

选项的

• View
• CollectionView (在didSelectItem)
• TableView
  • TableViewCell.xib

上更改表视图数据源

来自第二张图片的寻址屏幕

• • TableView View