动手学Android之三——第一个界面

最新推荐文章于 2021-06-15 18:57:32 发布

程序员面试辅导

最新推荐文章于 2021-06-15 18:57:32 发布

阅读量1.4k

点赞数 1

分类专栏： Android 文章标签： android android开发 android应用

本文链接：https://blog.csdn.net/yeluoxiang/article/details/24060721

版权

Android 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

其实干一件大事只需要几个人，人多了都是打酱油的

上一次我们弄好了自己的第一个Android应用，但是界面是空空的，没有内容耶，这次我们在里面加一点内容。

这里首先明确一点，Android的界面都是基于控件的，至于控件是什么呢？像编辑框、按钮啥的就属于控件。废话不多说，先做出一个例子来大家就明白了。

打开eclipse，新建一个android工程。我的工程名叫firstview。先复习上一节的内容，我们建立一个com.example.firstview包，在这里面创建一个MainActivity类，然后运行起来再说。

OK，相信看过上一节的同学都运行起来了，效果和上一节差不多哈，就是title变成firstview了。

下面进入正题：

我们点开res目录，在layout目录上点击右键，New->Android XML File

取名main，默认是LinearLayout

我们就用默认，点击Finish。

默认会到这个界面的预览工具这里，我们点击下面的main.xml，切换到源码模式：

里面默认的源码是这样的：

<?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" >
    

</LinearLayout>

这时候，我们可以到R.java中去看一下，还记得R.java这个文件吧？

我们发现多了一个

public static final class layout {
        public static final int main=0x7f030000;
    }

这个就是我们刚刚新建的layout，这里的名字main就是我们刚刚新建文件的名字。刚刚我们新建的这个文件叫做布局文件，是用来写界面的，我们先来感受一下：我们在LinearLayout这个标签中添加一个属性android:background="#00FF00"，这是设置这个LinearLayout的背景为绿色，android的颜色同样是RGB，这个大家都懂的吧？（不懂请在评论指出）

运行试试看嘛！

咦，怎么背景色没有变啊？这是因为我们虽然建立了这个文件，但是我们没有引用，我们回到MainActivity.java中，在MainActivity这个类中按住Alt同时敲/，这是eclipse的快捷键，很方便的，这时候就会出现

我们再敲上onCreate，当然只要敲上前几个字符，后面自动补全，这时候就变成了：

我们创建了一个onCreate函数，它覆盖了父类的onCreate函数，而且是一个回调函数，在Activity启动的时候，Android系统会调用这个函数。我们在里面加上setContentView(R.layout.main);这时候代码变成：

package com.example.firstview;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
	}
	
}

刚刚加的那句话就是引用我们之前建立的布局文件，是通过R.layout.main引用的，而且我们刚刚知道了，这个R.layout.main就对应之前建立的布局文件。好了，再运行下吧！

这时候就出现绿色背景咯！下面我们来解释一下布局文件中的东西：

<?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" >
    

</LinearLayout>

其他的不用管，主要看三个东西：android:layout_width、android:layout_height和android:orientation，android:layout_width和android:layout_height是用来设置这个布局的宽度和高度的，这里它们都是match_parent，在之前的版本也叫fill_parent，这两个其实是一样的，由于历史原因两个都还存在着。它的意思就是填充整个父控件，而这里的父控件就是整个屏幕咯，因为这个LinearLayout是写在最外层的嘛！android:orientation是用来设置水平排列还是垂直排列的，是对其中的子控件来说的，这里设置为vertical就是垂直排列的意思，但是这里没有发挥作用，为什么呢？因为我们没有子控件嘛！

下面我们就写一个子控件先：

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="test" 
        />

写在LinearLayout的里面哈：

我们再运行看看咯！

注意看左上角，有个灰色的test哦！这里layout_height出现了一个wrap_content，它的意思是包含内容就行，这里就是说高度包含内容。android:text是用来设置文本文字的，这里设置为test，但是好像不是很明显，我们将字的颜色和大小都改一改，让它更加明显。在属性中添加android:textColor="#000000"和android:textSize="20sp"，这是设置text的颜色和大小的，看名字就看得出来。再运行下：

这样就能看清楚了，其实这个TextView就是一个控件，而它写在LinearLayout里面，就是它的子控件。细心的同学可能会发现android:text="test"这一行会有一个橘黄色的波浪线，左边一个三角形的感叹号，这表示warning，我们把鼠标移上去，看到提示信息

大概意思是这个text被硬编码在这里了，它建议我们用@string资源，什么意思呢？android的字符串不建议硬编码，而建议写在string资源里面，我们打开values文件夹，里面有一个strings.xml文件

打开看看，同样切换到源码模式：

<resources>

    <string name="app_name">firstview</string>

</resources>

里面默认有一个app_name，是工程名firstview，我们添加一个<string name="test_text">Hello world</string>

