app界面交互模板 (app界面交互设计)

底部栏(TabBar)是手机APP交互的顶层框架,是用得最多的交互组件。

通常,对用户关注度高、用户最常使用的功能特性,通过底部栏的方式,进行交互。

手机app桌面组件,app界面交互设计

SwiftUI TabBar

下面以一个股票分析软件为例,说明如何定义和使用TabBar。

struct Home: View {
    
    var body: some View {
        TabView(selection: $selectedTab) {
            TodayView()
                .tabItem {
                    Image(systemName: "sun.max")
                    Text("今日")
                }
            
            MarketView()
                .tabItem {
                    Image(systemName: "chart.bar")
                    Text("行情")
                }
            
            StockSelectionView()
                .tabItem {
                    Image(systemName: "magnifyingglass")
                    Text("选股")
                }
            
            TrainingView()
                .tabItem {
                    Image(systemName: "book")
                    Text("训练")
                }
            
            ProfileView()
                .tabItem {
                    Image(systemName: "person")
                    Text("我的")
                }
        }
    }
}

其中每个View,对应具体页面,图标一般选用SFSymbol,就能满足要求。

实现效果如下:

手机app桌面组件,app界面交互设计

SwiftUI TabBar 示例

是不是很好,赶快用起来吧?