iOS: 如何自定义JSQMessagesCollectionview？

Question

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

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

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

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

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

我可以更改视图中的时间地点吗？我想在气泡下方显示时间戳？

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

Answer 1

要在气泡下方显示时间戳，您可以使用 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)

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

希望对您有所帮助

Answer 2

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

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)
        }
    }

在viewdidload中调用addSocialPagesButtonsToView()方法。

为了减少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.

希望对所有想做的人有所帮助。如果有人有任何疑问，请告诉我。

谢谢。

iOS: 如何自定义JSQMessagesCollectionview？

iOS: How to customise JSQMessagesCollectionview?

messaging

ios

swift

jsqmessagesviewcontroller