Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[iOS] RewindJourney Scene UI #153

Merged
Merged
Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions iOS/.swiftlint.yml
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,9 @@ type_name:
max_length:
warning: 40
error: 1000

# 중첩 타입
nesting:
type_level:
warning: 3
error: 4
8 changes: 8 additions & 0 deletions iOS/Features/RewindJourney/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.DS_Store
/.build
/Packages
xcuserdata/
DerivedData/
.swiftpm/configuration/registries.json
.swiftpm/xcode/package.xcworkspace/contents.xcworkspacedata
.netrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>IDEDidComputeMac32BitWarning</key>
<true/>
</dict>
</plist>
57 changes: 57 additions & 0 deletions iOS/Features/RewindJourney/Package.swift
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
// swift-tools-version: 5.9
// The swift-tools-version declares the minimum version of Swift required to build this package.

import PackageDescription

// MARK: - Constants

extension String {
static let package = "RewindJourney"
static let rewindJourneyView = "RewindJourneyView"
static let msUIKit = "MSUIKit"
static let msFoundation = "MSFoundation"
static let msDesignsystem = "MSDesignSystem"
static let msLogger = "MSLogger"

var testTarget: String {
return self + "Tests"
}

var path: String {
return "../../" + self
}

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 부분 아마 변경되어서 따로 필요하지 않아도 될 듯 합니다..!

var featurePath: String {
return "../Features/" + self
}

}

// MARK: - Package

let package = Package(
name: .package,
platforms: [
.iOS(.v15)
],
products: [
.library(
name: .rewindJourneyView,
targets: [.rewindJourneyView])
],
dependencies: [
.package(path: .msUIKit.path),
.package(path: .msFoundation.path)
],
targets: [
// Codes
.target(
name: .rewindJourneyView,
dependencies: [
.product(name: .msUIKit, package: .msUIKit),
.product(name: .msDesignsystem, package: .msUIKit),
.product(name: .msLogger, package: .msFoundation)])

// Tests
]
)
183 changes: 183 additions & 0 deletions iOS/Features/RewindJourney/Sources/RewindJourneyView/MSMusicView.swift
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
//
// MSMusicView.swift
// RewindJourney
//
// Created by 전민건 on 11/22/23.
//

import UIKit

import MSDesignSystem
import MSLogger
import MSUIKit

final class MSMusicView: UIProgressView {

// MARK: - Constants

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이렇게 따로 Metric을 두는 방식을 쓰시는군요..!
하나 배워갑니다.👍

private enum Metric {

static let verticalInset: CGFloat = 8.0
static let horizonalInset: CGFloat = 12.0
static let cornerRadius: CGFloat = 8.0

// albumart view
enum AlbumArtView {
static let height: CGFloat = 52.0
static let width: CGFloat = 52.0
}
// title view
enum TitleView {
static let height: CGFloat = 4.0
static let inset: CGFloat = 4.0
static let titleHight: CGFloat = 24.0
static let subTitleHight: CGFloat = 20.0
}

// playtime view
enum PlayTimeView {
static let width: CGFloat = 67.0
static let verticalInset: CGFloat = 22.0
static let horizonalInset: CGFloat = 4.0
static let conponentsHeight: CGFloat = 24.0
}

}

private enum Default {

// titleView
enum TitleView {
static let title: String = "Attention"
static let subTitle: String = "NewJeans"
static let defaultIndex: Int = 0
}

// stackView
enum PlayTime {
static let time: String = "00 : 00"
}

}

// MARK: - UI Components

private let albumArtView = UIImageView()
public var albumArtImage: UIImage? {
didSet {
self.albumArtView.image = albumArtImage
}
}
private let titleStackView = UIStackView()
private let titleLabel = UILabel()
private let subTitleLabel = UILabel()
private let playTimeStackView = UIStackView()
private let playTimeLabel = UILabel()
private let playTimeIconView = UIImageView(image: .msIcon(.voice))

// MARK: - UI Configuration

public func configure() {
self.configureLayout()
self.configureStyle()
}

// MARK: - UI Configuration: layout

private func configureLayout() {
self.configureAlbumArtViewLayout()
self.configurePlayTimeViewLayout()
self.configureTitleViewLayout()
}

private func configureAlbumArtViewLayout() {
self.addSubview(self.albumArtView)
self.albumArtView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
self.albumArtView.topAnchor.constraint(equalTo: self.topAnchor, constant: Metric.verticalInset),
self.albumArtView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -Metric.verticalInset),
self.albumArtView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: Metric.horizonalInset),
self.albumArtView.widthAnchor.constraint(equalToConstant: Metric.AlbumArtView.width)
])
}

private func configureTitleViewLayout() {
self.addSubview(self.titleStackView)
self.titleStackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
self.titleStackView.topAnchor.constraint(equalTo: self.topAnchor,
constant: Metric.verticalInset),
self.titleStackView.bottomAnchor.constraint(equalTo: self.bottomAnchor,
constant: -Metric.verticalInset),
self.titleStackView.leadingAnchor.constraint(equalTo: self.albumArtView.trailingAnchor,
constant: Metric.horizonalInset),
self.titleStackView.trailingAnchor.constraint(equalTo: self.playTimeStackView.leadingAnchor,
constant: -Metric.horizonalInset)
])

self.titleStackView.addArrangedSubview(self.titleLabel)
self.titleStackView.addArrangedSubview(self.subTitleLabel)

self.titleStackView.axis = .vertical
self.titleStackView.spacing = Metric.TitleView.inset
}

private func configurePlayTimeViewLayout() {
self.addSubview(self.playTimeStackView)
self.playTimeStackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
self.playTimeStackView.topAnchor.constraint(equalTo: self.topAnchor,
constant: Metric.PlayTimeView.verticalInset),
self.playTimeStackView.bottomAnchor.constraint(equalTo: self.bottomAnchor,
constant: -Metric.PlayTimeView.verticalInset),
self.playTimeStackView.widthAnchor.constraint(equalToConstant: Metric.PlayTimeView.width),
self.playTimeStackView.trailingAnchor.constraint(equalTo: self.trailingAnchor,
constant: -Metric.horizonalInset)
])

self.playTimeStackView.addArrangedSubview(self.playTimeIconView)
self.playTimeStackView.addArrangedSubview(self.playTimeLabel)

self.playTimeStackView.axis = .horizontal
self.playTimeStackView.spacing = Metric.PlayTimeView.horizonalInset
self.titleStackView.distribution = .fill
}

// MARK: - UI Configuration: style

private func configureStyle() {
self.clipsToBounds = true
self.layer.cornerRadius = Metric.cornerRadius
self.trackTintColor = .msColor(.secondaryBackground)
self.progressTintColor = .msColor(.musicSpot)
self.progress = 0.4

self.configureTitleViewStyle()
self.configurePlayTimeViewStyle()
}

private func configureTitleViewStyle() {
self.titleLabel.text = Default.TitleView.title
self.titleLabel.font = .msFont(.buttonTitle)
self.subTitleLabel.text = Default.TitleView.subTitle
self.subTitleLabel.font = .msFont(.paragraph)
}

private func configurePlayTimeViewStyle() {
self.playTimeLabel.text = Default.PlayTime.time
self.playTimeLabel.font = .msFont(.caption)
self.playTimeLabel.textColor = .msColor(.secondaryTypo)
self.playTimeIconView.tintColor = .msColor(.secondaryTypo)
}

}

// MARK: - Preview

@available(iOS 17, *)
#Preview {
MSFont.registerFonts()
let musicView = MSMusicView()
musicView.albumArtImage = UIImage(systemName: "pencil")
return musicView
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
//
// MSProgressView.swift
// RewindJourney
//
// Created by 전민건 on 11/22/23.
//

import UIKit

public final class MSProgressView: UIProgressView {

// MARK: - Properties

internal var percentage: Float = 0.0 {
didSet {
syncProgress(percentage: percentage)
}
}
internal var isHighlighted: Bool = false {
didSet {
self.percentage = self.isHighlighted ? 1.0 : 0.0
}
}

// MARK: - Configure

private func configureColor() {
self.trackTintColor = .systemGray6
self.tintColor = .white
}

// MARK: - Initializer

public override init(frame: CGRect) {
super.init(frame: frame)
self.configureColor()
}

required init?(coder: NSCoder) {
fatalError("MusicSpot은 code-based 로 개발되었습니다.")
}

// MARK: - Functions: change progress

private func syncProgress(percentage: Float) {
self.progress = percentage
}

}
Loading