专栏首页Open软件开发小组Android程序猿怎么学H5

Android程序猿怎么学H5

前言 

本文适合有一定android基础想初步了解学习web前端开发的朋友。以下均为个人理解,很多可能不是百分百就是完全能类比过去,只是比较相似,希望能帮助大家比较好地理解。如有不准确的地方,欢迎大家留言纠正,共同学习!

效果图演示

html:

android:

我们尽量将两个布局弄得比较接近,方便我们后面进行比较。html的结构主要由3个文件组成:index.css、index.html和index.js。而android的我们就相对比较熟悉了,这里就不做解释了。

HTML篇

html-->layout.xml布局。

我们先来说说html,其实html比较像是固定网页的整体框架和一些静态固定的布局。其他一些动态的布局就需要结果js和css来实现。特别像android中的布局文件。下面我们结合例子中的代码来看看。

index.html:

android的布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">   <TextView
       android:text="登录"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />   <LinearLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:orientation="horizontal">
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="用户名:"/>
       <EditText
           android:id="@+id/nameInput"
           android:layout_width="200dp"
           android:layout_height="50dp" />
   </LinearLayout>   <LinearLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:orientation="horizontal">
       <TextView
           style="@style/pwSize"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="密码:"/>
       <EditText
           android:layout_width="200dp"
           android:layout_height="50dp" />
   </LinearLayout>   <LinearLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:orientation="horizontal">
       <Button
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:onClick="onSubmit"
           android:text="确定"/>
   </LinearLayout></LinearLayout>

从上面的代码我们看到,无论是从布局结构、控件的名称、还是其里面控件使用的属性,都有很多很相像的地方。就拿例子中的确定按钮控件来看,html:

android中按钮的布局:

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:onClick="onSubmit"
   android:text="确定"/>

可以看到,其实它们两个的写法是非常类似的,包括标签名,点击事件的声明。

除此之外,也有不少其实功能相似,但只是名字是不一样的:

div-->Linearlayout。

从上面代码可以看到,div的使用很像LinearLayut。div应该是html里面使用率算是最高的,随便打开一个网站,看他的源代码,基本上铺天盖地的都是div。其实div是一个容器,就相当于android里面的layout,可以方便我们组成各式各样的布局。

input-->EditText。

input标签就类似于android的输入框EditText。但是input还相对EditText要更强大点。就像它的名字一样,其实它是输入控件的集合。什么意思呢?它可以根据type属性,更改它的输入类型。也就是说如果把type赋值成“button”,它就可以变成一个按钮;赋值成“checkbox”,就可以变成一个单选框等等...这里就不一一列出来了,想进一步了解的可以查看下相应文档。

ul-->ListView。

说一个例子里没有的标签----ul和ol,它们同样是使用率很高的标签。ul和ol都是列表标签,区别就是ul是无序的,ol是有序的。ul就比较像android中的ListView。但是个人感觉ul就更加灵活点,比如说它能轻松地实现横向纵向布局(其实是设置li的样式),但是,要把android中的ListView横过来,那基本是不可能的,但是可以用别的代替。如果你不依赖任何工具框架,用原生态的css开发,那么你就会发现ul的用途还是挺广的,包括能实现导航栏,tabbar,下拉框等等...

CSS篇

css-->styles.xml和anim中的.xml文件集合。

css整体来说,主要负责html中的样式和动画,这个就比较像是android中的styles.xml + anim中的.xml文件。css中很多样式属性,你都可以根据android的猜到个7、8成,比如width,margin-top,color,font-size等等...下面,我们也结合例子中的代码看看。

index.css:

android的styles.xml:

<style name="pwSize" parent="pwMarginLeft">
   <item name="android:textSize">30sp</item>
</style><style name="pwMarginLeft" >
   <item name="android:layout_marginLeft">20dp</item>
</style>

  在css中前缀带“.”的,就是寻找其对应名称的class。“#”是对应id。而没有带任何前缀的,就是所有这类型标签默认会添加这个css样式。

class

class在css中是非常重要的。class应该算是一个别名的作用。个人觉得其实就像android里面style定义的id差不多。不过,android中一般来说一个控件只能定义一个style。像例子中,如果我们要把设置文字大小和设置左边距像css中定义成两个的话,就只能通过parent="pwMarginLeft"来实现继承,从而能使用到两个style。而在html里面,你可以通过空格隔开来定义多个class。如果不使用css各种工具框架,你会发现增加和删除class结合css可以实现各种页面变化的效果,包括显示隐藏,颜色、大小修改等等。

  如果你使用类似bootstrap这样的css工具框架,你不难发现,他就是基本依靠class来完成各种样式功能的调用。

