CoordinatorLayout嵌套AppBarLayout可滑动并将Tablayout放在顶端

本文介绍了 AppBarLayout 的基本用法及如何与 CoordinatorLayout 结合使用实现 ToolBar 滑动效果和 TabLayout 悬浮顶端的功能。通过示例代码详细展示了布局配置与组件属性设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

初次写博客,不好勿喷,谢谢!!!


   浅谈AppBarLayout

        AppBarLayout是design包下的一款控件,一般用于和CoordinatorLayout结合使用.

     是一款继承LinearLayout的控件,其默认的排列方式是Vertical,其中只能有两个控件(可以是空间类控件),

     第一个控件是可滑动的(需要添加滑动属性),第二个控件是滑动之后位于整个屏幕的上方.

    

    Design包的依赖

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


   下面开始整代码部分

      //一般是和CoordinatorLayout结合使用的,实现ToolBar滑动效果和TabLayout滑动后位于顶端

      //代码是仿照网络的一个小程序写的布局,功能可以实现

    <?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.mdj.acer.beanmaking.MainActivity">

    //重点来了,我在里面嵌套了两个大的布局
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

          //第一个大布局,可以滑动的,app:layout_scrollFlags=""需要添加app下的滑动属性
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/backgroundColor"
            app:layout_scrollFlags="scroll"

            >

            //ToolBar也可以看成一个容器,是继承ViewGroup的一款控件

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                >
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="豆赚"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    android:layout_gravity="center"
                    android:textColor="@color/textColor"
                    />
            </android.support.v7.widget.Toolbar>


            <TextView
                android:id="@+id/today_money"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="5dp"
                android:text="今日收入(元)"
                android:textColor="@color/textColor"
                android:textSize="14sp"
                android:layout_below="@+id/toolbar"
                />


            <LinearLayout
                android:id="@+id/top_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/today_money"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:layout_marginTop="3dp"
                android:orientation="horizontal">


                <TextView
                    android:id="@+id/money"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="3dp"
                    android:layout_weight="2"
                    android:text="0.00"
                    android:textColor="@color/textColor"
                    android:textSize="20sp"
                    android:textStyle="bold" />


                <TextView
                    android:id="@+id/teacher"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:background="@drawable/teacher_shape"
                    android:gravity="center"
                    android:text="师徒关系绑定" />
            </LinearLayout>


            <LinearLayout
                android:id="@+id/center_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/top_layout"
                android:layout_margin="8dp"
                android:orientation="horizontal">


                <ImageView
                    android:id="@+id/head_view"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:src="@mipmap/ic_launcher" />


                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="2"
                    android:orientation="vertical">


                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        >


                        <ImageView
                            android:id="@+id/imageView"
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:layout_gravity="left"
                            android:src="@mipmap/user"
                            android:layout_marginLeft="5dp"
                            />


                        <TextView
                            android:id="@+id/user_name"
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:layout_toRightOf="@+id/imageView"
                            android:gravity="center_vertical"
                            android:layout_marginLeft="3dp"
                            android:text="啊哈"
                            android:textColor="@color/textColor"
                            android:textSize="14sp" />
                    </RelativeLayout>


                    <TextView
                        android:id="@+id/number"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_marginBottom="5dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginTop="5dp"
                        android:layout_weight="1"
                        android:gravity="center_vertical"
                        android:text="编号: 23010086"
                        android:textColor="@color/textColor"
                        android:textSize="14sp" />
                </LinearLayout>


                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="2"
                    android:orientation="vertical">


                    <TextView
                        android:id="@+id/balance"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_marginBottom="5dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginTop="5dp"
                        android:layout_weight="1"
                        android:gravity="center_vertical"
                        android:text="账户余额: 0.00"
                        android:textColor="@color/textColor" />


                    <TextView
                        android:id="@+id/apprentice_number"
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_marginBottom="5dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginTop="5dp"
                        android:layout_weight="1"
                        android:gravity="center_vertical"
                        android:text="收徒总数: 0"
                        android:textColor="@color/textColor" />
                </LinearLayout>
            </LinearLayout>
            <View
                android:id="@+id/view"
                android:layout_width="match_parent"
                android:layout_height="3dp"
                android:background="@color/gray"
                android:layout_below="@+id/center_layout"

                />

            //自定义的一个GridView,里面有分割线

            <com.mdj.acer.beanmaking.Utils.MyGridView
                android:id="@+id/grid_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:scrollbars="horizontal"
                android:numColumns="4"
                android:layout_below="@+id/view"
                android:background="#fff"
                ></com.mdj.acer.beanmaking.Utils.MyGridView>
            <View
                android:layout_width="match_parent"
                android:layout_height="3dp"
                android:background="@color/gray"
                android:layout_below="@+id/grid_view"
                />
        </RelativeLayout>

        

        //第二个控件,当第一个控件滑动后,悬浮在屏幕顶端的TabLayout,在他的旁边添加了一个小的图片,不影响观看

         <LinearLayout
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="horizontal"
              android:background="#fff"
              >
          <android.support.design.widget.TabLayout
               android:id="@+id/tablayout"
               android:layout_width="0dp"
               android:layout_weight="8"
               android:layout_height="wrap_content"
               app:tabSelectedTextColor="@color/backgroundColor"
               app:tabTextColor="@color/gray"
               app:tabMode="scrollable"
               app:tabGravity="fill"
               ></android.support.design.widget.TabLayout>
          <ImageView
               android:id="@+id/image_more"
               android:layout_width="0dp"
               android:layout_weight="1"
               android:layout_height="wrap_content"
               android:src="@mipmap/more"
               android:layout_marginTop="3dp"
               />
        </LinearLayout>
   </android.support.design.widget.AppBarLayout>

    //CoordinatorLayout中只能有两个控件,这个是TabLayout和ViewPager的结合使用,

    //NestedScrollView和ViewPager结合使用会有一些坑,不建议结合使用

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >
        <com.mdj.acer.beanmaking.Utils.MyViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff"
            ></com.mdj.acer.beanmaking.Utils.MyViewPager>
    </android.support.v4.widget.NestedScrollView>


</android.support.design.widget.CoordinatorLayout>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值