1 / 27

How Inflation Works!

How Inflation Works!. Examine the following code. public class MainActivity extends Activity { @Override public void onCreate ( Bundle savedInstanceState ) { super . onCreate ( savedInstanceState ); } }. This is what happens when you don’t call setContentView ().

dalton
Télécharger la présentation

How Inflation Works!

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. How Inflation Works!

  2. Examine the following code publicclassMainActivityextends Activity { @Override publicvoidonCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); } }

  3. This is what happens when you don’t call setContentView()

  4. Examine the following code publicclassMainActivityextends Activity { @Override publicvoidonCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }

  5. Result when calling setContentView()

  6. What is setContentView() doing? @Override publicvoidsetContentView(intlayoutResID){ if(mContentParent==null){ installDecor(); }else{ mContentParent.removeAllViews(); } mLayoutInflater.inflate(layoutResID,mContentParent); final Callback cb=getCallback(); if(cb!=null&&!isDestroyed()){ cb.onContentChanged(); } } Taken from PhoneWindow.java

  7. What is setContentView() doing? @Override publicvoidsetContentView(intlayoutResID){ if(mContentParent==null){ installDecor(); }else{ mContentParent.removeAllViews(); } mLayoutInflater.inflate(layoutResID,mContentParent); final Callback cb=getCallback(); if(cb!=null&&!isDestroyed()){ cb.onContentChanged(); } } 1 Passing in specified layout resource to LayoutInflater.inflate()

  8. Inflation?? Student: Professor Raley, you keep saying this word inflation over and over again but I still have no idea what you’re talking about. Me: Inflation happens when you instantiate a XML layout resource file into its corresponding View objects. Student: ?????

  9. Let’s try explaining inflation with HTML <html> <body> <p>Let's explain how Inflation works!</p> </body> </html>

  10. In the background, we have the DOM <html> <body> <p>Let's explain how Inflation works!</p> </body> </html> html body p DOM Tree

  11. DOM Refresh • The DOM is a tree of node objects representing an HTML document. • The DOM is not actual HTML markup, it is javascript node Objects.

  12. How to add this HTML Snippet into the <body>? <divstyle="background-color:red"> <p>I am some text that will be inflated</p> </div> • Imagine this HTML is stored in a separate file called snippet.html • We want to take this snippet and somehow add it into the DOM

  13. A naive attempt. Directly add HTML to DOM nodes. html body p <divstyle="background-color:red"> <p>I am some text that will be inflated</p> </div>

  14. BAD!!! A naive attempt. Directly add HTML to DOM nodes. html body p <divstyle="background-color:red"> <p>I am some text that will be inflated</p> </div>

  15. Convert HTML to node <divstyle="background-color:red"> <p>I am some text that will be inflated</p> </div> <scripttype="text/javascript"> //create a new <div> node var div =document.createElement("div"); //set background color of <div> to red div.style.backgroundColor="red"; //create a <p> node var p =document.createElement("p"); p.innerHTML="I am some text that will be inflated"; //find <body> var body =document.getElementByTagName("body")[0]; //attach <p> to <div> div.appendChild(p); //attach <div> to <body> body.appendChild(div); </script>

  16. Convert HTML to node <scripttype="text/javascript"> //create a new <div> node var div =document.createElement("div"); //set background color of <div> to red div.style.backgroundColor="red"; //create a <p> node var p =document.createElement("p"); p.innerHTML="I am some text that will be inflated"; //find <body> var body =document.getElementByTagName("body")[0]; //attach <p> to <div> div.appendChild(p); //attach <div> to <body> body.appendChild(div); </script>

  17. Convert HTML to node <div> <scripttype="text/javascript"> //create a new <div> node var div =document.createElement("div"); //set background color of <div> to red div.style.backgroundColor="red"; //create a <p> node var p =document.createElement("p"); p.innerHTML="I am some text that will be inflated"; //find <body> var body =document.getElementByTagName("body")[0]; //attach <p> to <div> div.appendChild(p); //attach <div> to <body> body.appendChild(div); </script>

  18. Convert HTML to node bg-color: red <div> <scripttype="text/javascript"> //create a new <div> node var div =document.createElement("div"); //set background color of <div> to red div.style.backgroundColor="red"; //create a <p> node var p =document.createElement("p"); p.innerHTML="I am some text that will be inflated"; //find <body> var body =document.getElementByTagName("body")[0]; //attach <p> to <div> div.appendChild(p); //attach <div> to <body> body.appendChild(div); </script>

  19. Convert HTML to node bg-color: red <p> <div> <scripttype="text/javascript"> //create a new <div> node var div =document.createElement("div"); //set background color of <div> to red div.style.backgroundColor="red"; //create a <p> node var p =document.createElement("p"); p.innerHTML="I am some text that will be inflated"; //find <body> var body =document.getElementByTagName("body")[0]; //attach <p> to <div> div.appendChild(p); //attach <div> to <body> body.appendChild(div); </script>

  20. Convert HTML to node bg-color: red #text: I am… <p> <div> <scripttype="text/javascript"> //create a new <div> node var div =document.createElement("div"); //set background color of <div> to red div.style.backgroundColor="red"; //create a <p> node var p =document.createElement("p"); p.innerHTML="I am some text that will be inflated"; //find <body> var body =document.getElementByTagName("body")[0]; //attach <p> to <div> div.appendChild(p); //attach <div> to <body> body.appendChild(div); </script>

  21. Convert HTML to node <body> bg-color: red #text: I am… <p> <div> <scripttype="text/javascript"> //create a new <div> node var div =document.createElement("div"); //set background color of <div> to red div.style.backgroundColor="red"; //create a <p> node var p =document.createElement("p"); p.innerHTML="I am some text that will be inflated"; //find <body> var body =document.getElementByTagName("body")[0]; //attach <p> to <div> div.appendChild(p); //attach <div> to <body> body.appendChild(div); </script>

  22. Convert HTML to node <body> bg-color: red #text: I am… <p> <div> <scripttype="text/javascript"> //create a new <div> node var div =document.createElement("div"); //set background color of <div> to red div.style.backgroundColor="red"; //create a <p> node var p =document.createElement("p"); p.innerHTML="I am some text that will be inflated"; //find <body> var body =document.getElementByTagName("body")[0]; //attach <p> to <div> div.appendChild(p); //attach <div> to <body> body.appendChild(div); </script>

  23. Inflation: Going from HTML to Node Object snippet.html <divstyle="background-color:red"> <p>I am some text that will be inflated</p> </div> Inflater Machine

  24. Inflation: Going from HTML to Node Object snippet.html <divstyle="background-color:red"> <p>I am some text that will be inflated</p> </div> HTML bg-color: red <div> #text: I am… Inflater Machine <p> Objects

  25. Bringing it all together html body p bg-color: red <div> #text: I am… <p>

  26. html body bg-color: red <div> #text: I am… <p> p <html> <body> <p>Let's explain how Inflation works!</p> <divstyle="background-color:red"> <p>I am some text that will be inflated</p> </div> </body> </html>

  27. In Android World • ((Activity)context).getLayoutInflater() • .inflate(R.layout.rating_text_view,this);

More Related