Showing posts with label Lập trình ios cơ bản. Show all posts
Showing posts with label Lập trình ios cơ bản. Show all posts

Wednesday, November 22, 2017

Điều chỉnh giao diện ứng dụng cho iphone X

Iphone X mới ra có dải đen trên đầu màn hình.

Nếu cứ để bình thường thì phần trên ứng dụng sẽ bị che mất, có thể ảnh hưởng đến tương tác của người dùng. Ta sẽ lùi phần đầu xuống một khoảng để tránh khoảng đen đi. Để làm điều này ta cần biết chiều cao dải đen là bao nhiêu. Đây là thông số kỹ thuật của nó.

Vậy dải đen có chiều cao là 30pt, ta cũng biết kích thước màn hình của iphone X là 375x812 nên ta có thể đặt một biến tên là xle và dùng lệnh if như sau.
let c = UIScreen.mainScreen().bounds.size.height
Hoặc
let c = view.frame.size.height
        if c==812{
            xle = 30
        }
Sau đó khi set vị trí y của view như label chẳng hạn, ta dùng.
label = UILabel(frame: CGRect(x: 0, y: 15+xle, width: 320, height: 40))
Khi đó lúc chạy trên iphone X thì label sẽ tự dịch xuống một khoảng 30pt.
Vì thiết bị có chiều cao lớn hơn 800 ngoài iphone X chỉ còn các ipad màn hình lớn nên ta cũng có thể đặt trong lệnh if là c>800, lúc đó khoảng 30pt không là gì so với màn hình lớn nên không ảnh hưởng tới giao diện tổng thể.

Dùng Popover để hiển thị màn hình mới

Đôi khi ta muốn màn hình mới bật ra có dạng nổi giống như một Alert, chỉ cần thêm kiểu chuyển màn hình cho ViewController mới là Popover như sau.
let vc = second()
       
        vc.modalPresentationStyle = .Popover
        var popover = vc.popoverPresentationController   
        if let popover = vc.popoverPresentationController {      
            popover.sourceView = self.view           
            popover.sourceRect = CGRectMake(self.view.center.x,self.view.center.y+180,0,0)           
            vc.preferredContentSize = CGSizeMake(300,360)           
            popover.delegate = self
        }
       
        self.presentViewController(vc, animated: true, completion: nil)

Khi đó màn hình bật ra sẽ nổi ở giữa màn hình hiện tại, rộng 300, cao 360.


Ta sẽ phải điều chỉnh vị trí các view cho phù hợp với chiều rộng mới.

Monday, November 13, 2017

Để bàn phím không che TextField

Khi thiết kế giao diện, nếu TextField của bạn ở vị trí quá thấp thì khi người dùng ấn vào bàn phím hiện ra sẽ che mất TextField.
Để làm cho TextField tự cuộn lên được ta để giao diện trong một ScrollView Sc, sau dó thêm các hàm sau vào trên ngoặc đóng cuối cùng.
func keyboardShow(n:NSNotification) {
       
        let d = n.userInfo!
        var r = (d[UIKeyboardFrameEndUserInfoKey] as! NSValue).CGRectValue()
        r = self.sc.convertRect(r, fromView:nil)
        self.sc.contentInset.bottom = r.size.height+50
        self.sc.scrollIndicatorInsets.bottom = r.size.height
    }
   
    func keyboardHide(sender: NSNotification!)
    {
        sc.setContentOffset(CGPointMake(0, 0), animated: false)
    }
Sau đó bên dưới dòng super.viewDidLoad() thêm các dòng sau.
NSNotificationCenter.defaultCenter().addObserver(
            self, selector: #selector(keyboardShow),
            name: UIKeyboardWillShowNotification, object: nil)
        NSNotificationCenter.defaultCenter().addObserver(
            self, selector: #selector(ViewController.keyboardHide(_:)),
            name: UIKeyboardWillHideNotification, object: nil)

Bây giờ khi bạn chạm vào TextField nó sẽ tự cuộn lên không bị che nữa.

Wednesday, October 4, 2017

Chơi nhạc trực tuyến Swift

Bạn muốn play một file nhạc online, hãy khai báo một biến player lên trên viewDidLoad.
var player : AVPlayer!
Copy các dòng sau vào trong viewDidLoad
let url =  "https://s3.amazonaws.com/kargopolov/kukushka.mp3"
let songUrl = NSURL(string: url)
var playerItem:AVPlayerItem?
do {

   playerItem = AVPlayerItem(URL: songUrl!)
player=AVPlayer(playerItem: playerItem!)
let playerLayer=AVPlayerLayer(player: player)
  playerLayer.frame=CGRectMake(0, 0, 300, 50)
self.view.layer.addSublayer(playerLayer)

player.play()

    } catch (let error asNSError) {
// print("audioPlayer error: \(error)")

    }

Chú ý là ta dùng AVPlayer chứ ko phải AVAudioPlayer
Thêm các dòng sau vào trong file info.plist ở cây thư mục bên trái.
<key>NSAppTransportSecurity</key>
         <dict>
          <key>NSAllowsArbitraryLoads</key>
          <true/>
         </dict>
Bạn mở source của nó ra như sau.




Chơi nhạc ở chế độ nền Swift

Khi bạn đang phát nhạc, nếu không để chế độ nền thì lúc màn hình chờ tắt thì nhạc cũng tắt theo. Hãy thêm các dòng sau vào trong viewDidLoad để play ở chế độ background.
do {
tryAVAudioSession.sharedInstance().setCategory(AVAudioSessionCategoryPlayback)
//print("AVAudioSession Category Playback OK")
do {
tryAVAudioSession.sharedInstance().setActive(true)
// print("AVAudioSession is Active")
            } catchlet error asNSError {
print(error.localizedDescription)
            }
        } catchlet error asNSError {
print(error.localizedDescription)
        }
Tiếp theo, bạn nháy vào gốc cây thư mục góc trên bên trái, chọn Capabilities, tìm Backgroud modes nhấn dấu tam giác nhỏ để nó sổ ra, bật nó lên thành On rồi tích vào Audio, Airplay and Picture in Picture.



Swift play video file

Bạn có thể chơi được các file video có định dạng mov và mp4 với Swift.
Tại class bất kỳ, kéo file video cần play vào cây thư mục bên trái của project.
Copy các dòng import lên trên viewDidLoad.
import UIKit
import AVFoundation
import AVKit
Copy các dòng sau vào trong viewDidLoad.
let url = NSBundle.mainBundle().pathForResource("video", ofType: "mp4")!
let play = AVPlayer(URL: NSURL(fileURLWithPath: url))
let playerViewController = AVPlayerViewController()
 playerViewController.player = play
self.addChildViewController(playerViewController)
self.view.addSubview(playerViewController.view)
playerViewController.view.frame = self.view.frame
play.play()

Chạy ứng dụng sẽ ra màn hình như sau.


Nếu bạn muốn video không full kín mà chỉ chiếm một phần tại một vị trí nhất định, hãy thay dòng playerViewController.view.frame = self.view.frame
bằng dòng playerViewController.view.frame =  CGRectMake(30,80,300,400)
Lúc đó video sẽ cách lề trái 30dp, cách đỉnh 80dp, rộng 300dp và cao 400dp.
Đôi lúc bạn đã làm đúng hết rồi mà ứng dụng lại crash, hãy kiểm tra xem đã có file cần play trong Bundle Resource chưa.
Nháy vào gốc cây thư mục ở trên, chọn Build Phases, mở rộng Copy Bundle Resources bằng cách nháy vào dấu tam giác bên trái, cuộn xuống Click vào dấu + .

Chọn file video cần chơi, click vào nút Add.

Cách này cũng play được file nhạc không có hình.
Nếu định dạng file video không được hỗ trợ, màn hình sẽ ra như sau.



Swift dialog với textField

