android新特性，CoordinatorLayout,TabLayout+viewpager+fragment,RapidFloatingActionLayout详解

一.CoordinatorLayout

作为Android的控件, CoordinatorLayout已经加入最新的HelloWorld项目中, 也是Material风格的重要组件, 协调(Coordinate)其他组件, 实现联动. 那么让我们来看看这个动画效果怎么用吧?

<?xml version="1.0" encoding="utf-8"?>

属性：AppBarLayout：是继承LinerLayout实现的一个ViewGroup容器组件，

它是为了Material Design设计的App Bar，支持手势滑动操作。默认的AppBarLayout是垂直方向的，它的作用是把AppBarLayout包裹的内容都作为AppBar。

app:layout_scrollFlags="scroll|enterAlways"

scroll:所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的view将被固定在屏幕顶部。例如，TabLayout没有设置这个值，将会停留在屏幕顶部。

enterAlways:设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。

enterAlwaysCollapsed:当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。

exitUntilCollapsed:滚动退出屏幕，最后折叠在顶端。

属性：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

为了ToolBar可以滚动，CoordinatorLayout里面,放一个带有可滚动的View.比如放的是ViewPager,ListView,RecycleView可以在ViewPager里面是放了RecylerView的,即是可以滚动的View。

CoordinatorLayout包含的子视图中带有滚动属性的View需要设置app:layout_behavior属性。

注意：

为了使得Toolbar有滑动效果，必须做到如下三点

1. CoordinatorLayout作为布局的父布局容器。

2.给需要滑动的组件设置app:layout_scrollFlags=”scroll|enterAlways”属性。

3.给滑动的组件设置app:layout_behavior属性

CollapsingToolbarLayout：

可实现Toolbar的折叠效果。CollapsingToolbarLayout的子视图类似与LinearLayout垂直方向排放。

app:contentScrim="?attr/colorPrimary"

ToolBar被折叠到顶部固定时候的背景，我们可以通过代码调用setContentScrim(Drawable)方法改变背景或者在属性中使用app:contentScrim=”?attr/colorPrimary”来改变背景。

app:title="title"

ToolBar的标题，当CollapsingToolbarLayout全屏没有折叠时，title显示的是大字体，在折叠的过程中，title不断变小到一定大小的效果。我们可以通过代码调用setTitle(CharSequence)方法设置title。

app:layout_collapseParallaxMultiplier="1.0"

CollapsingToolbarLayout滑动时，子视图的视觉差，可以通过属性app:layout_collapseParallaxMultiplier=”0.6”改变。值de的范围[0.0,1.0]，值越大视察越大。

子视图：

app:layout_collapseMode="parallax | pin”

子视图的折叠模式，在子视图设置，有两种

“pin”：固定模式，在折叠的时候最后固定在顶端；

“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。

其他视图

app:layout_anchor="@id/appbar"

提供了一个layout_anchor的属性，连同layout_anchorGravity一起，可以用来放置与其他视图关联在一起的悬浮视图（如FloatingActionButton）。

与某一个AppBarLayout控件相关联

app:layout_anchorGravity="bottom | right | end"

悬浮视图的位置

注意：

使用CollapsingToolbarLayout实现折叠效果，需要注意3点

1. AppBarLayout的高度固定

2. CollapsingToolbarLayout的子视图设置layout_collapseMode属性

3.关联悬浮视图设置app:layout_anchor，app:layout_anchorGravity属性

二.TabLayout

TabLayout

现在比较流行viewpager和fragment相结合一起使用，以前我们都是使用viewpager+fragment+第三方开源的PagerSlidingTabStrip来一起使用，来达到如下的效果：

在android 5.0之后，google把一些控件进行了集成，这里面就有一个新的控件TabLayout，它就可以完成上面的功能了。

首先sdk的版本必须是22，要想使用这个控件，你必须下载或更新sdk的版本，你要更新的22也就是5.1的版本，才会有这个控件的出现。

我们用一个例子来介绍一个这个控件：

activity_main.xml文件

在TabLayout中我使用了color.xml和style.xml中的颜色和样式。下面把代码给大家

color.xml

<?xml version="1.0" encoding="utf-8" ?>    #FFFFFF    #4876FF    #808080

style.xml

style.xml

显示的样子是这样的：

在编写MainActivity.java之前，我们还要做几个准备工作，是什么呢，就是建立几个fragment用来显示，然后建立两个Adatper用来加载，为什么要用两个Adapter呢，这里说明一下，在使用viewpager的时候，我们可以在其中加载view也可以加载fragment，这里我们做两个，就是为了演示用一下。OK，下面建立三个fragment

NewsFragment.java

import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;/** * Created by cg on 2015/10/21. */public class NewsFragment extends Fragment {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment_news, container, false);        return view;    }}

fragment_news.xml

<?xml version="1.0" encoding="utf-8"?>

非常简单的一段代码，就是为了显示一段文件。

另外两个SportsFragment和Funfragment和它一样，就是名字和里面的文字变了一下，我就不复制了。

现在看两个Adapter，为view服务的，我们叫它viewAdapter，代码如下：

viewAdapter.java 它继承PagerAdapter

import android.content.Context;import android.graphics.drawable.Drawable;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.text.Spannable;import android.text.SpannableString;import android.text.style.ImageSpan;import android.view.View;import android.view.ViewGroup;import java.util.List;/** * 此adpter是在一个fragment中切换不同的view，好处是在一个activity中可以取得所有view中的值 * Created by cg on 2015/10/21. */public class viewAdapter extends PagerAdapter {    public List list_view;    private List list_Title;                              //tab名的列表    private int[] tabImg;    private Context context;    public viewAdapter(Context context,List list_view,List list_Title,int[] tabImg) {        this.list_view = list_view;        this.list_Title = list_Title;        this.tabImg = tabImg;        this.context = context;    }    @Override    public int getCount() {        return list_view.size();    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view==object;    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        ((ViewPager) container).addView(list_view.get(position), 0);        return list_view.get(position);    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        ((ViewPager) container).removeView(list_view.get(position));    }    /**     * 此方法是给tablayout中的tab赋值的，就是显示名称,并且给其添加icon的图标     * @param position     * @return     */    @Override    public CharSequence getPageTitle(int position) {        //这段被注的代码，是只显示文字，不显示图标        //return  list_Title.get(position % list_Title.size());        Drawable dImage = context.getResources().getDrawable(tabImg[position]);        dImage.setBounds(0, 0, dImage.getIntrinsicWidth(), dImage.getIntrinsicHeight());        //这里前面加的空格就是为图片显示        SpannableString sp = new SpannableString("  "+ list_Title.get(position));        ImageSpan imageSpan = new ImageSpan(dImage, ImageSpan.ALIGN_BOTTOM);        sp.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);        return  sp;    }}

fragmentAdapter.java 它继承自FragmentPagerAdapter

importandroid.support.v4.app.Fragment;importandroid.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter; import java.util.List; /** * 这里使用多个fragment进行切换，好处是每个fragment 都有自己独立的代码 * Created by cg on 2015/10/21. */public class fragmentAdapter extendsFragmentPagerAdapter {    private List list_fragment;                         //fragment列表   private List list_Title;                              //tab名的列表    public fragmentAdapter(FragmentManager fm,Listlist_fragment,List list_Title) {        super(fm);        this.list_fragment = list_fragment;        this.list_Title = list_Title;   }    @Override   public Fragment getItem(int i) {        return list_fragment.get(i);   }    @Override   public int getCount() {        return list_fragment.size();   }    /**    * 此方法是给tablayout中的tab赋值的，就是显示名称    * @param position    * @return    */   @Override   public CharSequence getPageTitle(int position) {        return list_Title.get(position % list_Title.size());   }}

下面我们来看一下，MainActivity.java这里面我加了详细的注解，这里就不多说了，直接看代码就OK了

import android.os.Bundle;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.view.ViewPager;import android.support.v7.app.ActionBarActivity;import android.view.LayoutInflater;import android.view.View;import com.example.cg.tablayoutlearn.Adapter.fragmentAdapter;import com.example.cg.tablayoutlearn.Adapter.viewAdapter;import java.util.ArrayList;import java.util.List;public class MainActivity extends ActionBarActivity {    private TabLayout tab_title;    private ViewPager vp_pager;    private List list_title;                                      //tab名称列表    private List listViews;    private List list_fragment;    private View newsView;                                                //定义新闻页面    private View sportView;                                               //定义体育页面    private View funView;                                                 //定义娱乐页面    private viewAdapter vAdapter;                                         //定义以view为切换的adapter    private fragmentAdapter fAdapter;                                     //定义以fragment为切换的adapter    private NewsFragment nFragment;    private SportsFragment sFragment;    private FunFragment fFragment;    private int[] tabImg;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initControls();        viewChanage();        //fragmentChange();    }    /**     * 初始化控件     */    private void initControls()    {        tab_title = (TabLayout)findViewById(R.id.tab_title);        vp_pager = (ViewPager)findViewById(R.id.vp_pager);        //为tabLayout上的图标赋值        tabImg = new int[]{R.drawable.ic_collected,R.drawable.ic_commented,R.drawable.ic_drawer_login_normal};    }    /**     * 采用在viewpager中切换 view 的方式,并添加了icon的功能     */    private void viewChanage()    {        listViews = new ArrayList<>();        LayoutInflater mInflater = getLayoutInflater();        newsView = mInflater.inflate(R.layout.fragment_news, null);        sportView = mInflater.inflate(R.layout.fragment_sport, null);        funView = mInflater.inflate(R.layout.fragment_fun, null);        listViews.add(newsView);        listViews.add(sportView);        listViews.add(funView);        list_title = new ArrayList<>();        list_title.add("新闻");        list_title.add("体育");        list_title.add("娱乐");        //设置TabLayout的模式,这里主要是用来显示tab展示的情况的        //TabLayout.MODE_FIXED          各tab平分整个工具栏,如果不设置，则默认就是这个值        //TabLayout.MODE_SCROLLABLE     适用于多tab的，也就是有滚动条的，一行显示不下这些tab可以用这个        //                              当然了，你要是想做点特别的，像知乎里就使用的这种效果        tab_title.setTabMode(TabLayout.MODE_FIXED);        //设置tablayout距离上下左右的距离        //tab_title.setPadding(20,20,20,20);        //为TabLayout添加tab名称        tab_title.addTab(tab_title.newTab().setText(list_title.get(0)));        tab_title.addTab(tab_title.newTab().setText(list_title.get(1)));        tab_title.addTab(tab_title.newTab().setText(list_title.get(2)));        vAdapter = new viewAdapter(this,listViews,list_title,tabImg);        vp_pager.setAdapter(vAdapter);        //将tabLayout与viewpager连起来        tab_title.setupWithViewPager(vp_pager);    }    /**     * 采用viewpager中切换fragment     */    private void fragmentChange()    {        list_fragment = new ArrayList<>();        nFragment = new NewsFragment();        sFragment = new SportsFragment();        fFragment = new FunFragment();        list_fragment.add(nFragment);        list_fragment.add(sFragment);        list_fragment.add(fFragment);        list_title = new ArrayList<>();        list_title.add("新闻");        list_title.add("体育");        list_title.add("娱乐");        fAdapter = new fragmentAdapter(getSupportFragmentManager(),list_fragment,list_title);        vp_pager.setAdapter(fAdapter);        //将tabLayout与viewpager连起来        tab_title.setupWithViewPager(vp_pager);    }}

这里我们看一下效果图：

viewChanage()的显示

更多相关文章

随机推荐