Android_UI01_用户界面设计

XML 属性及 Java 对应的方法详见 API。

UI设计的相关概念

View 视图

　　Android 比喻成窗户，每块玻璃就是一个 view。

　　占据屏幕上的一块矩形区域，负责提供组件绘制和事件处理的方法。

　　View 类是所有UI组件的基类，位于 android.view 包中；文本框组件 TextView 是 View 类的子类，位于 android.widget 包中。

　　View 类及其子类的相关属性可在XML布局文件中进行设置，也可以通过成员方法在 Java 代码中动态设置。

ViewGroup 容器

　　相当于窗户框，用于控制玻璃的安放。

　　继承 View 类，是 View 类的扩展，是用来容纳其他组件的容器。但 ViewGroup 是一个抽象类，使用其子类作为容器。

　　ViewGroup 控制其子组件的分布时（例如，设置子组件的内边距、宽度和高度等），还经常依赖于 ViewGroup.LayoutParams 和 ViewGroup.MarginLayoutParams 两个内部类

　　ViewGroup.LayoutParams 类 extends Object 类

　　　　封装了布局的位置、高和宽等信息。

　　　　XML属性只有 2 个： 

　　　　　　android:layout_height

　　　　　　android:layout_width　　属性值可以是精确的数值，也可以是 match_parent（与上级视图一样）或 warp_content（与内部视图一样）。

　　ViewGroup.MarginLayoutParams 类  extends ViewGroup.LayoutParams 类

　　　　用于控制其子组件的外边距。

　　　　XML属性 6 个：

　　　　　　android:layout_marginLeft　　　　设置左外边距

　　　　　　android:layout_marginTop　　　　设置顶外边距

　　　　　　android:layout_marginRight　　　 设置右外边距

　　　　　　android:layout_marginBottom　　  设置底外边距

　　　　　　android:layout_marginStart　　　  设置左外边距

　　　　　　android:layout_marginEnd　　　　设置右外边距

在 Android 中，所有的 UI 界面都是由 View 类、ViewGoup 类及其子类组合而成的。ViewGoup 类，可以包含 View 类，也可以再次包含 ViewGoup  类。

控制UI界面（4种方法）

1.使用 XML 布局文件控制 UI 界面

　　比较方便、快捷，但有失灵活。

2.使用 Java 代码控制 UI 界面

　　比较灵活，但开发过程比较烦琐。

3.使用 XML 和 Java 代码混合控制 UI 界面

　　习惯上把变化小、行为比较固定的组件放在XML布局文件中，把变化较多、行为控制比较复杂的组件交给Java代码来管理。

4.开发自定义的 View

　　当 Android 提供的继承 View 类的 UI 组件不足以满足程序需要时，我们可通过继承 View 类来开发自己的组件。开发自定义的 View 组件大致分为以下 3 个步骤：

　　　　1)、创建一个继承 android.view.View 类的类，并重写构造方法。

　　　　2)、根据需要重写其他方法。Androidstudio 在代码中单击鼠标右键，选择 Generate 菜单项，选择 Override Methods 菜单项。

　　　　3)、在 activity 中创建并实例化自动以的 View 类，并添加到布局管理器中。

　　实例：通过自定义 View 组件实现跟随手指的小兔子

　　　　activity_main.xml 文件内容：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    android:id="@+id/fl_frameLayout">


</FrameLayout> <!-- 使用 FrameLayout -->

　　　　RabbitView.java 文件内容：重写带一个参数 context 的构造方法和 onDraw() 方法

public class RabbitView extends View {
    public float bitmapX; // 默认显示位置的X坐标
    public float bitmapY; // 默认显示位置的Y坐标
    // 重写构造方法，设置图片的默认显示位置
    public RabbitView(Context context) {
        super(context);
        bitmapX = 260;
        bitmapY = 130;
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();
        Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(), R.mipmap.ic_launcher);
        canvas.drawBitmap(bitmap, bitmapX, bitmapY, paint);
        /*if (bitmap.isRecycled()) { // 如果此位图已被回收，则返回true。
            bitmap.recycle(); // 释放与此位图关联的本机对象，并清除对像素数据的引用。
        }*/
    }
}

　　　　MainActivity.java 文件内容：

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        FrameLayout frameLayout = findViewById(R.id.fl_frameLayout); // 获取帧布局管理器
        final RabbitView rabbit = new RabbitView(this); // 创建并实例化 RabbitView 类
        // 为 rabbit 添加触摸事件监听
        rabbit.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                // 设置 rabbit 的显示位置
                rabbit.bitmapX = event.getX();
                rabbit.bitmapY = event.getY();
                rabbit.invalidate(); // 重绘 rabbit 组件
                return true;
            }
        });
        frameLayout.addView(rabbit); // 将 rabbit 添加到布局管理器中
    }
}

布局管理器

Android 提供了五种布局管理器：

　　相对布局管理器（RelativeLayout）：通过相对定位的方式来控制组件的摆放位置。

　　线性布局管理器（LinearLayout）：是指在垂直或水平方向依次摆放组件。

　　帧布局管理器（FrameLayout）：没有任何定位方式，所有的组件都会摆放在容器的左上角，逐个覆盖。

　　表格布局管理器（TableLayout）：使用表格的方式按行、列来摆放组件。

　　绝对布局管理器（AbsoluteLayout）：通过绝对定位（x、y坐标）的方式来控制组件的摆放位置。Android 2.0 中被标记为已过期，可使用帧布局或相对布局代替。

　　网格布局管理器（GridLayout）：实现跨行或跨列摆放组件。Android 4.0 以后提供。

Android 提供的布局管理器均直接或间接地继承自 ViewGroup，因此，所有布局管理器都可以作为容纳其他组件的容器，也可以相互嵌套。

　　

1.相对布局管理器