Introduction:

Navigation function is almost one of the basic functions that all apps have. Android system provides the combination of TabLayout+ViewPager to achieve this function. When I first started using it again, I found that the combination was unbeatable, but… There are some UI designers who feel that the underline style of the native TabLayout doesn’t appeal to users. For example, underline should be the same width as text, underline should be the same width as image, etc. TabLayout was so helpless in the face of these requirements that the programmer was forced to move bricks.

WeTabLayout inherits from the HorizontalScrollView, which is designed to slide left and right when multiple tabs are present and move the selected Tab to the middle of the screen as it slides. Its direct parent is a LinearLayout, and then setting the Tab to fill the parent layout, or horizontal free arrangement is very convenient. The underline is drawn by Drawable, so you can change the underline style, width, image, Shape, and so on. The control has been used in the application, so far it is quite stable, and will be used to replace the native TabLayout.

At the end of the code link, you can download the use of ~

Why useWeTabLayout?

  1. To achieve theTabLayoutBasic function of.
  2. Extend the inViewPager+WeTabLayoutThere are multipleTabWhen,ViewPagerSwiping right or left moves the currently selected Tab to the center of the screen by default.
  3. Fully customIndicatorThe pointer, in a more general way, is the underscore. Its width, height, color, style, picture all support.
  4. Switch controlIndicatorWhether the width of the indicator followsTabThe text displayed is the same width.
  5. TabViewSupport custom layout or use default layout. itsTabViewPosition in the parent layout, as well as eachTabViewThe spacing between, fully custom, is also optionalTabViewFill the parent layout.
  6. The most important thingWeTabLayoutThe source code is simple, can be customized.

Note:

  1. In order to timely find and correct the problems of the library, we now invite you to join the wechat group, three people will have my teacher, Android technology is endless.
  2. When using a custom Tab layout, set the padding value, not the propertywtl_tab_padding_leftandwtl_tab_padding_rightValue conflict of.
  3. No default setting is requiredTabViewCustom layout, that is, can not givemTabLayoutProperty. If a custom layout is set, the background color of the custom layout is ignored.

If you have any questions, you can join QQ group 684891631 and then turn to wechat group ~

Update log:

  • The 2020-04-02:

    Updated TabView support for left and right padding. You can set the left and right padding values at will. The position of the underline is not distorted.

Two simple use:

2.1 XMLLayout preparation:
  <WeTabLayout
        android:id="@+id/dil_tablayout"
        android:layout_width="match_parent"
        android:layout_height="56dp" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="56dp" />// Examples of custom properties.<WeTabLayout
        android:id="@+id/dil_tablayout"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        app:wtl_default_text_color="@color/colorPrimary"
        app:wtl_indicator_margin_bottom="10dp"
        app:wtl_indicator_width_equal_title="true"
        app:wtl_selected_text_color="@color/colorAccent"
        app:wtl_indicator_color="@color/colorAccent"
        app:wtl_selected_text_size="16sp"
        app:wtl_default_text_size="12sp"
        app:wtl_indicator_height="1dp"
        app:wtl_indicator_width="50dp"
        app:wtl_selected_text_bold="true"
        app:wtl_tab_padding_left="30dp"
        app:wtl_tab_padding_right="16dp"
        app:wtl_indicator_corner_radius="4dp"
        app:wtl_tab_fill_container="false" />   
Copy the code

Specific field explanation:

 <declare-styleable name="WeTabLayout">
        <! -- indicator -->// Color of the underline.<attr name="wtl_indicator_color" format="color" />// Height of the underline.<attr name="wtl_indicator_height" format="dimension" />// The width of the underline.<attr name="wtl_indicator_width" format="dimension" />// Underline the distance from bottom Margin.<attr name="wtl_indicator_margin_bottom" format="dimension" />// Underline rounded corners.<attr name="wtl_indicator_corner_radius" format="dimension" />// Whether the underline is the same width as the text. Is true.<attr name="wtl_indicator_width_equal_title" format="boolean" />// The text size when Tab is selected.<attr name="wtl_selected_text_size" format="dimension" />//Tab default text size.<attr name="wtl_default_text_size" format="dimension" />// The color of the text when Tab is selected.<attr name="wtl_selected_text_color" format="color" />//Tab default text size.<attr name="wtl_default_text_color" format="color" />// Whether to bold Tab when selected true Yes.<attr name="wtl_selected_text_bold" format="boolean" />// Whether Tab fills the parent View, true yes.<attr name="wtl_tab_fill_container" format="boolean" />//Tab left padding.<attr name="wtl_tab_padding_left" format="dimension" />// right padding of Tab.<attr name="wtl_tab_padding_right" format="dimension" />
    </declare-styleable>
Copy the code

Attribute usage Note:

  1. wtl_indicator_width_equal_titlewithwtl_indicator_widthAt the same time, use the former as the main parameter.
2.2 Code Settings:
//Step 1: Find the object
WeTabLayout tabLayout = findViewById(R.id.dil_tablayout);
ViewPager viewPager = findViewById(R.id.viewpager);
String[] titles = {"Mobile"."Four words."."Little Smart"."That's a long movie."."NBA"."Film"."Trivia"."Basketball"};
// An important step.
tabLayout.attachToViewPager(viewPager, titles);
Copy the code

Note: When you call tabLayout.setCurrentTab() to set the Tab selected by default, you must set the Adapter in ViewPager.

2.4 Attribute Application Demo:
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final WeTabLayout tabLayout = findViewById(R.id.dil_tablayout);
        ViewPager viewPager = findViewById(R.id.viewpager);
        final String[] titles = {"Mobile"."Four words."."Little Smart"."That's a long movie."."NBA"."Film"."Trivia"."Basketball"};
        findViewById(R.id.selected_one).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tabLayout.setCurrentTab(3); }}); tabLayout.setTabLayoutIds(R.layout.item_sliding_tab_layout); tabLayout.setIndicatorBottomMargin(10);
        tabLayout.setIndicatorEqualTabText(true);
        tabLayout.setTabFillContainer(false);
        tabLayout.setCurrentTab(2);
        tabLayout.addHandleTabCallBack(new IHandleTab() {
            @Override
            public void addTab(View tab, int index) {
                // This method is called when the TabView is created.}}); tabLayout.setTabSelectedListener(new WeTabSelectedListener() {
            @Override
            public void onTabSelected(View currentTab, int position) {
                //TabView is called when it is selected.
            }
            @Override
            public void onPreTabSelected(View preTab, int prePosition) {
                 // The last selected TabView.}}); viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return CeshiFragment.newInstance();
            }

            @Override
            public int getCount(a) {
                returntitles.length; }}); tabLayout.attachToViewPager(viewPager, titles); }}Copy the code

Project address, feel useful click a star~ GitHub