简单优雅的使用tablayout和viewpager打造导航栏

原创 2016年06月01日 23:23:36

又是很久没写博客了,大笑当然之前只写过一篇。本来想着坚持写呢,可是发现这里的博客审核需要挺长时间,于是乎又不怎么想写了。


今天带来的是一种导航栏的简单优雅的一种实现方式。就导航栏的实现方式的发展来看,先后主要经历了:

1--tabhost;

2--radiogroup--viewpager

3--自定义horiozationScrollview

4--tablayout+viewpager

当然recyclerview的横向布局也是可以的。


上述的几种方式难免要对这些view进行监听,然后在监听里相互关联。

当然tablayout+viewpager通过setUpWithViewPager(),避免了监听设置。这也是目前博客中常见的设置方式,

但是对于底部导航栏以及带图标的且能根据选中状态改变颜色的情况,目前却难以见到比较优雅的方式。

当然,这篇博客中http://www.2cto.com/kf/201604/497188.html提供了上述的解决方式,但是很明显,比较复杂


这里提供了一个简单的方式实现带图标,且能根据选中状态改变背景的导航栏效果。先上效果图:


刚开始的实现过程与网上多数的实现方式一样,只是有几个关键点要说明:

public class MainActivity extends AppCompatActivity {

    private TabLayout mTablayout;
    private ViewPager mViewPager;
    private List<Fragment> mFragments;
    private List<String> mTitles;
    private HomePagerAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initview();
        loadData();
        setViewEvent();
    }
    private void initview() {
        mTablayout = (TabLayout) findViewById(R.id.tab_layout_main);
        mViewPager = (ViewPager) findViewById(R.id.viewpager_main);
    }

    private void loadData() {
        mFragments = new ArrayList<>();
        mTitles = new ArrayList<>();
        for (int i = 0; i < 4; i++) {
            mTitles.add("tab" + i);
            HoneFragment tabfrag = new HoneFragment();
            Bundle bud = new Bundle();
            bud.putString("title", "fragment" + i);
            tabfrag.setArguments(bud);
            mFragments.add(tabfrag);
        }
    }

    private void setViewEvent() {
        mAdapter = new HomePagerAdapter(getSupportFragmentManager(), mFragments, mTitles);
        mViewPager.setAdapter(mAdapter);
        mTablayout.setupWithViewPager(mViewPager);//------1
        int tabCount = mTablayout.getTabCount();
        for (int i = 0; i < tabCount; i++) {
            mTablayout.getTabAt(i).setIcon(R.drawable.tab_item_selector);//------2
            mTablayout.getTabAt(i).setCustomView(R.layout.tab_item);//------3
        }
        mViewPager.setCurrentItem(1);
        mViewPager.setCurrentItem(0);//------4
    }
}

主布局:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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.support.v4.view.ViewPager
        android:id="@+id/viewpager_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="61dp"
        />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout_main"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_gravity="bottom"
        android:background="#08000000"
        app:tabMode="fixed"
                ></android.support.design.widget.TabLayout>
</FrameLayout>


1----这个网上见的较多,就是关联tablayout-viewpager-adapter


2----给tablayout的每个tab设置icon;


3----给tab设置自定义的view,这是关键点,这里需要说明的是在源码注释中提到

若是自定义view中有TextView的id为@android:id/text1,那么这个textview的值将会

替代tab的文本(setText),相应的,若是自定义view中有ImageView的id为@android:id/icon

那么这个imageview的值将会替代tab的icon(setIcon).所以,可以按照下面代码为位置3处的view进行布局:

4--设置选中的页面,

mViewPager.setCurrentItem(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:gravity="center"
              android:paddingTop="6dp"
              android:orientation="vertical">
    <TextView
        android:id="@android:id/text1"
        android:textColor="@drawable/tab_text_back"//---------根据状态改变字体颜色,selector文件
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <ImageView
        android:id="@android:id/icon"
        android:src="@drawable/tab_item_selector"//---------根据状态改变图标背景,selector文件<pre name="code" class="html" style="font-size: 17.6px;">
android:layout_width="36dp" android:layout_height="36dp"/></LinearLayout>



好了,经过上面的设置,一个带图标,且能根据选中状态改变背景的导航栏效果就出来了。

源码:https://github.com/Cysion1989/BottomNavigationBar

转载请标明出处。。







版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Android开发之设置TabLayout下方下划线的宽度

由于最近项目需要,需要设置tabLayout下方下划线的长度.笔者上网找了半天,也没有找到方法.后来了解到在源码中对tabLayout的下划线进行了设置.并没有方法可以直接设置. 然后,笔者看到了某位...

TabLayout的指示器宽度问题

最近碰到一个需求,因为是我比较感兴趣的TabLayout的,所以记录一下吧。 产品需求:希望上部导航栏中的指示器宽度略大于文字宽度; 技术方案:TabLayout配合ViewPager; 问题分析: ...

修改TabLayout指示器的长度

taLayout.setupWithViewPager(vpPage); //在taLayout之后设置 Class tablayout = taLayout.getClass(); ...

TabLayout如何设置指示器长度?终于有答案了

前言: TabLayout作为material design中重要一员,在项目中已经使用非常广泛,TabLayout和Viewpager的绑定,十分简单,而且TabLayout可以设置指示器颜色,高度...

Android——可修改字体大小和指示器长度的XTabLayout

XTabLayout是基于design包中的TabLayout进行了功能的扩展,在保留原有功能的基础上,增加了修改选中项字体大小、修改指示器长度以及限制屏幕显示范围内显示的Tab个数。先看效果图:集成...

Design库-TabLayout属性详解

App中Tab也是很常见的,它的实现方式也有很多:TabHost,自定义控件(第三方库),RadioGroup等等。这里主要介绍Android Design库中的TabLayout的使用。

android.support.design.widget.TabLayout设置指示器的宽度

MD风格的,指示器宽度和条目等宽,无法设置margin值,或者padding值。

TabLayout+ViewPager+Fragment(懒加载)实现导航栏

之前,实现导航栏的效果有很多方法,使用第三方库,比如ViewPagerIndicator中的TabPagerIndicator,谷歌可能发现,导航栏使用的挺普遍的,so,也搞了一个属于自己的导航栏!就...

超简单的ViewPager导航栏联动实现--TabLayout

效果如下: 实现这个效果非常的简单,就两个控件,一个TabLayout,一个ViewPager,主要通过TabLayout的setupWithViewPager() 方法来使TabLayo...

Android 导航条效果实现(四) ViewPager+自定义导航条

ViewPager+自定义导航条实现导航效果 效果说明: 自定义导航条; 导航条固定位置,选项卡按比例显示; 选项卡下方有一个指示器,指示当前页面的位置。
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)