然后我们回到layout里面，把android:text="test"改成android:text="@string/test_text"。这里有几点需要注意，首先，当我们在strings.xml中添加<stringname="test_text">Hello world</string>的时候，R.java文件发生了变化，在string这个类下面多了一个public static final int test_text=0x7f040001;，所以我们才能够用@string/test_text方式引用到它，第二@string/test_text是表示这里引用string资源下的test_text这个资源，具体就是我们刚刚看到的strings.xml中刚刚写的<stringname="test_text">Hello world</string>这一行，这时候再运行下，效果和刚刚一样，但是我们的代码方式变得好多了！

下面我们再添加一个控件：

<Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/button_text"
        />

运行下先：

这是一个按钮，里面的参数就不解释了，大家肯定能猜出来我在strings.xml中加了一条：<stringname="button_text">Click Me</string>。当然啦，这个按钮的风格也可以设计，这里就不涉及了。

下面我们再添加一个控件：

<EditText 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/edit_hint"
        />

在strings.xml中添加<stringname="edit_hint">type someting</string>，我们来看看效果：

这里我们把EditText的代码放在Button上面，所以它显示也在Button上面，里面有一个灰色的提示（hint），也是我们自己设置的字符串，相信大家都能看懂的。

下面我们来做一件有意思的事情，我们在编辑框中输入一些东西，然后点击Button，就让编辑框中的内容显示到上面的TextView上面，好了，要做这件事情肯定要写Java代码啦，不过不用担心，代码很简单的。但是写代码之前，我们需要给每一个控件分配一个ID，首先是TextView

我们加上android:id="@+id/textId"，这时候我们的R.java文件又发生变化啦！

public static final class id {
        public static final int textId=0x7f060000;
    }

这个ID就被同步到R.java中啦！同样，我们为Button加上android:id="@+id/btnId"，为EditText加上android:id="@+id/EditId"

然后我们回到MainActivity.java代码：首先在MainActivity中定义3个私有变量

private TextView textView = null;
	private Button button = null;
	private EditText editText = null;

大家看到了，其实每一个控件在android中都对应一个类的。但是这时候，我们发现TextView、Button和EditText下方有红色的波浪线，这是因为没有引包的缘故，我们将鼠标放在红色波浪线上面，eclipse会自动提示我们引包

我们选择第一项就OK了。同样为其它两个控件引包。这时我们的控件都是NULL，那么要怎么获取它们呢？我们在onCreate中加上：

textView = (TextView) findViewById(R.id.textId);
	button = (Button) findViewById(R.id.btnId);
	editText = (EditText) findViewById(R.id.EditId);

我们通过findViewById这个函数获取控件，传递一个ID，就得到相应的View了，然后我们根据具体类型进行强制转换（强转，因为每一个控件都是View类的子类）。而这里的ID就是我们刚刚在布局文件（main.xml）中给的ID，一定要对应哦！

下面我们怎么响应按钮的点击呢？我们为它绑定监听器就OK了。

button.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				
			}
		});

我们调用Button的setOnClickListener，这就是绑定监听器，然后我们new一个OnClickListener，作为参数传进去，其实打到一半的时候，eclipse会自动帮我们补全的（alt+/），这里别忘了引包，选择第3项引包。我们看到这里面有一个onClick方法，这就是监听器的回调函数。如果初次接触这些概念也没关系，你只要知道，当按钮被按下的时候，系统就会调用这里的onClick函数就好了。我们在这里面加入代码：

String text =editText.getText().toString();

textView.setText(text);

首先拿到editText的内容，然后把它设置到textView中，这代码好理解吧？注意，EditText的getText方法得到的是Editable这个类，我们还要调用它的toString方法才能得到String。

编码完成，我们跑一下试试吧！

Ok，打到效果，这节先到这里吧，满足了大家写第一个有点小功能的android程序的心，下节课我们要着重说一说布局，因为android中的布局还是比较重要的，我们只有先编写出比较漂亮的界面，才有兴趣再添加功能嘛！

这节课小总结一下：

1、 layout

2、 R.java

3、 TextView、EditText、Button

4、 onCreate

5、 button. setOnClickListener

6、还有啥大家自己总结吧

这节的例子在：http://download.csdn.net/detail/yeluoxiang/7216183。欢迎大家下载，更加欢迎大家和我讨论。

程序员面试辅导

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
动手学Android之三——第一个界面

其实干一件大事只需要几个人，人多了都是打酱油的上一次我们弄好了自己的第一个Android应用，但是界面是空空的，没有内容耶，这次我们在里面加一点内容。这里首先明确一点，Android的界面都是基于控件的，至于控件是什么呢？像编辑框、按钮啥的就属于控件。废话不多说，先做出一个例子来大家就明白了。打开eclipse，新建一个androi
复制链接

扫一扫