Fragment — используем фрагменты в верстке экрана

| 21.05.2014

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

Нам потребуется создать:
- класс активити
- layout для активити с двумя элементами fragment
- по одному layout на каждый фрагмент (всего два)
- по одному классу на каждый фрагмент, наследующему класс Fragment
- строковые ресурсы

Итак, приступим.

MainActivity.java:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package ru.androiddocs.fragment;
 
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
 
public class MainActivity extends ActionBarActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
    }
}

Здесь нет ничего сложного: используем метод setContentView() для установки layout для main-активити.

Создадим этот layout — res/layout/activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <fragment android:name="ru.androiddocs.fragment.FirstFragment"
            android:id="@+id/first_fragment"            
            android:layout_width="fill_parent"
            android:layout_height="match_parent" 
            android:layout_weight="1"/>
 
    <fragment android:name="ru.androiddocs.fragment.SecondFragment"
            android:id="@+id/second_fragment"            
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"/>
 
</LinearLayout>

Здесь мы поместили в layout два элемента fragment с одинаковым весом layout_weight, то есть оба фрагмента будут занимать одинаковое пространство от layout. В атрибуте android:name мы прописали ссылку на java-класс фрагмента, который заполняет его содержимое контентом (устанавливает layout).

Класс FirstFragment.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package ru.androiddocs.fragment;
 
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class FirstFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.first_fragment, container, false);
    }
}

Строка inflater.inflate(R.layout.first_fragment, container, false) определяет layout для нашего первого фрагмента.

Класс SecondFragment.java практически идентичен, но он устанавливает другой layout (для второго фрагмента):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package ru.androiddocs.fragment;
 
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class SecondFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.second_fragment, container, false);
    }
}

Создаем layout-ы для наших фрагментов.

res/layout/first_fragment.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
<LinearLayout 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:background="#ccc">
 
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/first_fragment" />
 
</LinearLayout>

res/layout/second_fragment.xml

1
2
3
4
5
6
7
8
9
10
11
12
<LinearLayout 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">
 
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/second_fragment" />
 
</LinearLayout>

Макеты практически идентичны. Единственное, что мы задали серый фон для первого фрагмента атрибутом:

1
android:background="#ccc"

чтобы визуально увидеть границы фрагментов.

Ну и последнее — создадим строковые ресурсы.

res/values/strings.xml

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Fragment</string>
    <string name="first_fragment">First fragment!</string>
    <string name="second_fragment">Second fragment!</string>            
</resources>

Запускаем приложение.

Fragment

Дополнения.

Если контент фрагмента необходимо обновить (сделать его refresh), то внутри класса фрагмента можно выполнить следующее:

1
2
FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.detach(this).attach(this).commit();

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*