64、具有过渡动画效果的布局Layout（ 2 ）

【 CoordinatorLayout-与手势完美结合的滑动视图】

【 AppBarLayout-可以随手势滑动的AppBar 】

 <android.support.design.widget.CoordinatorLayout

     xmlns:android="http://schemas.android.com/apk/res/android"

     xmlns:app="http://schemas.android.com/apk/res-auto"

     android:id="@+id/root_layout"

     android:layout_width="match_parent"

     android:layout_height="match_parent"

     android:orientation="vertical">

     <android.support.design.widget.AppBarLayout

         android:layout_width="match_parent"

         android:layout_height="wrap_content">

         <!--

         使用 Toolbar 作为一个标题栏

         app:layout_scrollFlags="scroll|enterAlways":

         当向上混动的时候，Toolbar会移出屏幕，只要向下滑动，就会显示Toolbar。

         app:layout_scrollFlags="scroll|enterAlwaysCollapsed":

         当向上混动的时候，Toolbar会移出屏幕,向下滑动时，滑动到第一个的时候才会显示Toolbar。

         app:layout_scrollFlags="scroll|exitUntilCollapsed":

         不管向上还是向下移动，Toolbar都不会滑出屏幕。

         另外：如果加上，android:minHeight="20dp"的时候。

         当向上滑动时候，Toolbar移出屏幕，直到变成最小高度，

         向下滑动时，滑动到第一个的时候才会显示Toolbar

         -->

         <android.support.v7.widget.Toolbar

             android:id="@+id/toolbar"

             android:layout_width="match_parent"

             android:layout_height="?attr/actionBarSize"

             android:background="#77db93"

             android:minHeight="20dp"

             app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

             app:layout_scrollFlags="scroll|exitUntilCollapsed" />

     </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">

         <LinearLayout

             android:layout_width="match_parent"

             android:layout_height="wrap_content"

             android:orientation="vertical">

             <ImageView

                 android:layout_width="wrap_content"

                 android:layout_height="wrap_content"

                 android:src="@drawable/ic_launcher" />

             ............

             <ImageView

                 android:layout_width="wrap_content"

                 android:layout_height="wrap_content"

                 android:src="@drawable/ic_launcher" />

         </LinearLayout>

     </android.support.v4.widget.NestedScrollView>

     <android.support.design.widget.FloatingActionButton

         android:id="@+id/fab_btn"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_gravity="bottom|right"

         android:layout_margin="10dp"

         android:src="@drawable/ic_launcher"

         app:fabSize="normal" />

 </android.support.design.widget.CoordinatorLayout>

 <resources>

     <!-- values/styles.xml -->

     <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

         <!-- Customize your theme here. -->

         <item name="android:windowActionBar">false</item>

         <item name="android:windowNoTitle">true</item>

         <item name="windowActionBar">false</item>

         <item name="windowNoTitle">true</item>

     </style>

 </resources>

 package com.example.com.designdemo;

 import android.os.Bundle;

 import android.support.design.widget.CoordinatorLayout;

 import android.support.design.widget.FloatingActionButton;

 import android.support.design.widget.Snackbar;

 import android.support.v7.app.AppCompatActivity;

 import android.support.v7.widget.Toolbar;

 import android.view.View;

 public class MainActivity2 extends AppCompatActivity {

     private FloatingActionButton fab_btn = null;

     private CoordinatorLayout root_layout = null;

     private Toolbar toolbar = null;

     @Override

     protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.activity_main2);

         toolbar = (Toolbar) this.findViewById(R.id.toolbar);

         setSupportActionBar(toolbar);

         root_layout = (CoordinatorLayout) this.findViewById(R.id.root_layout);

         fab_btn = (FloatingActionButton) this.findViewById(R.id.fab_btn);

         fab_btn.setOnClickListener(new View.OnClickListener() {

             @Override

             public void onClick(View v) {

                 Snackbar.make(root_layout, "我出来了", Snackbar.LENGTH_LONG)

                         .setAction("知道了", new View.OnClickListener() {

                             @Override

                             public void onClick(View v) {

                             }

                         }).show();

             }

         });

     }

 }

使用 Toolbar 作为一个标题栏

app:layout_scrollFlags="scroll|enterAlways":
当向上混动的时候，Toolbar会移出屏幕，只要向下滑动，就会显示Toolbar。

app:layout_scrollFlags="scroll|enterAlwaysCollapsed":
当向上混动的时候，Toolbar会移出屏幕,向下滑动时，滑动到第一个的时候才会显示Toolbar。

app:layout_scrollFlags="scroll|exitUntilCollapsed":
不管向上还是向下移动，Toolbar都不会滑出屏幕。
另外：如果加上，android:minHeight="20dp"的时候。当向上滑动时候，Toolbar移出屏幕，直到变成最小高度，
向下滑动时，滑动到第一个的时候才会显示Toolbar

