CoordinatorLayout、Tablayout、Toolbar简单组合使用

比较偷懒的开始

开始
没有向上滑动

向上滑动后将Toolbar隐藏收缩的效果:

向上滑动后
直接使用Android stuido创建Activity时,使用自带的自带的Basic Activity模板。这个模板直接创建的根布局就是CoordinatorLayout,连同AppBarLayout、Toolbar直接创建好了。
想要使用Tablayout,直接在AppBarLayout中创建一个TabLayout就可以了。AppBarLayout是使Toolbar和Tablayout能够响应滚动。

<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
  >

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_student_activity"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:title="班级学生"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_scrollFlags="scroll|enterAlways"
            />

            <android.support.design.widget.TabLayout
                android:id="@+id/tablayout_student_activity"
                android:layout_width="match_parent"
                app:tabMode="fixed"
                app:tabGravity="fill"
                app:tabMaxWidth="250dp"
                app:tabMinWidth="250dp"
                app:tabSelectedTextColor="@color/colorAccent"
                app:tabTextColor="@android:color/white"
                android:layout_height="?actionBarSize">

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

    <android.support.v4.view.ViewPager
         app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/vp_student_activity"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>

注意:
在Toolbar中有这样行app:title="班级学生"这是为Toolbar设置title的。这句如果不加的话,在Activity中,使用toolbar.setTiltle(“”)这个方法就会无效。

在Toolbar中,app:layout_scrollFlags="scroll|enterAlways"这行代码很重要。这是实现滑动屏幕时,Toolbar能够隐藏的关键。
layout_scrollFlags有5个值:

  • scroll —所有想滚动隐藏的View都需要设置。将View滚出屏幕,也就是达到隐藏的效果
  • enterAlways —只要向下滚动就会出现隐藏的View
  • enterAlwaysCollapsed—这个属性和enterAlways的差别就在于,只有向下滚动不动后,才会出现隐藏的View
  • exitUntilCollapsed–这个属性只有在设置minHeight时会生效,会保留一个最小的高度,同时,当向下滚动屏幕时,只有屏幕内可滚动的View都展示出来后,隐藏的View才会由设置最小的高度恢复
  • snap—自动滑动动画, 定义CollapsingToolbarLayout的滑动属性.

啊,我擦,说的我自己都看不明白了,这几个属性,试试就知道了。

在Tablayout中,app:tabGravity="fill" app:tabMode="fixed"tabMode有两个属性。

  • scrollable —可滚动,当tab超过屏幕时,可以滚动
  • fixed —固定的

ViewPager中有一行很重要的代码:
app:layout_behavior="@string/appbar_scrolling_view_behavior"

app:layout_behavior这个属性可以为CoordinatorLayout子View设置。这里是个坑。目前了解不多。就知道这句可以使ViewPager设置match_parent不会遮盖布局。使ViewPager位于Tablayout下面。Behavior有很高的扩展性。需要以后继续了解。

注意,为了使Toolbar可以被隐藏,ViewPager的Fragment中必须要有可以滚动的View。ListView和ScrollView是无效的。要使用v4包下的NestedScrollView或者RecyclerView才会有效。

Actiivty的代码

public class TeacherStudentActivity extends BaseActivity {
    private Unbinder unbinder;
    @BindView(R.id.tablayout_student_activity)
    TabLayout tabLayout;
    @BindView(R.id.vp_student_activity)
    ViewPager vp;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_teacher_student);
        unbinder = ButterKnife.bind(this);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_student_activity);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        getDataBean(toolbar);

    }

    private void getDataBean(Toolbar toolbar) {
        Intent i = getIntent();
        if (i != null){
            Bundle b = i.getExtras();
            ClassBean.DataBean dataBean = (ClassBean.DataBean) b.getSerializable(Text.CLASS_BEAN_NAME);
            if (dataBean != null){
                toolbar.setTitle(dataBean.getName());
                init();
            }
        }
    }

    private void init() {
        TeacherStudentVPAdapter vp_adapter = new TeacherStudentVPAdapter(getSupportFragmentManager());
        List<Fragment> list = new ArrayList<>();
        list.add(new TSVPFragment_Student());
        list.add(new TSVPFragment_Award());
        list.add(new TSVPFragment_Lock());
        list.add(new TSVPFragment_Group());
        vp_adapter.setFragmentData(list);
        vp.setAdapter(vp_adapter);

        tabLayout.setupWithViewPager(vp);
        tabLayout.getTabAt(0).setText(Text.TEACHER_STUDENT_TAB_0);
        tabLayout.getTabAt(1).setText(Text.TEACHER_STUDENT_TAB_1);
        tabLayout.getTabAt(2).setText(Text.TEACHER_STUDENT_TAB_2);
        tabLayout.getTabAt(3).setText(Text.TEACHER_STUDENT_TAB_3);


    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        unbinder.unbind();
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home){
            onBackPressed();
            return  true;
        }
        return super.onOptionsItemSelected(item);
    }
}

忽视我起的名字以及代码的混乱。
在ViewPager创建好之后,tabLayout.setupWithViewPager(vp);将Tablayout和ViewPager联系起来。
接下来的addTab,我没有使用网上经常看到的下面的这种方式:
tabLayout.addTab(tabLayout.newTab().setText(""));
因为这种方式以前遇到过一次bug,可能会造成设置的tab文字不显示。
我使用的是tabLayout.getTabAt(0).setText("")因为此时已经和ViewPager绑定了,已经可以拿到tab的数量了。

最后

CoordinatorLayout和CollapsingToolbarLayout是material design中很重要的两个控件,尤其是CoordinatorLayout。包含的东西还很多,阅读代码能力提升后,要记得把源码看看。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值