zoukankan      html  css  js  c++  java
  • 64、具有过渡动画效果的布局Layout( 2 )

    【 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

  • 相关阅读:
    BZOJ 1718: [Usaco2006 Jan] Redundant Paths 分离的路径( tarjan )
    BZOJ 1040: [ZJOI2008]骑士( 树形dp )
    BZOJ 1691: [Usaco2007 Dec]挑剔的美食家( 平衡树 )
    HDU 5667 Sequence 矩阵快速幂
    FZU 2225 小茗的魔法阵 扫描线+树状数组
    UVA 11916 Emoogle Grid 离散对数 大步小步算法
    UVA 11754 Code Feat 中国剩余定理+暴力
    FZU 2092 收集水晶 dp+bfs
    FZU2090 旅行社的烦恼 巧妙floyd 最短路
    UVA 11426 GCD
  • 原文地址:https://www.cnblogs.com/androidsj/p/4998376.html
Copyright © 2011-2022 走看看