关闭

Android design包自定义tablayout的底部导航栏

标签: 导航栏tablayoutdesign包Android
1039人阅读 评论(0) 收藏 举报
分类:

以前做项目大多用的radiobutton,今天用tablayout来做一个tab切换页面的的效果
实现的效果就是类似QQ.微信的页面间(也就是Fragment间)的切换.如图:

这里写图片描述
布局只要一个tablayout

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/nav_tl"

        app:tabIndicatorHeight="0dp"//将指示器去掉 ps:如果大家对tablayout有一些样式上的需求
        可以自定义style,这里就不加了

        android:layout_gravity="bottom"

        ></android.support.design.widget.TabLayout>

然后就是activity了

public class MainActivity extends BaseActivity implements TabLayout.OnTabSelectedListener{

    @BindView(R.id.main_container)
    LinearLayout mainContainer;
    @BindView(R.id.nav_tl)
    TabLayout navTl;
    //Tab 文字
    private final int[] TAB_TITLES = new int[]{R.string.nav_home,R.string.nav_order,R.string.nav_my};
    //Tab 图片
    private final int[] TAB_IMGS = new int[]{R.drawable.nav_home_bg,R.drawable.nav_order_bg,R.drawable.nav_my_bg};
//贴出一个R.drawable.nav_home_bg的文件,其他类似:`<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@mipmap/nav_home_selected"></item>
    <item android:state_selected="false" android:drawable="@mipmap/nav_home_normal"></item>
</selector>`

    private FirstPagerFragment firstPagerFragment;
    private PersonalFragment personalFragment;
    private SeekOrderFragment seekOrderFragment;
    private android.support.v4.app.FragmentManager manager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        iniView();
        iniData();
    }

    private void iniData() {

    }

    private void iniView() {
        LayoutInflater inflater = LayoutInflater.from(this);
        manager = getSupportFragmentManager();

        getTab(R.id.main_container,manager,0);
        setTabs(navTl,inflater,TAB_TITLES,TAB_IMGS);

        navTl.setOnTabSelectedListener(this);
    }

    /**
     * @description: 设置添加Tab
     * 我们自定义的布局customer_layout其实就是一张图片加文字
     * `<?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:id="@+id/img_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        />

