android应用开发-从设计到实现 4-6界面的整体布局

界面的整体布局

从这一章节开始,我们终于可以开始使用Android Studio写代码了。

天气预报这个应用虽然功能很简单,但是对于从来没有接触过安卓开发的人来讲,开发完成还是需要很多步骤。为了减小学习的坡度,增加开发的阶段性成就感,我将天气预报分成2个阶段来开发,

  • 第1阶段:暂时不考虑Material Design的各种限制,比如Appbar的滑动效果,下拉刷新功能;

    weather_app_zh_string_complete-wc250

    用户点击左上角的刷新Refresh,应用就再次访问网络,更新天气信息的内容。

  • 第2阶段:加入Material Design的种种要求,比如Appbar的滑动效果,下拉刷新功能,完善天气预报

    origami_prototype_complete-wc250

我们就从第一阶段开始。

Activity与布局

Activity几乎是每个应用必有的组件,所以任何安卓应用的开发几乎都是从Activity开始的。

你甚至可以简单的认为,手机屏幕上能看到的整个界面,就是一个Activity

sketch_weather_app_static_effect_complete-wc250

使用Android Studio创建工程后,会默认为我们创建一个Activity组件。它继承自Android SDKActivity或其派生类。

class MainActivity extends Activity {
    ......
}

Activity界面具体该长成什么样,是通过布局文件决定的。它位于项目的res\layout\activity_main.xml文件中。

这个布局文件通过java源代码MainActivity.javaonCreate()setContentView()函数,设置到界面上。

@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
}

activity_xml_relation-wc500

可以说xml布局文件负责Activity的外观容貌;java源代码,负责Activity的逻辑控制。java控制着xml中的各个元素的显示逻辑。

布局与逻辑通过setContentView()关联在一起。

接下来,我们天气预报界面的布局,就会在布局文件activity_main.xml中进行。

WeatherApp工程项目中的MainActicity继承自AppCompatActivityAppCompatActivity也是Activity的子类,所以MainActicity就是Activity。这个AppCompatActivity作用是为了兼容不同版本的Android SDK而使用的,我们会在今后给出详细的介绍兼容性。

我们这里提到的onCreate()函数,就是一个Activity被运行起来后被操作系统自动调用的第一个函数,一些初始化的操作就可以在这里进行。

所以安卓开发并不是从一无所有开始写代码,而是利用系统提供的框架framework来写程序。Activity就是应用程序的一个框架模版。我们只需要对这个模版做一些适当的改造:继承Activity,然后重写其中的部分方法(例如onCreate()函数)就可以了。

布局的划分

整个布局被分成了以下几个部分:

weather_app_layout_segments-wc300

  1. Appbar:占据高度56dp
  2. 天气详情:显示当日的温度范围和实时天气,占据高度240dp;按照最终的设计,天气详情是需要放在Appbar里面的,但是第1阶段做了简化,所以将它单独拿出来了;
  3. 天气预报:显示未来5日的天气预报,占据高度96dp
  4. 分割线:占据高度8dp
  5. 相关信息:当日天气的相关信息,占据所有剩余空间的高度;

Appbar的存在是由系统决定的,我们就不做修改了,主要是分配2~5的布局空间。

布局与控件

界面设计需要先认识两类工具:控件Control布局Layout

  • 控件Control就是我们常常看到的按钮 滑动条 文字显示区等等,它们就像房间里的家具,是界面设计的最小单位。为了减小界面开发的难度,SDK会提供很多现成的界面小组件供开发者使用。

    matiaral_controls-wc400

  • 布局Layout是一个可以容纳别的布局(或者控件)的容器。它就像是一个大的房间,房间里面可以放各种家具(控件),甚至可以再隔离成更多的房间(放入别的布局)。

    layout_concept-wc300

不过两者有很多共同的地方,例如指定它们大小、边距的方式都是一样的。

布局的边距分为marginpadding

  1. margin-对外而言:控件或布局相对外面组件的边距叫做margin,例如一个LinearLayout与它相邻的另一个FrameLayout之间的间隔。在布局或控件中,使用以下属性来定义,

    android:layout_margin="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginTop="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginBottom="5dp"
  2. padding-对内而言:控件或布局为内部区域保留的边距叫做padding,例如一个LinearLayout与它内部的一个FrameLayout之间的间隔,或者TextView的边框与它内部文字之间的间隔。在布局或控件中,使用以下属性来定义,

    android:padding="5dp"
    android:paddingLeft="5dp"
    android:paddingTop="5dp"
    android:paddingRight="5dp"
    android:paddingBottom="5dp"

    margin_explain-wc250

天气预报设计布局,就是通过选用Android SDK中合适的布局和控件来实现的。

布局容器

整个应用的内容都是放在一个大的布局Layout当中的。因此要首先确定这个最大的布局

Android SDK提供了一个叫做LinearLayout的布局控件。它能够让存放于其中的其他控件按照首尾顺序,一个接一个的排队摆放。正好符合我们的要求。

linearlayout_layout-wc500

  1. 编辑activity_main.xml文件,删除其中原有的TextView控件,删除RelativeLayout中的各种padding
  2. 将原来的RelativeLayout修改成LinearLayout
  3. LinearLayout增加android:orientation属性,其值设置成vertical–将它包含的内容以竖直方式排列;
  4. LinearLayout负责放置应用的整个内容,需要尽可能占用整个屏幕,因此使用match_parent指定布局的宽度和高度。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

</LinearLayout>

现在通过预览窗口,可以看到界面变成了这样,

layout_wraper-wc300

注意:文字WeatherApp所在的Appbar是系统自带的,并不是activity_main.xml中设计的。

在设置布局或者控件大小的时候,会使用它们的android:layout_widthandroid:layout_height属性,

<View
    android:layout_width="match_parent"
    android:layout_width="wrap_content"/>

它们的值可以设定成,

  1. 特定的数值:例如5dp。当然也可以使用除了dp以外其他的尺寸单位,但是考虑到屏幕的像素密度不同,我们都使用dp为单位;
  2. match_parent:以父布局的宽度(或长度)为界,尽可能占据全部空间;
  3. wrap_content:以子布局或控件内容的宽度(或长度)为界,尽可能少占据空间;

容器的分配

其他几个区域都占据了整个屏幕都宽度,只是高度各不相同,

区域名称区域高度选用控件或布局
天气详情240dpLinearLayout
未来5日天气预报96dpLinearLayout
分割线8dpView
相关信息剩余的所有高度ListView

View:是安卓系统中最为基本界面的组件,所有的布局与控件都是特殊的View(它们都是View的子类)。这里用来作为分割线。

ListView:是安卓SDK提供的列表控件,将数据项用列表的形式展现出来。

listview_items_sample-wc250

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:background="#FFFF0000">

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="96dp"
        android:background="#FF00FF00">

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:background="#1F000000"
        />

    <ListView
        android:id="@+id/weather_index_info_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FF0000FF">

    </ListView>

</LinearLayout>

这里给ListView布局取了一个名字-id,叫做weather_index_info_list。以后要使用这个ListView的时候,可以通过这个id找到它,例如

ListView lv = (ListView) findViewById(R.id.weather_index_info_list);

为了明显的看到各个控件与布局占据的屏幕空间分布情况,我给每个控件或布局都添加上了android:background属性,给它们设置上了不同的颜色以示区别,后面再将它们移除。最后的效果如下,

layout_segments-wc250

在设计相关的章节中已经介绍过,安卓系统中的颜色数值可以用4种方式表示,

  • RGB:8位RGB数值。例如红色F00,绿色0F0,蓝色00F;
  • ARGB:8位RGB数值,外加8位Alpha透明度值。例如透明度为8的红色8F00,绿色80F0,蓝色800F
  • RRGGBB:16位RGB数值。例如红色FF0000,绿色00FF00,蓝色0000FF;
  • AARRGGBB:16位RGB数值,外加16位Alpha透明度值。例如透明度为0F的红色0FFF0000,绿色0F00FF00,蓝色0F0000FF;

代码管理

将修改的内容提交到GitHub上,这一步和之前的操作并没有任何的不同。

不过这里介绍一下你可能会遇到的意外情况:假如commit之后push之前,我发现自己commit的内容有问题,要撤销上一步的commit。这该怎么办?比如将commit时要记录的信息写错了,要退回到commit之前的状态。

git_commit_error-wc300

改正的方法很简单:

  1. 在上一次正确的commit项上,点击右键;
  2. 选择Reset Current Branch to Here...;

    git_commit_revert_1-wc400

  3. 在弹出的菜单项上,选择Mixed(每种选择的效果都有对应的解释,Mixed就是说返回commit之前的状态,并保留修改的内容),并点击Reset

    git_commit_revert_2-wc300

这样,整个commit就回到了未被提交时的状态。检查之后再做重新的commit。这一次就得小心仔细一些啦!

假如你不仅commit了,而且还push到远端的仓库中了,要恢复该怎么办呢?

答案是没办法了!之前的修改已经被记录在案了,你只能重新修改一次再提交。所以每次push一定要注意,不然你的合作开发者一定会看到你的粗心大意。


/*******************************************************************/
* 版权声明
* 本教程只在CSDN安豆网发布,其他网站出现本教程均属侵权。

*另外,我们还推出了Arduino智能硬件相关的教程,您可以在我们的网店跟我学Arduino编程中购买相关硬件。同时也感谢大家对我们这些码农的支持。

*最后再次感谢各位读者对安豆的支持,谢谢:)
/*******************************************************************/

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值