Android底部导航栏实现（三）之TextView+LinearLayout

这里简单记录下通过TextView+LinearLayout+Fragment来实现Android底部导航栏。

Android底部导航栏实现（三）之TextView+LinearLayout_第1张图片

布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:layout_width="match_parent"              android:layout_height="match_parent"              android:orientation="vertical">    <FrameLayout        android:id="@+id/sub_content"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1">        <TextView            android:id="@+id/activity_text_view"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:text="@string/tips"            android:textColor="@color/colorPrimary"            android:textSize="18sp"            android:textStyle="bold|italic"/>    FrameLayout>    <View        android:layout_width="match_parent"        android:layout_height="1px"        android:background="@color/grey_300"/>    <include layout="@layout/tab_layout_for_bottom"/>LinearLayout><?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="56dp"    android:background="@color/white"    android:orientation="horizontal"    tools:showIn="@layout/fragment_text_tab">    <TextView        android:id="@+id/tv_home"        style="@style/viewpager_navigation_bar_tab_style"        android:drawableTop="@drawable/home"        android:text="@string/item_home"/>    <TextView        android:id="@+id/tv_location"        style="@style/viewpager_navigation_bar_tab_style"        android:drawableTop="@drawable/location"        android:text="@string/item_location"/>    <TextView        android:id="@+id/tv_like"        style="@style/viewpager_navigation_bar_tab_style"        android:drawableTop="@drawable/like"        android:text="@string/item_like"/>    <TextView        android:id="@+id/tv_person"        style="@style/viewpager_navigation_bar_tab_style"        android:drawableTop="@drawable/person"        android:text="@string/item_person"/>LinearLayout>

代码

    mTHome.setOnClickListener(this);    mTLocation.setOnClickListener(this);    mTLike.setOnClickListener(this);    mTMe.setOnClickListener(this);    setDefaultFragment();//设置默认显示Fragment    @Override    public void onClick(View view) {        resetTabState();//reset the tab state        switch (view.getId()) {            case R.id.tv_home:                setTabState(mTHome, R.drawable.home_fill, getColor(R.color.colorPrimary));//设置Tab状态                switchFrgment(0);//切换Fragment                break;            case R.id.tv_location:                setTabState(mTLocation, R.drawable.location_fill, getColor(R.color.colorPrimary));                switchFrgment(1);                break;            case R.id.tv_like:                setTabState(mTLike, R.drawable.like_fill, getColor(R.color.colorPrimary));                switchFrgment(2);                break;            case R.id.tv_person:                setTabState(mTMe, R.drawable.person_fill, getColor(R.color.colorPrimary));                switchFrgment(3);                break;        }    }

Fragment的切换

    /**     * switch the fragment accordting to id     * @param i id     */    private void switchFrgment(int i) {        FragmentTransaction transaction = getChildFragmentManager().beginTransaction();        switch (i) {            case 0:                if (mHomeFragment == null) {                    mHomeFragment = mHomeFragment.newInstance(getString(R.string.item_home));                }                transaction.replace(R.id.sub_content, mHomeFragment);                break;            case 1:                if (mLocationFragment == null) {                    mLocationFragment = LocationFragment.newInstance(getString(R.string.item_location));                }                transaction.replace(R.id.sub_content, mLocationFragment);                break;            case 2:                if (mLikeFragment == null) {                    mLikeFragment = LikeFragment.newInstance(getString(R.string.item_like));                }                transaction.replace(R.id.sub_content, mLikeFragment);                break;            case 3:                if (mPersonFragment == null) {                    mPersonFragment = PersonFragment.newInstance(getString(R.string.item_person));                }                transaction.replace(R.id.sub_content, mPersonFragment);                break;        }        transaction.commit();    }

这里面值得注意的地方就是要用getChildFragmentManager()，否则会出现切换Fragment内容不显示的情况。

设置Tab状态

    /**     * set the tab state of bottom navigation bar     *     * @param textView the text to be shown     * @param image    the image     * @param color    the text color     */    private void setTabState(TextView textView, int image, int color) {        textView.setCompoundDrawablesRelativeWithIntrinsicBounds(0, image, 0, 0);//Call requires API level 17        textView.setTextColor(color);    }    /**     * revert the image color and text color to black     */    private void resetTabState() {        setTabState(mTHome, R.drawable.home, getColor(R.color.black_1));        setTabState(mTLocation, R.drawable.location, getColor(R.color.black_1));        setTabState(mTLike, R.drawable.like, getColor(R.color.black_1));        setTabState(mTMe, R.drawable.person, getColor(R.color.black_1));    }

说明：这几篇文章没有过多的文字叙述，因为这些东西也不是很难，而且都是常用的，相信很多人都了如指掌了，多说亦是废话，直接上代码看的反而更清楚。

布局

代码

Fragment的切换

设置Tab状态

DownLoad Demo

DownLoad Demo(github)

更多相关文章

随机推荐