Android之Web篇:Day02Html和Css实战WebView实现手机显示网页

Day02 Html、Css实战和WebView实现手机显示网页

1.html与css实战

1.1 程序猿小网页

  • 先来看一下效果图

  • 编程用图如下

  • 实现代码如下

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
    
            <style>
                #pic{
                    position: relative;
                    float: left;
    
                }
                #text{              
                    width: 400;
                    height: 200;
                    position: relative;
                    float: left;
                    font-size: 25px;
                    font-family: "arial black";
                    margin-top: 70px;
                }
            </style>
    
        </head>
    
        <body>
    
            <div id="pic">
                <img src="img/程序猿.png" width="600" height="600"/>
            </div>
    
            <div id="text">
                <b>
                    <p>爱<font size="6">学习</font>,爱<font size="6" color="darkred">编程</font>,爱<font size="6">咖啡可乐</font></p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;爱<font size="6">挑战</font>,爱<font size="6">钻研</font>,爱<font size="6">打游戏</font>   </p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;爱<font size="6">晚起</font>,也爱<font size="6" color="darkred">工作到深夜</font></p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我<font size="6">擅长技术</font>,崇尚<font size="6">简单</font>和<font size="6">懒惰</font></p>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我<font size="6" color="darkred">神秘</font>而<font size="6" color="darkred">孤僻</font>,<font size="6">沉默</font>而<font size="6">爱憎分明</font></p>
                    <p><font size="5" color="darkred">DON'PANIC! </font>&nbsp;&nbsp;I'm a programer!</p>
                </b>
    
            </div>
        </body>
    
    </html>
    

1.2 人人网注册页面

  • 先来看一下效果图

  • 编程用图如下


  • 实现代码如下

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <form action="#">
                <h3 align="center">免费开通人人网账号</h3>
                <table align="center" cellpadding="6px" cellspacing="6px">
                    <tr>
                        <td>注册邮箱:</td>
                        <td><input type="email" name="emial"/>
                        </td>
                    </tr>
    
                    <tr>
                        <td></td>
                        <td>你还可以使用<a href=#>

1.3 7881主页

  • 先来看一下效果图

  • 实现代码如下


    <head>
        <meta charset="utf-8">
        <title></title>
    
        <style>
            #top {
                background-color: #E4F2FC;
            }
            a {
                position: relative;
                float: right;
                margin-top: 15px;
                margin-right: 15px;
            }
            #left {
                width: 33.3%;
                position: relative;
                float: left;
            }
            #center {
                width: 33.3%;
                position: relative;
                float: left;
            }
            #right {
                width: 33.3%;
                position: relative;
                float: left;
            }
            #bottom {
                width: 100%;
                position: relative;
                float: left;
            }
        </style>
    
    </head>
    
    <body>
        <div id="top">
            <img src="img/7881/logo.png" />
            <a href=#>

2. WebView实现手机显示网页

  • 效果图

  • 目的:使用WebView控件在Android手机中显示7881网页
  • 步骤:

    • 先把做好的7881网页放入tomcat服务器,保证在浏览器中能访问到7881网页
    • 建立Android Application工程,编辑布局文件,写一个WebView控件
    • 在MainActivity中获取到布局文件中WebView的控件对象,然后使用loadUrl();方法,把浏览器中访问7881的地址作为参数进行访问,并且设置访问网络权限
    • 运行android项目即可显示网页了
  • 主要代码如下

  • activity_main.xml代码如下

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
    
    <WebView 
        android:id="@+id/wv"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"/>
    </LinearLayout>
    
  • MainActivity.java代码如下

    package com.itheima.exam;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.webkit.WebView;
    
    public class MainActivity extends Activity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            WebView wv = (WebView)findViewById(R.id.wv);
    
            wv.loadUrl("http://192.168.18.25:8080/7881.html");
        }  
    }
    

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
前言 或许你知道了jni的简单调用,其实不算什么百度谷歌一大把,虽然这些jni绝大多数情况下都不会让我们安卓工程师来弄,毕竟还是有点难,但是我们还是得打破砂锅知道为什么这样干吧,至少也让我们知道调用流程和数据类型以及处理方法,或许你会有不一样的发现。 其实总的来说从java的角度来看.h文件就是java中的interface(插座),然后.c/.cpp文件呢就是实现类罢了,然后数据类型和java还是有点出入我们还是得了解下(妈蛋,天气真热不适合生存了)。 今天也给出一个JNI动态注册native方法的例子

