Android 底部菜单栏


工具:
Android studio

*环境:
compileSdkVersion 28
com.android.tools.build:gradle:3.3.2
*
简介:使用到了FragmentTabHost实现底部导航,实现图标选中与未被选中的变化,更改了开启时默认页面。

效果:

在这里插入图片描述

Activity的布局


    <android.support.v4.app.FragmentTabHost
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/tabHost">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <FrameLayout
                android:id="@+id/realtabcontent"
                android:layout_width="0dp"
                android:layout_height="0dp"/>
            <FrameLayout
                android:layout_weight="1"
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="0dp">
            </FrameLayout>
            <TabWidget
                android:background="#ffffff"
                android:divider="@null"
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            </TabWidget>
        </LinearLayout>
    </android.support.v4.app.FragmentTabHost>

新建一些Fragment

新建的时候选择BlankFragment即可,需要几个底部导航的页面就新建几个,我这里需要四个页面,新建完后将Fragment里面的代码需要修改,因为在我的环境下默认的新建代码运行会出bug。

下面给出一个fragment代码示例

//周边
public class MapFragment extends Fragment {
    //在Fragment声明context
    private Context context;
    
    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        this.context = context;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_map, container, false);
    }
}

准备小图标

各种小图标可以去阿里巴巴矢量图标库下载,十分方便便捷。

每种图标下载一个被选中和未被选中两种状态的颜色,然后放入项目-android-app-res-drawable文件夹

为每种图标新建一个drawable资源文件,这个文件用于图标是否被选中发生的变化在这里插入图片描述
例如:对于地图的图标,新建一个文件名为:ic_tab_map_selector.xml
文件内容如下,其中ic_tab_map_normal和ic_tab_map_selected是两个放在drawable文件夹里png格式的图标

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

文字的变化

图标下方文字的颜色也会随选中状态的更改而变化,需要新建一个drawable资源文件

例如:txt_tab_selector.xml

文字颜色的正常状态和选中后的颜色可以自行在res-values-color.xml文件里面添加,tab_txt_selected和tab_txt_normal是我自行添加的颜色(淡蓝色和灰色)。

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

图标文字组合布局

新建一个layout资源文件,这是个包含图片和文字的view。

作用:简单来说这个view将图片和文字组成一个整体,我的项目中需要四个导航,所以实例化了四个这样的view,分别赋予不同的图片和文字,放入底部导航栏中,这样就有了导航栏的四个图标显示。

tab_item.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <ImageView
        android:layout_marginTop="8dp"
        android:layout_gravity="center"
        android:id="@+id/iv_tab"
        android:layout_width="22dp"
        android:layout_height="22dp"/>

    <TextView
        android:textSize="13dp"
        android:id="@+id/tv_tab"
        android:layout_marginTop="2dp"
        android:layout_gravity="center"
        android:textColor="@drawable/txt_tab_selector"
        android:text="首页"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    
</LinearLayout>

Activity里面的代码

这里将Activity的超类更改为了FragmentActivity

public class MainActivity extends FragmentActivity{
    //底部导航栏
    FragmentTabHost mTabHost;
    //需要导航的页面
    private Class[] fragments = new Class[]{
            MapFragment.class,
            EducationFragment.class,
            AmuseFragment.class,
            ServiceFragment.class};
    //导航页面对应小图标
    private int[] imgRes = new int[]{
            R.drawable.ic_tab_education_selector,
            R.drawable.ic_tab_map_selector,
            R.drawable.ic_tab_amuse_selector,
            R.drawable.ic_tab_service_selector
    };
    //导航页面对应的文字
    private String[] tabTitles=new String[]{
            "教育",
            "周边",
            "娱乐",
            "服务"
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化底部导航菜单栏
        initFragmentTabhost();

    }

    private void initFragmentTabhost() {
        //初始化
        mTabHost=findViewById(R.id.tabHost);
        mTabHost.setup(MainActivity.this, getSupportFragmentManager(), android.R.id.tabcontent);

        //循环初始化每个fragment对应的图标,并且加入tabhost
        for (int i = 0; i < fragments.length; i++) {
            //得到设置图标和文字的view
            View inflate = getLayoutInflater().inflate(R.layout.tab_item, null);
            //设置view里面的图片和文字
            ImageView ivTab = inflate.findViewById(R.id.iv_tab);
            TextView tvTab = inflate.findViewById(R.id.tv_tab);
            ivTab.setImageResource(imgRes[i]);
            tvTab.setText(tabTitles[i]);
            //将改好的view放入tabhost
        	mTabHost.addTab(mTabHost.newTabSpec(tabTitles[i]).setIndicator("tab1").setIndicator(inflate), fragments[i], null);
        }
        //设置初始化页面为第二个页面:“周边“”
        mTabHost.setCurrentTab(1);
    }
}
发布了16 篇原创文章 · 获赞 10 · 访问量 2510
App 阅读领勋章
微信扫码 下载APP
阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览