初次写博客,不好勿喷,谢谢!!!
浅谈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: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,里面有分割线
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,在他的旁边添加了一个小的图片,不影响观看
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.NestedScrollViewandroid: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>