效果图:
项目依赖:
compile 'com.android.support:design:23.2.0' compile 'com.android.support:recyclerview-v7:23.2.0'
首先看一下我们的布局代码:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:background="@color/colorPrimary"
app:tabTextColor="@android:color/black"
app:tabSelectedTextColor="@android:color/holo_green_dark"
app:tabIndicatorColor="@android:color/holo_orange_dark"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
效果显示,视图滚动时,Toolbar会隐藏,这个效果是Android Support Library里面,新增的CoordinatorLayout, AppBarLayout实现的。
通过AppBarLayout的子视图的属性控制。观察AppBarLayout的子布局,Toobar有app:layout_scrollFlags属性,这就是控制滑动时视图效果的属性。app:layout_scrollFlags有四个值:
- scroll: 所有想滚动出屏幕的view都需要设置这个flag, 没有设置这个flag的view将被固定在屏幕顶部。例如,TabLayout 没有设置这个值,将会停留在屏幕顶部。
- enterAlways: 设置这个flag时,向下的滚动都会导致该view变为可见,启用快速“返回模式”。
- enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
- exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端。
为了ToolBar可以滚动,CoordinatorLayout里面,放一个带有可滚动的View.如上的例子,放的是ViewPager,而ViewPager里面是放了RecylerView的,即是可以滚动的View。CoordinatorLayout包含的子视图中带有滚动属性的View需要设置app:layout_behavior属性。例如,示例中Viewpager设置了此属性。
app:layout_behavior="@string/appbar_scrolling_view_behavior"为了使得Toolbar有滑动效果,必须做到如下三点:
Activity代码:1. CoordinatorLayout作为布局的父布局容器。
2. 给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。
3. 给滑动的组件设置app:layout_behavior属性
package com.example.imgod.md_3;
import android.graphics.Color;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private TabLayout tabs;
private ViewPager viewpager;
private List<Fragment> fragments;
private List<String> titles;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
toolbar = (Toolbar) findViewById(R.id.toolbar);
tabs = (TabLayout) findViewById(R.id.tabs);
viewpager = (ViewPager) findViewById(R.id.viewpager);
toolbar.setTitle("ToolBar");
setSupportActionBar(toolbar);
fragments = new ArrayList<>();
titles = new ArrayList<>();
fragments.add(TabFragment.newInstance("Tab1"));
fragments.add(TabFragment.newInstance("Tab2"));
fragments.add(TabFragment.newInstance("Tab3"));
titles.add("Tab1");
titles.add("Tab2");
titles.add("Tab3");
ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), fragments, titles);
viewpager.setAdapter(viewPagerAdapter);
tabs.setupWithViewPager(viewpager);//这行代码位置一定要在viewpager设置了adapter之后
}
}
项目重点:
1.在TabLayout和ViewPager关联的时候,一定要在ViewPager已经设置了Adapter之后
2.Tablayout的 标题选中颜色 正常颜色 以及下标的颜色通过下面三个属性控制
<span style="white-space:pre"> </span> app:tabTextColor="@android:color/black"
app:tabSelectedTextColor="@android:color/holo_green_dark"
app:tabIndicatorColor="@android:color/holo_orange_dark"
也可以通过代码来设置
tabs.setTabTextColors(normalColor,selectColor);
项目源码:https://github.com/imgod1/Md_3
that's all, thank you,have a nice day