首页 > 代码库 > 第三章 界面UI的基石—UI布局（1）
第三章 界面UI的基石—UI布局（1）
第三章界面UI的基石—UI布局
上一章我们一起学习了Android中的常用组件及一些UI编程的技术。在此基础上，我们就可以将这些组件有效的组织起来，构成一个美观、合理的界面。
在本章，我们先来详细说明Android中UI的几种布局，通过这几种布局就能将组件有效的组合到一起。然后说明在Android开发中如何应用样式和主题，通过样式和主题，可以预定义一系列的属性值，使整个应用程序形成统一的显示风格。
3.1 用户界面的基本单元—View视图
在Android SDK中，View（视图）类是视图类的一个超类。View代表了用户界面组件的一块可绘制的空间块。每一个View在屏幕上占据一个长方形区域。在这个区域内，这个View对象负责图形绘制和事件处理。每一个View都有一个用于绘图的画布，这个画布可以进行任意扩展。在游戏开发中也可以自定义View，这样画布的功能更能满足我们开发的需要。在Android SDK开发中，任何一个自定义的View都只需要重写onDraw()方法来实现界面显示。自定义的View可以是复杂的3D实现，也可以是非常简单的文本形式等。
下面，我们以一个为图片添加边框的例子来看看View是如何工作的吧。
首先，我们定义一个MyImageView继承自ImageView：
// import略 public class MyImageView extends ImageView{
private int color; private int borderwidth; public Canvas canvas = new Canvas(); public int status = 0;
public MyImageView(Context context) { super(context); } public MyImageView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public MyImageView(Context context, AttributeSet attrs) {
super(context, attrs); } // 设置颜色 public void setColour(int color){ this.color = color; }
// 设置边框宽度 public void setBorderWidth(int width){ borderwidth = width; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); this.canvas = canvas; // 画边框 Rect rec = canvas.getClipBounds(); rec.bottom--; rec.right--; Paint paint = new Paint(); // 设置边框颜色 paint.setColor(color); paint.setStyle(Paint.Style.STROKE); // 设置边框宽度 paint.setStrokeWidth(borderwidth); canvas.drawRect(rec, paint); } } |
接着，在布局文件中添加MyImageView。
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <com.chapter2.MyImageView android:id="@+id/my_image" android:layout_centerHorizontal="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/ball"/> </RelativeLayout> |
然后，在Activity中定义MyImageView，并为它设定边框宽度和颜色。
MyImageView image = (MyImageView)findViewById(R.id.my_image); image.setBorderWidth(5); image.setColour(Color.WHITE); |
运行程序，让我们来看看效果图，如图3-1所示。
图3-1 为图片添加边框
可以看到，我们已经为这张图片添加好了边框。
在这个例子中，我们自定义了一个继承自ImageView的View，并重写了onDraw()方法，在onDraw()方法中对界面进行了重新的绘制，其中关于Canvas及Paint的使用，我们在后续的章节中会有介绍。
经验分享： 我们在写布局文件的时候，第一行需要加入： xmlns:android="http://schemas.android.com/apk/res/android" 这个是xml的命名空间，有了它，当你需要输入内容时，你就可以按住“alt”和“/”键，这个时候，它就会提示你接下来有哪些是可以供选择输入的；另外，它还可以帮助你判断语法，当你出错的时候会给出相应的提示。 |
第三章 界面UI的基石—UI布局（1）