Dialog dùng để thông báo điều gì đó cho người dùng. Vì tính nhỏ gọn, tiện lợi, ta muốn dùng nó để tương tác với người dùng. Như lấy dữ liệu nhập vào chẳng hạn.
Ta sẽ làm một Dialog có chèn thêm textField để người dùng nhập tên và khi ấn OK ta set tên đó ra một Label.
Khai báo nút bấm, label
var la: UILabel!
var bu:UIButton!
Định vị, set kiểu, đặt tên cho nút là “Nhập liệu”.
bu = UIButton(frame: CGRect(x:80, y: 530, width: 100, height: 32))
setn(bu,"Nhập liệu")
Label tô chữ màu cam.
la = UILabel(frame: CGRect(x: 80, y: 500, width: 100, height: 25))
la.textColor = UIColor.orangeColor()
view.addSubview(bu)
view.addSubview(la)
Khai báo một hàm có tên nhapchu, trong đó ta bật ra một Dialog, có textField bên trong.
func nhapchu(sender: UIButton){
let alert = UIAlertController(title: "Nhập tên", message: "", preferredStyle: .Alert)
                alert.addTextFieldWithConfigurationHandler({(te: UITextField!) in
                    te.placeholder = "Tên"
                })
                alert.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.Default, handler: { (action: UIAlertAction) ->Voidin
let ten = alert.textFields
let ten2 = ten! as [UITextField]
let n = ten2[0].text
let s = n!.characters.count
if s <1 {
self.toat("Bạn chưa nhập dữ liệu!")
self.presentViewController(alert, animated: true, completion: nil)

                    }
else{
self.la.text=n!
                    }
                }))

                alert.addAction(UIAlertAction(title: "Cancel",
                    style: UIAlertActionStyle.Cancel,
                    handler:nil))
self.presentViewController(alert, animated: true, completion: nil)
}

