提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

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

动画 效果 布局 64 具有 layout 过渡
2023-09-14 08:58:59 时间

【 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

 

相关文章