當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

android webview加载网页，文字listview和image混合listview的实现

發(fā)布時(shí)間：2025/3/20 编程问答 13 豆豆

生活随笔收集整理的這篇文章主要介紹了 android webview加载网页，文字listview和image混合listview的实现小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

android和ios內(nèi)置瀏覽器支持html5，還支持CSS3和js

下面的一個(gè)小例子，我來實(shí)現(xiàn)android加載html頁面。還有兩個(gè)列表，回顧一下listview的功能。文章內(nèi)容較淺，沒有特別高的技術(shù)，只是給剛剛開始學(xué)習(xí)的同事交流。

下面是效果圖，有圖有真相：

上面的圓不是我手繪的，也不是ps的，是用的html5制作的。

如果用pc網(wǎng)頁打開的話，請用火狐或者Chrome，蘋果瀏覽器或者IE9.不然會(huì)打不開HTML5

下面貼出此網(wǎng)頁的代碼，給大家：

View Code <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>只是實(shí)驗(yàn)</title>
<link type="text/css" href="css/jquery.mobile-1.0.min.css"/>
<script type="text/javascript" src="js/jquery.mobile-1.0.min.js"></script>
</head>

<body>
<canvas id="canvas" width="600" height="400">
<p>對不起！您的瀏覽器不支持html5！ </p>
</canvas>
hi！boys

<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context2D = canvas.getContext("2d");
const TIME = 1
var factor = 0;
function changeAlpha() {
factor += TIME / 50;
context2D.globalAlpha = (Math.sin(factor) + 1) / 2; //這里采用簡單算法布置透明
}
function draw() {
context2D.clearRect(0, 0, canvas.width, canvas.height);
changeAlpha();
//將上面的圓填充為灰色
context2D.fillStyle = "#FF0000";
context2D.arc(100, 100, 60, 0, Math.PI * 2, false); //注意這里的參數(shù)是弧度制，而不是角度制
context2D.fill();
}
setInterval(draw, TIME);
</script>
</html>

?下面繼續(xù)我們的代碼：

首先是文件結(jié)構(gòu)圖：

先把layout文件一一貼出來

在這里給大家提示一下：我在xml中寫的注釋是后來加上的，如果不去掉運(yùn)行的時(shí)候必會(huì)報(bào)錯(cuò)啊

1、bitmap，是為了實(shí)現(xiàn)列表下面的虛線。

View Code <?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/convenience_spray" //虛線的小片段大概2*2的虛線端
android:tileMode="repeat"
android:id="@+id/line_bg" //定義id
/>

2、main，里面有個(gè)webview是展示html的

View Code <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<WebView
android:id="@+id/webv"
android:layout_width="fill_parent"
android:layout_height="370dp" />
<Button
android:id="@+id/btn"
android:layout_width="200dp"
android:layout_height="60dp"
android:text="點(diǎn)擊"
android:textColor="#ff0000"
android:layout_gravity="center_horizontal"
/>
</LinearLayout>

3、列表的主界面testlistview

View Code <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="@drawable/grid_selector_background"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btntestlist"
android:text="@string/btn_title"
android:layout_gravity="center_horizontal"
/>
<ListView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/listview1"
android:divider="@layout/bitmap"
android:dividerHeight="1dp"
></ListView>
</LinearLayout>

4、純文字列表testlistviewitem

View Code <?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:textSize="16sp"
android:padding="10dp"
android:background="#ffffff"
/>

5、帶圖片的列表testlistviewitem2

View Code <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#ffffff"
>
<ImageView
android:id="@+id/iamgeview"
android:layout_width="120dp"
android:layout_height="100dp"
/>
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:padding="10dp"
/>
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:textColor="#ff0000"
android:layout_gravity="right"
/>
</LinearLayout>

還有幾個(gè)anim的xml文件

1、zoom_inter

View Code <?xml version="1.0" encoding="utf-8"?>




<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
<alpha android:fromAlpha="0" android:toAlpha="1.0"
android:duration="2000" />
<scale android:fromXScale="2.0" android:toXScale="1.0"
android:fromYScale="2.0" android:toYScale="1.0" android:pivotX="50%p"
android:pivotY="50%p" android:duration="2000" />
</set>

2、zoom_exit

View Code <?xml version="1.0" encoding="utf-8"?>




<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator"
android:zAdjustment="top">
<scale android:fromXScale="1.0" android:toXScale="0"
android:fromYScale="1.0" android:toYScale="0"
android:pivotX="0" android:pivotY="0"
android:duration="2000" />
<alpha android:fromAlpha="1.0" android:toAlpha="0"
android:duration="2000"/>
</set>

3、put_up_in

View Code <?xml version="1.0" encoding="utf-8"?>