Khi người dùng chưa nhập gì, ta hiện thông báo chưa nhập, nhập rồi, ta set chữ đó ra label.
Cuối cùng set hàm cho nút trong viewDidLoad.
bu.addTarget(self, action: #selector(ViewController.nhapchu(_:)), forControlEvents: UIControlEvents.TouchUpInside)
Chạy thử, ấn nút để thấy dialog bật ra, nhập chữ rồi ấn OK xem kết quả.



Hàm set kiểu cho nút như sau
func setn(bun:UIButton,_ t: String){
let a=NSMutableAttributedString(string: t, attributes: [NSForegroundColorAttributeName: UIColor.blueColor(), NSFontAttributeName: UIFont(name: "Arial", size: 15.0)!])
        bun.setAttributedTitle(a, forState: .Normal)
        bun.backgroundColor = hex("#e6e6fa")
        bun.layer.cornerRadius = 16
        bun.layer.borderColor = hex("#6699cc").CGColor
        bun.layer.borderWidth = 1
    }

Hàm toat có thể xem tại đây.

Ứng dụng không chạy dù không có lỗi

Khi mới học, có lúc bạn chạy thử thấy ứng dụng không chạy dù rõ ràng chả có lỗi nào. Giao diện có khi chỉ có mỗi một cái Label mà cũng không chạy. Màn hình lúc đó bật ra như sau.

Lúc đó hãy nhìn vào bên trái Xcode, chỗ ghi thứ tự các dòng code, nếu có mũi nhọn màu xanh nhạt, đó chính là Breakpoint ta đã vô tình tạo ra khi nháy chuột vào nó. Chuột trong Xcode vốn hay chạy lung tung, đôi khi kể cả đã quen bạn vẫn nháy nhầm, vô ý tạo Breakpoint làm dừng chương trình.



Lúc đó hãy nháy chuột phải vào chỗ có Breakpoint và chọn xoá nó đi là project sẽ lại chạy bình thường.

Các kiểu chuyển màn hình ios

Khi kéo segue để nối các màn hình với nhau, bạn có thể chọn kiểu segue để có những cách chuyển màn hình khác nhau.


Hãy chọn Present modally, sau đó nháy chuột vào segue đó, bên phải chỗ biểu tượng con quay attributes inspector chỗ transition nếu bạn chọn Cover Vertical, màn hình mới sẽ trượt từ dưới lên.
Chọn Flip Horizontal màn hình mới sẽ quay như cánh cửa thay thế màn hình cũ.
Chọn Cross Dissolve màn hình mới sẽ hiện lên thay thế màn hình cũ.
Chọn Partial Curl màn hình mới sẽ cuộn mở ra như một trang sách, rất thích hợp để làm ứng dụng đọc sách.


Tùy sở thích, bạn có thể chọn kiểu chuyển màn hình cho sinh động, không nên chỉ dùng có một kiểu.

Làm đèn nhấp nháy trong Swift

Bạn muốn ứng dụng có dãy đèn nhấp nháy để trang trí, nhìn cho vui mắt, ta sẽ làm thế nào ?
Hãy chuẩn bị các ảnh màu hình tròn giống hệt nhau, chỉ khác nhau màu sắc ở giữa.

Kéo các ảnh vào cột thư mục bên trái ứng dụng, cứ để ngay ngoài cho dễ nhìn.

Các ảnh có kích thước y như nhau, chỉ khác màu, khi ta thay đổi chúng sẽ tạo ra hiệu ứng giống như đang nhấp nháy.
Khai báo lên trên viewDidLoad
let im1 = UIImage(named: "l1");
    let im2 = UIImage(named: "l2");
    let im3 = UIImage(named: "l3");
    let im4 = UIImage(named: "l1");
    let im5 = UIImage(named: "l2")
  
    var ima1: UIImageView!
    var ima2: UIImageView!
    var ima3: UIImageView!
    var ima4: UIImageView!;
    var ima5: UIImageView!;
var count=1
Ta khai báo các image, cùng imageview, tạo một biến đếm ngược để dùng.
Định vị, gắn ảnh, nhét vào view trong viewDidLoad
ima1 = UIImageView(frame: CGRect(x: le, y: 520, width: 40, height: 40))
        ima2 = UIImageView(frame: CGRect(x: le+45, y: 520, width: 40, height: 40))
        ima3 = UIImageView(frame: CGRect(x: le+90, y: 520, width: 40, height: 40))
        ima4 = UIImageView(frame: CGRect(x: le+135, y: 520, width: 40, height: 40))
        ima5 = UIImageView(frame: CGRect(x: le+180, y: 520, width: 40, height: 40))
        ima1.image = im1
        ima2.image = im2
        ima3.image = im3
        ima4.image = im4
        ima5.image = im5
view.addSubview(ima1)
        view.addSubview(ima2)
        view.addSubview(ima3)
        view.addSubview(ima4)
        view.addSubview(ima5)
Biến le tức là để căn cho dãy ảnh vào giữa. Ta lấy chiều rộng màn hình bằng lệnh.
let r = UIScreen.mainScreen().bounds.size.width
Sau đó đã biết dãy ảnh rộng 220, ta trừ đi rồi chia 2 là được lề cần có.
let le = (Int(r) - 220)/2
Copy hàm sau xuống trên ngoặc đóng cuối cùng.
func update(){      
       count = count + 1
        if count%3==1{
            ima1.image = im1
            ima2.image = im2
            ima3.image = im3
            ima4.image = im4
            ima5.image = im5
        }
        else if count%3==2{
            ima1.image = im2
            ima2.image = im3
            ima3.image = im4
            ima4.image = im5
            ima5.image = im1
        }
        else{
            ima1.image = im3
            ima2.image = im4
            ima3.image = im5
            ima4.image = im1
            ima5.image = im2
        }
    }
Cuối cùng, cho dòng sau vào trong viewDidLoad.
let time=NSTimer.scheduledTimerWithTimeInterval(1.0, target:self,  selector: "update",userInfo: nil, repeats: true)
Ta gọi hàm update trong thời gian thực và cứ mỗi một giây lại cộng thêm 1 vào biến đếm count. Ta thay đổi ảnh theo thời gian, có ba pha ảnh, cứ 1, 2, 3 giây lại có ảnh thay đổi, ta chia thời gian cho 3 lấy số dư để xác định.
Giả sử có 5 ảnh, ta sẽ chia cho 5, lấy thành 5 pha cho vào lệnh if.

Sự  thay đổi ảnh này tạo ra hiệu ứng giống như đang nhấp nháy, dùng để trang trí.