CollapsingToolbarLayout
这个是作用域Toolbar基础之上的布局,也是Design Support库提供的,可以让Toolbar的效果变得更加的丰富
- CollapsingToolbarLayout是不能独立存在的,它只能是AppBarLayout的直接子布局,而AppBarLayout又必须是CoordinatorLayout的子布局,因此这次实现的功能需要综合前面所学的各种知识
- 首先需要一个额外的活动作为水果的详情展示界面,右击包-->New-->Activity-->Empty Activity,创建一个FruitActivity,布局为activity_fruit.xml,然后编写水果详情界面布局
- 在activiyt_fruit.xml中的内容主要分为两个部分,第一是水果的标题栏,一个是水果的内容详情,首先是标题栏部分,使用CoordinatorLayout作为最外层的布局
<?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:layout_width="match_parent"
android:layout_height="match_parent"
>
</android.support.design.widget.CoordinatorLayout>
- 要注意的就是xmlns:app
- 在CoordinatorLayout中嵌套一个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:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp">
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
- 这里指定了一个AppBarLayout的id,宽度指定为250dp
- 在AppBarLayout中嵌套一个CollapsingToolbarLayout
<?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:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp">
<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|enterAlwaysCollapsed"
>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
- 其中 android:theme属性是指定主题,
- app:contentScrim属性是用于指定CollapsingToolbarLayout在趋于折叠状态以及折叠之后的背景色
- app:layout_scrollFlags属性,scroll表示CollapsingToolbarLayout会随着水果内容详情的滚动一起滚动,enterAlwaysCollapsed表示CollapsingToolbarLayout随着滚动完成后折叠之后就保留在界面上,不再移除屏幕
- 在CollapsingToolbarLayout中定义标题栏具体的内容
<?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:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp">
<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|enterAlwaysCollapsed"
>
<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.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
- 在CollapsingToolbarLayout中定义一个ImageView和Toolbar,这就意味着高级版的标题栏将是由普通的标题栏加上图片组合
- 其中app:layout_collapseMode属性是用于指定当前控件在CollapsingToolbarLayout折叠过程中的折叠模式,其中的Toolbar指定pin表示在折叠过程中位置始终保持不变,ImageView指定parallax表示在折叠过程中产生一定的错位偏移,这种模式的视觉效果会非常好
- 水果的标题栏界面完成了,开始编写水果内容详情部分,继续在actvity_fruit.xml中修改代码,如下
<?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:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp">
...
</android.support.design.widget.AppBarLayout>
<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>
</android.support.design.widget.CoordinatorLayout>
- 这里在水果详情的最外层布局中使用了一个NestedScrollView,注意:和AppBarLayout是平级的,
- 之前学的ScrollView它允许使用滚动的方式查看屏幕以外的数据,而NestedScrollView在此基础上还增加了嵌套响应滚动事件的功能
- 注意app:layout_behavior属性,指定一个布局行为,和之前在RecyclerView中的一样
- 不管是ScrolView还是NestedScrollView,它的内部都只允许存在一个直接子布局,如果想要放入更多的东西的时候,就要在里面先嵌套一个LinearLayout,然后在放入具体的内容
<?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:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp">
...
</android.support.design.widget.AppBarLayout>
<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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
- 在里面嵌套一个LineatLayout,具体的内容在这个里面
- 使用TextView来显示水果的内容详情,并将TextView放入到卡片式布局中
<?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:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp">
...
</android.support.design.widget.AppBarLayout>
<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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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="30dp"
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>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
- 这里为了美观,把TextView放入到了CardView中去了
- 水果的标题栏和水果内容的详情的界面基本就是这样的,当然了还可以在页面上添加一个悬浮按钮,这样看起来就高大上了一点,这里就加入一个评论的悬浮按钮,首先准备好一张图片,然后修改代码
<?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:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp">
...
</android.support.design.widget.AppBarLayout>
<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>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@drawable/ic_comment"
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|end"
/>
</android.support.design.widget.CoordinatorLayout>
- 这里加入了一个FloatingActionButton,它和AppBarLayout、NestedScrollView是平级的
- 在FloatingActionButton中是使用了app:layout_anchor属性指定了一个锚点,这里锚点设置为AppBarLayout,这样悬浮按钮就会出现在水果标题栏的区域内
- 使用app:layout_anchorGravity属性指定悬浮按钮的定位,为右下角
- 这样activity_fruit.xml布局都编写完了,
- 界面写完后,就该写FruitActivity中的代码了
package com.example.tool;
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);
// 通过这个获取到传入的水果名称和图片资源id
Intent intent = getIntent();
String fruitName = intent.getStringExtra(FRUIT_NAME);
int fruitImageId = intent.getIntExtra(FRUIT_IMAGE_ID,0);
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar_1);
CollapsingToolbarLayout collapsingToolbar = (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);
// 启用HomeAsUp按钮
ActionBar actionBar = getSupportActionBar();
if (actionBar != null){
actionBar.setDisplayHomeAsUpEnabled(true);
}
// 将水果的名称设置为当前的界面标题
collapsingToolbar.setTitle(fruitName);
// 传入水果图片,设置到标题栏上面
Glide.with(this).load(fruitImageId).into(fruitImageVIew);
// 生成一堆字符串设置到TextView上面
String fruitContent = generateFruitContent(fruitName);
fruitContentText.setText(fruitContent);
}
private String generateFruitContent(String fruitName){
StringBuilder fruitContent = new StringBuilder();
for (int i=0;i<500;i++){
fruitContent.append(fruitName);
}
return fruitContent.toString();
}
// 处理HomeAsUp按钮的点击事件
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case android.R.id.home:
finish();
return true;
}
return super.onOptionsItemSelected(item);
}
}
- 首先在onCreate()方法中通过Intent获取到传入的水果的名称和水果图片的id,然后获取到布局文件中的定义的各个控件的实例
- 使用了Toolbar的标准用法,将它作为ActionBar显示,并启用HomeAsUp按钮,由于HomeAsUp默认就是一个返回的箭头,这里不用修改
- 调用 collapsingToolbar.setTitle()方法设置水果名为当前界面的标题,然后使用Glide加载传入的水果图片,并设置到标题栏的ImageView中
- 水果的内容详情,这里使用generateFruitContent()方法获取一堆数据,传入到 fruitContentText.setText()方法中
- 最后在 onOptionsItemSelected()方法中处理了HomeAsUp按钮的点击事件,点击的时候调用finish(),从而就返回上一个活动了
- 最后,就是处理RecyclerView的点击事件了,修改FruitAdapter中的代码
public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {
...
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (mContext==null){
mContext=parent.getContext();
}
View view= LayoutInflater.from(mContext).inflate(R.layout.fruit_item,parent,false);
final ViewHolder holder=new ViewHolder(view);
holder.cardView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
int position=holder.getAdapterPosition();
Fruit fruit=mFruitList.get(position);
Intent intent=new Intent(mContext,FruitActivity.class);
intent.putExtra(FruitActivity.FRUIT_NAME,fruit.getName());
intent.putExtra(FruitActivity.FRUIT_IMAGE_ID,fruit.getImageId());
mContext.startActivity(intent);
}
});
return holder;
}
...
}
- 这里给CardView注册了一个点击事件监听器,然后在点击事件中获取当前点击项的水果名和水果资源id,传入到Intent中,最后调用startActivity()方法中启动
-
此时运行程序,点击任何一个按钮
-
当拖动水果内容的时候,你会发现水果上的背景图片慢慢变小,一直拖得话,标题栏就会完全折叠
此时标题栏的背景完全不见了,悬浮按钮也会自动消失,现在的水果标题栏就会自动的变成普通的Toolbar
充分利用系统状态栏空间
你会发现水果的背景图片和系统的状态栏总有一些不搭的感觉,如果我们能将背景图片和状态栏融合到一起,那么就会更好了
在Android5.0系统之前,我们无法对状态栏的背景或颜色进行操作的,那个时候也还没有Material Design的概念。但是Android5.0及之后的系统都是支持这个功能的,因此这里我们就实现一个系统差异型的效果,在Android5.0及之后的系统中,使用背景图和状态栏融合的模式,这之前的系统中使用普通模式。
- 要想让背景图能够和状态栏融合,需要借助
android:fitsSystemWindows
这个属性来实现。在CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout这种嵌套结构的布局中,将控件的android:fitsSystemWindows属性指定为true,就表示该控件会出现在系统状态栏里。对应到我们的程序中,那就是水果标题栏中的ImageView应该设置这个属性了。不过只给ImageView设置这个属性是没用的,我们必须将ImageView布局中的所有父布局都设置上这个属性才可以,修改activity_fruit.xml中的代码,如下所示:
<?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: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="250dp"
android:fitsSystemWindows="true"
>
<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|enterAlwaysCollapsed"
android:fitsSystemWindows="true"
>
<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:fitsSystemWindows="true"
/>
...
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
...
</android.support.design.widget.CoordinatorLayout>
- 但是,即使我们将android:fitsSystemWindows属性都设置好了还是没用的,因为还必须在程序的主题中将状态栏颜色指定成透明色才行。指定成透明色的方法很简单,在主题中将android:statusBarColor属性的值指定成@android:color/transparent就可以了。但问题在于,android:statusBarColor这个属性是从API21,也就是Android5.0系统才有的,之前的系统无法使用这个属性。那么,系统差异型的功能实现就要从这里开始了
- 右击res目录->New->Directory,创建一个values-v21目录,然后在此目录下创建一个styles.xml文件。接着对这个文件进行编写,代码如下所示:
<resources>
<style name="FruitActivityTheme" parent="AppTheme">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
</resources>
- 这里我们定义了一个FruitActivityTheme主题,它是专门给FruitActivity使用的。我们在FruitActivityTheme中将状态栏的颜色指定成透明色,由于values-v21目录是只有Android5.0及以上系统才会去读取的,因此这么声明是没有问题的。
- 但是Android5.0之前的系统却无法识别FruitActivityTheme这个主题,因此我们还需要对values/styles.xml文件进行修改,如下所示:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="FruitActivityTheme." parent="AppTheme">
</style>
</resources>
- 可以看到,这里也定义了一个FruitActivityTheme主题,并且parent主题也是AppTheme,但是它的内部是空的。
- 最后,还得让FruitActivity使用这个主题才行,修改AndroidManifest.xml中的代码,如下所示:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.tool">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="山丘"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity"
>
...
</activity>
<activity android:name=".FruitActivity"
android:theme="@style/FruitActivityTheme">
</activity>
</application>
</manifest>
-
这里使用了 android:theme="@style/FruitActivityTHeme"指定了主题,这样就可以了
这两种视觉绝对不是一个档次上的