在界面显示文字,自定义文字的颜色,显示图片,按钮,编辑框,进度条进度条等。完成如下图的demo。
![这里写图片描述](http://img.blog.csdn.net/20151022221252300)
第一步:创建一个工程,修改布局。
默认是相对布局,显示“HelloWord!”。打开项目下的layout文件夹,里面会有一个xml文件,这个就是界面文件。这次的实验主要是对这个xml文件的修改。这个节目有两种打开方式,一种是xml文件打开,里面是以代码的方式显示;另外一种是GraphicalLayout方式打开,是以界面的可视化(实际效果)显示。根据这次的实验要求,先把绝对布局更改成线性布局(对布局不了解的先不要纠结,以后会讲解)。首先点击GraphicalLayout通过视图方式打开界面文件,如图,在最外层视图的地方右键-->ChangeLayout会打开一个ChangeLayout的节目,点击下拉框可以选择布局方式。这里我们选择LinerLayout(线性布局)。布局已经改好了,第一步完成。
![这里写图片描述](http://img.blog.csdn.net/20151023000836785)
第二步:显示Text(Welcome to First Android Class)
通过xml文件打开界面文件,在代码下通过代码添加控件。
先在布局下添加TextView。具体代码如下:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome to First Android Class" />

layout_width和layout_height是布局方式,这里先不管。android:xx是定义的一种方式,例如第一行表示TextView对象的layout_width属性是“wrap_content”,同理text属性是“Welcome to First Android Class”,text属性就是要显示的东西。这时运行项目会在屏幕第一行显示黑色的“Welcome to First Android Class”。可是要求是要显示绿色。

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome to First Android Class"
android:textColor="#00ff00"/>

添加了一行android:textColor=”#00ff00”,顾名思义,也就是给该TextView对象的textColor赋”#00ff00”(RGB颜色,对这个不了解的去问度娘RGB值)整个xml代码如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" > <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome to First Android Class"
android:textColor="#00ff00" /> </LinearLayout>

已经完成text的实现。

第三步:显示图片

要想显示图片,首先我们要把图片资源放到项目中,然后再通过代码把图片加载到界面上。我们把图片“crab.png”放到res文件夹下drawble-hdpi,drawble-ldpi,drawble-mdpi,drawble-xhdpi,drawble-xxhdpi。这五个文件夹分别存放的是高分辨率资源,低分辨率资源,中分辨率资源,更高分别率资源,超高分辨率资源。这个是在不同分辨率的收集下,代码回自动选择使用的分辨率图片。因为我们只有一种分辨率,而且每个人打开的模拟器的分辨率不一样,所以这里我们在五个文件夹下都添加了该图像资源。添加完资源后,我们打开gen文件夹下的R.java文件,会有如下代码(0x7f020000值会不一样,这个是值是随机生成的,我们不用管)

public static final class drawable {

public static final int crab=0x7f020000;

}


R.java文件是自动生成的,我们不要修改里面的任何代码,否则会出错。这里介绍R文件,只是为了弄明白R文件是管理各种资源,变量等。下面开始在xml文件中添加图片。

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/crab" />

android:layout_gravity=”center”是为了让图片剧中。android:src=”@drawable/crab” 是通过路径添加图片src是表示通过路径获取图片。@可以通过按alt+/键自动补全,然后选择drawable如后,如果不知道要显示图片的名字,可以通过alt+/键自动补全的方式查找。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" > <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome to First Android Class"
android:textColor="#00ff00" /> <ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/crab" /> </LinearLayout>

运行项目吧,或者可以通过视图方式也可以看到添加图片后的效果。

第四步:显示text+编辑框

要显示user+编辑框,password+编辑框。因为我们前面设置的是显示布局,如果只是单独填填各个控件,只会按垂直的方向一个一个地添加控件。要显示这种效果,我们需要添加一个表格布局。表格包括两个,每行都包括两列。下面先来添加一个表格布局,然后一行一行添加。

 <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="User" /> <EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Input you user account here" />
</TableRow>
</TableLayout>

TableLayout表示添加一个表格布局,TableRow表示在表格布局中添加一个组行向布局然后在TableRow里面添加的控件会显示在一排中。TableLayout中可以添加多组TableRow,每组TableRow之间都是相对竖直方向显示。例如在添加一组TableRow显示密码以及密码编辑框:

<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp" > <TableRow> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="User" /> <EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Input you user account here" />
</TableRow> <TableRow> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Password" /> <EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Input you user password here" />
</TableRow>
</TableLayout>

这就是表格布局。如果想继续添加更多行,继续添加TableRow组件。最终代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" > <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome to First Android Class"
android:textColor="#00ff00" /> <ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/crab" /> <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp" > <TableRow> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="User" /> <EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Input you user account here" />
</TableRow> <TableRow> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Password" /> <EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Input you user password here" />
</TableRow>
</TableLayout>
</LinearLayout>

第五步:添加一组(两个)横向的按钮

我们最外层的是竖直方向上的线性布局,要想在横向显示两个按钮,需要添加一个水平方向上的布局(布局嵌套)。代码如下:

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
</LinearLayout>

LinearLayout表示的是显示布局android:orientation=”horizontal”表示把线性布局设置成水平方向的。(android:orientation=”vertical”表示垂直方向)。然后接着我们在这个布局内添加控件。代码如下:

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login" /> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Register" />

表示横向添加两个按钮。text表示按钮上显示的文字。当然每个空间都要很多属性,每个属性都有很多不同的值。可以通过输入“android:”按alt+/显示出所有属性的值,每个属性的命名都是跟功能有关的,所以我们可以通过名字猜测它的功能。使用同样方法可以查看属性的可以使用的值。最终代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" > <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome to First Android Class"
android:textColor="#00ff00" /> <ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/crab" /> <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp" > <TableRow> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="User" /> <EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Input you user account here" />
</TableRow> <TableRow> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Password" /> <EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Input you user password here" />
</TableRow>
</TableLayout> <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal"> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login" /> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Register" />
</LinearLayout> </LinearLayout>

第六步:添加圆形进度条

<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>

ProgressBar表示进入条,android:layout_gravity=”center”表示居中。最终代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" > <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome to First Android Class"
android:textColor="#00ff00" /> <ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/crab" /> <TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp" > <TableRow> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="User" /> <EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Input you user account here" />
</TableRow> <TableRow> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Password" /> <EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Input you user password here" />
</TableRow>
</TableLayout> <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal"> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login" /> <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Register" />
</LinearLayout> <ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/> </LinearLayout>

已经完成l所有任务。看看显示效果吧!



附:本人主要是搞游戏开发的。因为最近上课,老师要求开发android项目,所以也是在学习中(很久前学过android,不过没开发过正式项目,而且几乎都忘了)。如果有问题,希望指出,谢谢!!!

Android开发(一)的更多相关文章

  1. Android学习探索之Java 8 在Android 开发中的应用

    前言: Java 8推出已经将近2年多了,引入很多革命性变化,加入了函数式编程的特征,使基于行为的编程成为可能,同时减化了各种设计模式的实现方式,是Java有史以来最重要的更新.但是Android上, ...

  2. Android 开发一定要看的15个实战项目

    前言: 虽说网上有太多的Android课程,但是大多都是视频,有Android在线开发环境的几乎没有,但是对于学习Android的人来说拥有在线的Android开发环境是非常好的,可以随时动手操作学习 ...

  3. Android开发学习之路-关于Exception

    Exception在Java中是表示异常的一个类.它是Throwable的子类. 而Exception的子类RuntimeException是一个特殊的异常类,在代码中不需要对此类进行throw,而是 ...

  4. Android开发学习之路-Android中使用RxJava

    RxJava的核心内容很简单,就是进行异步操作.类似于Handler和AsyncTask的功能,但是在代码结构上不同. RxJava使用了观察者模式和建造者模式中的链式调用(类似于C#的LINQ). ...

  5. Android开发学习之路-记一次CSDN公开课

    今天的CSDN公开课Android事件处理重难点快速掌握中老师讲到一个概念我觉得不正确. 原话是这样的:点击事件可以通过事件监听和回调两种方法实现. 我一听到之后我的表情是这样的: 这跟我学的看的都不 ...

  6. Android开发学习之路-RecyclerView滑动删除和拖动排序

    Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...

  7. Android开发-之监听button点击事件

    一.实现button点击事件的方法 实现button点击事件的监听方法有很多种,这里总结了常用的四种方法: 1.匿名内部类 2.外部类(独立类) 3.实现OnClickListener接口 4.添加X ...

  8. Android 开发环境在 Windows7 下的部署安装

    Android SDK Android SDK 为 Android 应用的开发.测试和调试提了必要的API库和开发工具. ADT Bundle 下载 如果你是一个android 开发新手,推荐你下载使 ...

  9. Android开发之自定义的ListView(UITableViewController)

    Android开发中的ListView, 顾名方法思义,就是表视图.表示图在iOS开发中就是TableView.两者虽然名称不一样,但是其使用方法,使用场景以及该控件的功能都极为相似,都是用来展示大量 ...

  10. Android开发之自定义组件和接口回调

    说到自定义控件不得不提的就是接口回调,在Android开发中接口回调用的还是蛮多的.在这篇博客开始的时候呢,我想聊一下iOS的自定义控件.在iOS中自定义控件的思路是继承自UIView, 在UIVie ...

随机推荐

  1. kentico中的urls

    alias是默认的访问页面 page aliases中可以手动指定访问一个url,然后跳转到当前的页面

  2. select … into outfile 备份恢复(load data)以及mysqldump时间对比

    select … into outfile 'path' 备份 此种方式恢复速度非常快,比insert的插入速度要快的多,他跟有备份功能丰富的mysqldump不同的是,他只能备份表中的数据,并不能包 ...

  3. Codeforces 986A. Fair(对物品bfs暴力求解)

    解题思路: 1.对物品i bfs,更新每个小镇j获得每个物品i的最短距离. 2.时间复杂度o(n*k),满足2s的要求. 代码: #include <iostream> #include ...

  4. LeetCode 190. Reverse Bits (算32次即可)

    题目: 190. Reverse Bits Reverse bits of a given 32 bits unsigned integer. For example, given input 432 ...

  5. 记我安装Caffe的血泪史(2)

    不知不觉居然花了一个星期来安装Caffe...真是醉了. 接上一篇blog,本以为编译完cuda,opencv之后问题就差不多了(其实本来是没有什么问题的,但硬是被我搞了一堆事情出来....) 出于对 ...

  6. 推荐几个bootstrap 后端UI框架

    转载地址 https://blog.csdn.net/u013816448/article/details/81563051

  7. SpringCloud学习笔记(13)----Spring Cloud Netflix之Hystrix断路器的隔离策略

    说明 : 1.Hystrix通过舱壁模式来隔离限制依赖的并发量和阻塞扩散 2. Hystrix提供了两种隔离策略:线程池(THREAD)和信号量隔离SEMAPHORE). 1. 线程池隔离(默认策略模 ...

  8. 3ds Max制作妄想中的外星人形象

    来源:CG游 作者:FedericoScarbini 使用软件:3ds Max, Photoshop, ZBrush 简介 我认为每一个人都曾经在他的人生中的某些时刻妄想着关于外星人的事情;我猜这是很 ...

  9. java中的json

    josn: 一种数据传输格式,与开发语言无关,轻量级 一开始是javaScript的,但是后面比较流传,几乎所有语言都有相应的使用API 数据结构: Object---对象 使用花括号{}包含的键值对 ...

  10. npm install报错类似于npm WARN tar ENOENT: no such file or directory, open '***\node_modules\.staging\***

    报错类似于如下图 解决方法: 删除文件 package-lock.json,再重新执行npm i或者npm install