Swift Card Ui设计

编程问答 2022-08-12

问题描述

我只是想知道组成ios应用Ui设计卡的组件是什么？因为我在pinterest上看到了很多这些很酷的卡片设计，所以我想知道如何制作。像是进行这种设计的组件是什么。

我在网上冲浪，发现他们大多使用新的SwiftUI进行这种设计，但是我想知道是否有任何方法可以仅通过常规Storyboard进行制作？而且我仍然没有得到它的组件，就像它是使用Xib自定义设计的按钮还是使用常规tableview或类似的东西？

如果我想知道cocoapods有什么好的图书馆。

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

[

card design 11

enter image description here

enter image description here

还有一个与pinterest相同的设计链接：

https://pin.it/694Q8hb

如果有人知道如何使用标准的Storyboard进行制作，例如组件是什么，也许还有cocoapods的任何库，请告诉我好吧，因为我想为我的论文进行这种类型的设计，我开发已经完成了一半，我只想做一个好的设计，我认为这种卡片设计类型在我的应用程序上看起来很完美。干杯们：）

解决方法

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

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

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

也： 代码重用是您的朋友！将这些规范放在可重用的类中，以便在需要该设计时可以重复使用。

,

这可以在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()
    }
}
,

我正在为您提供视图层次结构，希望您理解它。

从第一张图片寻址第一屏

  • 查看
  • TableView
  • 第1部分：用户个人资料
  • 第2部分：水桶
    • TableViewCell.xib
      • 标题
      • CollectionView
      • CollectionViewCell1.xib
  • 第3部分：射击
    • TableViewCell.xib
      • 标题
      • CollectionView
      • CollectionViewCell2.xib

从第一张图片进入第二个屏幕

  • 查看
  • 选项的CollectionView（更改didSelectItem上的tableview数据源）
  • TableView
    • TableViewCell.xib

第二张图片的寻址屏幕

  • 查看
    • TableView
      • 标题
      • TableViewCell
        • 标签
        • CollectionView
          • CollectionViewCell
cardstoryboardswiftswiftswiftuser-interfacexcodexcodexcode