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

一.CoordinatorLayout

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

 




    
        
        
    
    

    

    
        
        
        
        
        
        
        
    
        
    

属性: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新特性,CoordinatorLayout,TabLayout+viewpager+fragment,RapidFloatingActionLayout详解_第1张图片

 

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

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

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

         activity_main.xml文件

        



    
    


    

 

 

 

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

       color.xml

      



    #FFFFFF
    #4876FF
    #808080
    

 

 

 

style.xml

style.xml
  

    
    
    

 

   显示的样子是这样的:

 

android新特性,CoordinatorLayout,TabLayout+viewpager+fragment,RapidFloatingActionLayout详解_第2张图片

 

        在编写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




    

 

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

 

另外两个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()的显示

 

 

android新特性,CoordinatorLayout,TabLayout+viewpager+fragment,RapidFloatingActionLayout详解_第3张图片

 

 

你可能感兴趣的:(Android初级必备知识)