Android渐变标题栏的实现 - 2016-07-24 14:07:56

Android4.4以上推出了Toolbar,改变程序的style属性就可以给手机的标题栏填充颜色,可以是你设置好的系统的主题色,也可以是自己填充的颜色,其实这个效果在iOS早就有了,但在Android中还是很少见的。在iOS中,最常见的Navigationbar的效果就是一个转场动画(多出现于两个界面切换的时候),一个就是随着手势滑动背景渐变(多出现于详情页)。今天我们就来实现下大多出现于详情页的这个渐变效果的标题栏。 具体效果见: 点击打开链接 接下来我们就来实现这个效果。 首先,我们要先把手机上面的
这一篇,承接地八话。使用高效的方式备份短信——xml序列化器。 存储短信,要以对象的方式存储。首先创建javabean: package com.itydl.createxml.domain;public class Message {private String body;private String date;private String address;private String type;public String getBody() {return body;}public void setB

android独特的天气预报 - 2016-07-24 14:07:50

android独特的天气预报 package com.dchan.myweather;import java.io.UnsupportedEncodingException;import java.net.URLEncoder;import java.security.PublicKey;import java.util.ArrayList;import java.util.Calendar;import java.util.Collection;import java.util.HashMap;impo

cocoapods的安装和使用 总结 - 2016-07-24 14:07:48

一、CocoaPods 是什么? CocoaPods 是开发 OS X 和 iOS 应用程序的一个第三方库的依赖管理工具。利用CocoaPods,可以定义自己的依赖关系 (称作 pods),并且随着时间的变化,以及在整个开发环境中对第三方库的版本管理非常方便。 CocoaPods 背后的理念主要体现在两个方面。首先,在工程中引入第三方代码会涉及到许多内容。针对 Objective-C 初级开发者来说,工程文件的配置会让人很沮丧。在配置buildphases和linker flags过程中,会引起许多人为因
最近有一段时间没写博客了,一方面是工作比较忙,一方面也着实本人水平有限,没有太多能与大家分享的东西,也就是在最近公司要做一个抢红包的功能,老板发话了咋们就开干呗,本人就开始在网上收集资料,经过整理和实践,总算完美实现了功能,这里拿出本人一点微薄的成就与大家分享。 首先界面是这样的 开启自动抢红包只需点击相应的选项即可,下面我们进入正题,实现自动抢红包的原理,其实是借助android下的一个辅助服务AccessibilityService,这个服务是google公司为许多Android使用者因为各种情况导致
在实现该控件之前,先说一下该控件的难度, 一、   每个item中如果有RadioButton之类,可以focus焦点的,点击效果可能会失效   二、无限的滚动   下面是效果图: 实现上图的效果,一共自定义了两个 控件,viewpager+底部导航图标 下面我先来讲解一下,viewpager的实现: 1.初始化 pre name="code" class="java"/** 点击按下的坐标 **/PointF downP = new PointF();/** 当前按下的坐标 **/PointF curP

Android-下拉刷新库 - 2016-07-24 14:07:44

前言 入职接近半个多月,有几天空闲,所以想着能不能自己实现一个库来练练手,因为之前一直想要实现下拉刷新的功能,因此就有了这样一个自制的下拉刷新库——RefreshWidgetLib. 关于下拉刷新 下拉刷新,作为一个几乎每个应用都会出现的一种控件,不言而喻,它对于提高用户体验有着很重要的作用,而且也已经成为了人们习惯的一种操作。说起下拉刷新这种设计,最早的引入者是在2008年上线的Tweetie,Tweetie引入了如今随处可见的“下拉刷新”设计,不仅有多达数百款App Store应用使用这种设计,就连苹

从AIDL看Android跨进程通信 - 2016-07-24 14:07:38

AIDL是Android实现IPC的一种重要的方式,理解它的原理对理解Android进程间通信有很大的帮助。AIDL的定义,已经有很多介绍的文章了,这里就不做详解了。我们直接从实例入手来分析AIDL实现原理。 AIDL的使用 首先需要定义AIDL接口IMyService.aidl: // IMyService.aidl package com.chuck.aidldemo; // Declare any non-default types here with import statements inter
OC与Swift两种实现方式基本上区别不大,主要是在一些对象或方法的调用方式不同 OC代码样式: self.view.backgroundColor = [UIColor blackColor];          //加载颗粒状的火花图片     CAEmitterLayer *emitterLa = [CAEmitterLayer layer];     emitterLa.emitterPosition = CGPointMake(self.view.bounds.size.width/2, sel