The use of third-party BottomBar

Address: https://github.com/roughike/BottomBar
Usage: compile 'com.roughike:bottom-bar:2.0.2'
used in the layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.example.yanruifeng.myapplication.TestThirdBottomBarActivity">
<com.roughike.bottombar.BottomBar
    android:id="@+id/bb_bar"
    android:layout_alignParentBottom="true"
    android:layout_width="match_parent"
    app:bb_tabXmlResource="@xml/nav"
    app:bb_activeTabAlpha="1"
    app:bb_activeTabColor="@color/color_checked"
    android:layout_height="56dp"></com.roughike.bottombar.BottomBar>
</RelativeLayout>

Create a new xml directory under res, and create a file named nav.xml in the xml directory

<?xml version="1.0" encoding="utf-8" ?>
<tabs>
    <tab
        id="@+id/home"
        icon="@drawable/nav_homeicon_change"
        title="首页" />
    <tab
        id="@+id/message"
        icon="@drawable/nav_msgicon_change"
        title="消息" />

    <tab
        id="@+id/my"
        icon="@drawable/nav_myicon_change"
        title="我的"/>

</tabs>
  • The problem to be noted above is that your tab attribute cannot use andoroid:id android:icon android:title or you will be responsible for the consequences
  • That is, xmlns:android=”http://schemas.android.com/apk/res/android” namespace cannot be introduced. Create each corresponding selected and unselected navigation menu
    in the drawable directory. For example, I wrote three
    nav_homeicon_change.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/home_selected"></item>
    <item android:state_selected="false" android:drawable="@drawable/home"></item>
</selector>

nav_msgicon_change.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/msg_selected"></item>
    <item android:state_selected="false" android:drawable="@drawable/msg"></item>
</selector>

nav_myicon_change.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/my_selected"></item>
    <item android:state_selected="false" android:drawable="@drawable/my"></item>
</selector>

Use the following code in the activity to dynamically switch the bottom navigation icon icon

public class TestThirdBottomBarActivity extends AppCompatActivity {
    @BindView(R.id.bb_bar)
    BottomBar bbbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test_third_bottom_bar);
        ButterKnife.bind(this);
        bbbar.setOnTabSelectListener(new OnTabSelectListener() {
            @Override
            public void onTabSelected(int tabId) {
                for(int i=0;i<bbbar.getTabCount();i++){
                    bbbar.getTabAtPosition(i).setSelected(false);
                }
                switch (tabId){
                    case R.id.home:
                        bbbar.getTabAtPosition(0).setSelected(true);
                        break;
                    case R.id.message:
                        bbbar.getTabAtPosition(1).setSelected(true);
                        break;
                    case R.id.my:
                        bbbar.getTabAtPosition(2).setSelected(true);
                        break;
                }
            }
        });
    }
}

Give me a thumbs up if you like it! Thank you

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325958394&siteId=291194637