Javascript篇

js-->逻辑处理的.java。

js整体来说,主要负责html中的逻辑处理部分,相当于controller的角色。老规矩,我们还是结合例子中的代码来看。

index.js:

android对应的代码应该是:

public void onSubmit(View v){
   EditText editText = (EditText)findViewById(R.id.nameInput);
   Log.d("demoMainActivity",editText.getText().toString());
}

这两段代码实现的功能是一样的。先获取输入框:html的document.getElementById()就是android的findViewById()。接着是通过控件获取其值。最后就是打印值,console.log()就是android的Log。

function

function是js里面的函数。不过,它也可以充当类的角色。其实在js里面,function和var都可以实现类的效果的。可能刚刚开始从android到接触js,最看不习惯的就是function里面的参数(因为没有数据类型),和返回值不需要在function前面定义返回的数据类型,直接return返回就可以。这个可能也是跟html的发展历史有相当的关系。不过function的使用还是挺方便的,它可以在function里多重嵌套function,但是这样的话,相对代码的整洁度就不会很高。

var-->Object。

对于js中的var,我个人觉得就比较像是android中的Object。无论是各种数据类型int、string、boolean...,还是结构体,甚至是函数体都可以赋值给它。这就跟android中的Object一样,所有东西都是继承于Object,所以也都可以赋值给它。

下面我们另外举一个例子来了解下var:

再看看android中的Object:

Object num = 1;
Object str = "haha";
Object bl = false;

上图可以看到,数据类型、结构体和函数,其实都是可以赋值给var的,所以大家在命名的时候,需要注意命名规则。本人就试过,一个变量和一个函数命名是一样的,导致调用函数的时候,一直报错,说没有找到(先定义变量再定义的函数)。

"==="。

说到var了,可以顺便说说"==="。这个对于一个android开发者来说,"=="肯定用得非常多,但是"==="可能没有见过。我们先来看一段代码:

输出:

从输出可以很清楚地看到,"=="和"==="的区别:"=="不区分类型,而"==="会区分数据类型。当然还有"!==",也是同理。

怎么引用?

  说了半天,那究竟html是怎么引用css和js的呢?

  细心的同学可能早就找到他们了,他们就在一开始html的代码里。在<head>标签中,通过<link>和<script>我们就可以分别引入对应的css和js文件。

总结

总的来说,在html的学习过程中还是能类比android来学习的。当然今天说到的这些,也只是html的冰山一角,正在开发中用到的远远不止这些。也有很多很好用的工具框架,例如:angularjs、bootstrap、less等等...我们都可以学习下,能让我们的工作事半功倍!希望本文对于刚想开始了解html,而且对android有一定开发经验的同学有所帮助。

本文分享自微信公众号 - Open软件开发小组(open_dev),作者:何思宁

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-07-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [Android技术专题]应用开发进阶必经之路之性能优化(上)

    性能优化在一款产品的迭代过程中非常重要;程序实现了功能、还原产品原型只能保证程序能用,但如果要让用户更愿意使用,产品得好用。试想一下如果你开发的产品启动慢、页...

    open
  • 一秒钟学会实现不规则图形响应点击事件

    在日常的开发过程中,有时候会碰到形状不规则的图片(其实是看起来不规则),比如一个卡通人物、特殊的符号或者拟物化的一个东西,如下图这样。当然这些图片也是矩形的,只...

    open
  • 聊聊Android应用Preference组件那点事

    本文主要给大家讲述下本人使用Preference的经验和体会。为了使短信项目和系统之间的耦合度更低,使用简单,达到代码可读性更好,又要达到策划的需求,根据以上...

    open
  • 安卓自定义Dialog的实现

    先知先觉
  • 自定义带图片和文字的ImageTextButton

    今天我们来讲一下有关自定义控件的问题,今天讲的这篇是从布局自定义开始的,难度不大,一看就明白,估计有的同学或者开发者看了说,这种方式多此一举,但是小编我不这么认...

    非著名程序员
  • 3.复杂的viewpager

    六月的雨
  • GridView结合tablayout实现展开收缩功能

    PS:最近有一些粉丝给我留言说怎么实现那种 上面多个item,然后可以展开收缩,当点击了item后下方会出现一些数据,而且item对应多个型号,我当时看到这也...

    cMusketeer
  • 从0系统学Android--3.7 聊天界面编写

    Nine-Patch 是一种被特殊处理的 .png图片,能够指定那些区域可以被拉伸,那些区域不可以。

    开发者
  • 图片自动轮播图

    AlicFeng
  • 【Android源码解析】选择多张图片上传多图预览

    版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/47...

    Hankkin

扫码关注云+社区

领取腾讯云代金券