一.CoordinatorLayout
作为Android的控件, CoordinatorLayout已经加入最新的HelloWorld项目中, 也是Material风格的重要组件, 协调(Coordinate)其他组件, 实现联动. 那么让我们来看看这个动画效果怎么用吧?
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".Activity.Activity.MainActivity">
<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"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/head"
app:popupTheme="@style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:background="@color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="@color/textcolor_red"
app:tabSelectedTextColor="@color/textcolor_red"
app:tabTextColor="@color/black"/>
</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" />
<include layout="@layout/content_main" />
<!--<android.support.design.widget.FloatingActionButton-->
<!--android:id="@+id/fab"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_gravity="bottom|end"-->
<!--android:layout_margin="@dimen/fab_margin"-->
<!--app:borderWidth="0dp"-->
<!--android:src="@android:drawable/ic_input_add" />-->
<com.wangjie.rapidfloatingactionbutton.RapidFloatingActionLayout
xmlns:rfal="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main_rfal"
android:layout_width="match_parent"
android:layout_height="match_parent"
rfal:rfal_frame_color="#ffffff"
rfal:rfal_frame_alpha="0.7"
>
<com.wangjie.rapidfloatingactionbutton.RapidFloatingActionButton
xmlns:rfab="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main_rfab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="15dp"
android:layout_marginBottom="15dp"
android:padding="8dp"
rfab:rfab_size="normal"
rfab:rfab_drawable="@drawable/rfab__drawable_rfab_default"
rfab:rfab_color_normal="#37474f"
rfab:rfab_color_pressed="#263238"
rfab:rfab_shadow_radius="7dp"
rfab:rfab_shadow_color="#999999"
rfab:rfab_shadow_dx="0dp"
rfab:rfab_shadow_dy="5dp"
/>
</com.wangjie.rapidfloatingactionbutton.RapidFloatingActionLayout>
</android.support.design.widget.CoordinatorLayout>
属性：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文件
<LinearLayout 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:orientation="vertical">
<!--
android design library提供的TabLayout控件
tabIndicatorColor：菜单下方移动的横线的颜色
tabSelectedTextColor ：菜单被选中之后的颜色
tabTextColor : 菜单正常的颜色
app:tabTextAppearance : 添加样式，这里加了样式主要是为了在文字前面加一个图所用，就是把textAllCaps设置成false
-->
<android.support.design.widget.TabLayout
android:id="@+id/tab_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/titleBlue"
app:tabIndicatorColor="@color/white"
app:tabSelectedTextColor="@color/gray"
app:tabTextColor="@color/white"
app:tabTextAppearance="@style/tablayoutIcon"
/>
<android.support.v4.view.ViewPager
android:id="@+id/vp_pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
</LinearLayout>
在TabLayout中我使用了color.xml和style.xml中的颜色和样式。下面把代码给大家
color.xml
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<color name="white">#FFFFFF</color><!--白色 -->
<color name="titleBlue">#4876FF</color><!--天兰色 -->
<color name="gray">#808080</color><!--灰色 -->
</resources>
style.xml
style.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
<style name="tablayoutIcon" parent="TextAppearance.Design.Tab">
<item name="textAllCaps">false</item>
</style>
</resources>
显示的样子是这样的：
在编写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"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="我是新闻fragment"
android:textSize="20dp"
android:gravity="center"/>
</LinearLayout>
非常简单的一段代码，就是为了显示一段文件。
另外两个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<View> list_view;
private List<String> list_Title; //tab名的列表
private int[] tabImg;
private Context context;
public viewAdapter(Context context,List<View> list_view,List<String> 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<Fragment> list_fragment; //fragment列表
private List<String> list_Title; //tab名的列表
public fragmentAdapter(FragmentManager fm,List<Fragment>list_fragment,List<String> 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<String> list_title; //tab名称列表
private List<View> listViews;
private List<Fragment> 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()的显示
扫一扫
508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
