Статьи

Пример макета верхнего и нижнего колонтитула Android

Декабрь 8, 2018

В этой статье мы рассмотрим, как можно создать простой макет Android, который включает в себя часть заголовка, часть нижнего колонтитула и область содержимого. Это сравнительно легко сделать на платформе Android. Важным моментом является попытка сделать ваши макеты многоразовыми и независимыми друг от друга, чтобы вы могли использовать их в любом месте приложения, а не только в одном действии. Вот что мы собираемся сделать в этом примере.

В этом руководстве мы будем использовать следующие инструменты на 64-битной платформе Windows:

  1. JDK 1,7
  2. Eclipse 4.3 Kepler
  3. Android SKD 4.3

1. Создайте новый проект Android

Откройте Eclipse IDE и перейдите в Файл -> Создать -> Проект -> Android -> Проект приложения Android.

новый андроид-проект

Вы должны указать Имя приложения, Имя проекта и Имя пакета в соответствующих текстовых полях и затем нажать Далее.

новый Android-приложение

В следующем окне убедитесь, что выбран вариант «Создать действие», чтобы создать новое действие для вашего проекта, и нажмите «Далее». Это необязательно, так как вы можете создать новое действие после создания проекта, но вы можете сделать все это за один шаг.

Configure-проект

Выберите «BlankActivity» и нажмите «Далее».

Вам будет предложено указать некоторую информацию о новой деятельности. В текстовом поле «Имя макета» необходимо указать имя файла, который будет содержать описание макета вашего приложения. В нашем случае будет создан файл res/layout/main.xml . Затем нажмите Готово.

2. Создание макета Основного занятия

Откройте файл res/layout/main.xml :

Пакет-исследователь

И вставьте следующий код:

main.xml:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<?xml version="1.0" encoding="utf-8"?>
<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" >
 
    <!-- Header aligned to top -->
 
    <RelativeLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="#FC9"
        android:gravity="center" >
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="Fixed Header"
            android:textColor="#000"
            android:textSize="20sp" />
    </RelativeLayout>
 
    <!-- Footer aligned to bottom -->
 
    <RelativeLayout
        android:id="@+id/footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#FC0"
        android:gravity="center" >
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="Fixed Footer"
            android:textColor="#000"
            android:textSize="20sp" />
    </RelativeLayout>
 
    <!-- Content below header and above footer -->
 
    <RelativeLayout
        android:id="@+id/content"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@id/footer"
        android:layout_below="@id/header"
        android:gravity="center" >
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Content"
            android:textColor="#33E"
            android:textSize="20sp" />
    </RelativeLayout>
 
</RelativeLayout>

Идея здесь очень проста. У нас есть два RelativeLayouts , одно выровненное в верхней части экрана, используя android:layout_alignParentTop="true" , и одно выровненное в нижней части экрана, используя android:layout_alignParentBottom="true" . Затем мы просто android:layout_above="@id/footer" RelativeLayout между этими двумя представлениями, используя android:layout_above="@id/footer" и android:layout_below="@id/header" . Эти свойства разместят наш RelativeLayout с идентификатором content , представляющим область содержимого нашего макета, над элементом с идентификатором footer и под элементом с header идентификатора.

Вы можете предварительно просмотреть макет, который вы создали в редакторе Graphical Layout:

графический верстки

2. Код основной деятельности

Используйте Package Explorer, чтобы перейти к файлу Java созданного вами Activity:

основное занятие

В этом примере вам не нужно ничего менять на автоматически сгенерированный код, чтобы вы могли оставить все как есть.

MainActivity.java:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
package com.javacodegeeks.android.androidlayoutsexample;
 
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
 
public class MainActivity extends Activity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
}

4. Запустите приложение

Вот так выглядит наш макет на эмуляторе:

Android-эмулятор

Делаем ваш макет гибким

В приведенном выше коде мы как бы жестко закодировали все в основной структуре упражнения. Но вы можете динамически раздувать содержимое каждого макета в вашем коде. Или, что более важно, вы можете захотеть сделать этот макет повторно используемым для других ваших действий, каждый из которых имеет свое собственное содержимое для отображения и может иметь свои собственные верхние и нижние колонтитулы.

Чтобы достичь этого, мы просто собираемся отделить каждый компонент от другого. Мы собираемся создать макет заголовка для другого файла XML и сделать то же самое для нижнего колонтитула. Теперь каждое действие, имеющее собственный контент, может включать верхний и нижний колонтитулы в свои собственные макеты.

Создать новый файл XML Layout, содержащий элементы, которыми вы хотите заполнить свой ScrollView . Чтобы создать новый файл макета, перейдите в Package Explorer и найдите папку /res/layout . Щелкните правой кнопкой мыши папку -> Создать -> Другое -> Android -> Файл Android XML Layout:

новый макет файл

Введите имя для вашего нового файла макета, выберите RelativeLayout из списка (хотя это не является абсолютно необходимым) и нажмите «Готово»:

Заголовок-XML

Вам также необходимо создать footer.xml .

Итак, после создания новых файлов XML макета, это новая структура проекта:

новый проект-структура

header.xml

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
<RelativeLayout
        android:id="@+id/footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#FC0"
        android:gravity="center" >
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="Fixed Footer"
            android:textColor="#000"
            android:textSize="20sp" />
    </RelativeLayout>

footer.xml

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/footer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="#FC0"
    android:gravity="center" >
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text="Fixed Footer"
        android:textColor="#000"
        android:textSize="20sp" />
 
</RelativeLayout>

main.xml

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml version="1.0" encoding="utf-8"?>
<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" >
 
    <!-- Header aligned to top -->
 
    <include layout="@layout/header" />
 
    <!-- Footer aligned to bottom -->
 
    <include layout="@layout/footer" />
 
    <!-- Content below header and above footer -->
 
    <RelativeLayout
        android:id="@+id/content"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@id/footer"
        android:layout_below="@id/header"
        android:gravity="center" >
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Content"
            android:textColor="#33E"
            android:textSize="20sp" />
    </RelativeLayout>
 
</RelativeLayout>

Как вы можете видеть, мы просто разделили RelativeLayouts верхнего и нижнего колонтитула на разные XML-файлы. Так что теперь вы можете включить их в любой макет, который вы хотите. Вы можете сделать это, написав <include layout="@layout/header" /> для включения заголовка и <include layout="@layout/footer" /> ( header и footer должны соответствовать именам, которые вы дали соответствующему XML Файлы макетов)

Запустите приложение

Вот так выглядит наш макет на эмуляторе:

Android-эмулятор

Скачать проект Eclipse

Это был пример для Android о том, как создавать фиксированные макеты для многократного использования верхнего и нижнего колонтитула. Загрузите проект Eclipse этого руководства: AndroidLayoutsExample.zip

41
Share: