Học lập trình ứng dụng iphone: Tạo list layout 2 cột bằng CollectionView trên swift 4 và xcode 3 tháng 1 tuần trước #4079

  • huonggiang123
  • huonggiang123's Avatar
  • Offline
  • New Member
  • Tổng số bài viết: 16
  • Điểm khen ngợi: 0
- Nếu bạn muốn tạo một màn hình login xin tham khảo bài viết trước, tạo ứng dụng iphone login bằng swift 4,bài viết này tiếp tục ứng dụng Nộp tiền online với chức năng tạo trang điều khiển bẳng CollectionView, tương ứng với RecycleListView trong lập trình android.

Bước 1:
- Kéo thả 1 ViewController
- Thêm một file Cocoa Touch Class, kế thừa từ UIViewController đặt tên là PanelControllerViewController. Sau đó chọn ViewController trong Main.StoryBoard, điều chỉnh class và StoryBoard ID là tên lớp vừa tạo như trong hình

Bước 2:
- Tiếp tục kéo thả CollectionView vào. Cẩn thận có thể bạn kéo nhầm CollectionViewController. Để hiện phần control kéo thả này, vào menu View, chọn library nhé!
- Điều chỉnh cho CollectionView rộng toàn màn hình, có thể dùng menu Add New Constrain ở góc phải dưới màn hình, điều chỉnh trái phải trên dưới bằng 0.
- Tạo một file mới từ file Cocoa Touch Class UICollectionViewCell và đặt tên là ccollectionViewCell. Sau đó chọn cell trong CollectionView và chọn class cho đối tượng đó như trong hình.


- Kéo thả label và image view vào trong cell. Điều chỉnh kích thước bằng các contrain như mong muốn.
- Bấm vào menu show assistant editor chọn manual và chọn file ccollectionViewCell, kéo thả control label và image vào trong code của lớp ccollectionViewCell như hình trên để tạo kết nối giao diện và dữ liệu.
Bước 3:
- Kéo cả Collection View vào tạo tên biến là proCollectionView.
- Mở rộng lớp thêm UICollectionViewDataSource vào UICOllectionViewDelegate lớp.
- Lớp có nội dụng toàn bộ như sau:
import UIKit

class PanelControllerViewController: UIViewController,UICollectionViewDataSource,UICollectionViewDelegate {
    @IBOutlet weak var ProCollectionView: UICollectionView!
    // Create an array that contains our data
    var array = ["Nộp tiền", "Cài đặt tài khoản", "Cài đặt gói", "Đơn hàng khách đặt", "Lịch sử nộp tiền","Thoát"]
     var images = ["shopping", "setting", "caigoi", "donhang", "lichsu","thoat"]
  
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    
        let backButton = UIBarButtonItem(title: "Nộp tiền online", style: UIBarButtonItem.Style.plain, target: navigationController, action: nil)
        navigationItem.leftBarButtonItem = backButton
        
        //getting user data from defaults
        let defaultValues = UserDefaults.standard
        if (defaultValues.string(forKey: "ten") == nil ){
           
            //send back to login view controller
            let viewController = self.storyboard?.instantiateViewController(withIdentifier: "ViewController") as! ViewController
            self.navigationController?.pushViewController(viewController, animated: true)
        }
        ProCollectionView.dataSource = self
        ProCollectionView.delegate = self
        
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: self.ProCollectionView.frame.height / 6 * 2, height: self.ProCollectionView.frame.height / 6 * 2)
        
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        //return The number of rows in section.
        print(array.count)
        return array.count
    }
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        //return A configured cell object.
        
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "proCell", for: indexPath) as! CCollectionViewCell
        cell.proLbl.text = array[indexPath.row]
         cell.proImg.image = UIImage(named: images[indexPath.row])
        return cell
    }

    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destination.
        // Pass the selected object to the new view controller.
    }
    */

}

Bước 4:
- như ở trên ta đã thêm một loat các tên image để chèn hình vào panel. Ta cần phải thêm hình vào project Theo tên như vậy.
- Bấm vào Assets.xcassets, bấm dấu + phía bên dưới, sau đó kéo thả hình vào 3 ô. đổi tên image thành tên ảnh theo thứ tự trong mảng ta đã thêm.

Bước 5:
Mọi thứ đã hoàn thành ta build chương trình trên thiết bị sẽ có giao diện như sau.



Tuy nhiên để được giao diện như trên bạn cần canh chỉnh các control cho đẹp nhé! Sau khi làm được bạn có thể đổi tên các biến và điều chỉnh code, thông quá đó hiểu code được nhiều hơn
Lần sửa cuối: 3 tháng 1 tuần trước bởi huonggiang123.
Không cho phép Khách viếng thăm viết bài.

quang cao daklak

Bài đăng mới nhất

  • Không có bài viết được hiển thị.