androidCoordinatorLayout使⽤
⼀、CoordinatorLayout有什么作⽤
CoordinatorLayout作为“super-powered FrameLayout”基本实现两个功能：
2、调度协调⼦布局
CoordinatorLayout使⽤新的思路通过协调调度⼦布局的形式实现触摸影响布局的形式产⽣动画效果。CoordinatorLayout通过设置⼦View的 Behaviors来调度⼦View。系统（Support V7）提供了AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior, FloatingActionButton.Behavior, SwipeDismissBehavior<V extends View> 等。 使⽤CoordinatorLayout需要在Gradle加⼊Support Design Library：
compile 'com.android.support:design:22.2.1'
⼆、CoordinatorLayout与FloatingActionButton
定义布局⽂件：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="schemas.android/apk/res/android"
xmlns:app="schemas.android/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="@drawable/ic_done" />
</android.support.design.widget.CoordinatorLayout>
CoordinatorLayout作为“super-powered FrameLayout”，设置⼦视图的android:layout_gravity属性控制位置。 Activity:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_main);
findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view,"FAB",Snackbar.LENGTH_LONG)
.setAction("cancel", new View.OnClickListener() {
@Override
public void onClick(View v) {
//这⾥的单击事件代表点击消除Action后的响应事件
}
})
.show();
}
});
}
}
效果：
FloatingActionButton是最简单的使⽤CoordinatorLayout的例⼦，FloatingActionButton默认使⽤FloatingActionButton.Behavior。
三、CoordinatorLayout与AppBarLayout
3.1 AppBarLayout嵌套TabLayout
布局⽂件代码：
<android.support.design.widget.CoordinatorLayout xmlns:android="schemas.android/apk/res/android"
xmlns:app="schemas.android/apk/res-auto"
android:id="@+id/main_content"
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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
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.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="@dimen/fab_margin"
android:src="@drawable/ic_done" />
</android.support.design.widget.CoordinatorLayout>
效果：
效果显⽰，视图滚动时，Toolbar会隐藏，这个效果是Android Support Library⾥⾯，新增的CoordinatorLayout, AppBarLayout实现的。通过AppBarLayout的⼦视图的属性控制。观察AppBarLayout的⼦布局，Toobar有app:layout_scrollFlags属性，这就是控制滑动时视图效果的属性。app:layout_scrollFlags有四个值： 1. scroll: 所有想滚动出屏幕的view都需要设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。例如，TabLayout 没有设置
这个值，将会停留在屏幕顶部。
2. enterAlways: 设置这个flag时，向下的滚动都会导致该view变为可见，启⽤快速“返回模式”。
3. enterAlwaysCollapsed: 当你的视图已经设置minHeight属性⼜使⽤此标志时，你的视图只能已最⼩⾼度进⼊，只有当滚动视图到达
顶部时才扩⼤到完整⾼度。
4. exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。
为了ToolBar可以滚动，CoordinatorLayout⾥⾯，放⼀个带有可滚动的View.如上的例⼦，放的是ViewPager,⽽ViewPager⾥⾯是放了RecylerView的，即是可以滚动的View。CoordinatorLayout包含的⼦视图中带有滚动属性的View需要设置app:layout_behavior属性。例如，⽰例中Viewpager设置了此属性。
app:layout_behavior="@string/appbar_scrolling_view_behavior"
为了使得Toolbar有滑动效果，必须做到如下三点:
1. CoordinatorLayout作为布局的⽗布局容器。
2. 给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。
3. 给滑动的组件设置app:layout_behavior属性
3.2 AppBarLayout嵌套CollapsingToolbarLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="schemas.android/apk/res/android"
xmlns:app="schemas.android/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="256dp"柴油脱剂
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="@drawable/header"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
固定床反应器
android:layout_margin="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="CardView"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/card_string" />
</LinearLayout>
</android.support.v7.widget.CardView>
……
升降柱cncame</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="@drawable/ic_done"
android:layout_margin="@dimen/fab_margin"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>
效果：
双电源切换装置
这种效果在详情页⾯⽤的较多，展⽰个性化内容，图像有强烈的吸引⼒。这个效果重点使⽤了CollapsingToolbarLayout 。 CollapsingToolbarLayout可实现Toolbar的折叠效果。CollapsingToolbarLayout的⼦视图类似与LinearLayout垂直⽅向排放。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议