Question

我想自定义JSQMessagesCollectionView。我想在底部视图中添加一些填充，以便滚动视图从一些底部边距开始。

我需要这个，因为我的观点是重叠的。这是截图：

我想要自定义时间戳的第二件事。我想添加一个像Facebook一样的功能。这是场景：

显示日期和时间。对于在一分钟内发送的消息，请使用“Just 现在“而不是实际的时间戳。
对于同一天发送的消息，请使用今天，时间。例如：今天下午4:47。
对于昨天发送的邮件，请使用昨天，时间。例如：昨天上午5:01。
其他一切，请使用标准格式：日期，时间。例如： 2017年4月12日下午4:01。

我想自定义时间戳标签，我想在那里添加“just now”文本。有可能吗？

我可以更改视图中的时间位置吗？我想在泡沫下方显示时间戳？

提前致谢。如果可以，请帮忙吗？

Answer 1

上述答案解决了时间戳问题。 我刚刚添加了这段代码：

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        let cell = super.collectionView(collectionView, cellForItemAt: indexPath) as! JSQMessagesCollectionViewCell
        cell.textView.delegate = self
        let message = messages[indexPath.item]

       // let formatter = DateFormatter()
         // time zone if needed

        let formatter = DateFormatter()
        formatter.dateFormat = "yyyy-MM-dd HH:mm:ss"
        formatter.timeZone = NSTimeZone(abbreviation: "UTC") as TimeZone!
    let now = formatter.string(from: message.date as Date)

    let messageUTCDate = formatter.date(from: now)

    cell.cellBottomLabel.text =  formatter.timeAgoSinceDate(messageUTCDate!)
    return cell
}

我也能解决上述问题，以下是解决方案：