【 Collapsing Toolbars-可以伸缩的ToolBar 】

1、activity_main2.xml

 <android.support.design.widget.CoordinatorLayout

     xmlns:android="http://schemas.android.com/apk/res/android"

     xmlns:app="http://schemas.android.com/apk/res-auto"

     android:id="@+id/root_layout"

     android:layout_width="match_parent"

     android:layout_height="match_parent"

     android:orientation="vertical">

     <!--

        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

        把文字颜色设置成白色。

     -->

     <android.support.design.widget.AppBarLayout

         android:layout_width="match_parent"

         android:layout_height="300dp"

         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

         <!--

              app:contentScrim="#77db93" 滑动到顶部，图片背景变成Toolbar条。

         -->

         <android.support.design.widget.CollapsingToolbarLayout

             android:id="@+id/collapsingToolbarLayout"

             android:layout_width="match_parent"

             android:layout_height="match_parent"

             app:contentScrim="#77db93"

             app:expandedTitleMarginStart="80dp"

             app:layout_scrollFlags="scroll|exitUntilCollapsed">

             <ImageView

                 android:layout_width="wrap_content"

                 android:layout_height="wrap_content"

                 android:scaleType="fitXY"

                 android:src="@drawable/bg_01"

                 app:layout_collapseMode="parallax"

                 app:layout_collapseParallaxMultiplier="0.8"/>

             <!-- android:background="#77db93" -->

         <android.support.v7.widget.Toolbar

             android:id="@+id/toolbar"

             android:layout_width="match_parent"

             android:layout_height="?attr/actionBarSize"

             android:minHeight="20dp"

             app:layout_collapseMode="pin"

             app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

         </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">

         <LinearLayout

             android:layout_width="match_parent"

             android:layout_height="wrap_content"

             android:orientation="vertical">

             <ImageView

                 android:layout_width="wrap_content"

                 android:layout_height="wrap_content"

                 android:src="@drawable/ic_launcher" />

             ...............

             <ImageView

                 android:layout_width="wrap_content"

                 android:layout_height="wrap_content"

                 android:src="@drawable/ic_launcher" />

         </LinearLayout>

     </android.support.v4.widget.NestedScrollView>

     <android.support.design.widget.FloatingActionButton

         android:id="@+id/fab_btn"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:layout_gravity="bottom|right"

         android:layout_margin="10dp"

         android:src="@drawable/ic_launcher"

         app:fabSize="normal" />

 </android.support.design.widget.CoordinatorLayout>

2、MainActivity2.xml

 package com.example.com.designdemo;

 import android.os.Bundle;

 import android.support.design.widget.CollapsingToolbarLayout;

 import android.support.design.widget.CoordinatorLayout;

 import android.support.design.widget.FloatingActionButton;

 import android.support.design.widget.Snackbar;

 import android.support.v7.app.AppCompatActivity;

 import android.support.v7.widget.Toolbar;

 import android.view.View;

 public class MainActivity2 extends AppCompatActivity {

     private FloatingActionButton fab_btn = null;

     private CoordinatorLayout root_layout = null;

     private CollapsingToolbarLayout collapsingToolbarLayout = null;

     private Toolbar toolbar = null;

     @Override

     protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.activity_main2);

         toolbar = (Toolbar) this.findViewById(R.id.toolbar);

         setSupportActionBar(toolbar);

         getSupportActionBar().setHomeButtonEnabled(true);

         getSupportActionBar().setDisplayHomeAsUpEnabled(true);

         collapsingToolbarLayout = (CollapsingToolbarLayout)this.findViewById(R.id.collapsingToolbarLayout);

         collapsingToolbarLayout.setTitle("标题文字内容");

         root_layout = (CoordinatorLayout) this.findViewById(R.id.root_layout);

         fab_btn = (FloatingActionButton) this.findViewById(R.id.fab_btn);

         fab_btn.setOnClickListener(new View.OnClickListener() {

             @Override

             public void onClick(View v) {

                 Snackbar.make(root_layout, "我出来了", Snackbar.LENGTH_LONG)

                         .setAction("知道了", new View.OnClickListener() {

                             @Override

                             public void onClick(View v) {}

                         }).show();

             }

         });

     }

 }

3、styles.xml

<resources>

    <!-- values/styles.xml -->

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

        <!-- Customize your theme here. -->

        <item name="android:windowActionBar">false</item>

        <item name="android:windowNoTitle">true</item>

        <item name="windowActionBar">false</item>

        <item name="windowNoTitle">true</item>

    </style>

</resources>

DEMO完整下载地址：http://download.csdn.net/detail/androidsj/9304305

巴特西

64、具有过渡动画效果的布局Layout（ 2 ）

最新文章

热门文章