Utilisation de base de WebView (affichage de page Web)
Présentation de cette section
Ce que cette section vous apporte, c'est un contrôle sous Android pour l'affichage des pages Web : WebView (affichage de la page Web).
Application Android maintenant Il existe deux directions pour le développement de couches : le développement client et le développement mobile HTML5 !
La soi-disant fin HTML5 est : HTML5 + CSS + JS à construire Une version Web de l'application, et le support intermédiaire est WebView, et le Web et les pages Web peuvent interagir via JS, par exemple, La page Web lit les contacts du téléphone mobile, appelle les API liées au téléphone mobile, etc. !
Et par rapport au développement client ordinaire, le terminal mobile HTML5 présente des avantages : Vous pouvez utiliser des pourcentages pour la mise en page, et s'il y a des changements majeurs du côté HTML5, nous n'avons pas besoin de recréer l'application comme le fait le client, puis Pour écraser l'installation, il suffit de modifier la page web ! Et le client... est terrible. Bien sûr, HTML5 présente également un défaut, à savoir des problèmes de performances. Accumulation de données, problèmes de consommation d'énergie, écrans scintillants, etc...
De plus, pour ce type de multiplateforme, nous pouvons utiliser d'autres développements rapides tiers Des frameworks, tels que PhoneGap, oui, il existe également de nombreux sites Web de type APP en un clic sur Internet. Les utilisateurs peuvent glisser et déposer pour définir des images. Des opérations simples comme celle-ci peuvent générer une application, dont la plupart sont réalisées en HTML5 ! Il existe des modèles, appliquez-les simplement, vous savez~ Bon, sans plus tarder, commençons cette section !
1. Qu'est-ce que WebView ?
Réponse : Android est un navigateur hautes performances avec un noyau Webkit intégré, et WebView est encapsulé sur cette base. Control, WebView traduction littérale de web view, on peut simplement le considérer comme un contrôle navigateur emboîtable sur l'interface !
2. Méthodes associées
Allez d'abord sur la documentation officielle : WebView n'a pas l'intention de parler des attributs un par un, et d'écrire lequel est utilisé. Pour d’autres informations, veuillez consulter vous-même la documentation ! En plus de WebView direct, nous pouvons également ajouter votre propre comportement et personnaliser les classes suivantes :
WebChromeClient : aide WebView à traiter les boîtes de dialogue Javascript et les icônes de sites Web, titre du site Web, progression du chargement, etc. ! Par exemple :
| 方法 | 作用 |
|---|---|
| onJsAlert(WebView view,String url,String message,JsResult result) | 处理Js中的Alert对话框 |
| onJsConfirm(WebView view,String url,String message,JsResult result) | 处理Js中的Confirm对话框 |
| onJsPrompt(WebView view,String url,String message,String defaultValue,JsPromptResult result) | 处理Js中的Prompt对话框 |
| onProgressChanged(WebView view,int newProgress) | 当加载进度条发生改变时调用 |
| onReceivedIcon(WebView view, Bitmap icon) | 获得网页的icon |
| onReceivedTitle(WebView view, String title) | 获得网页的标题 |
WebViewClient : aide WebView à gérer divers événements de notification et de demande ! Par exemple, les méthodes suivantes :
| Méthode | Fonction | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Avertissez le programme principal que la page Web commence à se charger | ||||||||||||||||||
| <🎜>onPageFinished<🎜>(Vue WebView, URL de chaîne, favicon Bitmap) < /td> | Avertissez le programme principal que la page Web est chargée | ||||||||||||||||||
| <🎜>doUpdateVisitedHistory<🎜>(Vue WebView ,String url,boolean isReload) | Historique des mises à jour | ||||||||||||||||||
| <🎜>onLoadResource<🎜>(Vue WebView ,String url) | Avertissez le programme principal que WebView est sur le point de charger la ressource de l'url spécifiée | ||||||||||||||||||
| <🎜>onScaleChanged<🎜>(Vue WebView, float oldScale , float newScale) | Appelé lorsque l'échelle de ViewView change | ||||||||||||||||||
| <🎜>shouldOverrideKeyEvent<🎜>( Vue WebView, événement KeyEvent) | Contrôlez si webView traite le temps d'appui sur la touche Si true est renvoyé, WebView ne le traitera pas. . Si false est renvoyé, il sera traité. | ||||||||||||||||||
| <🎜>onReceivedError<🎜>(Vue WebView,int errorCode,String description, String failingUrl) | Appelé lors de la rencontre d'un message d'erreur irrécupérable |
WebSettings : paramètres de configuration liés à WebView, tels que setJavaScriptEnabled() définissant s'il faut autoriser l'exécution de script JS Certaines méthodes sont les suivantes :
| Méthode | Fonction | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Renvoie un WebSettings object, utilisé pour contrôler les paramètres de propriété de WebView | ||||||||||||||
| <🎜>loadUrl<🎜>(String url) | Chargement de l'URL spécifiée | ||||||||||||||
| <🎜>loadData<🎜>(String data,String mimeType,String encoding) | Chargez les données spécifiées dans WebView. Utilisez "data:" comme en-tête de marque. Cette méthode ne peut pas charger les données réseau. mimeType est le type de données tel que : textml, image/jpeg. encoding est la méthode de codage des caractères | ||||||||||||||
| <🎜>loadDataWithBaseURL<🎜>(String baseUrl, String data, String mimeType, String encoding, String historyUrl) | Que ci-dessus Le loadData est plus puissant | ||||||||||||||
| <🎜>setWebViewClient<🎜>(WebViewClient client) | Spécifiez un objet WebView WebViewClient. WebViewClient peut aider WebView à traiter diverses notifications, demandes et autres événements. | ||||||||||||||
| <🎜>setWebChromeClient<🎜>(WebChromeClient client) | Spécifiez un objet WebChromeClient pour WebView, WebChromeClient Spécifiquement utilisé pour aider WebView à traiter les boîtes de dialogue js, les titres de sites Web, les icônes de sites Web, le chargement des barres de progression, etc. |
Il est important de distinguer ici les différences entre les trois méthodes de chargement :
loadUrl() : Afficher directement le contenu de la page Web (afficher les images du réseau séparément), généralement aucun caractère tronqué n'apparaîtra. loadData(data, "text/html", "UTF-8") : utilisé pour charger des données au format URI. Le contenu ne peut pas être chargé via le réseau. Les images ne peuvent pas être chargées et des caractères tronqués sont souvent rencontrés. Nous savons que les données de type String sont principalement codées en Unicode. WebView utilise généralement le codage UTF-8 pour économiser les ressources. Bien que nous l'ayons écrit ci-dessus, nous devons toujours le définir pour webView : webview.getSettings().setDefaultTextEncodingName("UTF -8");loadDataWithBaseURL(baseUrl, string, "text/html", "utf-8", null) : une des classes loadData Classe améliorée, vous pouvez charger des images, baseUrl est le chemin de l'image stocké pour vous et il vous suffit de définir utf-8 ici pour résoudre le code tronqué. Problème!
Voici quelques-uns des attributs répertoriés. Pour les autres, vous devez vérifier vous-même la documentation officielle :
3. Explication de certaines exigences courantes
Exigence 1 : Charger des pages Web. selon URL
1) Charger une WebView directement sur l'Activité
Lancer le rendu :
Code d'implémentation :
public class MainActivity extends AppCompatActivity {
private WebView webView;
private long exitTime = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = new WebView(this);
webView.setWebViewClient(new WebViewClient() {
//设置在webView点击打开的新网页在当前界面显示,而不跳转到新的浏览器中
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
webView.getSettings().setJavaScriptEnabled(true); //设置WebView属性,运行执行js脚本
webView.loadUrl("http://www.baidu.com/"); //调用loadView方法为WebView加入链接
setContentView(webView); //调用Activity提供的setContentView将webView显示出来
}
//我们需要重写回退按钮的时间,当用户点击回退按钮：
//1.webView.canGoBack()判断网页是否能后退,可以则goback()
//2.如果不可以连续点击两次退出App,否则弹出提示Toast
@Override
public void onBackPressed() {
if (webView.canGoBack()) {
webView.goBack();
} else {
if ((System.currentTimeMillis() - exitTime) > 2000) {
Toast.makeText(getApplicationContext(), "再按一次退出程序",
Toast.LENGTH_SHORT).show();
exitTime = System.currentTimeMillis();
} else {
super.onBackPressed();
}
}
}
}2) Définissez WebView dans le code de mise en page
Je crois que vous avez vu un beaucoup d'applications d'actualités ou d'informations sur le portail Class App, sa structure peut être comme ceci :
Il y a un bouton dans le coin supérieur gauche pour fermer l'activité en cours au milieu. est le titre de l'actualité, et à droite se trouve un bouton d'actualisation. Il peut y avoir un tel bouton flottant dans le coin inférieur droit. Lorsque nous glissons au-delà de la largeur de l'écran, il sera affiché. Lorsque l’utilisateur clique, il reviendra en haut de la page Web ! Mettons-le en œuvre simplement !
Exécution des rendus :
Code d'implémentation :
MainActivity . java：
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Button btn_back;
private TextView txt_title;
private Button btn_top;
private Button btn_refresh;
private WebView wView;
private long exitTime = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bindViews();
}
private void bindViews() {
btn_back = (Button) findViewById(R.id.btn_back);
txt_title = (TextView) findViewById(R.id.txt_title);
btn_top = (Button) findViewById(R.id.btn_top);
btn_refresh = (Button) findViewById(R.id.btn_refresh);
wView = (WebView) findViewById(R.id.wView);
btn_back.setOnClickListener(this);
btn_refresh.setOnClickListener(this);
btn_top.setOnClickListener(this);
wView.loadUrl("http://www.baidu.com");
wView.setWebChromeClient(new WebChromeClient() {
//这里设置获取到的网站title
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
txt_title.setText(title);
}
});
wView.setWebViewClient(new WebViewClient() {
//在webview里打开新链接
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_back:
finish(); //关闭当前Activity
break;
case R.id.btn_refresh:
wView.reload(); //刷新当前页面
break;
case R.id.btn_top:
wView.setScrollY(0); //滚动到顶部
break;
}
}
@Override
public void onBackPressed() {
if (wView.canGoBack()) {
wView.goBack();
} else {
if ((System.currentTimeMillis() - exitTime) > 2000) {
Toast.makeText(getApplicationContext(), "再按一次退出程序",
Toast.LENGTH_SHORT).show();
exitTime = System.currentTimeMillis();
} else {
finish();
}
}
}
}Question et réponse：
Je crois que les amis prudents verront qu'après notre retour à la page chargée au début, appuyez sur la touche retour, appuyez sur J'ai essayé plusieurs fois mais je n'ai toujours pas quitté Pour l'application actuelle, devons-nous cliquer manuellement sur le bouton Précédent et appeler la méthode finish pour fermer l'activité en cours ? Pourquoi est-ce ? C'est évidemment la première page sur Baidu ?
Réponse : En fait, la raison pour laquelle cela s'est produit est : le problème de redirection de l'URL. En fait, lorsque nous avons visité Baidu :
Bien que nous ayons chargé www.baidu.com, Baidu I. a effectué une redirection et est passé à la version mobile de la page Web de Baidu : Autrement dit, votre processus réel est : www.baidu.com -> Version mobile de Baidu ->
Nous voyons que notre méthode ShouldOverrideUrlLoading() ci-dessus est écrite comme ceci :
view.loadUrl(url);return true;Nous savons que l'utilisateur clique sur le retour une fois, puis la vue Web appellera la méthode goback () une fois, nous mettons les trois ci-dessus Supposons qu'il y ait trois sites A, B et C. Si vous cliquez à nouveau sur C, alors C - > B est correct. Cliquez ensuite sur B - > Même si B est arrivé à A, il a sauté à nouveau vers B à cause de la redirection, et ainsi de suite... C'est pourquoi La raison pour laquelle WebView ne se lance pas lorsque vous cliquez sur le bouton Précédent Solution : vitesse manuelle, la page Web n'est pas chargée dans WebView. Double-cliquez sur le bouton de retour en continu, et la vitesse de votre main doit être suffisamment rapide, haha ! Je plaisante, pour résoudre ce problème, il suffit de Supprimez les éléments dans ShouldOverrideUrlLoading et écrivez return false ; Si vous ne pensez pas qu'il s'agit d'une redirection, vous pouvez essayer de modifier l'URL vous-même~
Exigence 2 : Surveillance des événements de défilement WebView
Nous savons tous que la surveillance du défilement les événements impliquent généralement la configuration de setOnScrollChangedListener , c'est dommage WebView ne nous fournit pas une telle méthode, mais nous pouvons réécrire WebView et remplacer l'une de ses méthodes : protected void onScrollChanged (final int l, final int t, final int oldl, final int oldt){} Fournissez ensuite une interface avec le monde extérieur. L'exemple de code est le suivant :
MyWebViewDemo.java:
/**
* Created by Jay on 2015/9/11 0011.
*/
public class MyWebView extends WebView {
private OnScrollChangedCallback mOnScrollChangedCallback;
public MyWebView(Context context) {
super(context);
}
public MyWebView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyWebView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (mOnScrollChangedCallback != null) {
mOnScrollChangedCallback.onScroll(l - oldl, t - oldt);
}
}
public OnScrollChangedCallback getOnScrollChangedCallback() {
return mOnScrollChangedCallback;
}
public void setOnScrollChangedCallback(
final OnScrollChangedCallback onScrollChangedCallback) {
mOnScrollChangedCallback = onScrollChangedCallback;
}
public static interface OnScrollChangedCallback {
//这里的dx和dy代表的是x轴和y轴上的偏移量，你也可以自己把l, t, oldl, oldt四个参数暴露出来
public void onScroll(int dx, int dy);
}
}MainActivity.java:
public class MainActivity extends AppCompatActivity {
private MyWebView wView;
private Button btn_icon;
private long exitTime = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn_icon = (Button) findViewById(R.id.btn_icon);
wView = (MyWebView) findViewById(R.id.wView);
wView.loadUrl("http://www.hao123.com");
wView.setWebViewClient(new WebViewClient() {
//在webview里打开新链接
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
//比如这里做一个简单的判断，当页面发生滚动，显示那个Button
wView.setOnScrollChangedCallback(new MyWebView.OnScrollChangedCallback() {
@Override
public void onScroll(int dx, int dy) {
if (dy > 0) {
btn_icon.setVisibility(View.VISIBLE);
} else {
btn_icon.setVisibility(View.GONE);
}
}
});
btn_icon.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
wView.setScrollY(0);
btn_icon.setVisibility(View.GONE);
}
});
}
@Override
public void onBackPressed() {
if (wView.canGoBack()) {
wView.goBack();
} else {
if ((System.currentTimeMillis() - exitTime) > 2000) {
Toast.makeText(getApplicationContext(), "再按一次退出程序",
Toast.LENGTH_SHORT).show();
exitTime = System.currentTimeMillis();
} else {
finish();
}
}
}
}Exécution des rendus :
Lorsque la page Web commence à défiler, un bouton hehe apparaîtra. Nous cliquons sur le bouton hehe pour. reviens au sommet ! Ensuite, le bouton hehe sera masqué~
Exigence 3 : Problème de barre de défilement
Les attributs que vous pouvez utiliser sont les suivants :
- setHorizontalScrollBarEnabled(false );//Ne s'affiche pas horizontalement
- setVerticalScrollBarEnabled(false); //Ne s'affiche pas verticalement
- setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);//La barre de défilement est affichée dans WebView
- setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY)//La barre de défilement est affichée en dehors de WebView
Exigence 4 : Définir la mise à l'échelle et l'écran adaptatif
Ouvrir selon nos habitudes générales Pour les parties de la page Web qui ne sont pas visibles clairement, nous aimons utiliser deux doigts pour zoomer et dézoomer sur la page Web, et WebView Nous devons définir manuellement si cela prend en charge la mise à l'échelle !
Il vous suffit d'ajouter le code suivant :
WebSettings settings = wView.getSettings(); settings.setUseWideViewPort(true);//设定支持viewport settings.setLoadWithOverviewMode(true); //自适应屏幕 settings.setBuiltInZoomControls(true); settings.setDisplayZoomControls(false); settings.setSupportZoom(true);//设定支持缩放
Après avoir utilisé le code ci-dessus, la page ressemblera à ceci :
Lorsque nous zoomons, un problème dégoûtant se produit, qui est un contrôle de zoom très courant. Nous n'en voulons certainement pas. Ajoutez ensuite le code suivant pour masquer le contrôle du zoom !
settings.setDisplayZoomControls(false);
Nous pouvons également définir nous-mêmes le rapport de mise à l'échelle initial, juste pour webView :
wView.setInitialScale(25);//为25%，最小缩放等级
Hé, ce qui précède est la mise à l'échelle de la page Web entière, mais parfois nous avons juste besoin de redimensionner la police, alors d'accord Faites ceci :
settings.setTextZoom(int)；
Vous pouvez également définir la taille directement via :
settings.setTextSize(TextSize.LARGER)；
.
Android est livré avec cinq valeurs de taille de police facultatives : LA PLUS PETITE (50 %), LA PLUS PETITE (75 %), NORMALE (100 %), LA PLUS GRANDE (150 %), LA PLUS GRANDE (200 %).
Exigence 5. Obtenez les données du cookie de WebView
Nous savons tous que le cookie n'est en fait qu'une chaîne représentant l'identifiant unique de l'utilisateur. Le scénario est généralement : Une fois que l'utilisateur a saisi le mot de passe du compte et cliqué pour se connecter, l'utilisateur doit utiliser ce cookie pour accéder aux services associés fournis par le serveur ! Nous pouvons écrire l'acquisition du cookie dans la méthode onPageFinsihed. Cela peut être simplement écrit comme ceci :
@Override
public void onPageFinished(WebView view, String url) {
CookieManager cookieManager = CookieManager.getInstance();
String CookieStr = cookieManager.getCookie(url);
Log.e("HEHE", "Cookies = " + CookieStr);
super.onPageFinished(view, url);
}Exigence 6. Définir les données du cookie de WebView
Hé, nous avons le cookie. ci-dessus Ou si nous obtenons des cookies par d'autres moyens, comment définissons-nous les cookies pour WebView ? Nous pouvons ajouter le code suivant là où Cookie doit être défini :
CookieSyncManager.createInstance(MainActivity.this); CookieManager cookieManager = CookieManager.getInstance(); cookieManager.setAcceptCookie(true); cookieManager.setCookie(url, cookies); //cookies是要设置的cookie字符串 CookieSyncManager.getInstance().sync();
À propos, le code ci-dessus doit être écrit avant loadUrl(), et si Cookie est défini, essayez de ne pas définir d'autres paramètres. Sinon, il peut être invalide. Il est recommandé d'écrire le cookie à la fin des paramètres liés à webView ~ avant loadUrl() !
4. :
Télécharger WebViewDemo1.zipTélécharger WebViewDemo2.zipRésumé de cette section :D'accord, cette section vous présente l'utilisation de base de WebView, le chargement de pages Web, le réglage du zoom, le zoom des polices, Écran adaptatif, ainsi que l'acquisition et le paramétrage des cookies ; je pense qu'il existe divers besoins étranges dans le développement quotidien, mais En raison du manque d'espace, je n'écrirai qu'un nombre limité de choses. Si vous avez un message de bienvenue pour des idées, dans la section suivante, nous apprendrons comment utiliser JavaScript du côté HTML5. Venez interagir avec WebView et obtenez les données pertinentes de votre téléphone ! Restez à l'écoute~Merci~
