设计我的Android布局

Ahmed Alaa El-Din

4.71/5 (15投票s)

2014年8月9日

CPOL

4分钟阅读

38378

帮助初学者迈出Android应用程序开发的第一步

引言

作为一名 Android 开发者，我有一个项目，现在是开始实际开发的时候了 -- 我该如何开始？-- 这可能是一个初学者开发者脑海中出现的第一个问题。

答案很简单：对于我的第一个 Activity 来说，就是 XML 布局，或者我们可以称之为用户看到的第一个屏幕，但是我应该实现哪种布局呢？这取决于你想做什么。因此，在本文中，我们将讨论所有可以使用的布局，以及你可能需要的控件。

Android XML 布局

相对布局 (Relative Layout)
线性布局
Grid View
List View

Android 控件

编辑文本 (Edit Text)
按钮 / 图像按钮 (Button / Image Button)
CheckBox
单选按钮 / 单选按钮组 (Radio Button / Radio Group)

1. Android XML 布局

1.1 相对布局 (Relative Layout)

在开发一些应用程序后，你会发现相对布局是你应用程序中最常用的布局之一，这就是为什么我决定首先讨论它。

你可以使用此布局来定位项目，使其相对于彼此，以及定位兄弟元素，正如我们在本例中看到的那样。

示例 1

我们希望在屏幕中心显示一个标题，并在标题下方显示一个文本编辑器，在文本编辑器的右侧显示一个按钮。

1. 打开你的项目并转到 activity_main.xml...你应该找到如下所示的内容

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>

2. 现在是进行一些修改的时候了。我们的第一个修改是在屏幕中心显示 Hello World

//just add these lines to your TextView
android:id="@+id/TextView"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"

//Your code should look like this
<TextView
  android:id="@+id/TextView"  //Give an ID to your Control so you can position relative to
  android:layout_width="wrap_content" //This stretch width to fit whole content
  android:layout_height="wrap_content" //This stretch height to fit whole content 
  android:layout_centerHorizontal="true" // Used to center TextView Horizontaly
  android:layout_centerVertical="true"  // Used to center TextView Verticaly
  android:text="@string/hello_world" />  //Display Text that is saved in string.xml

3. 现在，让我们添加编辑文本 (Edit Text) 和按钮 (Button)

//Implemented EditText and Button    
<EditText 
        android:id="@+id/EditTextRelativeLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter Your Name" //set the hint as normal text instead of string.xml
        android:layout_below="@+id/TextView"> //Set EditText Below of TextView 
        </EditText>

<Button
        android:id="@+id/Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/ButtonSubmit"
        android:layout_below="@id/TextView" //Set EditText Below of TextView
        android:layout_toRightOf="@id/EditTextRelativeLayout">//and right of EditText
        </Button>

4. 我们完成了第一个布局，但是还有其他参数，而不是 "wrap_content"，如果我想在另一个布局中插入 EditText 和 Button 并控制它，而不是控制 EditText 和 Button，该怎么办？

- 我将 EditText 的 Layout:Width 更改为 "Fill_Parent"，这会拉伸 EditText 以适应所有宽度，Layout:Height 也是如此，这导致按钮消失，因为它相对于 EditText 的位置，并且超出了屏幕范围，这在我们的例子中是不可接受的，因此在我们的示例中使用 wrap_content 更好。

<EditText 
        android:id="@+id/EditTextRelativeLayout"
        android:layout_width="fill_parent"  // used fill_parent
        android:layout_height="fill_parent" // used fill_parent
        android:hint="Enter Your Name"
        android:layout_below="@+id/TextView"></EditText>

- 正如我们所见，EditText 和 Button 都没有水平居中。一步完成居中的最佳方法是将这两个字段放在另一个布局中，并将该布局居中，如下面的代码所示

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />

    //Removed layout_below from both EditText & Button, and added it to our new RelativeLayout
    //as well as adding layout_centerHorizontal for this Layout
    <RelativeLayout
        android:id="@+id/CenterLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/TextView"
        android:layout_centerHorizontal="true" >

        <EditText
            android:id="@+id/EditTextRelativeLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="Enter Your Name" >
        </EditText>

        <Button
            android:id="@+id/Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/EditTextRelativeLayout"
            android:text="@string/ButtonSubmit" >
        </Button>
    </RelativeLayout>

</RelativeLayout>

#注意_1：永远不要在 LAYOUT_WIDTH 或 LAYOUT_HEIGHT 中插入像 26dp 这样的常量值... 始终记住有不同的屏幕尺寸

1.2 线性布局 (Linear Layout)

可能，你的第二个选择将是线性布局。使用此布局，你只有 2 个选项可供选择，即将项目彼此列出（每列 1 个项目）或垂直列出你的项目（每行 1 个项目）。

如果要实现电影列表之类的示例，则需要类似的东西。

//Add Linear Layout
<?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" > //This one sets to place 1 item per row

    <EditText
        android:id="@+id/EditTextRelativeLayout_One"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter Your Name ( 1 )" >
    </EditText>

    <EditText
        android:id="@+id/EditTextRelativeLayout_Two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter Your Name ( 2 )" >
    </EditText>

</LinearLayout>

<?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="horizontal" > // I used horizontal Orientation

    <EditText
        android:id="@+id/EditTextRelativeLayout_One"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter Your Name ( 1 )" >
    </EditText>

    <EditText
        android:id="@+id/EditTextRelativeLayout_Two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter Your Name ( 2 )" >
    </EditText>

