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>
我的經驗都寫在上面了。感謝大家賞閱