使用自定义视图CollapsingToolbarLayout

我试图用自定义视图来实现CollapsingToolbarLayout,但我无法做到这一点:

我想要做什么(对不起,我不能发布图像,所以它imgur):

展开后,标题是包含图片和标题的个人资料屏幕

在这里输入图像说明

没有展开(滚动),图像和标题将在工具栏

在这里输入图像说明

但是我看到的一切都没有按照我的预期工作

我是新来的这个和棒棒糖animation,所以如果有人可以帮助我,我会非常感激!

(我不会发布示例代码,因为我没有与发布相关的内容)

Solutions Collecting From Web of "使用自定义视图CollapsingToolbarLayout"

我的解决scheme

我有相同的情况下执行,所以我开始与狗的例子,并作出了一些改变,它的工作就像你描述。 我的代码可以find作为该项目的分叉,请参阅https://github.com/hanscappelle/CoordinatorBehaviorExample

在这里输入图像说明 在这里输入图像说明

布局中最重要的变化是:

<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/main.appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" > <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/main.collapsing" android:layout_width="match_parent" android:layout_height="@dimen/expanded_toolbar_height" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" > <FrameLayout android:id="@+id/main.framelayout.title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" > <LinearLayout android:id="@+id/main.linearlayout.title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|center_horizontal" android:orientation="vertical" android:paddingBottom="@dimen/spacing_small" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:gravity="bottom|center_horizontal" android:text="@string/tequila_name" android:textColor="@android:color/white" android:textSize="@dimen/textsize_xlarge" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="@dimen/spacing_xxsmall" android:text="@string/tequila_tagline" android:textColor="@android:color/white" /> </LinearLayout> </FrameLayout> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="none" app:layout_behavior="@string/appbar_scrolling_view_behavior" > <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:lineSpacingExtra="@dimen/spacing_xsmall" android:padding="@dimen/spacing_normal" android:text="@string/lorem" android:textSize="@dimen/textsize_medium" /> </android.support.v4.widget.NestedScrollView> <android.support.v7.widget.Toolbar android:id="@+id/main.toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/primary" app:layout_anchor="@id/main.collapsing" app:theme="@style/ThemeOverlay.AppCompat.Dark" app:title="" > <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="horizontal" > <Space android:layout_width="@dimen/image_final_width" android:layout_height="@dimen/image_final_width" /> <TextView android:id="@+id/main.textview.title" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_marginLeft="8dp" android:gravity="center_vertical" android:text="@string/tequila_title" android:textColor="@android:color/white" android:textSize="@dimen/textsize_large" /> </LinearLayout> </android.support.v7.widget.Toolbar> <de.hdodenhof.circleimageview.CircleImageView android:layout_width="@dimen/image_width" android:layout_height="@dimen/image_width" android:layout_gravity="top|center_horizontal" android:layout_marginTop="@dimen/spacing_normal" android:src="@drawable/ninja" app:border_color="@android:color/white" app:border_width="@dimen/border_width" app:finalHeight="@dimen/image_final_width" app:finalXPosition="@dimen/spacing_small" app:finalYPosition="@dimen/spacing_small" app:finalToolbarHeight="?attr/actionBarSize" app:layout_behavior="saulmm.myapplication.AvatarImageBehavior" /> </android.support.design.widget.CoordinatorLayout> 

而在AvatarImageBehaviour类中,我只是将头像从原始位置移动到属性中configuration的位置进行了优化。 所以如果你想从另一个位置移动图像,只需在布局中移动它。 当你这样做,确保AppBarLayout仍然是它的兄弟姐妹,否则将不会在代码中find。

 package saulmm.myapplication; import android.content.Context; import android.content.res.TypedArray; import android.support.design.widget.AppBarLayout; import android.support.design.widget.CoordinatorLayout; import android.util.AttributeSet; import android.view.View; import de.hdodenhof.circleimageview.CircleImageView; public class AvatarImageBehavior extends CoordinatorLayout.Behavior<CircleImageView> { // calculated from given layout private int startXPositionImage; private int startYPositionImage; private int startHeight; private int startToolbarHeight; private boolean initialised = false; private float amountOfToolbarToMove; private float amountOfImageToReduce; private float amountToMoveXPosition; private float amountToMoveYPosition; // user configured params private float finalToolbarHeight, finalXPosition, finalYPosition, finalHeight; public AvatarImageBehavior( final Context context, final AttributeSet attrs) { if (attrs != null) { TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.AvatarImageBehavior); finalXPosition = a.getDimension(R.styleable.AvatarImageBehavior_finalXPosition, 0); finalYPosition = a.getDimension(R.styleable.AvatarImageBehavior_finalYPosition, 0); finalHeight = a.getDimension(R.styleable.AvatarImageBehavior_finalHeight, 0); finalToolbarHeight = a.getDimension(R.styleable.AvatarImageBehavior_finalToolbarHeight, 0); a.recycle(); } } @Override public boolean layoutDependsOn( final CoordinatorLayout parent, final CircleImageView child, final View dependency) { return dependency instanceof AppBarLayout; // change if you want another sibling to depend on } @Override public boolean onDependentViewChanged( final CoordinatorLayout parent, final CircleImageView child, final View dependency) { // make child (avatar) change in relation to dependency (toolbar) in both size and position, init with properties from layout initProperties(child, dependency); // calculate progress of movement of dependency float currentToolbarHeight = startToolbarHeight + dependency.getY(); // current expanded height of toolbar // don't go below configured min height for calculations (it does go passed the toolbar) currentToolbarHeight = currentToolbarHeight < finalToolbarHeight ? finalToolbarHeight : currentToolbarHeight; final float amountAlreadyMoved = startToolbarHeight - currentToolbarHeight; final float progress = 100 * amountAlreadyMoved / amountOfToolbarToMove; // how much % of expand we reached // update image size final float heightToSubtract = progress * amountOfImageToReduce / 100; CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) child.getLayoutParams(); lp.width = (int) (startHeight - heightToSubtract); lp.height = (int) (startHeight - heightToSubtract); child.setLayoutParams(lp); // update image position final float distanceXToSubtract = progress * amountToMoveXPosition / 100; final float distanceYToSubtract = progress * amountToMoveYPosition / 100; float newXPosition = startXPositionImage - distanceXToSubtract; //newXPosition = newXPosition < endXPosition ? endXPosition : newXPosition; // don't go passed end position child.setX(newXPosition); child.setY(startYPositionImage - distanceYToSubtract); return true; } private void initProperties( final CircleImageView child, final View dependency) { if (!initialised) { // form initial layout startHeight = child.getHeight(); startXPositionImage = (int) child.getX(); startYPositionImage = (int) child.getY(); startToolbarHeight = dependency.getHeight(); // some calculated fields amountOfToolbarToMove = startToolbarHeight - finalToolbarHeight; amountOfImageToReduce = startHeight - finalHeight; amountToMoveXPosition = startXPositionImage - finalXPosition; amountToMoveYPosition = startYPositionImage - finalYPosition; initialised = true; } } } 

来源

最常见的例子是在https://github.com/saulmm/CoordinatorBehaviorExample列出的狗&#x3002; 这是一个很好的例子,但确实有一个工具栏在扩展视图的中间,背景图片也在移动。 所有在我的例子中被删除。

另一个解释是在http://www.devexchanges.info/2016/03/android-tip-custom-coordinatorlayout.html中find的,但是因为那里引用的那个云/海背景图像也在狗的例子中被发现,其他的顶部&#x3002;

我也发现这个问题与赏金奖,但不能真正找出最终的解决办法是在CollapsingToolbarLayout添加标题的图标

最后,这应该是一个工作的图书馆。 我已经检查出来了,但是最初的图像并没有被集中,我更喜欢我以前看过的狗的例子。 见https://github.com/datalink747/CollapsingAvatarToolbar

更多阅读

http://saulmm.github.io/mastering-coordinator http://www.androidauthority.com/using-coordinatorlayout-android-apps-703720/ https://developer.android.com/reference/android/support/design /widget/CoordinatorLayout.html https://guides.codepath.com/android/handling-scrolls-with-coordinatorlayout

您可以使用Saul MM的代码示例https://github.com/saulmm/CoordinatorBehaviorExample来达到这个效果&#x3002; 代码太大,无法粘贴,因此不能粘贴任何代码。 希望这可以帮助你。

你可以使用这个库 ,它非常灵活,你有它的页面上的说明。