UI之CoordinatorLayout、AppbarLayout、CollapsingToolbarLayout的使用

1.CoordinatorLayout 是什么

CoordinatorLayout 是一种功能更强大的FrameLayout

主要用于:
1.作为window的顶层布局 decor
2.作为父容器调度协调子布局,通过设置子View的 Behavior来调度子View的布局实现手势影响布局的形式产生动画效果
3.Behavior是CoordinatorLayout中的一个抽象类,用来协助CoordinatorLayout的Child Views之间的交互,Library中提供了
AppbarLayout.Behavior\AppBarLayout.ScrollingViewBehavior\FloatingActionButton.Behavior\SwipeDismissBehavior等实现子类,也可以自行定义实现子类。

2.CoordinatorLayout的使用

  • 引入依赖

    compile 'com.android.support:design:22.2.1'

  • CoordinatorLayout与 FloatingActionButton合用

    // 在布局中加入coordinatorlayout和FloatingActionButton的控件
    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coor_main"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.wendy.coordinatorlayout.MainActivity">
    
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_main"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_marginBottom="10dp"
            android:layout_marginRight="10dp"
            android:elevation="4dp"
            android:src="@drawable/ic_action_accept"
            app:fabSize="normal"/>
      </android.support.design.widget.CoordinatorLayout>
    
    //代码 
    public class MainActivity extends AppCompatActivity {
        private FloatingActionButton fab;
        private CoordinatorLayout coor_layout;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            init();
        }
    
        private void init() {
            fab = findViewById(R.id.fab_main);
            fab.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                //Snackbar 和toast的用法相似,snackbar是从屏幕底滑出,通过setAction()方法可能给snackbar添加一个按钮
                    Snackbar.make(view, "hello, I am smackbar!", Snackbar.LENGTH_LONG).setAction("UNDO", 
                    new View.OnClickListener() {
                        @Override
                        public void onClick(View view) {
                            //点击SnackBar上胡按钮后需要做的操作
                            fab.setImageResource(R.drawable.ic_action_cancel);
                        }
                    }).show();
                }
            });
        } }
    
    

    这里写图片描述

    展示效果:弹出SnackBar 时,FloatingActionButton布局会向上移动
    FloatingActionButton是默认使用FloatingActionButton.Behavior


  • Coordinatorlayout与AppbarLayout合用

    AppBarLayout :
    继承自LinearLayout,子控件默认为竖直方向显示,可以用它实现Material Design 的Toolbar;它支持滑动手势;它的子控件可以通过在代码里调用setScrollFlags(int)或者在XML里app:layout_scrollFlags来设置它的滑动手势。当然实现这些的前提是它的根布局必须是 CoordinatorLayout。这里的滑动手势可以理解为:当某个可滚动View的滚动手势发生变化时,AppBarLayout内部的子View实现某种动作。AppBarLayout的子控件不仅仅可以设置为Toolbar,也可以包含其他的View,AppBarLayout必须作为Toolbar的父布局容器。
    app:layout_scrollFlags="[scroll | enterAlways |
    enterAlwaysCollapsed | exitUntilCollapsed]"

    scroll:可以滚动出屏幕的Flag,如没有设置则view会停留在屏幕顶部
    enterAlways:任意向下滚动都会使该view变为可见,启用快速”返回模式”。
    enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
    exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端

