Android CoordinatorLayout协调布局
前言
- CoordinatorLayout是一个加强版的FrameLayout，可以协调子控件的交互
- 是Material Design包里的组件
使用
- 案例1
FloatingActionButton和Snackbar都已经介绍过了，这里就不做重复的讲解了，还不知道的可以看我之前的文章 Material Design总结
<?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_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:src="@drawable/ic_launcher"
android:layout_gravity="bottom|right"
android:id="@+id/mainFloatingActionButton1"
android:layout_margin="15dp"/>
</android.support.design.widget.CoordinatorLayout>
FloatingActionButton fab=(FloatingActionButton) findViewById(R.id.mainFloatingActionButton1);
fab.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View p1)
{
Snackbar.make(p1, "这是一个Snackbar", Snackbar.LENGTH_LONG)
.setAction("确定", new OnClickListener(){
@Override
public void onClick(View p1)
{
}
}).show();
}
});
效果：当Snackbar显示时，FloatingActionButton自动往上移了，且Snackbar可以通过滑动取消
AppBarLayout
- 它其实就是垂直方向的 LinearLayout，在内部做了很多滚动事件的封装
主要属性：app:layout_scrollFlags=""
| 参数 | 解析 |
|---|---|
| scroll | 监听 滑动/滚动 事件并响应 |
| enterAlways | 一直响应 滑动/滚动 事件 向下：逐渐显示 向上：逐渐消失 |
| enterAlwaysCollapsed | 只响应顶部的 滑动/滚动 事件 |
| exitUntilCollapsed | 只响应顶部的 滑动/滚动 事件，允许子View吸附在顶部 |
| snap | 只响应顶部的 滑动/滚动 事件，会根据当前位置自动调整状态(隐藏/显示) |
然后为需要监听 滑动/滚动 事件的组件添加这条属性
app:layout_behavior="@string/appbar_scrolling_view_behavior"
- 案例2
布局(重点内容)
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_content"
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:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
android:id="@+id/mainToolbar1"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/mainRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
- 下面仅为实现效果(非重点)
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/item1"
android:icon="@drawable/download"
android:title="item1"
app:showAsAction="always" />
<item
android:id="@+id/item2"
android:icon="@drawable/time"
android:title="item2"
app:showAsAction="ifRoom" />
<item
android:id="@+id/item3"
android:icon="@drawable/ic_launcher"
android:title="item3"
app:showAsAction="never" />
</menu>
public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.MyViewHolder>
{
Context mContext;
String[]content={"您好","这是一份展示品","看看效果吧","！","是不是感觉还不错呀","哈哈哈","嘿嘿","…","其实这个还是挺好用的以后你就会知道了","使用频率也非常高","相信我你会喜欢上使用它的","所以大家一定要好好学哦"};
@Override
public MyViewHolder onCreateViewHolder(ViewGroup p1, int p2) {
MyViewHolder viewholder=new MyViewHolder(LayoutInflater.from(mContext).inflate(R.layout.item_sample,p1,false));
return viewholder;
}
@Override
public void onBindViewHolder(MyViewHolder p1,final int p2){
p1.textView.setText(content[p2]);
p1.itemView.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View p1)
{
Toast.makeText(mContext,"item"+p2,Toast.LENGTH_SHORT).show();
}
});
}
@Override
public int getItemCount()
{
return content.length;
}
public MyRecyclerViewAdapter (Context mContxt)
{
this.mContext=mContxt;
}
class MyViewHolder extends RecyclerView.ViewHolder
{
TextView textView;
public MyViewHolder(View view){
super(view);
textView=(TextView) view.findViewById(R.id.itemsampleTextView1);
}
}
}
public class MainActivity extends AppCompatActivity
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
RecyclerView recy=(RecyclerView) findViewById(R.id.mainRecyclerView);
recy.setLayoutManager(new LinearLayoutManager(this));
recy.setAdapter(new MyRecyclerViewAdapter(this));
Toolbar toolbar=(Toolbar) findViewById(R.id.mainToolbar1);
toolbar.setTitle("标题");
toolbar.setSubtitle("副标题");
toolbar.setNavigationIcon(R.drawable.ic_launcher);
setSupportActionBar(toolbar);
}
@Override
public boolean onCreateOptionsMenu(Menu menu)
{
getMenuInflater().inflate(R.menu.menu, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item)
{
switch (item.getItemId())
{
case R.id.item1:
{
Toast.makeText(this,"你点击了item1",Toast.LENGTH_SHORT).show();
}
break;
case R.id.item2:
{
Toast.makeText(this,"你点击了item2",Toast.LENGTH_SHORT).show();
}
break;
case R.id.item3:
{
Toast.makeText(this,"你点击了item3",Toast.LENGTH_SHORT).show();
}
}
return super.onOptionsItemSelected(item);
}
}
CollapsingToolbarLayout
- 实现布局折叠效果
主要属性：layout_collapseMode=""
| 参数 | 解析 |
|---|---|
| off | 默认属性，布局正常显示，没有折叠的行为 |
| pin | 当CollapsingToolbarLayout完全折叠后，仍然可以保留在屏幕上 |
| parallax | 实现视差滚动效果，会随着CollapsingToolbarLayout的折叠而彻底消失，可以通过属性layout_collapseParallaxMultiplier(设置视差因子)改变视差效果 |
其他属性
layout_collapseParallaxMultiplier
设置视差滚动因子(取值范围：0~1)
-
app:titleEnabled
true为自动展开，false为自动收缩 -
app:contentScrim
未展开时的布局背景颜色 -
app:statusBarScrim
展开后的布局背景颜色 -
app:title
标题文字内容 -
app:collapsedTitleTextColor
未展开时的标题文字颜色 -
app:expandedTitleTextColor
展开后的标题文字颜色 -
app:collapsedTitleTextAppearance
未展开时的标题文字字体 -
app:expandedTitleTextAppearance
展开后的标题文字字体 -
app:collapsedTitleGravity
未展开时的标题文字对齐方式 -
app:expandedTitleGravity
展开后的标题文字对齐方式 -
app:expandedTitleMargin
展开后的标题文字四周间距 -
app:scrimAnimationDuration
动画持续时间 -
app:scrimVisibleHeightTrigger
当可见高度还剩多少时开始折叠 -
案例3
<?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="200dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:titleEnabled="true"
app:title="CollapsingToolbarLayout"
app:expandedTitleGravity="left|bottom"
app:collapsedTitleGravity="left"
app:contentScrim="#FFFFFF"
app:statusBarScrim="#0DB8F7"
app:scrimAnimationDuration="1200"
app:scrimVisibleHeightTrigger="150dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:id="@+id/mainCollapsingToolbarLayout1">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
android:background="@drawable/image_1"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="70dp"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/mainRecyclerView1"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
- 我们可以在代码中监听 滑动/滚动
- 那么我们应该监听哪个组件呢？想一想还记得吗？不记得也没关系，看下面；
| 名称 | 负责区域 |
|---|---|
| AppBarLayout | 负责 滑动/滚动 |
| CoordinatorLayout | 负责协调 |
| CollapsingToolbarLayout | 负责折叠 |
final CollapsingToolbarLayout ctl=(CollapsingToolbarLayout) findViewById(R.id.mainCollapsingToolbarLayout1);
AppBarLayout mAppBarLayout=(AppBarLayout) findViewById(R.id.mainAppBarLayout1);
mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener(){
@Override
public void onOffsetChanged(AppBarLayout p1, int p2)
{
ctl.setTitle(p2+"");
}
});