вторник, 11 августа 2015 г.

TabLayout: з бібліотеки підтримки Android

tab_layout_demo_app_logo
Сьогодні поговоримо про TabLayout.
TabLayout забезпечує можливість створення горизонтальних вкладок.

tab_layout_demo_app
КРОК 1: ПІДКЛЮЧЕННЯ БІБЛІОТЕКИ ДО ПРОЕКТУ
Перш за все, ми маємо додати бібліотеку до файлу gradle для нашого проекту.
  1. dependencies {
  2. compile 'com.android.support:design:22.2.0'
  3. }
dependencies {
    compile 'com.android.support:design:22.2.0'
}
КРОК 2: ДОДАЄМО КОЛЬОРИ ТА КОНСТАНТНИЙ ТЕКСТ В ПРОЕКТ
У цьому проекту будуть статичні кольори та рядки. Найкращий спосіб зберігати ці дані в файлах strings.xml та colors.xml.
Для початку створимо colors.xml в каталозі res/values/. Вихідний код файлу зображено нижче:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3. <color name="primaryColor">#2196F3</color>
  4. <color name="primaryColorDark">#1976D2</color>
  5. <color name="cyan">#00BCD4</color>
  6. <color name="teal">#009688</color>
  7. <color name="amber">#FFC107</color>
  8. </resources>
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primaryColor">#2196F3</color>
    <color name="primaryColorDark">#1976D2</color>
    <color name="cyan">#00BCD4</color>
    <color name="teal">#009688</color>
    <color name="amber">#FFC107</color>
</resources>
Далі оновимо файл strings.xml, що знаходиться в каталозі /res/values/. Додамо 3 текстові константи.
  1. <string name="first">First</string>
  2. <string name="second">Second</string>
  3. <string name="third">Third</string>
<string name="first">First</string>
<string name="second">Second</string>
<string name="third">Third</string>
КРОК 3: ОНОВИМО ТЕМУ ПРОЕКТУ
Зараз ми оновимо тему всього додатку. Ви можете знайти тему в файлі styles.xml, що знаходиться за адресою /res/values/.
  1. <resources>
  2. <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  3. <item name="colorPrimary">@color/primaryColor</item>
  4. <item name="colorPrimaryDark">@color/primaryColorDark</item>
  5. <item name="colorAccent">@android:color/white</item>
  6. </style>
  7. </resources>
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryColorDark</item>
        <item name="colorAccent">@android:color/white</item>
    </style>
</resources>
КРОК 4: ОНОВЛЕННЯ LAYOUT ДЛЯ ACTIVITY
Activity в додатку показує toolbar, вклаку tab та fragment. Layout викликає activity_main.xml, що лежить в каталозі res/layouts/.
  1. <android.support.design.widget.CoordinatorLayout
  2. xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent">
  7. <android.support.design.widget.AppBarLayout
  8. android:layout_width="match_parent"
  9. android:layout_height="wrap_content"
  10. android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  12. <android.support.v7.widget.Toolbar
  13. android:id="@+id/toolbar"
  14. android:layout_width="match_parent"
  15. android:layout_height="?attr/actionBarSize"
  16. android:background="?attr/colorPrimary"
  17. app:layout_scrollFlags="scroll|enterAlways"
  18. app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
  20. <android.support.design.widget.TabLayout
  21. android:id="@+id/tabLayout"
  22. android:layout_width="match_parent"
  23. android:layout_height="wrap_content" />
  25. </android.support.design.widget.AppBarLayout>
  26. <android.support.v4.view.ViewPager
  27. android:id="@+id/viewPager"
  28. android:layout_width="match_parent"
  29. android:layout_height="match_parent"
  30. app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  31. </android.support.design.widget.CoordinatorLayout>
<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.ActionBar">

        <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"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Також ви можете мати різний стиль для ваших вкладок. Для цього ви можете змінити властивості tabMode та tabGravity.
tab_properties
КРОК 5: ОНОВЛЕННЯ ACTIVITY
Ми маємо оновити наше activity та створити необхідні вкладки(tabs). Для кожної вкладки ми створимо фрагмент. Будемо використовувати майже той самий фрагмент. Кожен фрагмент буде містити в собі різний колір та текст. Вихідний код актівіті.
  1. public class MainActivity extends AppCompatActivity {
  3. @Override
  4. protected void onCreate(Bundle savedInstanceState) {
  5. super.onCreate(savedInstanceState);
  6. setContentView(R.layout.activity_main);
  8. Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
  9. TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
  10. ViewPager mViewPager = (ViewPager) findViewById(R.id.viewPager);
  12. setSupportActionBar(mToolbar);
  13. setupViewPager(mViewPager);
  14. mTabLayout.setupWithViewPager(mViewPager);
  15. }
  17. private void setupViewPager(ViewPager viewPager) {
  18. ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
  19. adapter.add(getResources().getString(R.string.first), getResources().getColor(R.color.cyan));
  20. adapter.add(getResources().getString(R.string.second), getResources().getColor(R.color.teal));
  21. adapter.add(getResources().getString(R.string.third), getResources().getColor(R.color.amber));
  22. viewPager.setAdapter(adapter);
  23. }
  24. }
public class MainActivity extends AppCompatActivity {

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

        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
        TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
        ViewPager mViewPager = (ViewPager) findViewById(R.id.viewPager);

        setSupportActionBar(mToolbar);
        setupViewPager(mViewPager);
        mTabLayout.setupWithViewPager(mViewPager);
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.add(getResources().getString(R.string.first), getResources().getColor(R.color.cyan));
        adapter.add(getResources().getString(R.string.second), getResources().getColor(R.color.teal));
        adapter.add(getResources().getString(R.string.third), getResources().getColor(R.color.amber));
        viewPager.setAdapter(adapter);
    }
}
КРОК 6: СТВОРЮЄМО АДАПТЕР ДЛЯ ФРАГМЕНТА
Необхідно створити адаптер для додатку. Цей адаптер буде зберігати інформацію про фрагменти та їх заголовки.
  1. static class ViewPagerAdapter extends FragmentPagerAdapter {
  2. private List<fragment> mFragmentList = new ArrayList<>();
  3. private List<string> mFragmentTitleList = new ArrayList<>();
  5. public ViewPagerAdapter(FragmentManager manager) {
  6. super(manager);
  7. }
  9. @Override
  10. public Fragment getItem(int position) {
  11. return mFragmentList.get(position);
  12. }
  14. @Override
  15. public int getCount() {
  16. return mFragmentList.size();
  17. }
  19. public void add(String title, int color) {
  20. Fragment fragment = DummyFragment.newInstance(title, color);
  21. mFragmentList.add(fragment);
  22. mFragmentTitleList.add(title);
  23. }
  25. @Override
  26. public CharSequence getPageTitle(int position) {
  27. return mFragmentTitleList.get(position);
  28. }
  29. }
  30. </string></fragment>
static class ViewPagerAdapter extends FragmentPagerAdapter {
    private List<fragment> mFragmentList = new ArrayList<>();
    private List<string> mFragmentTitleList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void add(String title, int color) {
        Fragment fragment = DummyFragment.newInstance(title, color);
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }
}
</string></fragment>
КРОК 7: ДОДАЄМО ШАР ДО ФРАГМЕНТУADD LAYOUT FOR FRAGMENT
Створюємо простий шар для фрагменту, який буде змінювати колір та текст.
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:orientation="vertical"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. android:id="@+id/frameLayout">
  9. <TextView
  10. android:id="@+id/textView"
  11. android:text="item"
  12. android:textSize="36sp"
  13. android:layout_width="wrap_content"
  14. android:layout_height="wrap_content"
  15. android:layout_gravity="center" />
  16. </FrameLayout>
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/frameLayout">

    <TextView
        android:id="@+id/textView"
        android:text="item"
        android:textSize="36sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />
</FrameLayout>
КРОК 8: ОНОВЛЕННЯ FRAGMENT
Нарешті ми оновлюємо фрагмент .
  1. public static class DummyFragment extends Fragment {
  2. public static final String COLOR = "color";
  3. public static final String TEXT = "text";
  5. public static Fragment newInstance(String text, int color) {
  6. DummyFragment f = new DummyFragment();
  7. Bundle args = new Bundle();
  8. args.putInt(COLOR, color);
  9. args.putString(TEXT, text);
  10. f.setArguments(args);
  11. return f;
  12. }
  14. @Override
  15. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  16. View view = inflater.inflate(R.layout.fragment, container, false);
  17. FrameLayout frameLayout = (FrameLayout) view.findViewById(R.id.frameLayout);
  18. TextView textView = (TextView) view.findViewById(R.id.textView);
  19. frameLayout.setBackgroundColor(getArguments().getInt(COLOR));
  20. textView.setText(getArguments().getString(TEXT));
  21. return view;
  22. }
  23. }
public static class DummyFragment extends Fragment {
    public static final String COLOR = "color";
    public static final String TEXT = "text";

    public static Fragment newInstance(String text, int color) {
        DummyFragment f = new DummyFragment();
        Bundle args = new Bundle();
        args.putInt(COLOR, color);
        args.putString(TEXT, text);
        f.setArguments(args);
        return f;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment, container, false);
        FrameLayout frameLayout = (FrameLayout) view.findViewById(R.id.frameLayout);
        TextView textView = (TextView) view.findViewById(R.id.textView);
        frameLayout.setBackgroundColor(getArguments().getInt(COLOR));
        textView.setText(getArguments().getString(TEXT));
        return view;
    }
}
Після запуску проекту у вас буде ось такий додаток.
tab layout demo
Цей проект можна переглянути також на github.
Автор: на
Ярлыки: , , , , , , , ,

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)