The entire #30daysSwift program was inspired by Sam Lu, who wrote 40 Swift projects in 100 days, and I decided to start my own 30-day program immediately after reading his Medium post on January 5. Write a small project each day, and if you don’t write one on a given day, you can make up for it over the weekend. Because I didn’t really understand the basic grammar of Swift, I did my project by reading the basic grammar and googling a bunch of articles or videos on the Internet for Swift beginner tutorials.
Lu hasn’t made his project code publicly available, but I’d like to give it a try, to give some inspiration to those who are also new to Swift, because the “open source spirit” is one of the many “tutorials” on the Internet. Here are 30 small projects linked to Github:
https://github.com/allenwong/30DaysofSwift
Project 1 – Simple Stop Watch
1) NSTimer for timer: NSTimer. ScheduledTimerWithTimeInterval;
2) Start, pause and re-time three functions;
Project 2 – Custom Font
1) @Dingyi said on Twitter that “Calligraphy Studio” currently authorized individuals to use for free non-commercial purposes, so I donated 1 YUAN and selected 3 fonts for experiment, namely, Calligraphy Studio Jinhei, Zhihei and Childlike heart;
Config info.plist-fonts provided by Application, and add Fonts to Build Phases – Copy Bundle Resources.
FamilyName = FamilyName = FamilyName = FamilyName = FamilyName = FamilyName = FamilyName = FamilyName
for family in UIFont.familyNames() {
for font in UIFont.fontNamesForFamilyName(family) {
print(font)
Project 3 – Play Local Video
1) Import AVKit and AVFondation to use the system’s video player;
2) If you want to see videos on your iPhone, you need to Copy Bundle Resources to add video Resources.
3) Review the use of UITableView and UITableViewCell;
Project 4 – Snapchat Menu & Camera
1) Snapchat’s three-screen swipe is classic. UIScrollView is used to realize the three-screen swipe and three ViewControllers are defined;
2) left and right is in fact a Snapchat interface screenshots ImageView, ha ha, so to hide the Status Bar, UIApplication. SharedApplication () statusBarHidden = true;
3) CameraView part little bit complicated, use the API in the UIImagePickerControllerDelegate? (Don’t know what to call it)
var captureSession :AVCaptureSession?
var stillImageOutput :AVCaptureStillImageOutput?
var previewLayer :AVCaptureVideoPreviewLayer?
Project 5 – Carousel Effect
Photo 1) landscape swiping a carousel effect, use UICollectionViewDataSource, each card is a CollectionViewCell;
2) The Scroll Direction in the Collection View needs to be set to horizontal Scroll;
3) Review the use of Visual Effect View, has been embedded in ImageView to do clipsToBounds;
Project 6 – Get user’s current location
1) Obtain geographic location permission first, Need to be in the info. To add NSLocationAlwaysUsageDescription plist in (input to inform the user why use location permissions) and NSLocationWhenInUseUsageDescription;
2) import CoreLocation Framework, using the CLLocationManagerDelegate CLPlacemark for cities, provinces and countries, but also need areasOfInterest, just don’t know why no effect;
Project 7 – Pull To Refresh and load data
UIRefreshController can change the background color, chrysanthemum color, text color and size. AttributedTitle font color bothered me for a long time.
let attributes = [NSForegroundColorAttributeName:UIColor.whiteColor()]
self.refreshControl.attributedTitle = NSAttributedString(string:”Last updated on\(NSDate())”, attributes: attributes)
2) This time the tableView is implemented in code, so the Y-axis position is not below UINavigationBar, but the advantage of no-storyboarding is to learn many properties of tableView, actually similar to sb. It is also very fast for people who are used to it. No wonder the fat guy I knew before always wrote UI in code and rarely used SB.
3) refreshControl addTarget can do forControlEvents:.valuechanged so that I can load the second set of data in the drop-down refresh, This’s it!
UINavigationBar can’t set title, topItem, or navigationbarItem.
Project 8 – Random Color Gradient
1) I wanted to do an App can “hear” the outside world music beat beats for the background color of the screen, so dozens of mobile phones together, together will feel very shocked, but I’m not so strong you can develop this type of application, so the implementation background first random transform gradients, and insert the background music, of course, But there is no “listen” function, the effect is more magic;
2) Learned to use CAGradientLayer to do the background gradient, gradient is divided into two layers, the latter layer determines the reason why the color of the whole effect will change, the first layer is set gradient color, position and startPoint endPoint;
3) The realization principle of the latter layer is to randomly change the pure color, the RGB three colors are assigned, such as redValue = CGFloat(drand48()), so that the whole background color can be randomly changed in 256 colors;
Project 9 – Image Scroller
1) Zoom in and out and scroll horizontally and vertically to view a large picture, similar to the effect of viewing pictures in iMessage;
2) First set UIImageView to UIScrollView. In setZoomScaleFor(srollViewSize:CGSize), the maximum zoom is 3 times of the original image;
3) Finally return to the center of the original screen, recenterImage();
Project 10 – Video Background
1) AS the background element of Splash interface, a cool but not very large video is enough to let users feel the scene and value of this application at the first time. Spotify is a good example, and the materials used in it are also from Spotify for iOS.
2) this is to use a custom VC: VideoSplashViewController, easy to use in AVPlayerViewController things;
3) fillMode =.ResizeAspectFill, then always loop: alwaysRepeat=true;
4) Always copy the video files to bundle Resources;
Project 11 – Clear Prioritize TableViewCell
1) Clear App interface and interaction is very amazing, has been amazing for several years, so this time want to achieve gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient gradient
2) Use the following method to achieve gradient gradient:
func colorforIndex(index:Int) -> UIColor {
let itemCount = tableData.count – 1
Let color = (CGFloat(index)/CGFloat(itemCount)) * 0.6
Return UIColor(Red :1.0, green: color, Blue :0.0, alpha:1.0)
3) Remove the dividing line of the TableView and hide the selected color of the cell click directly in the code:
self.tableView.separatorStyle = UITableViewCellSeparatorStyle.None
cell.selectionStyle = UITableViewCellSelectionStyle.None
Project 12 – Simple Login Animation
1) I started to learn iOS animation. I watched basic view animation, Elastic Spring animation, Keyframe animation and view transformation, all of which were really interesting, because I also used these things in Principle prototype design, but I didn’t know how to implement them in code before. Width +60 to represent self.loginbutton. enabled=false;
2) viewWillAppear first set the initial values of the two UITextField center. X constraints, Then write in viewDidAppear UIView. AnimateWithDuration (_ : delay: options:, animations, and completion:), it should be writing animation process;
3) Tips: We couldn’t change the height of the UITextField at first, but later we updated the Frames with constraints.
Project 13 – Animate TableViewCell
1) TableViewCell cutscenes between TableViewControllers. The code in Project-11 is used between gradient gradients of TableViewCell;
2) The tableView has visibleCells, so you can make Cells invisible before loading, and then put them at the bottom of the interface and load them up;
3) the Spring animation is used to realize such a “elastic” effect: usingSpringWithDamping: 0.8, initialSpringVelocity: 0, is part of a very basic animation.
Project 14 – Emoji Slot Machine
1) Today, I implemented an Emoji slot machine mini game with UIPickerView to Build for fun.
2) arc4random() do random Emoji, three lines and three columns;
3) If the Emoji in the first column == the second column && the second column == the third column, Bingo! The resultLabel layout in GIF demo is not quite right, and it was later fixed, because the probability of re-recording to three is actually very low, of course, the probability can be set;
4) The animation effect of clicking UIButton is also completed later and does not appear in this GIF demo;
5) A quick Emoji input tip on MacOS: Just press Control + Command + space;
Project 15 – Animated Splash
1) Twitter’s startup animation has always been a classic. It’s a pleasant process to hover over the bird Logo and zoom out of the screen;
2) launchscreen. storyboard sets up the blue background of the View and the image to put into the Twitter bird, which is written in the AppDelegate;
3) Unlike the original Twitter App animation, this time the bird is used as a Mask. Use CAKeyframeAnimation, set the Bounds to 3, and then zoom out.
let initalBounds =NSValue(CGRect:mask! .bounds)
let secondBounds =NSValue(CGRect:CGRect(x:0, y:0, width:90, height:73))
let finalBounds =NSValue(CGRect:CGRect(x:0, y:0, width:1600, height:1300))
Project 16 – Slide Menu Transition
1) instead of using the Hamburger icon, a Hamburger Emoji 🍔 is used as the menu icon 🙂
2) two VC, made transitions Segue, self-built MenuTransitionManagerDelegate agreement, introduced in the first VC, moveDown to container! Frame. Height-150: Select Menu and the second VC moveUp to -50;
3) Add UITapGestureRecognizer, you can click on the non-MenutableViewCell part or you can dismiss;
Project 17 – Tumblr Menu
1) This is a transition animation for creating a new Post in the old Version of Tumblr on iOS, with a new and more cool animation;
2) as in Project 16, it is also implemented with 2 VC and 1 MenuTransitionManager. It seems that this is the “standard way” to implement transitions between VC (while preserving the previous VC)?
3) I am also drunk after connecting 13 IBOutlets, because ICONS and text can appear in sequence according to the Delay time. Introduced in MenuTransitionManager UIViewControllerTransitioningDelegate to achieve animation, including fuzzy gives fully transparent background first VC;
4) Menu is divided into three groups, set topRowOffset middleRowOffset and bottomRowOffset to CGFloat 300, 150, 50. So in the transform, Text and Photo are self.offstage(-toprowoffset) and self.offstage(topRowOffset) respectively. The same is true for the following two groups.
5) But I don’t know whether the background Visual Effect View is added, so it feels like “flash”. I haven’t found a solution yet.
Project 18 – Limit Character
1) Limit the input characters of UITextView to 140 characters, just like Twitter, and then can’t input any more. At first, UITextField tried, but found that it can’t break the line.
2) The bottom line UIView does two NSNotificationCenters in viewDidLoad(), notifying rise and dismiss with the keyboard;
ShouldChangeTextInRange = shouldChangeTextInRange = shouldChangeTextInRange = shouldChangeTextInRange The right small Angle the real-time character of reciprocal use “\ [140 – myTextViewString. Characters. Count)” to implement;
4) THE UI is copied from a third party Twitter client Twitterrific;
Project 19 – Custom Pull-To-Refresh
1) IN Project 7, I did pull-down refresh and loaded data, but the pull-down refresh style was still chrysanthemum style of the system, so I tried to customize the pull-down refresh this time by using simple animation of single text color change rotation and enlargement;
2) create a new version of RefreshContents. Xib to store 12 UILabels for refresh, and use viewWithTag() instead of connecting to the ViewController.
AnimateRefreshStep1 () and animateRefreshStep2(), The first step is to rotate CGAffineTransformMakeRotation (CGFloat (M_PI_4)) and textColor self. Random color getNextColor () method) (this is a new random color, The second step is more simple is to be amplified animation, all Scale to CGAffineTransformMakeScale (1.5, 1.5);
4) because there is no real data, the relationship between this little experiment is to use NSTimer. ScheduledTimerWithTimeInterval to stabilize 5 seconds to do, the effect of real project is certainly not the;
Project 20 – UICollectionView Animation
1) Ahhh, this actually sucks, but UICollectionView has smooth transitions that we should see a lot, especially between List and Details, such as item List and item Details, news List and full news;
Func collectionView didSelectItemAtIndexPath click on the func collectionView didSelectItemAtIndexPath and execute the transition animation to bring the Cell to the top layer of the Cell. .superview? .bringSubviewToFront(cell!) And then the cell? Frame = collectionView.bounds can go to full screen. This example also helps me understand the difference between frame and bounds.
3) Remember to make CollectionView reloadItemsAtIndexPaths in func backButtonDidTouch();
Project 21 – Swipeable Cell
1) The most classic interaction application of sliding Cell for relevant operations is shown in Mailbox, so that the system sliding Cell interaction was introduced in iOS 7 later. So you can directly in the tableView editActionsForRowAtIndexPath to perform UITableViewRowAction;
2) The design suggestion of iOS is to use pure text to display, but we can also use ICONS and text to make images more vivid. Unfortunately, Google failed to find a pure custom icon to replace it, so we can only add Emoji and space in the title. I don’t know what good methods people can use.
Let delete = UITableViewRowAction(style:.normal, title:”🗑\nDelete”) {action, indexin}
3) Click the operation of share to call up the system share control, which can be done with a simple UIActivityViewController;
Project 22 – 3D Touch Quick Action
1) 3 d Touch shortcut is initially need the info. The configuration in the plist UIApplicationShortcutItems, as the chart, I respectively configuration I want 3 shortcuts, switch in the Settings App WiFI, Start running quickly in NikePlus and scan qr codes in the camera;
2) UIApplicationShortcutItemIconFile is to configure a custom icon, quick UIApplicationShortcutItemTitle configuration name, of course, you can configure the secondary title;
3) Select the shortcut and enter the corresponding VC;
window! .rootViewController? .presentViewController(vc, animated:true, completion:nil)
Project 23 – Slide Out Menu
1) Gesture swipe menus to switch between VC’s, using an open source project called SWRevealViewController, which makes it really easy;
2) The TableViewController that slides out inherits a RevealViewController, and then adds the following code to each VC’s ViewDidLoad() to swipe the TableViewController;
self.view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())
Project 24 – Mosaic Layouts
1) Mosaic photo layout can adjust the number of photos per line, etc., using the open source FMMosaicLayout;
2) Learned to install Pod with Terminal and use open source projects;
3) The entire layout is clearly UICollectionView, FMMosaicLayout supports computable size changes;
return indexPath.item % 7 == 0 ? FMMosaicCellSize.Big : FMMosaicCellSize.Small
Project 25 – UIView Basic Animations
1) Today we will go back to the basics of animation, including Position, Opacity, Scale, Color and Rotation. No matter how cool or complex an animation is, it is an accumulation of these basics. The animations in this example are all written in viewDidAppear().
2) Position: three UIViews make a -_- expression by moving the Position and changing the height;
Opacity: animating ImageView’s alpha;
4) Scale: in SB’s a little bit small at first, and then execute amplification Spring animation to CGAffineTransformMakeScale (2, 2), and obviously the alpha is from 0 to 1 will be harmonious;
5) Color: Change the textcolor of UIView and Label;
6) Rotation: This is a little fun, you can do the spin of the raffle wheel, and there’s a new func spin(), At the time of the transform CGAffineTransformRotate (self. RotationImageView. The transform, CGFloat (M_PI)), Then add self.spin() after the animation is complete to keep spinning, otherwise the selection will only be executed once;
Project 26 – CoreData App
1) CoreData is a cool thing, although I don’t understand it at present. It seems to replace database.
2) The CoreData-based To Do App can add a new to-do, delete it, and then open it again the same as the one after deletion;
3) We need to create a new ListEntity and a new item: String property in the Coredata file.
4) Always check CoreDada when creating projects or individual files;
Project 27 – Tab Bar Switch
1) TabbarController and NavigationController can be used to realize the interaction of the most basic information architecture of a complete App under Storyboard layout. Many apps and data show that Tabbar navigation at the bottom is more acceptable than swiping or Android navigation at the top, requiring almost no line of code;
2) To make the whole effect more like an App, the first Tab is a TableViewCell with dynamic Spring effect, and the last two tabs are fake, just UIImageView😂;
Project 28 – Spotlight Search
1) After iOS 8, it will be possible to search third-party App data in iOS Spotlight. In order to make the data in your App searchable, you need to create a new MoviesData.plist and configure the data attributes.
2) Add CoreSpotlight and MobileCoreServices Frameworks to the engineering – General – Linked Frameworks and Libraries. So now we can use the CSSearchableItem property;
3) The interface in Spotlight is similar to the custom drop-down refresh of the new XIB;
Project 29 – iMessage Image Picker
1) It is often a necessary step to add an avatar when registering an App. Most people choose an avatar directly from the album, so it is a good choice to use the iMessage photo sending interaction to quickly select images from the album.
2) Recognizer with the default profile picture, the Tap Gesture Recognizer is written into the Tap method to call the album, and also requires the import Photos, which is a bit complicated to recognise with iMessage, Directly with ImagePickerSheetController this open source project;
Project 30 – WiKiFace
1) WiKiFace is a fully featured Tiny App because it allows you to search for celebrities’ names and match them to faces in wikipedia thumbnails using the Wikipedia API and the CIFaceFeature in ImageIO.
2) In func textFieldShouldReturn(), try wikiface.faceForPerson, wikiface.swfit, recognize and center the face in the photo;
3) Is it cool?
I don’t think anyone saw this, did they? Because the Spring Festival holiday and the hometown network is not good relationship, the article was not sorted out until now (sorting process also reviewed the code). For the past 30 days I’ve managed to squeeze in a bit of code every day. This is the first 30 day challenge of the year that I’ve managed to complete. I’ll continue to see more Swift basics and work on an APP. I mostly synchronize Project progress information on Twitter/Instagram and Facebook, those who are interested can follow 🙂