【 CoordinatorLayout-与手势完美结合的滑动视图 】
【 AppBarLayout-可以随手势滑动的AppBar 】
1 <android.support.design.widget.CoordinatorLayout 2 xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:app="http://schemas.android.com/apk/res-auto" 4 android:id="@+id/root_layout" 5 android:layout_width="match_parent" 6 android:layout_height="match_parent" 7 android:orientation="vertical"> 8 9 <android.support.design.widget.AppBarLayout 10 android:layout_width="match_parent" 11 android:layout_height="wrap_content"> 12 13 <!-- 14 使用 Toolbar 作为一个标题栏 15 16 app:layout_scrollFlags="scroll|enterAlways": 17 当向上混动的时候,Toolbar会移出屏幕,只要向下滑动,就会显示Toolbar。 18 19 app:layout_scrollFlags="scroll|enterAlwaysCollapsed": 20 当向上混动的时候,Toolbar会移出屏幕,向下滑动时,滑动到第一个的时候才会显示Toolbar。 21 22 app:layout_scrollFlags="scroll|exitUntilCollapsed": 23 不管向上还是向下移动,Toolbar都不会滑出屏幕。 24 另外:如果加上,android:minHeight="20dp"的时候。 25 当向上滑动时候,Toolbar移出屏幕,直到变成最小高度, 26 向下滑动时,滑动到第一个的时候才会显示Toolbar 27 --> 28 <android.support.v7.widget.Toolbar 29 android:id="@+id/toolbar" 30 android:layout_width="match_parent" 31 android:layout_height="?attr/actionBarSize" 32 android:background="#77db93" 33 android:minHeight="20dp" 34 app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 35 app:layout_scrollFlags="scroll|exitUntilCollapsed" /> 36 </android.support.design.widget.AppBarLayout> 37 38 <!-- 与手势完美结合的滑动视图 --> 39 <android.support.v4.widget.NestedScrollView 40 android:layout_width="match_parent" 41 android:layout_height="match_parent" 42 app:layout_behavior="@string/appbar_scrolling_view_behavior"> 43 <LinearLayout 44 android:layout_width="match_parent" 45 android:layout_height="wrap_content" 46 android:orientation="vertical"> 47 <ImageView 48 android:layout_width="wrap_content" 49 android:layout_height="wrap_content" 50 android:src="@drawable/ic_launcher" /> 51 ............ 52 <ImageView 53 android:layout_width="wrap_content" 54 android:layout_height="wrap_content" 55 android:src="@drawable/ic_launcher" /> 56 </LinearLayout> 57 </android.support.v4.widget.NestedScrollView> 58 59 <android.support.design.widget.FloatingActionButton 60 android:id="@+id/fab_btn" 61 android:layout_width="wrap_content" 62 android:layout_height="wrap_content" 63 android:layout_gravity="bottom|right" 64 android:layout_margin="10dp" 65 android:src="@drawable/ic_launcher" 66 app:fabSize="normal" /> 67 </android.support.design.widget.CoordinatorLayout>
1 <resources>
2 <!-- values/styles.xml -->
3 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
4 <!-- Customize your theme here. -->
5 <item name="android:windowActionBar">false</item>
6 <item name="android:windowNoTitle">true</item>
7 <item name="windowActionBar">false</item>
8 <item name="windowNoTitle">true</item>
9 </style>
10 </resources>
1 package com.example.com.designdemo; 2 3 import android.os.Bundle; 4 import android.support.design.widget.CoordinatorLayout; 5 import android.support.design.widget.FloatingActionButton; 6 import android.support.design.widget.Snackbar; 7 import android.support.v7.app.AppCompatActivity; 8 import android.support.v7.widget.Toolbar; 9 import android.view.View; 11 12 public class MainActivity2 extends AppCompatActivity { 14 private FloatingActionButton fab_btn = null; 15 private CoordinatorLayout root_layout = null; 16 private Toolbar toolbar = null; 17 18 @Override 19 protected void onCreate(Bundle savedInstanceState) { 20 super.onCreate(savedInstanceState); 21 setContentView(R.layout.activity_main2); 22 23 toolbar = (Toolbar) this.findViewById(R.id.toolbar); 24 setSupportActionBar(toolbar); 25 26 root_layout = (CoordinatorLayout) this.findViewById(R.id.root_layout); 27 fab_btn = (FloatingActionButton) this.findViewById(R.id.fab_btn); 28 fab_btn.setOnClickListener(new View.OnClickListener() { 29 @Override 30 public void onClick(View v) { 31 Snackbar.make(root_layout, "我出来了", Snackbar.LENGTH_LONG) 32 .setAction("知道了", new View.OnClickListener() { 33 @Override 34 public void onClick(View v) { 36 } 37 }).show(); 39 } 40 }); 41 42 } 44 }
使用 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
1 <android.support.design.widget.CoordinatorLayout 2 xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:app="http://schemas.android.com/apk/res-auto" 4 android:id="@+id/root_layout" 5 android:layout_width="match_parent" 6 android:layout_height="match_parent" 7 android:orientation="vertical"> 8 9 <!-- 10 android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 11 把文字颜色设置成白色。 12 --> 13 <android.support.design.widget.AppBarLayout 14 android:layout_width="match_parent" 15 android:layout_height="300dp" 16 android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 17 <!-- 18 app:contentScrim="#77db93" 滑动到顶部,图片背景变成Toolbar条。 19 --> 20 <android.support.design.widget.CollapsingToolbarLayout 21 android:id="@+id/collapsingToolbarLayout" 22 android:layout_width="match_parent" 23 android:layout_height="match_parent" 24 app:contentScrim="#77db93" 25 app:expandedTitleMarginStart="80dp" 26 app:layout_scrollFlags="scroll|exitUntilCollapsed"> 27 <ImageView 28 android:layout_width="wrap_content" 29 android:layout_height="wrap_content" 30 android:scaleType="fitXY" 31 android:src="@drawable/bg_01" 32 app:layout_collapseMode="parallax" 33 app:layout_collapseParallaxMultiplier="0.8"/> 34 35 <!-- android:background="#77db93" --> 36 <android.support.v7.widget.Toolbar 37 android:id="@+id/toolbar" 38 android:layout_width="match_parent" 39 android:layout_height="?attr/actionBarSize" 40 android:minHeight="20dp" 41 app:layout_collapseMode="pin" 42 app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 43 </android.support.design.widget.CollapsingToolbarLayout> 44 </android.support.design.widget.AppBarLayout> 45 46 <!-- 与手势完美结合的滑动视图 --> 47 <android.support.v4.widget.NestedScrollView 48 android:layout_width="match_parent" 49 android:layout_height="match_parent" 50 app:layout_behavior="@string/appbar_scrolling_view_behavior"> 52 <LinearLayout 53 android:layout_width="match_parent" 54 android:layout_height="wrap_content" 55 android:orientation="vertical"> 57 <ImageView 58 android:layout_width="wrap_content" 59 android:layout_height="wrap_content" 60 android:src="@drawable/ic_launcher" /> 61 ............... 185 <ImageView 186 android:layout_width="wrap_content" 187 android:layout_height="wrap_content" 188 android:src="@drawable/ic_launcher" /> 189 </LinearLayout> 190 </android.support.v4.widget.NestedScrollView> 191 192 <android.support.design.widget.FloatingActionButton 193 android:id="@+id/fab_btn" 194 android:layout_width="wrap_content" 195 android:layout_height="wrap_content" 196 android:layout_gravity="bottom|right" 197 android:layout_margin="10dp" 198 android:src="@drawable/ic_launcher" 199 app:fabSize="normal" /> 200 </android.support.design.widget.CoordinatorLayout>
2、MainActivity2.xml
1 package com.example.com.designdemo; 2 3 import android.os.Bundle; 4 import android.support.design.widget.CollapsingToolbarLayout; 5 import android.support.design.widget.CoordinatorLayout; 6 import android.support.design.widget.FloatingActionButton; 7 import android.support.design.widget.Snackbar; 8 import android.support.v7.app.AppCompatActivity; 9 import android.support.v7.widget.Toolbar; 10 import android.view.View; 12 13 public class MainActivity2 extends AppCompatActivity { 15 private FloatingActionButton fab_btn = null; 16 private CoordinatorLayout root_layout = null; 17 private CollapsingToolbarLayout collapsingToolbarLayout = null; 18 private Toolbar toolbar = null; 19 20 @Override 21 protected void onCreate(Bundle savedInstanceState) { 22 super.onCreate(savedInstanceState); 23 setContentView(R.layout.activity_main2); 24 25 toolbar = (Toolbar) this.findViewById(R.id.toolbar); 26 setSupportActionBar(toolbar); 27 getSupportActionBar().setHomeButtonEnabled(true); 28 getSupportActionBar().setDisplayHomeAsUpEnabled(true); 29 30 collapsingToolbarLayout = (CollapsingToolbarLayout)this.findViewById(R.id.collapsingToolbarLayout); 31 collapsingToolbarLayout.setTitle("标题文字内容"); 32 33 root_layout = (CoordinatorLayout) this.findViewById(R.id.root_layout); 34 fab_btn = (FloatingActionButton) this.findViewById(R.id.fab_btn); 35 fab_btn.setOnClickListener(new View.OnClickListener() { 36 @Override 37 public void onClick(View v) { 38 Snackbar.make(root_layout, "我出来了", Snackbar.LENGTH_LONG) 39 .setAction("知道了", new View.OnClickListener() { 40 @Override 41 public void onClick(View v) {} 44 }).show(); 46 } 47 }); 49 } 51 }
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