    <TextView
        android:id="@+id/tv_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@drawable/tv_color_bg"//text我用了一个颜色选择器,主要在我选中的时候能改变颜色
        />

</LinearLayout>`
     */
    private void setTabs(TabLayout tabLayout, LayoutInflater inflater, int[] tabTitlees, int[] tabImgs) {
        for (int i = 0; i < tabImgs.length; i++) {

            TabLayout.Tab tab = tabLayout.newTab();
            View view = inflater.inflate(R.layout.customer_layout, null);
            tab.setCustomView(view);

            TextView tvTitle = (TextView) view.findViewById(R.id.tv_tab);
            tvTitle.setText(tabTitlees[i]);
            ImageView imgTab = (ImageView) view.findViewById(R.id.img_tab);
            imgTab.setImageResource(tabImgs[i]);
            tabLayout.addTab(tab);

        }
    }

    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        getTab(R.id.main_container,manager,tab.getPosition());
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
    //设置tab的监听,选中某一个tab对应的Fragment要及时切换,相信大家看代码能看明白
    private void getTab(int container, android.support.v4.app.FragmentManager manager, int position){
        FragmentTransaction ft = manager.beginTransaction();
        hideAll(ft);
        switch (position){
            case 0:
                if(firstPagerFragment==null){
                    firstPagerFragment=new FirstPagerFragment();
                    ft.add(container,firstPagerFragment);
                }else {
                    ft.show(firstPagerFragment);
                }
                break;

            case 1:
                if(seekOrderFragment==null){
                    seekOrderFragment=new SeekOrderFragment();
                    ft.add(container,seekOrderFragment);
                }else {
                    ft.show(seekOrderFragment);
                }
                break;
            case 2:
                if(personalFragment==null){
                    personalFragment=new PersonalFragment();
                    ft.add(container,personalFragment);
                }else {
                    ft.show(personalFragment);
                }
                break;
        }

        ft.commit();
    }

    private void hideAll(FragmentTransaction ft) {
        if(firstPagerFragment!=null){
            ft.hide(firstPagerFragment);
        }
        if(personalFragment!=null){
            ft.hide(personalFragment);
        }
        if(seekOrderFragment!=null){
            ft.hide(seekOrderFragment);
        }
    }
}
3
0
查看评论

将Tablayout放在布局的底部

这个其实很简单,只不过我一开始直接给tablayout控件设置,gravity=bettom 发现没有任何效果,后来我就采取了另外一种比较巧妙地办法,就是随便写写,只是记录一下,下面是我的布局源码: xmlns:android="http://schemas.android.com/...
  • qq997843911
  • qq997843911
  • 2015-08-22 17:47
  • 2541

Android自定义View之实现流行的底部菜单栏中间突起:高仿“咸鱼APP”的底部菜单。

自定义View之实现流行的底部菜单栏中间突起:高仿“咸鱼APP”的底部菜单。一、好奇心在作怪。 今天纳闷地看了看咸鱼,看见其底部的菜单栏效果还不错,中间那个按钮是凸起来的!再看看我撸的界面: 2、何谓重要的属性 android:clipChildren=”false”。 上网查询 ,该属性解释为,可...
  • xh870189248
  • xh870189248
  • 2017-07-22 23:37
  • 4588

android底部导航栏+viewPager+自定义view的简单实现

底部导航栏
  • sinat_28676875
  • sinat_28676875
  • 2016-08-16 20:02
  • 1286

Android 自定义底部导航栏和动态添加fragment

转自:http://blog.csdn.net/haiwei15/article/details/52458037 Android开发工作也一年了,以前在CSDN博客看了许多优秀博客文章,做为新人的我,这是我写的第一篇博客,希望各位朋友多多支持,给予意见谢谢! 这篇文件主要是介绍自定义底部...
  • bsmmaoshenbo
  • bsmmaoshenbo
  • 2016-09-07 15:47
  • 1730

Android 自定义底部导航栏和动态添加fragment

Android开发工作也一年了,以前在CSDN博客看了许多优秀博客文章,做为新人的我,这是我写的第一篇博客,希望各位朋友多多支持,给予意见谢谢! 这篇文件主要是介绍自定义底部导航和动态添加fragment,实现的代码并不复杂。
  • haiwei15
  • haiwei15
  • 2016-09-07 11:35
  • 1829

史上最巧妙自定义tablayout指示器

国际惯例,无图无真相首先我们先过几个概念,老手这个请自行跳过。 Android的View显示在界面上需要三步:测量,定位和绘制。 第一步:测量,View的measure方法这个方法用来测量View显示的宽高值。这个宽高值是基于View**自身宽高,再加上父View的约束**得到的。这个约束使用M...
  • philos3
  • philos3
  • 2017-06-07 07:38
  • 1304

自定义TabLayout,实现神奇的选项卡效果

今日科技快讯 据外媒报道,在成为人类史上首位机器人公民1个月后,索菲娅最近宣布想要组建一个家庭。这款人形机器人是以奥黛丽·赫本为模本开发的,她在不久前接受采访时说,组建家庭是“非常重要的事情”。她补充说,如果她有个机器人女儿,她会以自己的名字为她取名,她相信每个机器人都应该有自己...
  • c10WTiybQ1Ye3
  • c10WTiybQ1Ye3
  • 2017-11-28 00:00
  • 196

Android学习之BottomNavigationBar实现Android特色底部导航栏

Android底部导航栏的实现方式特别多,例如TabHost,TabLayout,或者TextView等,都可以实现底部导航栏的效果,但是却没有Google官方统一的导航栏样式,今天讲的就是Google最近添加到Material design中的底部导航栏BottomNavigationBar,也可...
  • qq_16131393
  • qq_16131393
  • 2016-05-15 22:42
  • 29132

Android 设置应用的底部导航栏(虚拟按键)背景颜色

Android手机机型种类繁多,但是虚拟按键也就是底部的导航栏,不外乎两种设计方式,一种是作为虚拟按键设计到屏幕内部,一种是作为系统按键设计到屏幕外面。 对于按键在屏幕内部的机型,因为虚拟按键也是屏幕内容的一部分,它也实际占据屏幕一定的高度,在系统应用中虚拟按键默认呈现的都是透明的背景色,但...
  • github_2011
  • github_2011
  • 2017-07-10 11:03
  • 5427

android 自定义状态栏和导航栏分析与实现

效果  android 4.4之后,系统是支持自定义状态栏和导航栏的,举个最典型的例子就是bilibili客户端了(iOS版本和android版本能用两套完全不一样符合各自系统的设计ui,良心啊~),顶部状态栏为粉色,底部导航栏为半透明色:      接着QQ最新的版本6.2也使用了状态栏透明风...
  • zhao_zepeng
  • zhao_zepeng
  • 2016-01-26 11:39
  • 10639
    个人资料
    • 访问:111278次
    • 积分:2596
    • 等级:
    • 排名:第16590名
    • 原创:138篇
    • 转载:2篇
    • 译文:0篇
    • 评论:31条
    博客专栏
    最新评论