Use HomeTabModeHelper to quickly build a Tab+Fragment homepage frame in 2 minutes

Preface

In today's environment where various App models are exactly the same, and programmers have various fancy effects, every time you take over a project, you can see that the project code is different, and you want to unify it every minute. At the same time, in order to speed up the development of subsequent new applications, the package built such a preliminary simple framework to realize the quick and brainless construction of the homepage in two minutes.

Not much to say, let's look at the achieved effect first:

Introduction

Realize function:

• Tab+fragment mode home page construction
• Support ViewPager
• Support small red dot display (optional display quantity)
• Support highlighting a certain tab
• Hide tab dynamically

use

Import library

implementation 'com.moore.lib:homeTabModeHelper:1.0.0'

If you haven’t added the jcenter() warehouse address, remember to add it~

Configure tab

We use the .json file for configuration, and then the file is stored in assets. The configuration reference is as follows:

{
  "textColorNormal": "#A4A3A3",
  "textColorSelected": "#C02221",
  "textSizeNormal": 14,
  "textSizeSelected": 14,
  "backgroundColor": "#e9e9e9",
  "isNameResId": false,
  "isTitleVisible": true,
  "tabs": [
    {
      "tabName": "首页",
      "tabTag": "key_index_fragment",
      "iconNormal": "main_home_tab_index_normal",
      "iconSelected": "main_home_tab_index_selected"
    },
    {
      "tabName": "发现",
      "tabTag": "key_discover_fragment",
      "iconNormal": "main_home_tab_discovery_normal",
      "iconSelected": "main_home_tab_discovery_selected",
      "isOverSide": true,
      "itemBg": "home_tab_center_bg"
    },
    {
      "tabName": "我的",
      "tabTag": "key_user_fragment",
      "iconNormal": "main_home_tab_mine_normal",
      "iconSelected": "main_home_tab_mine_selected"
    }
  ]
}

Here is an explanation of the role of each configuration:

First, two properties described tab characters, two states textColorNormal, , textColorSelected, textSizeNormal, textSizeSelectedthe role of these attributes in tab text color and size of the header.
isNameResId: Indicates whether the title is the resource id in the string. If it is false, directly take the configured tabName; otherwise, obtain the resource file corresponding to the id. The default is true
isTitleVisible: whether the title is visible. The default is true
tabs: tab list

Each tab configuration:
tabName: Title tab, if used string.xml configuration, compared to the corresponding string ID
tabTag: important for distinguishing each tag corresponding to Fragment tab can not be repeated
iconNormal, : iconSelectedan icon corresponding to the two states, Please put it in drawable instead of mipmap.
Options:
isOverSideBoolean type, if you need to display protrudingly, you can set this property. Refer to the above rendering for the style
itemBg: After setting the raised display, you can set the background, usually a semicircle, prototype background, etc. of

Home use

In the xml file corresponding to the homepage, simply use the following:
Key parameter configuration::
container_idSpecify the layout id of the Fragment display
config_file_name: The name of the configuration file in the assets, the full name
viewPager_id: Choose one from the container_id, if this is set, it is ViewPager can slide mode, the corresponding id is associated with ViewPager layout

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#999999">

    <FrameLayout
        android:id="@+id/main_content_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/main_tab_layout"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_weight="1" />

    <com.moore.bottomtab.HomeBottomTabLayout
        android:id="@+id/main_tab_layout"
        android:layout_width="match_parent"
        android:layout_height="58dp"
        android:background="#ffffff"
        app:config_file_name="tab.json"
        app:container_id="@id/main_content_layout"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/main_content_layout" />

</androidx.constraintlayout.widget.ConstraintLayout>

Homepage code

class MainActivity : AppCompatActivity(), HomeBottomTabLayout.HomeBottomTabLayoutCallback {

    //每个tab对应的tag，和json配置文件中保持一致
    val TAG_INDEX = "key_index_fragment"
    val TAG_NAME = "key_name_fragment"
    val TAG_DISCOVERY = "key_discover_fragment"
    val TAG_COLLECT = "key_collect_fragment"
    val TAG_USER = "key_user_fragment"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        //设置回调
        main_tab_layout.setHomeBottomTabLayoutCallback(this)
        //初始化，参数为默认展示第几个tab
        main_tab_layout.initFirstTab(2)
        //如果需要展示未读消息，通过该方法展示
        main_tab_layout.setUnreadTip(TAG_USER, "12")
        main_tab_layout.setUnreadTip(TAG_INDEX, "99+")
        main_tab_layout.setUnreadTip(TAG_COLLECT, null, false)
    }

    override fun getFragmentByTag(tabTag: String): Fragment? {
        //根据对应Tag名称，返回具体的Fragment对象
        when (tabTag) {
            TAG_INDEX -> return Fragment1()
            TAG_NAME -> return Fragment2()
            TAG_DISCOVERY -> return Fragment3()
            TAG_COLLECT -> return Fragment4()
            TAG_USER -> return Fragment5()
        }
        return null
    }

    override fun onClickChangeTab(selectedIndex: Int, selectedTag: String?) {
        //点击tab回调，可在此进行统计事件、隐藏消息提示等操作
    }
}

At this point, you can run your app for a try, and you can see that a Tab+Fragment structure has come out. It is very simple and convenient. There is no need for complex operations such as xml typesetting, click callbacks in the code, Fragment switching, etc., code It is also very clear.

More ways

setUnreadTip("tagName","unReadCount",isShowCount): Set the unread message prompt, set the corresponding tab according to the tag, the second parameter is the prompt value, and the third is whether to display the specific number or only the small red dot.
hideUnReadTip(tag: String): Hide unread messages. Tip
getFragmentList(): List<Fragment?>?: Get the added Fragment list
getFragmentByTag(tabTag: String): Fragment?: Get the Fragment according to Tag
getCurrentSelectedFragment(): Fragment?: Get the currently selected Fragment
getCurrentSelectedIndex(): Int: Get the subscript of the
getCurrentSelectedTag(): Stringcurrently selected Fragment: Get the Tag of the currently selected Fragment
selectByTag(tabTag: String): Select the tab according to the tag
hideTab(index: Int): Hide a tab

Conclusion

The framework is mainly aimed at the encapsulation of some functions that are often encountered in daily development. It does not involve too much complicated logic and processing. It is designed to help improve our development efficiency. If it is useful to those who feel good, please also click Great~

Github delivery: https://github.com/lizebinbin/HomeTabModeHelper