CollapsingToolbarLayout
1.基本介绍
CollapsingToolbarLayout
是一个作用于Toolbar
基础之上的布局,它可以让Toolbar
的效果变得更加丰富,不仅仅是展示一个标题栏,还可以实现更加华丽的效果
注意:
CollapsingToolbarLayout
是不能独立存在的,它在设计的时候就被限定只能作为AppBarLayout
的直接子布局来使用,而AppBarLayout
又必须是CoordinatorLayout
的子布局。。
2.具体使用
①我们需要一个具体展示水果详情的页面
在这里就新建一个FruitActivity
。
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http:///apk/res/android"
xmlns:app="http:///apk/res-auto"
xmlns:tools="http:///tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FruitActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="250dp"
android:id="@+id/appBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/mCollapsingToolbarLayout"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="@color/purple_500"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/fruitImageView"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:id="@+id/toolbar"
app:layout_collapseMode="pin"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
app:contentScrim
用于指定CollapsingToolbarLayout
在趋于折叠状态以及折叠之后的背景色。
app:layout_scrollFlags
的exitUntilCollapsed
表示当CollapsingToolbarLayout
随着滚动完成折叠之后就保留在界面上,不再移出屏幕。
里面的ImageView
和Toolbar
就是标题栏的具体内容。
app:layout_collapseMode
表示设置折叠过程中的折叠样式。
然后我们在加一个NestedScrollView
,它不仅允许使用滚动来查看屏幕以外的数据,而且还增加了嵌套响应滚动事件的功能。
布局文件全部代码
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http:///apk/res/android"
xmlns:app="http:///apk/res-auto"
xmlns:tools="http:///tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".FruitActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="250dp"
android:id="@+id/appBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/mCollapsingToolbarLayout"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="@color/purple_500"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/fruitImageView"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:id="@+id/toolbar"
app:layout_collapseMode="pin"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginTop="35dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
app:cardCornerRadius="4dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/fruitContentText"
android:layout_margin="10dp"
/>
</com.google.android.material.card.MaterialCardView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
很好理解,就不解释了
②编写功能逻辑
public class FruitActivity extends AppCompatActivity {
static String FRUIT_NAME = "fruit_name";
static String FRUIT_IMAGE_ID = "fruit_image_id";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fruit);
String fruitName = getIntent().getStringExtra(FRUIT_NAME);
String fruitImageId = getIntent().getStringExtra(FRUIT_IMAGE_ID);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.mCollapsingToolbarLayout);
collapsingToolbarLayout.setTitle(fruitName);
Glide.with(this).load(fruitImageId).into((ImageView)findViewById(R.id.fruitImageView));
TextView textView = findViewById(R.id.fruitContentText);
textView.setText("声卡的那句阿奎那飞机咔叽脑筋那就是可能安东尼上级领导那就ask的年纪ask" +
"打卡时间开机卡死的你课件撒的就看撒贷记卡十多年按实际困难贷记卡大卡司你可记得是" +
"多久啊是当年就卡死的你叫阿三的");
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
}
}
没啥难度,不说了
③在RecyclerView
的适配器中增加点击事件
public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.MyViewHolder> {
List<Fruit> fruits = new ArrayList<>();
Context context;
FruitAdapter(Context context){
this.context = context;
for (int i = 0; i < 30; i++) {
fruits.add(new Fruit("香蕉",R.mipmap.banana));
}
}
@NonNull
@Override
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit_item,parent,false);
MyViewHolder holder = new MyViewHolder(view);
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position = holder.getAdapterPosition();
Fruit fruit = fruits.get(position);
Intent intent = new Intent(context, FruitActivity.class);
intent.putExtra(FruitActivity.FRUIT_NAME,fruit.name);
intent.putExtra(FruitActivity.FRUIT_IMAGE_ID,fruit.imageId);
context.startActivity(intent);
}
});
return holder;
}
}
使用效果