码迷,mamicode.com
首页 > 其他好文 > 详细

第三章 界面UI的基石—UI布局(1)

时间:2015-01-08 09:38:49      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:android开发   relativelayout   经验分享   编程   技术   

第三章界面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)

标签:android开发   relativelayout   经验分享   编程   技术   

原文地址:http://blog.csdn.net/arui319/article/details/42519675

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!