wordpress网站分享微信群,软件开发工具是什么,wordpress文章修改失败,phpcms做装修网站3 App的设计规范 本节介绍了App工程的源码设计规范#xff0c;首先App将看得见的界面设计与看不见的代码逻辑区分开#xff0c;然后利用XML标记描绘应用界面#xff0c;同时使用Java代码书写程序逻辑#xff0c;从而形成App前后端分离的设计规约#xff0c;有利于提高App集…3 App的设计规范 本节介绍了App工程的源码设计规范首先App将看得见的界面设计与看不见的代码逻辑区分开然后利用XML标记描绘应用界面同时使用Java代码书写程序逻辑从而形成App前后端分离的设计规约有利于提高App集成的灵活性。 3.1 界面设计与代码逻辑
手机的功能越来越强大某种意义上相当于微型电脑比如打开一个电商App仿佛是在电脑上浏览网站。网站分为用户看得到的网页以及用户看不到的Web后台App也分为用户看得到的界面以及用户看不到的App后台。虽然Android允许使用Java代码描绘界面但不提倡这么做推荐的做法是将界面设计从Java代码剥离出来通过单独的XML文件定义界面布局就像网站使用HTML文件定义网页那样。 直观地看网站的前后端分离设计App的前后端分离设计如图所示 把界面设计与代码逻辑分开不仅参考了网站的Web前后端分离还有下列几点好处。
1使用XML文件描述App界面可以很方便地在Android Studio上预览界面效果。比如新创建的App项目默认首页布局为activity_main.xml单击界面右上角的Design按钮即可看到如图所示的预览界面。如果XML文件修改了Hello World的文字内容立刻就能在预览区域观看最新界面。倘若使用Java代码描绘界面那么必须运行App才能看到App界面无疑费时许多。
2一个界面布局可以被多处代码复用比如看图界面既能通过商城购物代码浏览商品图片也能通过商品评价代码浏览买家晒单。
3反过来一段Java代码也可能适配多个界面布局比如手机有竖屏与横屏两种模式默认情况App采用同一套布局然而在竖屏时很紧凑的界面布局切换到横屏往往变得松垮乃至变形。
竖屏时很紧凑的界面布局 横屏时候的界面布局:
鉴于竖屏与横屏遵照一样的业务逻辑仅仅是屏幕方向不同若要调整的话只需分别给出竖屏时候的界面布局以及横屏时候的界面布局。因为用户多数习惯竖屏浏览所以res/layout目录下放置的XML文件默认为竖屏规格另外在res下面新建名为layout-land的目录用来存放横屏规格的XML文件。land是landscape的缩写意思是横向Android把layout-land作为横屏XML的专用布局目录。然后在layout-land目录创建与原XML同名的XML文件并重新编排界面控件的展示方位调整后的横屏界面如图所示从而有效适配了屏幕的水平方向。 3.2 利用XML标记描绘应用界面
在上一篇文章“1.2 App的开发语言”末尾给出了安卓控件的XML定义例子如下所示
TextViewandroid:idid/tv_helloandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:textHello World! /注意到TextView标签以“”开头以“/”结尾为何尾巴多了个斜杆呢要是没有斜杆以左右尖括号包裹标签名称岂不更好其实这是XML的标记规范凡是XML标签都由标签头与标签尾组成标签头以左右尖括号包裹标签名称形如“”标签尾在左尖括号后面插入斜杆以此同标签头区分开形如“”。标签头允许在标签名称后面添加各种属性取值而标签尾不允许添加任何属性因此上述TextView标签的完整XML定义是下面这样的
TextViewandroid:idid/tv_helloandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:textHello World!
/TextView考虑到TextView仅仅是个文本视图其标签头和标签尾之间不会插入其他标记所以合并它的标签头和标签尾也就是让TextView标签以“/”结尾表示该标签到此为止。
然而不是所有情况都能采取简化写法简写只适用于TextView控件这种末梢节点。好比一棵大树大树先有树干树干分岔出树枝一些大树枝又分出小树枝树枝再长出末端的树叶。一个界面也是先有根节点相当于树干根节点下面挂着若干布局节点相当于树枝布局节点下面再挂着控件节点相当于树叶。因为树叶已经是末梢了不会再包含其他节点所以末梢节点允许采用“/”这种简写方式。
譬如下面是个XML文件的布局内容里面包含了根节点、布局节点以及控件节点
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parent!-- 这是个线性布局 match_parent意思是与上级视图保持一致--LinearLayoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parent!-- 这是个文本视图名字叫做tv_hello显示的文字内容为“Hello World!” --TextViewandroid:idid/tv_helloandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:textHello World! //LinearLayout
/LinearLayout上面的XML内容最外层的LinearLayout标签为该界面的根节点中间的LinearLayout标签为布局节点最内层的TextView为控件节点。由于根节点和布局节点都存在下级节点因此它们要有配对的标签头与标签尾才能将下级节点包裹起来。根节点其实是特殊的布局节点它的标签名称可以跟布局节点一样区别之处在于下列两点
1每个界面只有一个根节点却可能有多个布局节点也可能没有中间的布局节点此时所有控件节点都挂在根节点下面。
2根节点必须配备“xmlns:android“http://schemas.android.com/apk/res/android””表示指定 XML内部的命名空间有了这个命名空间Android Studio会自动检查各节点的属性名称是否合法如果不合法就提示报错。至于布局节点就不能再指定命名空间了。
有了根节点、布局节点、控件节点之后XML内容即可表达丰富多彩的界面布局因为每个界面都能划分为若干豆腐块每个豆腐块再细分为若干控件罢了。三种节点之外尚有“”这类注释标记它的作用是包裹注释性质的说明文字方便其他开发者理解此处的XML含义。
3.3 使用Java代码书写程序逻辑
在XML文件中定义界面布局已经明确是可行的了然而这只是静态界面倘若要求在App运行时修改文字内容该当如何是好倘若是动态变更网页内容还能在HTML文件中嵌入JavaScript代码由js片段操作Web控件。但Android的XML文件仅仅是布局标记不能再嵌入其他语言的代码了也就是说只靠XML文件自身无法动态刷新某个控件。
XML固然表达不了复杂的业务逻辑这副重担就得交给App后台的Java代码了。Android Studio每次创建新项目除了生成默认的首页布局activity_main.xml之外还会生成与其对应的代码文件 MainActivity.java。赶紧打开MainActivity.java看看里面有什么内容该Java文件中MainActivity类的内容如下所示
public class MainActivity extends AppCompatActivity {Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}
}可见MainActivity.java的代码内容很简单只有一个MainActivity类该类下面只有一个onCreate方 法。注意onCreate内部的setContentView方法直接引用了布局文件的名字activity_main该方法的意思是往当前活动界面填充activity_main.xml的布局内容。现在准备在这里改动把文字内容改成中文。
首先打开activity_main.xml在TextView节点下方补充一行android:id“id/tv_hello”表示给它起个名字编号然后回到MainActivity.java在setContentView方法下面补充几行代码具体如下
public class MainActivity extends AppCompatActivity {Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 当前的页面布局采用的是res/layout/activity_main.xmlsetContentView(R.layout.activity_main);// 获取名叫tv_hello的TextView控件注意添加导包语句import android.widget.TextView;TextView tv_hello findViewById(R.id.tv_hello);// 设置TextView控件的文字内容tv_hello.setText(你好世界!!!);}
}新增的两行代码主要做了这些事情先调用findViewById方法从布局文件中取出名为tv_hello的 TextView控件再调用控件对象的setText方法为其设置新的文字内容。 代码补充完毕重新运行测试App发现应用界面变成了如图所示的样子。
可见使用Java代码成功修改了界面控件的文字内容。 本笔记参考于[B站动脑学院]仅作学习用途方便随时查看。 参考资料2022 最新 Android 基础教程从开发入门到项目实战看它就够了更新中
