android 折叠式标题栏,12Material Design-可折叠式标题栏

最新推荐文章于 2024-03-30 16:36:00 发布

weixin_39807067

最新推荐文章于 2024-03-30 16:36:00 发布

阅读量375

点赞数

文章标签： android 折叠式标题栏

本文介绍了基于CollapsingToolbarLayout实现Android折叠式标题栏的方法。包括创建水果详情界面布局，编写FruitActivity代码处理数据和按钮事件，处理RecyclerView点击事件。还实现了系统差异型效果，让背景图与状态栏融合，提升视觉效果。

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

CollapsingToolbarLayout

这个是作用域Toolbar基础之上的布局，也是Design Support库提供的，可以让Toolbar的效果变得更加的丰富

CollapsingToolbarLayout是不能独立存在的，它只能是AppBarLayout的直接子布局，而AppBarLayout又必须是CoordinatorLayout的子布局，因此这次实现的功能需要综合前面所学的各种知识

首先需要一个额外的活动作为水果的详情展示界面，右击包-->New-->Activity-->Empty Activity，创建一个FruitActivity，布局为activity_fruit.xml，然后编写水果详情界面布局

在activiyt_fruit.xml中的内容主要分为两个部分，第一是水果的标题栏，一个是水果的内容详情，首先是标题栏部分，使用CoordinatorLayout作为最外层的布局

要注意的就是xmlns:app

在CoordinatorLayout中嵌套一个AppBarLayout

这里指定了一个AppBarLayout的id，宽度指定为250dp

在AppBarLayout中嵌套一个CollapsingToolbarLayout

其中 android:theme属性是指定主题，

app:contentScrim属性是用于指定CollapsingToolbarLayout在趋于折叠状态以及折叠之后的背景色

app:layout_scrollFlags属性，scroll表示CollapsingToolbarLayout会随着水果内容详情的滚动一起滚动，enterAlwaysCollapsed表示CollapsingToolbarLayout随着滚动完成后折叠之后就保留在界面上，不再移除屏幕

在CollapsingToolbarLayout中定义标题栏具体的内容

在CollapsingToolbarLayout中定义一个ImageView和Toolbar，这就意味着高级版的标题栏将是由普通的标题栏加上图片组合

其中app:layout_collapseMode属性是用于指定当前控件在CollapsingToolbarLayout折叠过程中的折叠模式，其中的Toolbar指定pin表示在折叠过程中位置始终保持不变，ImageView指定parallax表示在折叠过程中产生一定的错位偏移，这种模式的视觉效果会非常好

水果的标题栏界面完成了，开始编写水果内容详情部分，继续在actvity_fruit.xml中修改代码，如下

...

这里在水果详情的最外层布局中使用了一个NestedScrollView，注意：和AppBarLayout是平级的，

之前学的ScrollView它允许使用滚动的方式查看屏幕以外的数据，而NestedScrollView在此基础上还增加了嵌套响应滚动事件的功能

注意app:layout_behavior属性，指定一个布局行为，和之前在RecyclerView中的一样

不管是ScrolView还是NestedScrollView，它的内部都只允许存在一个直接子布局，如果想要放入更多的东西的时候，就要在里面先嵌套一个LinearLayout，然后在放入具体的内容

...

在里面嵌套一个LineatLayout，具体的内容在这个里面

使用TextView来显示水果的内容详情,并将TextView放入到卡片式布局中

...

这里为了美观，把TextView放入到了CardView中去了

水果的标题栏和水果内容的详情的界面基本就是这样的，当然了还可以在页面上添加一个悬浮按钮，这样看起来就高大上了一点，这里就加入一个评论的悬浮按钮，首先准备好一张图片，然后修改代码

...

这里加入了一个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{

...

@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()方法中启动

此时运行程序，点击任何一个按钮

水果详情页面效果图.png

当拖动水果内容的时候，你会发现水果上的背景图片慢慢变小，一直拖得话，标题栏就会完全折叠

标题栏完全折叠.png

此时标题栏的背景完全不见了，悬浮按钮也会自动消失，现在的水果标题栏就会自动的变成普通的Toolbar

充分利用系统状态栏空间

你会发现水果的背景图片和系统的状态栏总有一些不搭的感觉，如果我们能将背景图片和状态栏融合到一起，那么就会更好了

在Android5.0系统之前，我们无法对状态栏的背景或颜色进行操作的，那个时候也还没有Material Design的概念。但是Android5.0及之后的系统都是支持这个功能的，因此这里我们就实现一个系统差异型的效果，在Android5.0及之后的系统中，使用背景图和状态栏融合的模式，这之前的系统中使用普通模式。

要想让背景图能够和状态栏融合，需要借助android:fitsSystemWindows这个属性来实现。在CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout这种嵌套结构的布局中，将控件的android:fitsSystemWindows属性指定为true，就表示该控件会出现在系统状态栏里。对应到我们的程序中，那就是水果标题栏中的ImageView应该设置这个属性了。不过只给ImageView设置这个属性是没用的，我们必须将ImageView布局中的所有父布局都设置上这个属性才可以，修改activity_fruit.xml中的代码，如下所示：

...

但是，即使我们将android:fitsSystemWindows属性都设置好了还是没用的，因为还必须在程序的主题中将状态栏颜色指定成透明色才行。指定成透明色的方法很简单，在主题中将android:statusBarColor属性的值指定成@android:color/transparent就可以了。但问题在于，android:statusBarColor这个属性是从API21，也就是Android5.0系统才有的，之前的系统无法使用这个属性。那么，系统差异型的功能实现就要从这里开始了

右击res目录->New->Directory，创建一个values-v21目录，然后在此目录下创建一个styles.xml文件。接着对这个文件进行编写，代码如下所示：

这里我们定义了一个FruitActivityTheme主题，它是专门给FruitActivity使用的。我们在FruitActivityTheme中将状态栏的颜色指定成透明色，由于values-v21目录是只有Android5.0及以上系统才会去读取的，因此这么声明是没有问题的。

但是Android5.0之前的系统却无法识别FruitActivityTheme这个主题，因此我们还需要对values/styles.xml文件进行修改，如下所示：

可以看到，这里也定义了一个FruitActivityTheme主题，并且parent主题也是AppTheme，但是它的内部是空的。

最后，还得让FruitActivity使用这个主题才行，修改AndroidManifest.xml中的代码，如下所示：

...

这里使用了 android:theme="@style/FruitActivityTHeme"指定了主题，这样就可以了