1

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

我在网上冲浪，发现他们大多使用新的 SwiftUI 来进行这种设计，但我想知道是否有任何方法可以只使用普通的 Storyboard 来制作它？而且我仍然不明白它是使用带有 Xib 的自定义设计的按钮还是使用常规的 tableview 或什么的组件？

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

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

[卡片设计 11

在此处输入图像描述

在此处输入图像描述

还有一个与我从 pinterest 看到的设计相同的链接：

https://pin.it/694Q8hb

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

4

3 回答 3

0

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

  • 自定义背景
  • 使用 view.layer.cornerRadius 设置圆角半径
  • 阴影效果
  • UILabels 和UIImageViews 作为孩子的观点
  • 可能是一个自定义touchesBegan和touchesEnded实现，使其表现得像一个按钮。

视图可以包含在 tableview 中，删除自定义分隔符和东西。

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

于 2020-09-06T02:32:48.700 回答
0

这可以在 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()
    }
}
于 2020-09-06T03:59:34.863 回答
0

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

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

  • 看法
  • 表视图
  • 第 1 部分：用户资料
  • 第 2 部分：桶
    • TableViewCell.xib
      • 标题
      • 集合视图
      • CollectionViewCell1.xib
  • 第 3 部分：投篮
    • TableViewCell.xib
      • 标题
      • 集合视图
      • CollectionViewCell2.xib

从第一张图片解决第二个屏幕

  • 看法
  • 选项的 CollectionView（更改 didSelectItem 上的 tableview 数据源）
  • 表视图
    • TableViewCell.xib

第二张图片中的寻址屏幕

  • 看法
    • 表视图
      • 标题
      • 表视图单元格
        • 标签
        • 集合视图
          • 集合视图单元
于 2020-09-19T14:35:54.557 回答