//布局
<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coor_main"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.wendy.coordinatorlayout.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_main"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:titleTextColor="#ffffff"/>

        <com.astuetz.PagerSlidingTabStrip
            android:id="@+id/title_main"
            android:layout_width="match_parent"
            android:layout_height="48dip"
            app:pstsDividerColor="#0e0e0e"
            app:pstsDividerPadding="15dp"
            app:pstsDividerWidth="1dp"
            app:pstsIndicatorColor="#ffffff"
            app:pstsIndicatorHeight="2dp"
            app:pstsShouldExpand="true"
            app:pstsTabBackground="@color/colorPrimaryLight"/>

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

  <!--viewpager中必须设置layout_behavior属性-->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager_main"</
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: CoordinatoLayoutCollapsingToolbarLayout是Android开发中常用的两个控件,它们可以实现许多优秀的布局效果。其中,仿美团外卖、京东、安居客等搜索框的效果就可以通过使用这两个控件来实现。 首先,将CoordinatorLayout作为最外层布局,用AppBarLayout包裹CollapsingToolbarLayout和搜索框(Toolbar)的布局。在CollapsingToolbarLayout内部设置要展示的内容,如图片、文字等,以及折叠时隐藏的内容。而AppBarLayout则可以通过监听滚动事件来控制CollapsingToolbarLayout的展开与收缩。 接着,设置搜索框为Toolbar,并在Toolbar中加入EditText等控件来实现搜索功能。为了让搜索框在AppBarLayout的收缩中悬浮在顶部,可以将Toolbar设置为app:layout_scrollFlags="scroll|enterAlways|snap"。 最后,通过设置CollapsingToolbarLayoutcollapsedTitleGravity、expandedTitleGravity、collapsedTitleTextAppearance、expandedTitleTextAppearance等属性来调整标题的展示效果,以适应不同的布局要求。 总之,通过使用CoordinatorLayoutCollapsingToolbarLayout这两个强大的布局控件,我们可以实现许多炫酷的布局效果,特别是像搜索框这样的常见功能,能够轻松实现,提高应用的用户体验。 ### 回答2: CoordinatorLayout是一个新的父容器控件,可以让子控件之间产生联动效果。CollapsingToolbarLayoutCoordinatorLayout的一个子控件,可以实现ToolBar折叠效果。 通过使用CoordinatorLayoutCollapsingToolbarLayout可以实现仿美团外卖、京东、安居客等应用的搜索框。我们可以在CollapsingToolbarLayout中添加一个EditText控件作为搜索框,并对其进行样式设置和位置调整。 在CollapsingToolbarLayout中,我们可以为其设置一个折叠模式,在不同的模式下控件的显示样式也会变化。当需要显示搜索框(例如在展开状态)时,我们可以设置一个比较大的折叠模式,使得搜索框完全显示。而当折叠Toolbar时,搜索框会根据预设的模式变为一个小图标,同时不影响其他控件的显示。 总的来说,通过使用CoordinatorLayoutCollapsingToolbarLayout,我们可以实现复杂的联动效果,让UI界面更加高效、美观。而在实现类似搜索框这类单一控件时,只需要在CollapsingToolbarLayout中添加控件,并对其进行相应样式和位置的设置即可。 ### 回答3: CoordinatorLayout是Android Support Design库中新增的一个布局类,它可以协调子View的滑动行为,实现一些复杂的交互效果。其中,CollapsingToolbarLayoutCoordinatorLayout中的一个布局类,通常用于实现可以折叠或扩展的标题栏效果。 在实现仿美团外卖、京东、安居客等搜索框的效果时,我们可以使用CollapsingToolbarLayout来实现。具体步骤如下: 1. 在布局文件中,先将CoordinatorLayout作为父布局,再添加一个AppBarLayout作为子布局。 2. 在AppBarLayout中添加一个CollapsingToolbarLayout作为子布局,并设置app:layout_scrollFlags="scroll|exitUntilCollapsed"属性,表示该子View可以滚动,并在完全收缩前一直存在。 3. 在CollapsingToolbarLayout中添加一个Toolbar作为子布局,这个Toolbar就是我们的标题栏。可以在其中添加搜索框等控件。 4. 在CollapsingToolbarLayout中再添加一个ImageView或其他子View,作为背景图片或其他效果。(可选) 5. 在布局文件中添加一个RecyclerView或其他滑动控件,将其放入CoordinatorLayout中,并设置app:layout_behavior="@string/appbar_scrolling_view_behavior"属性,表示该子View会受到AppBarLayout的滚动行为影响。 这样一来,当用户向下滑动页面时,CollapsingToolbarLayout会慢慢收缩,最后只剩下Toolbar,而背景图片则会消失或变成其他效果。与此同时,RecyclerView会随着滑动而滚动,实现搜索框随着页面滑动的效果。 总之,使用CoordinatorLayoutCollapsingToolbarLayout可以方便地实现一些复杂的交互效果,如此处的仿美团外卖、京东、安居客等搜索框效果。需要注意的是,该效果的实现还需进一步考虑适配、优化等问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值