<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="1000"/>
<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="1000" />
</set>

4、put_up_out

View Code <?xml version="1.0" encoding="utf-8"?>


<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="0" android:toYDelta="-100%p" android:duration="2000"/>
<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="2000" />
</set>

ok，下面是主文件，webtestActivity

View Code package com.xiang;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.View.OnClickListener;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
public class WebtestActivity extends Activity
{
final Activity activity = this;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
this.getWindow().requestFeature(Window.FEATURE_PROGRESS);
setContentView(R.layout.main);
WebView webView = (WebView) findViewById(R.id.webv);//獲取控件
webView.getSettings().setJavaScriptEnabled(true); //設(shè)置js權(quán)限，比如js彈出窗，你懂得
// webView.getSettings().setSupportZoom(true); //設(shè)置支持縮放
// webView.getSettings().setBuiltInZoomControls(true); //設(shè)置縮放工具是否可用
webView.setWebChromeClient(new WebChromeClient()
{
public void onProgressChanged(WebView view, int progress)//設(shè)置加載進(jìn)程
{
activity.setTitle("正在加載...Loading...");
activity.setProgress(progress * 100);
if(progress == 100)
activity.setTitle(R.string.app_name);
}
}
);
webView.setWebViewClient(new WebViewClient() {
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl)
{
}
public boolean shouldOverrideUrlLoading(WebView view, String url)
{
view.loadUrl(url);
return true;
}
});
//這是我加載的一個(gè)web程序，android支持html5和CSS3、jQuery mobile。未來的世界是android的了
webView.loadUrl("http://192.168.0.118:8080/html5/");
Button btn= (Button) findViewById(R.id.btn);
btn.setOnClickListener(listener);
}

private OnClickListener listener= new OnClickListener() {
@Override
public void onClick(View v) {
Button btn= (Button) v;
if(btn.getId()==R.id.btn){
Intent intent= new Intent();
intent.setClass(WebtestActivity.this, testlistview.class);
startActivity(intent);
}
}
};
}

點(diǎn)擊按鈕進(jìn)入到下面：

testlistview

View Code package com.xiang;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;

public class testlistview extends Activity{

private ArrayAdapter<String> adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.testlistview);
//創(chuàng)造列表的數(shù)據(jù)
String[] strings= getResources().getStringArray(R.array.list_array);
//ArrayAdapter貌似叫做數(shù)組適配器
adapter= new ArrayAdapter<String>(testlistview.this, R.layout.testlistviewitem, strings);
ListView lv= (ListView) findViewById(R.id.listview1);
lv.setAdapter(adapter);
lv.setTextFilterEnabled(true);//這句是提供列表過濾用的，意思是支持鍵盤輸入字母，過濾列表數(shù)據(jù)
lv.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
Toast.makeText(getApplicationContext(), ((TextView) arg1).getText(),
Toast.LENGTH_SHORT).show();
}
});
Button btn = (Button) findViewById(R.id.btntestlist);
btn.setOnClickListener(clickListener);
}
private OnClickListener clickListener= new OnClickListener() {
@Override
public void onClick(View v) {
Button button= (Button) v;
if(button.getId()==R.id.btntestlist){
Intent intent= new Intent();
intent.setClass(testlistview.this, testlistview2.class);
startActivity(intent);
overridePendingTransition(R.anim.push_up_in, R.anim.push_up_out);//過場動(dòng)畫，就一句話。android真強(qiáng)大
}
}

};
}

看代碼大家就能看出來，我用的是本地圖片。網(wǎng)絡(luò)加載這里就不寫了。以后再寫

View Code package com.xiang;

import java.util.ArrayList;
import java.util.HashMap;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;

public class testlistview2 extends Activity{

private ArrayList<HashMap<String, Object>> listviewdates;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.testlistview);//使用的還是testlistview

init();
//獲得列表元素的布局方式
ListView lv= (ListView) findViewById(R.id.listview1);
//對SimpleAdapter感興趣的同事可以去查查資料
//SimpleAdapter的四個(gè)參數(shù)要一一對應(yīng)，他會(huì)一一映射
SimpleAdapter saImageItems = new SimpleAdapter(this,
listviewdates,
R.layout.testlistviewitem2,
new String[] {"ItemImage","ItemText1","ItemText2"},//數(shù)據(jù)中的key
new int[] {R.id.iamgeview,R.id.text1,R.id.text2});//對應(yīng)的布局中的控件id

lv.setAdapter(saImageItems);//將數(shù)據(jù)加載
lv.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
int idex=arg2;
Toast.makeText(getApplicationContext(), listviewdates.get(idex).get("ItemText2").toString(),
Toast.LENGTH_SHORT).show();
}
});

