Coder Social home page Coder Social logo

Runtime Height about tangramkit HOT 4 CLOSED

youngsoft avatar youngsoft commented on August 17, 2024
Runtime Height

from tangramkit.

Comments (4)

youngsoft avatar youngsoft commented on August 17, 2024
  • If you use TGLinearLayout to the UITableView's tableHeaderView and want to get runtime height, you can coding like below:
        let tableHeaderViewLayout = TGLinearLayout(.vert)
        tableHeaderViewLayout.tg_padding = UIEdgeInsetsMake(10, 10, 10, 10)
        //frame's width must be exact and height can be zero。
        tableHeaderViewLayout.frame = CGRect(x: 0, y: 0, width: self.tableView.bounds.width, height: 0)
        tableHeaderViewLayout.tg_width.equal(.fill)
        tableHeaderViewLayout.tg_height.equal(.wrap)  //height is wrap
               
        let label1 = UILabel()
        label1.text = NSLocalizedString("add tableHeaderView(please touch me)", comment: "")
        label1.tg_centerX.equal(0)
        label1.sizeToFit()
        tableHeaderViewLayout.addSubview(label1)
        
        let label2 = UILabel()
        label2.text = NSLocalizedString(" if you use layout view to realize the dynamic height tableHeaderView, please use frame to set view's width and use wrapContentHeight to set view's height. the layoutIfNeeded method is needed to call before the layout view assignment to the UITableview's tableHeaderView.", comment: "")
        label2.tg_leading.equal(5)
        label2.tg_trailing.equal(5)
        label2.tg_height.equal(.wrap)
        label2.tg_top.equal(10)
        
        tableHeaderViewLayout.addSubview(label2)
        //Because tableHeaderViewLayout's height is wrap, so you must call layoutIfNeeded  before  to  set to the tableView.tableHeaderView.  layoutIfNeeded may calculate the TGLinearLayout's  runtime frame.
        tableHeaderViewLayout.layoutIfNeeded() 
        self.tableView.tableHeaderView = tableHeaderViewLayout
  • If you use TGLinearLayout to the UITableViewCell and want to get runtime height, you can coding like below:

step 1: set the tableview's estimatedRowHeight and rowHeight in the viewDidLoad

 self.tableView.estimatedRowHeight = 60
 self.tableView.rowHeight = UITableViewAutomaticDimension

step2: derive a class from UITableViewCell, and override init like below:

       override init(style: UITableViewCellStyle, reuseIdentifier: String?)
    {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
          self.rootLayout = TGLinearLayout(.horz)
          self.rootLayout.tg_width.equal(.fill)
          self.rootLayout.tg_height.equal(.wrap)    //set rooLayout' height is wrap
          self.rootLayout.tg_cacheEstimatedRect = true   //cache will improve performance.
         self.contentView.addSubview(self.rootLayout)    

         // you can add any subviews to the self.rootLayout
    }

step3: override the UITableViewCell's systemLayoutSizeFitting:

     override func systemLayoutSizeFitting(_ targetSize: CGSize, withHorizontalFittingPriority horizontalFittingPriority: UILayoutPriority, verticalFittingPriority: UILayoutPriority) -> CGSize
    {
            return self.rootLayout.sizeThatFits(targetSize) 
    }

then the UITableViewCell'height will be auto calculated!!

My English is poor, file: AllTest1ViewController.swift and AllTest1TableViewCell.swift are detailed introduction how to use TGLayout with UITableView.

from tangramkit.

SimonHolmeslm avatar SimonHolmeslm commented on August 17, 2024

nice shot

from tangramkit.

ykorshev avatar ykorshev commented on August 17, 2024

Here what I got:
2018-03-16 17 52 01

Here is the code:

Table view:

    self.tableView.register(NotificationCell.self, forCellReuseIdentifier: "notification");
    self.tableView.separatorStyle = .none;
    let bgImageView = UIImageView(image: #imageLiteral(resourceName: "innerbg"));
    bgImageView.contentMode = .scaleAspectFill
    self.tableView.backgroundView = bgImageView;
    self.tableView.estimatedRowHeight = 60
    self.tableView.rowHeight = UITableViewAutomaticDimension
    self.tableView.numberOfSectionsIn {
        return 1;
    }
    self.tableView.numberOfRows { section in
        return self.notifications.count;
    }
    /*self.tableView.heightForRowAt { indexPath in
        return self.configureHeight(for: indexPath);
    }*/
    self.tableView.cellForRow{ indexPath in
        return self.configureCell(for: indexPath);
    }

Cell:
https://pastebin.com/pX4bsUZz

Please help me. What I am doing wrong?

from tangramkit.

youngsoft avatar youngsoft commented on August 17, 2024
  • First: in your initView method, if your root layout use tg_horzMargin(16) means that the root layout's real width equal to self.contentView.frame.width - 32. It will conflict with tg_width.equal(.fill). The same if your root layout use tg_vertMargin(8) means that the root layout's height equal to self.contentView.frame.height - 8. It will conflict with tg_height.equal(.wrap)`。 Because your cell's height will dynamic height。So you can change to :

    func initViews(){

    .....
      let root = TGLinearLayout(.horz);
       // root.tg_width.equal(.fill)
        root.tg_height.equal(.wrap)
        root.tg_horzMargin(16.0);
       // root.tg_vertMargin(8.0);
        root.tg_top.equal(8.0);    //use tg_top instead to tg_horzMargin  set the top margin.

      .....
  • Second: You must change systemLayoutSizeFitting as below:
override func systemLayoutSizeFitting(_ targetSize: CGSize, withHorizontalFittingPriority horizontalFittingPriority: UILayoutPriority, verticalFittingPriority: UILayoutPriority) -> CGSize
    {
        var  targetSize2 = targetSize
        //Because you root layout's real width is   self.contentView.frame.width - 32, so you must sub 32.
        targetSize2.width -= 32;   
        var size = self.root!.sizeThatFits(targetSize2)
        size.height += 16   //The size is root layout's size not cell's size,  so height must add 2*8 = 16。(top and bottom margin are 8)
        return size;
    }

from tangramkit.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.