Компьютерапия

Создание фрагментов и использование вкладок для Android

Категория: Android
Просмотров: 14418

Сегодня давайте займемся созданием нового приложения в Android Studio 3.0, будем использовать вкладки и подгружаемые в них фрагменты.

Фрагменты позволяют встраивание их в активности, вкладки и другие элементы.

Содержание:

Новый проект

Запустим среду разработки, создадим новый проект MyFragments, макет главной активности -TabbedActivity, стиль навигации - ActionBar Tabs(with View Pager), и нажмем финиш.

  Создание фрагментов и использование вкладок для Android

Ошибки в gradle

После обновления Android Studio до версии 3.0 у меня постоянно вылетает ошибка сборки gradle app, ссылается на зависимости test.runner, test.esspresso и не видит support.appcompat и support.design, хотя все элементы SDK отвечают текущим требованиям и обновлены.

Создание фрагментов и использование вкладок для Android

Если вы столкнулись с подобными ошибками напишите об этом в комментариях, я же не нашел лучше способа решить проблему, чем удалить тестовые зависимости вообще, а в поддержке support.appcompat и support.design, изменить версию, поставив знак плюс после первой цифры версии. Также я добавил зависимость support-v4, так как в проекте используются некоторые элементы из ранних версий.

Создание фрагментов и использование вкладок для Android

Теперь все работает как и было задумано...

Макет виджета вкладок

Среда разработки Android создала для нас пустой фрагмент, который мы использовать не будем, закроем его и посмотрим на макет главной активности.
Он представляет из себя три вкладки виджета TabLayout, содержащие три пункта виджета TabItem, дублируя их можно сделать больше вкладок, чем предложено первоначально. Соответственно удалять их, оставляя меньше двух смысла нет, иначе проще использовать обычную активность.

Создание фрагментов и использование вкладок для Android

Создание новых фрагментов

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

Создание фрагментов и использование вкладок для Android

Создадим наши фрагменты, для этого кликнем правой кнопкой на папке java и в контекстном меню выберем New>Fragment>Fragment(Blank). Отличие от остальных пунктов этого подменю в расположении элементов на фрагменте.

Создание фрагментов и использование вкладок для Android

Для удобства я буду присваивать номер к предложенному имени фрагмента (BlankFragment1 и т.д.), сниму галочки с пунктов Include fragment factory metods и Include interface callbacks, которые добавят в java класс методы и интерфейс вызовы, безусловно полезные, но в данном примере нами не используемые.

Создание фрагментов и использование вкладок для Android

Сформированный BlankFragment1.java унаследует методы от класса fragment, и содержит одну процедуру onCreateView, запускающую fragment_blank_fragment1, в который добавим RelativeLayout и поместим в него TextView, настроив ширину и высоту элементов.

Создание фрагментов и использование вкладок для Android

Для RelativeLayout

android:layout_width="match_parent"
android:layout_height="match_parent"

для TextView

android:layout_width="wrap_content"
android:layout_height="wrap_content"

Переместим TextView ниже и по центру, создадим дополнительно еще два фрагмента аналогичным образом, в них TextView расположим со смещением.

Создание фрагментов и использование вкладок для Android

Редактирование MainActivity

Перейдем или откроем файл MainActivity.java, найдем в нем класс PlaceholderFragment,

Создание фрагментов и использование вкладок для Android

сложим весь участок кода в строку и удалим его. В функции getItem закомментируем или удалим строку так:

//return PlaceholderFragment.newInstance(position + 1);

и добавим следующий код ниже:

switch (position){
case 0:
BlankFragment1 bf1= new BlankFragment1();
return bf1;
case 1:
BlankFragment2 bf2= new BlankFragment2();
return bf2;
case 2:
BlankFragment3 bf3= new BlankFragment3();
return bf3;
default:
return null;
}

Данный код определяет, какая вкладка была выбрана, нумерация вкладок начинается с нуля и если, например, это нулевая вкладка, то в будет выполнен код BlankFragment1(), и во вкладку будет встроен фрагмент №1.

Перезапустим эмулятор, нажав на "молнию" и увидим изменения, во вкладках подгружаются созданные фрагменты, надписи расположены по центру со смещением для наглядности.
Если мы добавим на третий фрагмент кнопку, то после перезапуска приложения, в третей вкладке под надписью появится новая кнопка.

Создание фрагментов и использование вкладок для Android

Полный текст activity_main.xml

<!--?xml version="1.0" encoding="utf-8"?-->
<android.support.design.widget.coordinatorlayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
xmlns:tools="http://schemas.android.com/tools" 
android:id="@+id/main_content" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:fitssystemwindows="true" 
tools:context="ru.maxfad.myfragments.MainActivity">

    <android.support.design.widget.appbarlayout 
android:id="@+id/appbar" android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:paddingtop="@dimen/appbar_padding_top" 
android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.toolbar 
android:id="@+id/toolbar" 
android:layout_width="match_parent" 
android:layout_height="?attr/actionBarSize" 
android:layout_weight="1" 
android:background="?attr/colorPrimary" 
app:layout_scrollflags="scroll|enterAlways" 
app:popuptheme="@style/AppTheme.PopupOverlay" 
app:title="@string/app_name">

        </android.support.v7.widget.toolbar>

        <android.support.design.widget.tablayout 
android:id="@+id/tabs" 
android:layout_width="match_parent" 
android:layout_height="wrap_content">

            <android.support.design.widget.tabitem 
android:id="@+id/tabItem" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/tab_text_1">

            <android.support.design.widget.tabitem 
android:id="@+id/tabItem2" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/tab_text_2">

            <android.support.design.widget.tabitem 
android:id="@+id/tabItem3" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="@string/tab_text_3">

        </android.support.design.widget.tabitem>
</android.support.design.widget.tabitem>
</android.support.design.widget.tabitem>
</android.support.design.widget.tablayout>
    </android.support.design.widget.appbarlayout>

    <android.support.v4.view.viewpager 
android:id="@+id/container" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.design.widget.floatingactionbutton 
android:id="@+id/fab" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="end|bottom" 
android:layout_margin="@dimen/fab_margin" 
app:srccompat="@android:drawable/ic_dialog_email">

</android.support.design.widget.floatingactionbutton>
</android.support.v4.view.viewpager>
</android.support.design.widget.coordinatorlayout>

Полный текст fragment_blank_fragment1.xml

<framelayout 
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" 
tools:context="ru.maxfad.myfragments.BlankFragment3">

    <relativelayout 
android:layout_width="match_parent" 
android:layout_height="match_parent">

        <textview 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_alignparenttop="true" 
android:layout_centerhorizontal="true" 
android:layout_margintop="220dp" 
android:text="@string/hello_blank_fragment" 
android:id="@+id/textView"></textview>

        <button android:id="@+id/button" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_below="@+id/textView" 
android:layout_centerhorizontal="true" 
android:layout_margintop="55dp" 
android:text="Button"></button>
    </relativelayout>

</framelayout>

Полный текст fragment_blank_fragment2.xml

<framelayout 
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" 
tools:context="ru.maxfad.myfragments.BlankFragment2">

    <relativelayout 
android:layout_width="match_parent" 
android:layout_height="match_parent">

        <textview 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_alignparenttop="true" 
android:layout_centerhorizontal="true" 
android:layout_margintop="181dp" 
android:text="@string/hello_blank_fragment"></textview>
    </relativelayout>

</framelayout>

Полный текст fragment_blank_fragment3.xml

<framelayout 
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" 
tools:context="ru.maxfad.myfragments.BlankFragment1">

    <relativelayout 
android:layout_width="match_parent" 
android:layout_height="match_parent">

        <textview 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_alignparentstart="true" 
android:layout_alignparenttop="true" 
android:layout_marginstart="114dp" 
android:layout_margintop="113dp" 
android:text="@string/hello_blank_fragment"></textview>
    </relativelayout>
</framelayout>

Полный текст MainActivity.java

package ru.maxfad.myfragments;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    /**
     * The {@link android.support.v4.view.PagerAdapter} that will provide
     * fragments for each of the sections. We use a
     * {@link FragmentPagerAdapter} derivative, which will keep every
     * loaded fragment in memory. If this becomes too memory intensive, it
     * may be best to switch to a
     * {@link android.support.v4.app.FragmentStatePagerAdapter}.
     */
    private SectionsPagerAdapter mSectionsPagerAdapter;

    /**
     * The {@link ViewPager} that will host the section contents.
     */
    private ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        // Create the adapter that will return a fragment for each of the three
        // primary sections of the activity.
        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

        // Set up the ViewPager with the sections adapter.
        mViewPager = (ViewPager) findViewById(R.id.container);
        mViewPager.setAdapter(mSectionsPagerAdapter);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);

        mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    /**
     * A placeholder fragment containing a simple view.
     */


    /**
     * A {@link FragmentPagerAdapter} that returns a fragment corresponding to
     * one of the sections/tabs/pages.
     */
    public class SectionsPagerAdapter extends FragmentPagerAdapter {

        public SectionsPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            // getItem is called to instantiate the fragment for the given page.
            // Return a PlaceholderFragment (defined as a static inner class below).
            //return PlaceholderFragment.newInstance(position + 1);

        switch (position){

            case 0:
                BlankFragment1 bf1 = new BlankFragment1();
                return  bf1;
            case 1:
                BlankFragment2 bf2 = new BlankFragment2();
                return bf2;
            case 2:
                BlankFragment3 bf3 = new BlankFragment3();
                return bf3;
                default:
                    return null;
        }




        }

        @Override
        public int getCount() {
            // Show 3 total pages.
            return 3;
        }
    }
}

Полный текст BlankFragment1.java

package ru.maxfad.myfragments;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class BlankFragment1 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_blank_fragment1, container, false);
    }


}

Полный текст BlankFragment2.java

package ru.maxfad.myfragments;

import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;



public class BlankFragment2 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_blank_fragment2, container, false);
    }


}

Полный текст BlankFragment3.java

package ru.maxfad.myfragments;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;



public class BlankFragment3 extends Fragment {


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_blank_fragment3, container, false);
    }


}

Смотрите новое видео - Создание фрагментов и использование вкладок для Android:

Рекомендуем смотреть видео в полноэкранном режиме, в настойках качества выбирайте 1080 HD, не забывайте подписываться на канал в YouTube, там Вы найдете много интересного видео, которое выходит достаточно часто. Приятного просмотра!




Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Связанные статьи

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok