android webview加载网页，文字listview和image混合listview的实现
android和ios内置浏览器支持html5，还支持CSS3和js
下面的一个小例子，我来实现android加载html页面。还有两个列表，回顾一下listview的功能。文章内容较浅，没有特别高的技术，只是给刚刚开始学习的同事交流。
下面是效果图，有图有真相：
上面的圆不是我手绘的，也不是ps的，是用的html5制作的。
如果用pc网页打开的话，请用火狐或者Chrome，苹果浏览器或者IE9.不然会打不开HTML5
下面贴出此网页的代码，给大家：
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>只是实验</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"><!-- html5标志性标签 -->
<p>对不起！您的浏览器不支持html5！ </p><!-- 这里加入的文字是给不支持html5的浏览器显示的 -->
</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); //注意这里的参数是弧度制，而不是角度制
context2D.fill();
}
setInterval(draw, TIME);
</script>
</html>
下面继续我们的代码：
首先是文件结构图：
先把layout文件一一贴出来
在这里给大家提示一下：我在xml中写的注释是后来加上的，如果不去掉运行的时候必会报错啊
1、bitmap，是为了实现列表下面的虚线。
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，里面有个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="点击"
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>
还有几个anim的xml文件
1、zoom_inter
View Code
<?xml version="1.0" encoding="utf-8"?>
<!--
/* ** Copyright 2009, The Android Open Source Project ** ** Licensed
under the Apache License, Version 2.0 (the "License"); ** you may not
use this file except in compliance with the License. ** You may obtain
a copy of the License at ** **
http://www.apache.org/licenses/LICENSE-2.0 ** ** Unless required by
applicable law or agreed to in writing, software ** distributed under
the License is distributed on an "AS IS" BASIS, ** WITHOUT WARRANTIES
OR CONDITIONS OF ANY KIND, either express or implied. ** See the
License for the specific language governing permissions and **
limitations under the License. */
-->
<!--
Special window zoom animation: this is the element that enters the
screen, it starts at 200% and scales down. Goes with zoom_exit.xml.
-->
<!-- android:duration="@android:integer/config_mediumAnimTime" -->
<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"?>
<!--
/*
** Copyright 2009, The Android Open Source Project
**
** Licensed under the Apache License, Version 2.0 (the "License");
** you may not use this file except in compliance with the License.
** You may obtain a copy of the License at
**
** http://www.apache.org/licenses/LICENSE-2.0
**
** Unless required by applicable law or agreed to in writing, software
** distributed under the License is distributed on an "AS IS" BASIS,
** WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
** See the License for the specific language governing permissions and
** limitations under the License.
*/
-->
<!-- Special window zoom animation: this is the element that exits the
screen, it is forced above the entering element and starts at its
normal size (filling the screen) and scales down while fading out.
This goes with zoom_enter.xml. -->
<!-- android:duration="@android:integer/config_mediumAnimTime" -->
<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"?>
<!-- Copyright (C) 2007 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
上推效果
-->
<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"?>
<!-- Copyright (C) 2007 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<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); //设置js权限，比如js弹出窗，你懂得
// webView.getSettings().setSupportZoom(true); //设置支持缩放
// webView.getSettings().setBuiltInZoomControls(true); //设置缩放工具是否可用
webView.setWebChromeClient(new WebChromeClient()
{
public void onProgressChanged(WebView view, int progress)//设置 加载进程
{
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;
}
});
//这是我加载的一个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);
}
}
};
}
点击按钮进入到下面：
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);
//创造列表的数据
String[] strings= getResources().getStringArray(R.array.list_array);
//ArrayAdapter貌似叫做数组适配器
adapter= new ArrayAdapter<String>(testlistview.this, R.layout.testlistviewitem, strings);
ListView lv= (ListView) findViewById(R.id.listview1);
lv.setAdapter(adapter);
lv.setTextFilterEnabled(true);//这句是提供列表过滤用的，意思是支持键盘输入字母，过滤列表数据
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);//过场动画，就一句话。android真强大
}
}
};
}
看代码大家就能看出来，我用的是本地图片。网络加载这里就不写了。以后再写
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的四个参数要一一对应，他会一一映射
SimpleAdapter saImageItems = new SimpleAdapter(this,
listviewdates,
R.layout.testlistviewitem2,
new String[] {"ItemImage","ItemText1","ItemText2"},//数据中的key
new int[] {R.id.iamgeview,R.id.text1,R.id.text2});//对应的布局中的控件id
lv.setAdapter(saImageItems);//将数据加载
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));//改变一下按钮标题,
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);//给一个动态过场画面
}
});
}
/**
* 准备数据，不从网络下载了，否则还要很多的文件传输的类。
* 网络图片的多线程异步加载可以解决界面等待假死的现象，这里就不多写了。以后的文章再详述
*/
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列表实验</string>
<string-array name="list_array">
<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 >4</item>
<item >1</item>
<item >2</item>
<item >3</item>
<item >这是最后一个4</item>
</string-array>
<string name="z1">这是本地的图片1</string>
<string name="z2">如果是加载网络图片的话，技术更复杂喽2</string>
<string name="z3">最起码要解决图片的加载等待问题3</string>
<string name="z4">还要解决读取本地文件技术4</string>
<string name="z5">有空再贴出来5</string>
<string name="z6">网上的资料还是很多的6</string>
<string name="z7">学习android7</string>
<string name="z8">正在努力8</string>
<string name="btn_title_change">点击进入文字列表</string>
<string name="btn_title">点击进入image+文字列表</string>
</resources>
最后，别忘了在AndroidManifest.xml里面添加internet访问权限
View Code
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
我的经验都写在上面了。感谢大家赏阅
