I'm trying to showing a list of place name, including it's photo using PFQueryTableViewController
. It's included in ParseUI SDK from parse.com
I have managed to show the image. Unfortunately, when I change the UIImageView mode to Aspect fill, the image is become bigger than it should be.
here are the pictures:
https://dl.dropboxusercontent.com/u/86529526/pic_normal.png https://dl.dropboxusercontent.com/u/86529526/pic_error.png
in pic_normal
, you will see two cell, with two normal image. in pic_error
, you will the second cell was being overlaid by the first cell image.
can anyone help me to solve this problem? I also put my whole code here :
import UIKit class TableViewController: PFQueryTableViewController, UISearchBarDelegate { @IBOutlet var searchBar: UISearchBar! // Initialise the PFQueryTable tableview override init(style: UITableViewStyle, className: String!) { super.init(style: style, className: className) } required init(coder aDecoder: NSCoder) { super.init(coder: aDecoder) // Configure the PFQueryTableView self.pullToRefreshEnabled = true self.paginationEnabled = false } // Define the query that will provide the data for the table view override func queryForTable() -> PFQuery { // Start the query object var query = PFQuery(className: "Places") // query with pointer query.includeKey("mainPhoto") // Add a where clause if there is a search criteria if searchBar.text != "" { query.whereKey("name", containsString: searchBar.text) } // Order the results query.orderByAscending("name") // Return the qwuery object return query } //override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath, object: PFObject) -> PFTableViewCell? { var cell = tableView.dequeueReusableCellWithIdentifier("CustomCell") as! CustomTableViewCell! if cell == nil { cell = CustomTableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "CustomCell") } // Extract values from the PFObject to display in the table cell if let name = object["name"] as? String{ cell.name.text = name } // display initial image var initialThumbnail = UIImage(named: "question") cell.photo.image = initialThumbnail // extract image from pointer if let pointer = object["mainPhoto"] as? PFObject { cell.detail.text = pointer["photoTitle"] as? String! if let thumbnail = pointer["photo"] as? PFFile { cell.photo.file = thumbnail cell.photo.loadInBackground() } } cell.sendSubviewToBack(cell.photo) // return the cell return cell } // In a storyboard-based application, you will often want to do a little preparation before navigation override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) { // Get the new view controller using [segue destinationViewController]. var detailScene = segue.destinationViewController as! DetailViewController // Pass the selected object to the destination view controller. if let indexPath = self.tableView.indexPathForSelectedRow() { let row = Int(indexPath.row) detailScene.currentObject = objects[row] as? PFObject } } override func viewDidLoad(){ super.viewDidLoad() let tapGesture = UITapGestureRecognizer(target:self, action:Selector("hideKeyboard")) tapGesture.cancelsTouchesInView = true tableView.addGestureRecognizer(tapGesture) } func hideKeyboard(){ tableView.endEditing(true) } override func viewDidAppear(animated: Bool) { // Refresh the table to ensure any data changes are displayed tableView.reloadData() // Delegate the search bar to this table view class searchBar.delegate = self } func searchBarTextDidEndEditing(searchBar: UISearchBar) { // Dismiss the keyboard searchBar.resignFirstResponder() // Force reload of table data self.loadObjects() } func searchBarSearchButtonClicked(searchBar: UISearchBar) { // Dismiss the keyboard searchBar.resignFirstResponder() // Force reload of table data self.loadObjects() } func searchBarCancelButtonClicked(searchBar: UISearchBar) { // Clear any search criteria searchBar.text = "" // Dismiss the keyboard searchBar.resignFirstResponder() // Force reload of table data self.loadObjects() } }
With content mode set to Aspect Fill
, try setting clips to bounds to true as well, reason being the content mode aspect fill
keeps on filling the frame of the image view till the frame is fully filled with content also keeping the aspect ratio
intact. In the process of filling the container with image maintaining aspect ratio, either vertical or horizontal frame is fully filled, and the filling is continued till the other (if horizontal than vertical or vise versa) portion is fully filled. Thus the first filled portion either across vertical or horizontal will go out of bounds and the content will be visible outside the frame of the image view. To clip the extra content we need to clip the extra portion using imageView's clipsToBounds
property set to true
cell.photo.contentMode = UIViewContentMode.ScaleAspectFill cell.photo.clipsToBounds = true
Reference: an answer in another post which gives you clear insight - https://stackoverflow.com/a/14220605/3021573
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With