</LinearLayout>

如果我想添加一个大的项目，每行包含 EditText 和 Button，该怎么办？这很简单，我们可以在线性布局中实现相对布局，如下所示

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

    //Added 1st Item in Row 
    <RelativeLayout
        android:id="@+id/Rel1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <EditText
            android:id="@+id/EditTextRelativeLayout_One"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="Enter Your Name ( 1 )" >
        </EditText>

        <Button
            android:id="@+id/Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/EditTextRelativeLayout_One"
            android:text="@string/ButtonSubmit" >
        </Button>
    </RelativeLayout>

    //2nd Row
    <RelativeLayout
        android:id="@+id/Rel2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <EditText
            android:id="@+id/EditTextRelativeLayout_Two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="Enter Your Name ( 2 )" >
        </EditText>

        <Button
            android:id="@+id/Button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/EditTextRelativeLayout_Two"
            android:text="@string/ButtonSubmit" >
        </Button>
    </RelativeLayout>

</LinearLayout>

1.3 GridView / ListView

你的第三个选择布局是 GridView，它以二维方式显示项目，并且是一个可滚动的网格，或者 ListView，它以一维方式表示项目。我将在 GridView 中更详细地讨论，但 ListView 的所有内容都相同。

你可以决定网格的列数，或者根据屏幕尺寸自动调整

//here 3 columns
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:numColumns="3">
    

</GridView>

//Or set numColumns to auto_fit,depeding on column width relative to screen size
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:numColumns="auto_fit">
    

</GridView>

现在，我该如何将项目添加到我的网格中？你不能像以前那样从布局中插入它，你的应用程序将崩溃。你必须通过代码添加网格项目。

1. 创建将在你的网格中填充的项目布局

<?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" >
    
<EditText 
    android:id="@+id/txtGrid"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
    
</LinearLayout>

2. 从代码访问 Grid 并设置其 adapter 类，该类有助于将数据绑定到网格

GridView gridview = (GridView) findViewById(R.id.myGrid);
gridview.setAdapter(new GridAdatper(this.getApplicationContext()));

3. 右键单击 GridAdatper 并创建一个类，以及添加接受应用程序上下文的构造函数

    Context _C;

    public GridAdatper(Context applicationContext) {
        // TODO Auto-generated constructor stub
        _C = applicationContext;
    }

4. 通过 getView 函数内部的 Adapter 绑定数据

public View getView(int arg0, View arg1, ViewGroup arg2) {
        // TODO Auto-generated method stub
        EditText editText;
        View grid_item = null;
        LayoutInflater inflater = (LayoutInflater) _C
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        if (arg1 == null) {  // if it's not recycled, initialize some attributes
            grid_item = new View(_C);
            grid_item = inflater.inflate(R.layout.grid_item, null);
            editText = (EditText)grid_item.findViewById(R.id.txtGrid);
            
            editText.setHint(InputData[arg0]);
        } else {
            grid_item = (View) arg1;
        }

        return grid_item;
}

2. Android 控件

我将主要讨论一些特别适合每个控件的参数，以及如何在你的代码中访问此控件

2.1 编辑文本 (EditText)

EditText 控件是你从用户读取输入的方式

<EditText
            android:id="@+id/EditTextRelativeLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:password="true" //This parameter sets password to true and display text as *
            android:maxLength="100" //We can set maxLength 
            android:hint="Edit Text"
            android:textColorHint="@android:color/holo_blue_dark"> //Also Hint Color is changable
        </EditText>

如何访问此控件并在代码中更改一些参数？

EditText txt_Edit1 = (EditText) findViewById(R.id.EditTextRelativeLayout); //Load Item by its ID
txt_Edit1.setHint("");
txt_Edit1.setHintTextColor(color.black);
txt_Edit1.setTextColor(color.holo_green_light);

2.2 按钮 / 图像按钮 (Button / Image Button)

最重要的控件之一是按钮 / 图像按钮，它表示接收用户操作的操作

<Button
            android:id="@+id/Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/ButtonSubmit" >
        </Button>

<ImageButton
            android:id="@+id/ImageButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" /> // set the src of the image

或者你可以从代码中访问，如下所示

Button btn = (Button) findViewById(R.id.Button);
btn.setText("Click Here");

ImageButton img_btn = (ImageButton) findViewById(R.id.ImageButton);
img_btn.setImageResource(R.drawable.ic_launcher);

2.3 复选框 (CheckBox)

CheckBox 在有多个选项的情况下很有用，并且它没有太多选项，只需将 checked 设置为 true/false

<CheckBox 
        android:id="@+id/CheckBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"/>


//Or through Code
CheckBox chk =(CheckBox)findViewById(R.id.CheckBox);
chk.setChecked(true);

2.4 单选按钮 / 单选按钮组 (Radio Button / Radio Group)

你可以设置一个单选按钮组，它是单选按钮的集合，如下面的例子所示

<RadioGroup
        android:id="@+id/RGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:dividerPadding="1dp" > //Set a padding between each Radio Button vertically

        <RadioButton
            android:id="@+id/RGroup1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="false" /> //by default it's set to false

        <RadioButton
            android:id="@+id/RGroup2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true" />
    </RadioGroup>

摘要

你 90% 的 Android 应用程序将需要所讨论的布局和控件。希望我们讨论了如何添加控件并从你的代码中访问它，以及选择最适合你需求的布局。