可折叠式标题栏
CollapsingToolbarLayout是一个作用于Toolbar基础之上的布局,可以使标题栏产生华丽的效果。
CollapsingToolbarLayout不能独立存在,只能作为AppBarLayout的直接子布局来使用。而AppBarLayout又必须是CoordinatorLayout的子布局。
布局分为两部分,一个水果标题栏,一个水果内容详情。
我先使用CoordinatorLayout来完成最外层布局
<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.example.rotateimageview.FruitActivity">
</android.support.design.widget.CoordinatorLayout>
其中xmlns:app的命题空间,在Material Design的开发中我们会经常用到。
接着我们在CoordinatorLayout中嵌套一个AppBarLayout布局
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp">
</android.support.design.widget.AppBarLayout>
高度设为250dp,个人觉得250dp的视觉效果比较好。
接着我们在AppBarLayout中嵌套一个CollapsingToolbarLayout布局
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
</android.support.design.widget.AppBarLayout>
android:theme属性设置主题
app:contentScrim属性设置CollapsingToolbarLayout在趋于折叠状态以及折叠之后的背景色
app:layout_scrollFlags属 scroll表示CollapsingToolbarLayout会随着内容详情的滚动一起滚动,exitUntilCollapsed表示当CollapsingToolbarLayout随着滚动完成折叠之后就保留在界面上,不在移出屏幕。
这样我们把框架这些搭好了,现在定义标题栏的具体内容。
在CollapsingToolbarLayout中嵌套一个ImageView,一个Toolbar
<ImageView android:id="@+id/fruit_image_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" 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" />
这样就布局就意味着,这个标题栏就由普通的标题栏加上图片组合而成的。
android:scaleType是控制图片如何resized/moved来匹对ImageView的size
android:scaleTyoe = “centerCrop” 按比例扩大图片的size居中显示,使得图片长(宽)等于或大于View的长(宽)。
app:layout_collapseMode属性表示折叠过程中的折叠方式是怎么样的。
app:layout_collapseMode = “parallax” 表示折叠过程中产生一定的错位偏移
app:layout_collapseMode= “pin”表示折叠过程中位置始终保持不变
标题栏搞定,我们在CoordinatorLayout布局中添加关于内容的详细部分。
我们在CoordinatorLayout中嵌套一个NestedScrollView
<android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> </android.support.v4.widget.NestedScrollView>
App:layout_behavior属性指定一个布局行为
@string/appbar_scrolling_view_behavior可以上下滚动的行为
无论是ScrollView还是NestedScrollView都是只允许存在一个直接子布局,所以我们加入LinearLayout,在其中添加自己想加入东西。
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.AppBarLayout>
我们在LinearLayout中添加一个ImageView(这里我们使用CardView,因为前面有一个CardView布局,我们把数据直接传过来就是)和一个TextView.
<android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="15dp" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_marginTop="35dp" app:cardCornerRadius="4dp"> <TextView android:id="@+id/fruit_content_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp"/> </android.support.v7.widget.CardView>
我们再在CoordinayorLayout中添加一个悬浮按钮FloatingActionButton。
<android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:src="@drawable/gege" app:layout_anchor="@id/appBar" app:backgroundTint="#fafcfa" app:layout_anchorGravity="bottom|end"/>
app:layout_anchor属性指定一个锚点(我们将锚点设置为AppBarLayout,使悬浮按钮出现在水果标题栏的区域)
app:layout_anchorGravity属性将悬浮按钮定位在标题栏区域的右下角
布局宣布搞定,这下来活动中编写逻辑代码
public class FruitActivity extends AppCompatActivity { public static final String FRUIT_NAME = "fruit_name"; public static final String FRUIT_IMAGE_ID = "fruit_image_id"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_fruit); Intent intent = getIntent(); String fruitName = intent.getStringExtra(FRUIT_NAME);//接受名字 int fruitImageId = intent.getIntExtra(FRUIT_IMAGE_ID,0);//接受图片地址 android.support.v7.widget.Toolbar toolbar = (android.support.v7.widget.Toolbar) findViewById(R.id.toolbar); android.support.design.widget.CollapsingToolbarLayout collapsingToolbarLayout = (android.support.design.widget.CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); ImageView fruitImageView = (ImageView)findViewById(R.id.fruit_image_view); TextView fruitContentText = (TextView) findViewById(R.id.fruit_content_text); setSupportActionBar(toolbar);//把Toolbar作为ActionBar显示 ActionBar actionBar = getSupportActionBar(); if (actionBar != null){ actionBar.setDisplayHomeAsUpEnabled(true);//启动HomeAsUP按钮,默认添加一个返回箭头 } collapsingToolbarLayout.setTitle(fruitName);//将传入的水果名作为当前界面的标题 Glide.with(FruitActivity.this).load(fruitImageId).into(fruitImageView);//加载传入的水果图片 String fruitContent = generateFruitContent(fruitName);//调用方法 fruitContentText.setText(fruitContent); } private String generateFruitContent(String fruitName){ StringBuffer fruitContent = new StringBuffer(); for (int i = 0;i<500;i++){ fruitContent.append(fruitName);//把水果名拼接,循环500次 } return fruitContent.toString(); } //HomeAsUp按钮的点击事件 public boolean onOptonsItemSelected(MenuItem item){ switch (item.getItemId()){ case android.R.id.home: finish(); return true; } return super.onOptionsItemSelected(item); } }
然后在主活动相应的适配器中获取水果名和水果图片资源的id,并把它们通过Itent实现活动之间的数据传递。
所有工作完成
下面成果展示:
补充:
充分利用系统状态栏空间
在CoodinatorLayout、AppBarLayout、CollapsingToolbarLayout、ImageView中添加一句
android:fitsSystemWindows="true"
这个属性表示控件可以出现在状态栏里
然后编写一个res/Values resource file/styles.xml
<resources> <style name="FruitActivityTheme" parent="AppTheme"> <item name="android:statusBarColor">@android:color/transparent</item> </style> </resources>
在AndroidManifest.xml中注册
<activity android:name=".FruitActivity" android:theme="@style/FruitActivityTheme"> </activity>