Use the open-source framework PagerSlidingTabStrip in Android to implement navigation titles.

Use the open-source framework PagerSlidingTabStrip in Android to implement navigation titles.

This open source framework official site address: https://github.com/astuetz/PagerSlidingTabStrip

It can be understood as the interactive page indicator control used in combination with ViewPager.

Let's not talk much about it. First, go:

In order to demonstrate the difference between pstsIndicatorHeight and pstsUnderlineHeight, different settings are set to differentiate the effect (actionbar removal is done ). You can intuitively see that compared to the previous use of ViewPager, ViewPager, and Fragement nesting, this demonstration of PagerSlidingTabStrip provides a more brilliant switching effect for page navigation, next we will introduce the use of PagerSlidingTabStrip.

Pre-related blog recommendations:

Fragment and ViewPager in Android: How to Use ViewPager in Android to implement screen page switching and page carousel effect I. Basic Attributes

· ApstsIndicatorColor // Color of the sliding indicator slider Color

· PstsUnderlineColor // Color of the full-width line onthe bottom of the view Slider's full-width line Color

· PstsDividerColor // Color of the dividers betweentabs split line Color of each label

· PstsIndicatorHeight // Height of the sliding indicator slider Height

· PstsUnderlineHeight // Height of the full-width line onthe bottom of the view Slider's full-width line Height

· PstsDividerPadding // Top and bottom padding of thedividers fill width at the bottom and Top of the split line

· PstsTabPaddingLeftRight // Left and right padding of eachtab Left and right fill width

· Pstsscroloffset // Scroll offset of the selectedtab

· PstsTabBackground // Background drawable of each tab, shocould be a StateListDrawable Background of each label, it should be a StateListDrawable

· PstsShouldExpand // If set to true, each tab isgiven the same weight, default false If set to true, each label is the same control, evenly split the entire screen, the default is false

· PstsTextAllCaps // If true, all tab titles will beupper case, default true If true, all tags are uppercase letters, default is true

All attributes have their own getter and setter methods to change them at any time.

Ii. code structure of this demo

3. Set to remove ActionBar

Set in res/values/styles. xml

<Style name = "AppTheme" parent = "Theme. AppCompat. Light. NoActionBar">

The xml file is as follows:

1 <resources>2     <!-- Base application theme. -->3     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">4         <!-- Customize your theme here. -->5         <item name="colorPrimary">@color/colorPrimary</item>6         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>7         <item name="colorAccent">@color/colorAccent</item>8     </style>9 </resources>

4. import dependency packages

Use AndroidStudio2.2. Add the following code directly under dependencies in build. gradle:

1 compile 'com.astuetz:pagerslidingtabstrip:1.0.1'

5. layout File

Some color reference settings are made before the layout. The res/values/colors. xml file is as follows:

 1 <?xml version="1.0" encoding="utf-8"?> 2 <resources> 3     <color name="colorPrimary">#3F51B5</color> 4     <color name="colorPrimaryDark">#303F9F</color> 5     <color name="colorAccent">#FF4081</color> 6  7     <color name="color_theme">#489cfa</color> 8     <color name="transparent">#00000000</color> 9     <color name="yellow">#fc9630</color>10 </resources>

(1) activity_main.xml

PagerSlidingTabStrip is used together with ViewPager. This time, ViewPager is placed under PagerSlidingTabStrip. The specific layout file is as follows (you can refer to the attribute explanation in the previous article to compare the attributes you do not understand. Pay attention to adding an app namespace ):

 1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     xmlns:tools="http://schemas.android.com/tools" 4     xmlns:app="http://schemas.android.com/apk/res-auto" 5     android:id="@+id/activity_main" 6     android:layout_width="match_parent" 7     android:layout_height="match_parent" 8     tools:context="com.mly.panhouye.pagerslidingtabstripdemo.MainActivity"> 9     <com.astuetz.PagerSlidingTabStrip10         android:id="@+id/pst"11         android:layout_width="match_parent"12         android:layout_height="48dip"13         android:background="@color/color_theme"14         app:pstsShouldExpand="true"15         app:pstsTabBackground="@color/transparent"16         app:pstsIndicatorHeight="5dp"17         app:pstsIndicatorColor="@color/yellow"18         app:pstsTextAllCaps="false"19         app:pstsUnderlineHeight="15dp"20     />21     <android.support.v4.view.ViewPager22         android:id="@+id/pager"23         android:layout_width="match_parent"24         android:layout_height="match_parent"25         android:layout_below="@+id/pst"/>26 </RelativeLayout>

