How do I use html as a layout file in android

  • 2020-05-19 05:48:12
  • OfStack

In android development, the xml format is often used to describe layout files. At present, few people are familiar with the layout and beautification of android, resulting in serious fault lines. Most enterprises, in fact, or programmers do their own layout. This is a waste of time and energy, and may not be able to achieve the desired results. However, in enterprise android development, using html pages for layout also has many advantages (for example, simple, familiar to most developers and artists, easy to update and manage). As far as I know, there have been a lot of companies using this way of layout development. It could be a trend.

Next, I'll give you an example code to learn how to use the html page to apply the layout to android.


package com.dazhuo.ui;
import java.util.List;
import org.json.JSONArray;
import org.json.JSONObject;
import com.dazhuo.domain.Person;
import com.dazhuo.service.PersonService;
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebView;

public class MainActivity extends Activity {
   private PersonService service;
   private WebView webview;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        service =new PersonService();
        webview = (WebView) this.findViewById(R.id.webView);//android Built-in browser object 
        webview.getSettings().setJavaScriptEnabled(true);// To enable the javascript support 
        // add 1 a js Interactive interface, convenient html In the layout file javascript Code can be associated with the background java Code has direct interactive access 
        webview.addJavascriptInterface(new PersonPlugin() , "Person");//new Class name, alias used for interactive access 
       // <body onload="javascript:Person.getPersonList()">
        webview.loadUrl("file:///android_asset/index.html");// Load local html Layout file 
        // You can actually take this html Layout files are placed in the public network so that they can be easily updated and maintained at any time    For example,  webview.loadUrl("www.xxxx.com/index.html");
    }
    // define 1 Two inner classes, from java The background ( It could be from the network, a file or sqllite The database )  To obtain List Collect data and convert to json String, calling the foreground js code 
    private final class PersonPlugin{
     public void getPersonList(){
      List<Person> list = service.getPersonList();// To obtain List The data set 
      // will List The data of a generic collection is converted to JSON The data format 
       try {
   JSONArray arr =new JSONArray();
   for(Person person :list)
   {
    JSONObject json =new JSONObject();
    json.put("id", person.getId());
    json.put("name", person.getName());
    json.put("mobile",person.getMobile());
    arr.put(json);

   }
   String JSONStr =arr.toString();// Converted to json string 
   webview.loadUrl("javascript:show('"+ JSONStr +"')");// perform html In the layout file javascript Function code --
    Log.i("MainActivity", JSONStr);
       } catch (Exception e) {
   // TODO: handle exception
  }

     }
     // Ways to make phone calls 
  public void call(String mobile){
      Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:"+ mobile));
      startActivity(intent);
     }
    }
}


package com.dazhuo.domain;
public class Person {
    private Integer id;
    public Integer getId() {
  return id;
 }
 public Person(Integer id, String name, String mobile) {
  super();
  this.id = id;
  this.name = name;
  this.mobile = mobile;
 }
 public void setId(Integer id) {
  this.id = id;
 }
 public String getName() {
  return name;
 }
 public void setName(String name) {
  this.name = name;
 }
 public String getMobile() {
  return mobile;
 }
 public void setMobile(String mobile) {
  this.mobile = mobile;
 }
 private String name;
    private String mobile;
}


package com.dazhuo.service;
import java.util.ArrayList;
import java.util.List;
import com.dazhuo.domain.Person;
public class PersonService {
   public List<Person> getPersonList()
   {

    List<Person> list =new ArrayList<Person>();
    list.add(new Person(32, "aa", "13675574545"));
    list.add(new Person(32, "bb", "13698874545"));
    list.add(new Person(32, "cc", "13644464545"));
    list.add(new Person(32, "dd", "13908978877"));
    list.add(new Person(32, "ee", "15908989898"));
     return list;
   }
}


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
 function show(jsondata){
         var jsonobjs = eval(jsondata);
         var table = document.getElementById("personTable");
         for(var y=0; y<jsonobjs.length; y++){
          var tr = table.insertRow(table.rows.length); // add 1 line 
          // add 3 column 
          var td1 = tr.insertCell(0);
          var td2 = tr.insertCell(1);
          td2.align = "center";
          var td3 = tr.insertCell(2);
          td3.align = "center";
          // Sets the column content and properties 
          td1.innerHTML = jsonobjs[y].id; 
          td2.innerHTML = jsonobjs[y].name; 
          td3.innerHTML = "<a href='javascript:Person.call(\""+ jsonobjs[y].mobile+ "\")'>"+ jsonobjs[y].mobile+ "</a>"; 
   }
 }
</script>
</head>
<!-- js The code by webView Call in its plug-in java code  -->
<body onload="javascript:Person.getPersonList()">
   <table border="0" width="100%" id="personTable" cellspacing="0">
  <tr>
   <td width="20%"> Serial number </td><td width="40%" align="center"> The name </td><td align="center"> The phone </td>
  </tr>
 </table>
 <a href="javascript:window.location.reload()"> The refresh </a>
</body>
</html>


Related articles: