CoordinatorLayout布局中要注意的问题

在进行Android MD 开发时,经常会用到CoordinatorLayout布局,当CoordinatorLayout配合AppBarLayout+NestedScrollView控件使用时,需要注意的是需要给NestedScrollView添加app:layout_behavior="@string/appbar_scrolling_view_behavior"属性,这样使得NestedScrollView的子布局位于AppBarLayout下方。示例代码如下:

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

<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/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <!--第一部分:伸缩工具栏-->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/detail_backdrop_height"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/cheese_2"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

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

    <!--第二部分:主要内容,NestedScrollView和ScrollView基本功能一致,只不过NestedScrollView可以兼容新的控件-->
    <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="match_parent"
            android:orientation="vertical"
            android:paddingTop="24dp">

            <!--卡片布局-->
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Info"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/cheese_ipsum" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/card_margin"
                android:layout_marginLeft="@dimen/card_margin"
                android:layout_marginRight="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Friends"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/cheese_ipsum" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/card_margin"
                android:layout_marginLeft="@dimen/card_margin"
                android:layout_marginRight="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Related"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/cheese_ipsum" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

        </LinearLayout>

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

    <!--第三部分:漂浮按钮-->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"
        android:src="@drawable/ic_discuss"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
时间: 2024-12-24 05:39:54

CoordinatorLayout布局中要注意的问题的相关文章

android 在布局中动态添加控件

第一步 Java代码 final LayoutInflater inflater = LayoutInflater.from(this); 第二步:获取需要被添加控件的布局 Java代码 final LinearLayout lin = (LinearLayout) findViewById(R.id.LinearLayout01); 第三步:获取需要添加的布局(控件) Java代码 LinearLayout layout = (LinearLayout) inflater.inflate( R

响应式布局中的CSS相对量

一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格.在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需要用到"自适应的图片"."流动布局"等技术. 体现在 CSS 代码编写上,就需要前端开发人员精准掌握特定属性的相对量表示方法.然而,其中一些相对量的计算方法很容易混淆. 本文在完整梳理全部 CSS 属性基础上,将其中的"相对单位.百分比相对量.数字相对量&quo

flex布局中flex-basis|flex-grow|flex-shrink

flex布局中flex-basis|flex-grow|flex-shrink flex-grow.flex-shrink.flex-basis这三个属性的作用是:在flex布局中,父元素在不同宽度下,子元素是如何分配父元素的空间的. 其中,这三个属性都是在子元素上设置的.注:下面讲的父元素,指以flex布局的元素(display:flex). flex-basis 该属性来设置该元素的宽度.当然,width也可以用来设置元素宽度.如果元素上同时设置了width和flex-basis,那么fle

Android 布局中的include标签使用

Android 布局中的include标签使用 最近在布局时,有好多页面都是有共同特点的,比如标题:一个同样的样式! 如下图所示: 如果给每个页面都单独的写一个标题的布局那就太麻烦了,如果能写一个标题布局,其它页面重用该多好! 这个时候,<include> 就隆重登场了! 写一个标题的布局 title.xml: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:an

在界面布局中使用ShareActionProvider

Android在ICS版本中提供了一个 ShareActionProvider 用来创建分享菜单,并且会根据用户选择分享来源的频度自动调整菜单顺序.使用起来不错. 如果您的设计需要在界面上使用分享功能,而不是在ActionBar上,那么能否使用该分享控件呢?如下图所示: 在界面使用分享控件 下面来看看如何实现这个需求: ShareActionProvider 类有个函数 onCreateActionView, 这个函数会返回分享菜单的View,这个View是可以放到其他界面地方的.所以获取到该V

Android布局中 android:layout_gravity=&quot;bottom&quot;为何不起作用?

在android布局时我们有时会需要将位于LinearLayout布局中的控件放在布局底部,或者是同时想将几个控件底部对齐,此时我们自然会想到使用 android:layout_gravity="bottom" 将控件放在该线性布局底部,但是,但是这样是行不通的,这个问题今天也困扰了我很长时间,以为是自己其他地方布局搞错了或者其他地方搞错了才会出现这种情况,最后没办法查资料才发现以下规律: 在 LinearLayout布局时: 当总布局为水平布局时 即当 android:orienta

android 布局中 layout_gravity、gravity、orientation、layout_weight

线性布局中,有 4 个及其重要的参数,直接决定元素的布局和位置,这四个参数是 android:layout_gravity ( 是本元素相对于父元素的重力方向 ) android:gravity (是本元素所有子元素的重力方向) android:orientation (线性布局以列或行来显示内部子元素) android:layout_weight (线性布局内子元素对未占用空间[水平或垂直]分配权重值,其值越小,权重越大. 前提是子元素 设置了 android:layout_width = "

负边距在布局中的使用

负边距在布局中的使用 负边距即margin属性的值设为负值,在CSS布局中时一个很有用的技巧.值为正的场景很常见,大家都很熟悉其表现 当margin-top.margin-left为负值的时候,会把元素上移.左移,同时文档流中的位置也发生相应变化,这点与position:relative的元素设置top.left后元素还占据原来位置不同 当margin-bottom.margin-right设为负值的时候,元素本身没有位置变化,后面的元素会下移.右移 看几个应用场景 绝对定位元素 当元素被设置为

android 在布局中合理的使用tag标签的好处

有时候相同的按钮页面的切换,在代码中需要进行多个点击的分开的处理,这些其实是不用这样的操作的,在xml布局中使用tag标签可以很好的处理这些问题:简化操作 布局文件如下: 1 <LinearLayout 2 android:id="@+id/colors" 3 android:layout_width="match_parent" 4 android:layout_height="48dip" 5 android:layout_alignP