Android base Control--tablayout use, imitation iqiyi navigation bar

Learn, learn, and apply the basic controls to the actual combat effect

Tablayout is one of Google's new material design controls, tablayout Use must combine the use of viewpager and fragment, if you are unfamiliar with the Viewpager students, please consult the information, very simple. Let's take a look at the original effect of the Iqiyi navigation bar

What we're going to achieve today, the effect on the real machine will be closer to the original.

Since Tablayout is one of the controls in material design, integrating it requires the addition of a dependent library in the Gradle file, because my compilesdkversion is 24, the version with 24 does not prompt for errors

I do not know is my computer project too many things, or material design originally very large library, compile time spent 8 minutes

Tablayout need to be used with Viewpager, so place a viewpager under Tablayout

Since you have used tablayout custom attributes, remember to import the resources

Here is an introduction to the parameters of the above tablayout

• Tabindicatorheight:tab the height of the indicator subscript
• Display mode for Tabgravity:tab content
• Tabmode:tab's display mode
  
  • Fixed (default): Stationary, labels are often squeezed and cannot be slid
  • Scrollable: Scrollable, scrollable when more labels are available
• Color of the Tabindicatorcolor:tab indicator subscript
• Tabselectedtextcolor:tab the selected color of the text
• Tabtextcolor:tab the color of text

In fact, these properties can be set in code, but for code readability and aesthetics, so the property settings are implemented in the layout file

Locate the corresponding control and add the corresponding tab and fragment

It can be found that the Create tab is generated by the tablayout of the Declaration, and here we are using the advanced for loop traversal

Then through the Tablayout Setupwithviewpager () method binding a Viewpager, remember Viewpager is to have something, so need a Adapter,viewpager use and the ListView is similar, If the Viewpager do not understand the classmate, please learn Viewpager before you come to understand

Below we can create a number of different fragment to bind to our tags, here to facilitate demonstration, so only create the same fragment

Here's a way to note: You need to rewrite the Getpagetitle () method to add text to the Tablayout tab, otherwise it will not show the text, which is why we need to pass in the construction method list< string> strings, The rest is similar to the adapter of the ListView

Partial source Download

The course ends here, if a friend interested in the underlying control can follow my blog's base control series

Android base Control--tablayout use, imitation iqiyi navigation bar