(2) Corresponding Fragment layout File

This demonstration only demonstrates the simple effect. For fragment_pan, fragment_hou, and fragment_ye, each layout file only has different texts. Here, only one fragment_pan.xml is demonstrated:

1 <? Xml version = "1.0" encoding = "UTF-8"?> 2 <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" 3 android: orientation = "vertical" android: layout_width = "match_parent" 4 android: layout_height = "match_parent"> 5 <TextView 6 android: layout_width = "match_parent" 7 android: layout_height = "match_parent" 8 android: gravity = "center" 9 android: text = "pan" 10 android: textSize = "100sp" 11/> 12 </LinearLayout>

(3) Each fragment is used to fill in the corresponding fragment class to demonstrate the fragmen class HouFragment. java corresponding to the ragment_pan.xml layout:

 1 package com.mly.panhouye.pagerslidingtabstripdemo; 2  3 import android.os.Bundle; 4 import android.support.v4.app.Fragment; 5 import android.view.LayoutInflater; 6 import android.view.View; 7 import android.view.ViewGroup; 8 /** 9  * Created by panchengjia on 2017/1/15 0015.10  */11 public class HouFragment extends Fragment {12     @Override13     public View onCreateView(LayoutInflater inflater, ViewGroup container,  Bundle savedInstanceState) {14         View view =inflater.inflate(R.layout.fragment_hou,null);15         return view;16     }17 }

6. Java implementation code

1 package com. mly. panhouye. pagerslidingtabstripdemo; 2 3 import android. OS. bundle; 4 import android. support. v4.app. fragment; 5 import android. support. v4.app. fragmentManager; 6 import android. support. v4.app. fragmentPagerAdapter; 7 import android. support. v4.view. viewPager; 8 import android. support. v7.app. appCompatActivity; 9 import com. astuetz. pagerSlidingTabStrip; 10 import java. util. arrayList; 11 12 public class MainActivity extends AppCompatActivity {13 PagerSlidingTabStrip pst; 14 ViewPager viewPager; 15 ArrayList <Fragment> fragments; 16 // declare pst Title 17 String [] titles = {"pan", "Hou", "Ye"}; 18 @ Override19 protected void onCreate (Bundle savedInstanceState) {20 super. onCreate (savedInstanceState); 21 setContentView (R. layout. activity_main); 22 pst = (PagerSlidingTabStrip) findViewById (R. id. pst); 23 viewPager = (ViewPager) findViewById (R. id. pager); 24 25 fragments = new ArrayList <> (); 26 HouFragment houFragment = new HouFragment (); 27 PanFragment panFragment = new PanFragment (); 28 YeFragment yeFragment = new YeFragment (); 29 // pay attention to the order of 30 fragments when adding fragment to the set. add (panFragment); 31 fragments. add (houFragment); 32 fragments. add (yeFragment); 33 FragmentManager fragmentManager = getSupportFragmentManager (); 34 viewPager. setAdapter (new MyPagerAdapter (fragmentManager, titles, fragments); 35 viewPager. setCurrentItem (0); 36 // when the onPagerChangeListener callback of ViewPager, PagerSlidingTabStrip also changes 37 // The specific practices have been encapsulated into PagerSlidingTabStrip. in the setViewPager () method, the following 38 pst is called for use. setViewPager (viewPager); 39 pst. setTextSize (30); 40} 41 42/** 43 * Custom adapter 44 */45 class MyPagerAdapter extends FragmentPagerAdapter {46 private String [] titles; 47 ArrayList <Fragment> fragments; 48 // define the construction method as needed to facilitate external calls of 49 public MyPagerAdapter (FragmentManager fm, String [] titles, ArrayList <Fragment> fragments) {50 super (fm); 51 this. titles = titles; 52 this. fragments = fragments; 53} 54 // set the title of each page 55 @ Override56 public CharSequence getPageTitle (int position) {57 return titles [position]; 58} 59 // set the fragment60 @ Override61 public Fragment getItem (int position) {62 return fragments for each page. get (position); 63} 64 // Number of fragment 65 @ Override66 public int getCount () {67 return fragments. size (); 68} 69} 70}

This is only a demonstration of the most basic use of PagerSlidingTabStrip. You can try to use it to achieve better switching results.