How Inflation Works!
27
How Inflation Works!
description
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 (). - PowerPoint PPT Presentation
Transcript of How Inflation Works!
How Inflation Works!
Examine the following codepublic class MainActivity extends Activity {
@Overridepublic void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);}
}
This is what happens when you don’t call setContentView()
Examine the following codepublic class MainActivity extends Activity {
@Overridepublic void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);
}}
Result when calling setContentView()
What is setContentView() doing? @Override public void setContentView(int layoutResID) { 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
What is setContentView() doing? @Override public void setContentView(int layoutResID) { 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()
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: ?????
Let’s try explaining inflation with HTML
<html> <body> <p>Let's explain how Inflation works!</p> </body></html>
In the background, we have the DOM
<html> <body> <p>Let's explain how Inflation works!</p> </body></html>
html
body
p
DOM Tree
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.
How to add this HTML Snippet into the <body>?
<div style="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
html
body
p<div style="background-color:red"> <p>I am some text that will be inflated</p></div>
A naive attempt. Directly add HTML to DOM nodes.
html
body
p<div style="background-color:red"> <p>I am some text that will be inflated</p></div>
A naive attempt. Directly add HTML to DOM nodes.
BAD!!!
Convert HTML to node<div style="background-color:red"> <p>I am some text that will be inflated</p></div>
<script type="text/javascript">//create a new <div> nodevar div = document.createElement("div");//set background color of <div> to reddiv.style.backgroundColor = "red";//create a <p> nodevar 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>
Convert HTML to node<script type="text/javascript">
//create a new <div> nodevar div = document.createElement("div");//set background color of <div> to reddiv.style.backgroundColor = "red";//create a <p> nodevar 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>
Convert HTML to node<script type="text/javascript">
//create a new <div> nodevar div = document.createElement("div");//set background color of <div> to reddiv.style.backgroundColor = "red";//create a <p> nodevar 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>
<div>
Convert HTML to node<script type="text/javascript">
//create a new <div> nodevar div = document.createElement("div");//set background color of <div> to reddiv.style.backgroundColor = "red";//create a <p> nodevar 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>
<div>bg-color: red
Convert HTML to node<script type="text/javascript">
//create a new <div> nodevar div = document.createElement("div");//set background color of <div> to reddiv.style.backgroundColor = "red";//create a <p> nodevar 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>
<div>bg-color: red
<p>
Convert HTML to node<script type="text/javascript">
//create a new <div> nodevar div = document.createElement("div");//set background color of <div> to reddiv.style.backgroundColor = "red";//create a <p> nodevar 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>
<div>bg-color: red
<p> #text: I am…
Convert HTML to node<script type="text/javascript">
//create a new <div> nodevar div = document.createElement("div");//set background color of <div> to reddiv.style.backgroundColor = "red";//create a <p> nodevar 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>
<div>bg-color: red
<p> #text: I am…
<body>
Convert HTML to node<script type="text/javascript">
//create a new <div> nodevar div = document.createElement("div");//set background color of <div> to reddiv.style.backgroundColor = "red";//create a <p> nodevar 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>
<div>bg-color: red
<p> #text: I am…
<body>
Inflation: Going from HTML to Node Object
<div style="background-color:red"> <p>I am some text that will be inflated</p></div>
snippet.html
Inflater Machine
Objects
Inflation: Going from HTML to Node Object
<div style="background-color:red"> <p>I am some text that will be inflated</p></div>
snippet.html
HTML
Inflater Machine
<div>bg-color: red
<p> #text: I am…
Bringing it all together
html
body
p <div>bg-color: red
<p> #text: I am…
<html> <body> <p>Let's explain how Inflation works!</p>
<div style="background-color:red"> <p>I am some text that will be inflated</p></div>
</body></html>
html
body
p <div>bg-color: red
<p> #text: I am…
((Activity)context).getLayoutInflater().inflate(R.layout.rating_text_view, this);
In Android World