要在集合视图中添加按钮，我使用了以下代码，它将被添加到 ChatViewController.swift 中：

 func addSocialPagesButtonsToView()
    {
        var scrollView : UIScrollView!

        let pageNames = NSArray(objects: "Open My Facebook Page","Open My TripAdvisor Page")
        scrollView = UIScrollView(frame:CGRect(x:0, y:10, width:Int(collectionView.frame.width+100), height:50))
        scrollView.sizeToFit()
      //  scrollView.setTranslatesAutoresizingMaskIntoConstraints(false)
        for i in 0..<2 {

           // let catogry = categoryList[i] as! CategoryModel
            defaultSocialMediaButtonsScrollContentSize = defaultSocialMediaButtonsScrollContentSize + 200
            scrollView.addSubview(self.createViewForSocialPagesButtons(name: pageNames[i] as! String, heightOfParent: Int(scrollView.frame.size.height), tag: i))
            scrollView.contentSize = CGSize(width: defaultSocialMediaButtonsScrollContentSize, height:40)

        }
        defaultSocialMediaButtonsScrollContentSize = defaultSocialMediaButtonsScrollContentSize + 40
        scrollView.contentSize = CGSize(width: defaultSocialMediaButtonsScrollContentSize, height:40)
        scrollView.showsHorizontalScrollIndicator = true
        scrollView.showsVerticalScrollIndicator = false

        socialbuttonsScrollView.addSubview(scrollView)
    }
    func createViewForSocialPagesButtons(name: String, heightOfParent: Int, tag: Int) -> UIButton {

        let button = UIButton(frame: CGRect(x:defaultXValueforView , y: 0, width: 220, height: 40))
        button.backgroundColor = UIColor.clear
        button.setTitle(name, for: .normal)
        button.tag = tag
        button.setTitleColor(UIColor.blue, for: .normal)
        button.layer.cornerRadius = 2;
        button.layer.borderWidth = 1;
        button.layer.borderColor = UIColor.blue.cgColor
        button.titleLabel?.textAlignment = NSTextAlignment.center
        let font = UIFont(name: "Rubik", size: 17)
        button.titleLabel?.font = font
        button.addTarget(self, action: #selector(openPageButtonTapped(_:)), for: .touchUpInside)

        defaultXValueforView = defaultXValueforView + 225;
        return button
    }

    func openPageButtonTapped(_ sender : UIButton){
        let buttonTapped = sender.tag
        if(Commons.connectedToNetwork())
        {
            let storyBoard : UIStoryboard = UIStoryboard(name: "Main", bundle:nil)
            let nextViewController = storyBoard.instantiateViewController(withIdentifier: "webVC") as! WebPageViewController
            if(buttonTapped==0)
            {
                nextViewController.pageUrlAdress = "https://www.facebook.com/TripAdvisor/"
            }
            else if(buttonTapped==1)
            {
              nextViewController.pageUrlAdress = "https://www.tripadvisor.com.ph/Restaurant_Review-g298460-d10229090-Reviews-Vikings_SM_City_Cebu_Restaurant-Cebu_City_Cebu_Island_Visayas.html"
            }

            self.navigationController?.pushViewController(nextViewController, animated:true)

        }
        else
        {
            Commons.showAlert("Please check your connection", VC: self)
        }
    }

在addSocialPagesButtonsToView()中调用viewdidload方法。

要缩小Collectionview滚动区域，您必须打开pod代码文件。打开 JSQMessagesViewController.m 文件，然后转到以下方法：

- (void)jsq_setCollectionViewInsetsTopValue:(CGFloat)top bottomValue:(CGFloat)bottom
{
    UIEdgeInsets insets = UIEdgeInsetsMake(top, 0.0f, bottom+60, 0.0f);
    self.collectionView.contentInset = insets;
    self.collectionView.scrollIndicatorInsets = insets;
}

只需添加常量值（您希望减少多少区域）bottom+your-value。例如：bottom+60。

我希望它能帮助所有想要这样做的访客。如果有人有疑问，请告诉我。

感谢。

Answer 2

要在气泡下方显示时间戳，您可以使用Cell的cellBottomLabel标签在cellForItemAt indexPath方法

中

cell1.cellBottomLabel.text = "just now"

您还需要为该标签提供高度，如下所示

override func collectionView(_ collectionView: JSQMessagesCollectionView!, layout collectionViewLayout: JSQMessagesCollectionViewFlowLayout!, heightForCellBottomLabelAt indexPath: IndexPath!) -> CGFloat {
    return 20.0
}

进一步自定义时间戳，您始终可以使用日期格式化程序扩展。在我的情况下，我使用了以下。（https://gist.github.com/minorbug/468790060810e0d29545）

extension DateFormatter {
/**
 Formats a date as the time since that date (e.g., “Last week, yesterday, etc.”).

 - Parameter from: The date to process.
 - Parameter numericDates: Determines if we should return a numeric variant, e.g. "1 month ago" vs. "Last month".

 - Returns: A string with formatted `date`.
 */

func timeAgoSinceDate(_ date:Date, numericDates:Bool = false) -> String {
    let calendar = NSCalendar.current
    let unitFlags: Set<Calendar.Component> = [.minute, .hour, .day, .weekOfYear, .month, .year, .second]
    let now = Date()
    let earliest = now < date ? now : date
    let latest = (earliest == now) ? date : now
    let components = calendar.dateComponents(unitFlags, from: earliest,  to: latest)

    if (components.year! >= 2) {
        return "\(components.year!) years ago"
    } else if (components.year! >= 1){
        if (numericDates){
            return "1 year ago"
        } else {
            return "Last year"
        }
    } else if (components.month! >= 2) {
        return "\(components.month!) months ago"
    } else if (components.month! >= 1){
        if (numericDates){
            return "1 month ago"
        } else {
            return "Last month"
        }
    } else if (components.weekOfYear! >= 2) {
        return "\(components.weekOfYear!) weeks ago"
    } else if (components.weekOfYear! >= 1){
        if (numericDates){
            return "1 week ago"
        } else {
            return "Last week"
        }
    } else if (components.day! >= 2) {
        return "\(components.day!) days ago"
    } else if (components.day! >= 1){
        if (numericDates){
            return "1 day ago"
        } else {
            return "Yesterday"
        }
    } else if (components.hour! >= 2) {
        return "\(components.hour!) hours ago"
    } else if (components.hour! >= 1){
        if (numericDates){
            return "1 hour ago"
        } else {
            return "An hour ago"
        }
    } else if (components.minute! >= 2) {
        return "\(components.minute!) minutes ago"
    } else if (components.minute! >= 1){
        if (numericDates){
            return "1 minute ago"
        } else {
            return "A minute ago"
        }
    } else if (components.second! >= 3) {
        return "\(components.second!) seconds ago"
    } else {
        return "Just now"
    }

}  }

使用此

let formatter = DateFormatter()
        formatter.dateFormat = "Your Format"
        formatter.timeZone = NSTimeZone(abbreviation: "UTC") as TimeZone! // time zone if needed 
        let messageUTCDate = formatter.date(from: "your date in string")
        return formatter.timeAgoSinceDate(messageUTCDate!)

或者您可以使用其他日期格式，例如此处Getting the difference between two NSDates in (months/days/hours/minutes/seconds)

最后，如果您愿意，可以在顶部栏中显示按钮。

希望有所帮助

iOS：如何自定义JSQMessagesCollectionview？

2 个答案: