自定义CollapsingToolbarLayout动画
时间: 2023-05-31 20:04:16 浏览: 229
要自定义CollapsingToolbarLayout动画,需要做以下步骤:
1. 创建一个可扩展的CollapsingToolbarLayout。
2. 为CollapsingToolbarLayout定义一个自定义的布局,这个布局将会在CollapsingToolbarLayout折叠时显示。
3. 在自定义布局中添加视图,如ImageView和TextView。
4. 创建一个自定义的Behavior类,它将控制CollapsingToolbarLayout的折叠和展开动画。
5. 在自定义Behavior中,根据CollapsingToolbarLayout的状态来控制自定义布局中视图的动画。
下面是一个简单的示例代码,演示如何自定义CollapsingToolbarLayout动画:
```
public class CustomCollapsingToolbarBehavior extends AppBarLayout.ScrollingViewBehavior {
private static final int ANIMATION_DURATION = 600;
private ImageView mImageView;
private TextView mTitleView;
private int mTitleExpandedMarginStart;
private int mTitleCollapsedMarginStart;
private int mSubtitleExpandedMarginStart;
private int mSubtitleCollapsedMarginStart;
public CustomCollapsingToolbarBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
if (dependency instanceof AppBarLayout) {
return true;
}
return super.layoutDependsOn(parent, child, dependency);
}
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
if (dependency instanceof AppBarLayout) {
initViews(child);
updateViews((AppBarLayout) dependency);
}
return super.onDependentViewChanged(parent, child, dependency);
}
private void initViews(View child) {
if (mImageView == null) {
mImageView = child.findViewById(R.id.image_view);
}
if (mTitleView == null) {
mTitleView = child.findViewById(R.id.title_text_view);
}
if (mTitleExpandedMarginStart == 0) {
mTitleExpandedMarginStart = ((LayoutParams) mTitleView.getLayoutParams()).leftMargin;
}
if (mTitleCollapsedMarginStart == 0) {
mTitleCollapsedMarginStart = mTitleView.getWidth() / 2;
}
if (mSubtitleExpandedMarginStart == 0) {
mSubtitleExpandedMarginStart = ((LayoutParams) mSubtitleView.getLayoutParams()).leftMargin;
}
if (mSubtitleCollapsedMarginStart == 0) {
mSubtitleCollapsedMarginStart = mSubtitleView.getWidth() / 2;
}
}
private void updateViews(AppBarLayout appBarLayout) {
int totalScrollRange = appBarLayout.getTotalScrollRange();
int offset = Math.abs(appBarLayout.getTop());
float percent = (float) offset / (float) totalScrollRange;
// animate ImageView
mImageView.setScaleX(1 - percent);
mImageView.setScaleY(1 - percent);
// animate Title TextView
LayoutParams params = (LayoutParams) mTitleView.getLayoutParams();
params.leftMargin = (int) (mTitleExpandedMarginStart + (mTitleCollapsedMarginStart - mTitleExpandedMarginStart) * percent);
mTitleView.setLayoutParams(params);
// animate Subtitle TextView
LayoutParams params = (LayoutParams) mSubtitleView.getLayoutParams();
params.leftMargin = (int) (mSubtitleExpandedMarginStart + (mSubtitleCollapsedMarginStart - mSubtitleExpandedMarginStart) * percent);
mSubtitleView.setLayoutParams(params);
}
}
```
在这个示例代码中,我们创建了一个CustomCollapsingToolbarBehavior类,继承自AppBarLayout.ScrollingViewBehavior。在这个类中,我们重写了layoutDependsOn()方法和onDependentViewChanged()方法,用于设置CollapsingToolbarLayout的依赖和更新自定义布局中的视图。
在initViews()方法中,我们初始化了自定义布局中的ImageView和TextView,并获取了它们在展开和折叠状态下的左边距。
在updateViews()方法中,我们根据AppBarLayout的状态来控制自定义布局中各个视图的动画。例如,我们根据AppBarLayout的偏移量来缩放ImageView,并根据AppBarLayout的偏移量计算Title和Subtitle TextView的左边距,从而实现动画效果。
最后,我们需要在布局文件中将CustomCollapsingToolbarBehavior应用到CollapsingToolbarLayout上:
```
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior=".CustomCollapsingToolbarBehavior"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleTextAppearance="@android:style/TextAppearance.Large.Inverse"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<LinearLayout
android:id="@+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_collapseMode="parallax">
<TextView
android:id="@+id/title_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:textColor="@android:color/white"
android:textSize="24sp" />
<TextView
android:id="@+id/subtitle_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Subtitle"
android:textColor="@android:color/white"
android:textSize="16sp" />
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
```
在这个布局文件中,我们将CustomCollapsingToolbarBehavior应用到CollapsingToolbarLayout上,并定义了一个自定义布局,包含一个ImageView和两个TextView。我们还在布局文件中定义了CollapsingToolbarLayout的其他属性,如contentScrim、expandedTitleMarginStart、expandedTitleMarginEnd等。
这样,我们就可以自定义CollapsingToolbarLayout的动画了。当AppBarLayout滚动时,ImageView和TextView将会以动画的形式显示和隐藏。
阅读全文