Button btn= (Button) findViewById(R.id.btntestlist);
btn.setText(getResources().getString(R.string.btn_title_change));//改變一下按鈕標(biāo)題,
btn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Intent intent= new Intent();
intent.setClass(testlistview2.this, testlistview.class);
startActivity(intent);
overridePendingTransition(R.anim.zoom_enter, R.anim.zoom_exit);//給一個(gè)動(dòng)態(tài)過場畫面
}
});
}
/**
* 準(zhǔn)備數(shù)據(jù)，不從網(wǎng)絡(luò)下載了，否則還要很多的文件傳輸?shù)念悺?br /> * 網(wǎng)絡(luò)圖片的多線程異步加載可以解決界面等待假死的現(xiàn)象，這里就不多寫了。以后的文章再詳述
*/
private void init() {
listviewdates= new ArrayList<HashMap<String,Object>>();
for(int i=1;i<10;i++)
{
HashMap<String, Object> map = new HashMap<String, Object>();
if(i==1){
map.put("ItemImage", R.drawable.xx);
map.put("ItemText1", getResources().getString(R.string.hello));
map.put("ItemText2", getResources().getString(R.string.hello));
}
if(i==2){
map.put("ItemImage", R.drawable.threex);
map.put("ItemText1", getResources().getString(R.string.z1));
map.put("ItemText2", getResources().getString(R.string.hello));
}
if(i==3){
map.put("ItemImage", R.drawable.wxnsh);
map.put("ItemText1", getResources().getString(R.string.z2));
map.put("ItemText2", getResources().getString(R.string.hello));
}
if(i==4){
map.put("ItemImage", R.drawable.threex);
map.put("ItemText1", getResources().getString(R.string.z3));
map.put("ItemText2", getResources().getString(R.string.hello));
}
if(i==5){
map.put("ItemImage", R.drawable.wxnsh);
map.put("ItemText1", getResources().getString(R.string.z4));
map.put("ItemText2", getResources().getString(R.string.hello));
}
if(i==6){
map.put("ItemImage", R.drawable.threex);
map.put("ItemText1", getResources().getString(R.string.z5));
map.put("ItemText2", getResources().getString(R.string.hello));
}
if(i==7){
map.put("ItemImage", R.drawable.mobilepay);
map.put("ItemText1", getResources().getString(R.string.z6));
map.put("ItemText2", getResources().getString(R.string.z6));
}
if(i==8){
map.put("ItemImage", R.drawable.zxy);
map.put("ItemText1", getResources().getString(R.string.z7));
map.put("ItemText2", getResources().getString(R.string.hello));
}
if(i==9){
map.put("ItemImage", R.drawable.xx);
map.put("ItemText1", getResources().getString(R.string.z8));
map.put("ItemText2", getResources().getString(R.string.z8));
}
//添加在list
listviewdates.add(map);
}
}
}

下面把string文件也列出來給手懶的同志們

View Code <?xml version="1.0" encoding="utf-8"?>
<resources>

<string name="hello">Hello World, 池塘里的大象來了!</string>
<string name="app_name">View列表實(shí)驗(yàn)</string>
<string-array name="list_array">
<item >列表1</item>
<item >只是實(shí)驗(yàn)2</item>
<item >3</item>
<item >4</item>
<item >1</item>
<item >2</item>
<item >3</item>
<item >4</item>
<item >1</item>
<item >2</item>
<item >3</item>
<item >4</item>
<item >1</item>
<item >2</item>
<item >3</item>
<item >這是最后一個(gè)4</item>
</string-array>
<string name="z1">這是本地的圖片1</string>
<string name="z2">如果是加載網(wǎng)絡(luò)圖片的話，技術(shù)更復(fù)雜嘍2</string>
<string name="z3">最起碼要解決圖片的加載等待問題3</string>
<string name="z4">還要解決讀取本地文件技術(shù)4</string>
<string name="z5">有空再貼出來5</string>
<string name="z6">網(wǎng)上的資料還是很多的6</string>
<string name="z7">學(xué)習(xí)android7</string>
<string name="z8">正在努力8</string>
<string name="btn_title_change">點(diǎn)擊進(jìn)入文字列表</string>
<string name="btn_title">點(diǎn)擊進(jìn)入image+文字列表</string>

</resources>

最后，別忘了在AndroidManifest.xml里面添加internet訪問權(quán)限

View Code <uses-permission android:name="android.permission.INTERNET"></uses-permission>

我的經(jīng)驗(yàn)都寫在上面了。感謝大家賞閱

轉(zhuǎn)載于:https://www.cnblogs.com/winxiang/archive/2012/03/16/2400255.html

總結(jié)

以上是生活随笔為你收集整理的android webview加载网页，文字listview和image混合listview的实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。