Когда занимаешься в одиночку проектированием своего приложения, то на свои плечи приходится взгромождать обязанности сразу нескольких людей. Ты в одном лице и архитектор и дизайнер и программист и сеошник…
В начале, когда мир Android разработки кажется особо огромным и ты не знаешь что лучше применить в своих первых «Hello world», то можно верстать хоть в одном активити весь интерфейс. Позже, с опытом приходит понимание, что дизайн в сфере мобильной разработки всё таки стоит продумывать заранее, перед открытием Android Studio. В первую очередь он должен быть максимально удобным и приятным для пользователя, а уже потом стоит задуматься о расширяемости и актуальности инструментов.
В этой статье, как Вы уже поняли из названия, мы рассмотрим такой удобный и 
полезный (как для разработчика, так и для конечного пользователя) виджет, как TabLayout. Взглянув на скриншот, Вы сразу поймёте о чём я говорю. Подавляющее большинство современных приложений используют TabLayout в своём интерфейсе. Данный виджет позволяет добавить в приложение «табы» для переключения между фрагментами. Виджет является наследником HorizontalScrollView и располагается в библиотеке «com.android.support:design».
Давайте создадим проект в Android Studio и подключим в файле build.gradle библиотеку «com.android.support:design». Для этого в конец файла в секцию dependencies добавим compile ‘com.android.support:design:23.0.1’
TabLayout располагается в области, где обычно располагается ActionBar, поэтому нам необходимо заменить тему на NoActionBar, и создать макет экрана, в котором расположим TabLayout вместе с Toolbar внутри AppBarLayout. Стоит отметить, что реализация TabLayout великолепно работает в связке с ViewPager. Мы можем перелистывать вкладки как нажимая на табы вверху, так и листая экран. Классический пример на скриншоте.Далее создаём макет главного активити
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:background="?attr/colorAccent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.CoordinatorLayout>
1. Создать класс-потомок PagerAdapter. Создаём класс ViewPagerAdapter, наследуем его от FragmentStatePagerAdapter и реализуем необходимые методы getItem и getCount. Также для правильной работы нам необходимо переопределить метод getPageTitle, без этого у наших вкладок не будет названий. Ещё добавим в класс метод addFragment, через который будем добавлять фрагменты во ViewPager.
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import java.util.ArrayList;
import java.util.List;
public class ViewPagerAdapter extends FragmentStatePagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
@Override
public int getCount() {
return mFragmentList.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
public void addFragment(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
}
2. Вторым шагом необходимо настроить созданный выше адаптер и назначить его адаптером нашего ViewPager в методе public void setAdapter(PagerAdapter adapter). Для настройки нам потребуется какой то фрагмент, давайте создадим простенький SimpleFragment, макет для него и добавим несколько экземпляров в адаптер.
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class SimpleFragment extends Fragment {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_simple, container, false);
}
}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e5e5e5">
<ImageView
android:id="@+id/imageView1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="148dp"
android:src="@mipmap/ic_launcher" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/imageView1"
android:gravity="center"
android:text="Fragment"
android:textSize="30sp" />
</RelativeLayout>
3. Наконец третьим шагом в MainActivity можем простым вызовом методаpublic void setupWithViewPager(@Nullable final ViewPager viewPager) связать весь наш код в рабочую структуру и запустить проект для того что бы убедиться в его работоспособности!
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tablayout);
tabLayout.setupWithViewPager(viewPager);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new SimpleFragment(), "People");
adapter.addFragment(new SimpleFragment(), "Group");
adapter.addFragment(new SimpleFragment(), "Calls");
viewPager.setAdapter(adapter);
}
}
Добрый день. Добавьте пожалуйста ссылку на исходник проекта. Заранее спасибо.
Обновите ссылку на файлы
Ты реально настолько долбаеб, чтобы написать в статье слово добавим и не показать, как ты добавил? Красавчик, веди блоги дальше.
Чуть ниже пример кода с активити, в котором видно что и как добавляется. И вам добра, Егор Прокофьев=)
Как например на первой вкладке запустить новый класс фрагмента вместо new SimpleFragment()?
1.Только версию дизайна нужно указывать 28.0.1.
2.у меня данный проект не запустился вовсе на гаджете
Здравствуйте, Дмитрий. Спасибо, на выходных надо бы исправить статью, а то я совсем углубился в свои android проекты и забросил сайт =(