Статьи

Скользящие вкладки на пейджер Android-треугольника

Март 21, 2018

TriangleTabs является расширением  PagerSlidingTabStrip

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

Android треугольник вкладки видео 

Скриншот вкладки «Треугольник Android» 
Настроить
 PageSlidingTabStrip
Шаг 1.  Импортируйте библиотеку PageSlidingTabStrip в AndroidStudio.
Шаг 2:  Давайте добавим новый атрибут для треугольных вкладок в attrs.xml (project -> res -> values). Этот атрибут позволит разработчику включать / отключать треугольные вкладки.
1 <attr name="pstsTriangleIndicator" format="boolean"/>
Шаг 3:  Нам нужно изменить код Java для исходного кода Triangle Tabs.Goto и открыть файл PagerSlidingTabStrip.java
Шаг 4.  Объявите логическую переменную над конструктором для атрибута pstsTriangleIndicator.
private boolean triangleIndicator = false;
Шаг 5:  Получите атрибут pstsTriangleIndicator, напишите следующую строку в конструкторе
triangleIndicator = a.getBoolean(R.styleable.PagerSlidingTabStrip_pstsTriangleIndicator, triangleIndicator);
Шаг 6:  Теперь пришло время нарисовать вкладку треугольника, перейти к методу onDraw и добавить следующий код.
Оригинальный код 
canvas.drawRect(lineLeft, height - indicatorHeight, lineRight, height, rectPaint);
Новый код , условный код для треугольных вкладок
if (triangleIndicator) {
      Rect r = new Rect();
      int left = (int) lineLeft + (int) (((lineRight - lineLeft) / 2) - (indicatorHeight / 2)) - 20;
      int top = height - indicatorHeight;
      int right = (int) left + indicatorHeight + 30;
      int bottom = height;
      r.set(left, top, right, bottom);
      Path path = getEquilateralTriangle(r);
      canvas.drawPath(path, rectPaint);
} 
else {
      canvas.drawRect(lineLeft, height - indicatorHeight, lineRight, height, rectPaint);
}
Шаг 7:  Это последний шаг, объявите функцию getEquatellTriangle (). Эта функция имеет код для треугольника.
public Path getEquilateralTriangle(Rect bounds) {
        Point startPoint = null, p2 = null, p3 = null;
        int width = bounds.right - bounds.left;
        int height = bounds.bottom - bounds.top;

        startPoint = new Point(bounds.left, bounds.bottom);

        p2 = new Point(startPoint.x + width, startPoint.y);
        p3 = new Point(startPoint.x + (width / 2), startPoint.y - height);

        Path path = new Path();
        path.moveTo(startPoint.x, startPoint.y);
        path.lineTo(p2.x, p2.y);
        path.lineTo(p3.x, p3.y);

        return path;
    }
использование
Шаг 1:  Включите настраиваемую библиотеку в качестве проекта локальной библиотеки, или вы можете скопировать PagerSlidingTabStrip.java, attrs.xml и background_tab.xml в соответствующие папки вашего основного проекта.
Шаг 2.  Включите виджет PagerSlidingTabStrip в свой макет. Это обычно должно быть помещено выше ViewPager, который это представляет. Заметил атрибут pstsTriangleIndicator
<com.kpbird.triangletabs.PagerSlidingTabStrip
        android:id="@+id/activity_main_pagertabstrip"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        custom:pstsTextAllCaps="true"
        custom:pstsIndicatorColor="#FF3F9FE0"
        custom:pstsDividerColor="#FF3F9FE0"
        custom:pstsUnderlineColor="#FF3F9FE0"
        custom:pstsTriangleIndicator="true"
        custom:pstsShouldExpand="true"
        custom:pstsIndicatorHeight="15dp"
/>
Шаг 3:  В вашем методе onCreate (или onCreateView для фрагмента) привяжите виджет к ViewPager.
// Declar variable 
private ViewPager pager;
private PagerSlidingTabStrip pagertab;
private MyPageAdapter pageAdapter;

// Inside onCreate
pager = (ViewPager) findViewById(R.id.activity_main_pager);
pagertab = (PagerSlidingTabStrip) findViewById(R.id.activity_main_pagertabstrip);
List<fragment> fragments = getFragments();
pageAdapter = new MyPageAdapter(getSupportFragmentManager(), fragments);
pager.setAdapter(pageAdapter);
pagertab.setViewPager(pager);</fragment>
Шаг 4:  Скомпилируйте и запустите приложение

31
Share: