在android中设计布局有哪些不同的方法?

时间:2011-12-02 00:41:26

标签: android android-layout

我是Android开发的新手。我想知道用于设计XML布局的不同方法有哪些。我一直在使用eclipse拖放界面,我在做一些搜索时看到了http://droiddraw.org/。只是想知道是否还有其他可能更好的方法来设计专业人士使用的布局,因为我很难用eclipse界面制作复杂的设计?

3 个答案:

答案 0 :(得分:2)

首先查看android开发者网站用户界面页面

http://developer.android.com/guide/topics/ui/index.html

基本上有三种不同的方法可以制作Android布局:

<强> XML

http://developer.android.com/guide/topics/ui/declaring-layout.html

您可以使用XML定义静态布局。也许一种思考它的好方法是一种简写。声明视图和属性非常容易,XML的分层格式使得可视化更容易。

这是典型的布局

<?xml version="1.0" encoding="utf-8"?>
<ViewGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:attribute="value" >

    <ViewGroup android:attribute="value" >

        <View android:attribute="value" />

    </ViewGroup>

    <View android:attribute="value" />

</ViewGroup>

然后,您在活动中使用setContentView(R.layout.layout)并继续开展业务。

<强>爪哇

您可以执行在XML中执行的所有操作,还可以添加侦听器之类的内容,或执行XML中无法执行的其他动态操作。以下是您可以声明典型布局的方法(ViewGroup是抽象的,因此您必须使用子类。对于XML也是如此)

ViewGroup parent = new ViewGroup(this);
ViewGroup vg1 = new ViewGroup(this);
View v1 = new View(this);
View v2 = new View(this);

parent.addView(vg1);
vg1.addView(v1);
parent.addView(v2);

v1.setOnAwesomeListener(new AwesomeListener() {
    onAwesome(View v) {
        doDynamicThings();
    }
}

setContentView(parent);

<强>混合

在我看来,这种情况最常用。使用id声明XML格式,如android:id="@+id/v1",然后将视图从XML加载到Java

setContentView(R.layout.layout);

View v1 = findViewById(R.id.v1);

// dynamically change v1

答案 1 :(得分:2)

如何使用XML设计布局

因此缺乏GUI设计工具让您别无选择,只能手动编写布局编码。好消息是,一旦掌握了它,你应该能够处理任何你想要的布局。我们来看看构建模块

ViewGroup

首先,您需要选择ViewGroup来定义布局的结构或布局的一部分。请记住,这些可以嵌套,因此自上而下设计并尝试根据您希望它们具有的表单对布局的各个部分进行分类。有两个主要选择:

顾名思义,对于排列一行中的项目非常有用。选择orientation,水平或垂直,只需添加项目。它们将按从上到下或从左到右的顺序添加。

用于将项目放置在屏幕上的特定位置。因此,如果您想在左上方放置一个按钮,或者在顶部放置一个条形,这就是您的ViewGroup。

Layout Parameters

用于定义视图的宽度,高度,重量和其他方面。

宽度和高度有两个选项:fill_parent(在API级别8中替换为match_parent)和wrap_content。视图可以选择填充父视图的宽度,也可以只选择所需的空间。

另一个有用的布局参数,LinearLayout特有的,名为weight。它允许视图以比率共享空间,或让一个视图在LinearLayout中的其他视图占据其份额后占用剩余空间。

示例

让我们尝试设计Google地图的布局。假装它是我头脑中的布局,我想实现它。这是一个截图

enter image description here

我会试着打破这个:

看着它,顶部有一个横条,下面有一张地图。我相信这可以用LinearLayout或RelativeLayout实现。但是,左下角和左下方的按钮会尖叫RelativeLayout,所以我会继续使用它。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TODO:BAR
        android:id="@+id/bar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true">

    </TODO:BAR>

    <MapView
        android:id="@+id/map"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/bar" />

    <ImageButton
        android:id="@+id/latitude"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="20dp" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/zoom_in"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ImageButton
            android:id="@+id/zoom_out"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</RelativeLayout>

现在有些解释。在RelativeLayout中,您使用alignParent[direction]指定视图的位置。我还想在侧面留出一些空间,因此我使用margin[direction]来指定dp或与密度无关的像素。如您所见,wrap_content大部分时间都在使用,因此按钮会获取其上使用的图像的大小。

现在一切都已定义,但顶部的栏位。我将把它分解为四个不同的视图:下拉菜单视图,搜索视图,图层按钮和我的位置按钮。我希望它的工作方式是将菜单放在最左边,将图层和我的位置按钮放在右边,搜索框占用剩余的空间。这听起来像LinearLayout和重量的工作!以下是我如何定义栏,可以将其插入上面的占位符以获得最终布局

<LinearLayout
    android:id="@+id/bar"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true" >

    <ImageButton
        android:id="@+id/dropdown_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <EditText
        android:id="@+id/search"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <ImageButton
        android:id="@+id/layers"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageButton
        android:id="@+id/my_location"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

将搜索栏的宽度设置为0dp意味着让其他视图获取所需内容,然后权重表示占用剩余空间。

你有它。重新设计Google Maps应用程序的基本布局(减去按钮图像和其他细节,如自定义视图),展示如何轻松地使用各种布局和XML。希望这很有用。

答案 2 :(得分:1)

这个领域的工具链有点弱。我并不真正关心DroidDraw,而Eclipse GUI编辑器除了简单的布局外,还不是很好。例如,它通常会错误地渲染RelativeLayouts。

我个人直接用XML做几乎所有事情。您必须了解所有不同的布局类如何工作以执行任何复杂的操作。 XML的唯一真正的缺点是标签,属性等所有额外的东西都需要输入很多额外的东西,但是编辑器会为你完成大部分工作。