自定義折疊工具欄平滑標題調整大小

Question

我正在使用自定義折疊工具欄布局，它具有標題和副標題。
我得到了倒塌的標題，並在彎曲的路徑上制作動畫，但由於坍塌不順暢，標題的一部分會變小。 它以鋸齒狀的方式調整大小。
這是我的行為，負責移動和調整標題的大小：

public class ViewBehavior : CoordinatorLayout.Behavior
{
    private Context mContext;

    private int mStartMarginRight;
    private int mEndMargintRight;
    private int mMarginLeft;
    private int mStartMarginBottom;
    private bool isHide;
    private static float SCALE_MINIMUM = 0.5f;
    public ViewBehavior(Context context, IAttributeSet attrs)
    {
        mContext = context;
    }

    public override bool LayoutDependsOn(CoordinatorLayout parent, Java.Lang.Object child, View dependency)
    {
        return dependency is AppBarLayout;
    }

    public override bool OnDependentViewChanged(CoordinatorLayout parent, Java.Lang.Object child, View dependency)
    {
        ShouldInitProperties((child as HeaderView), dependency);

        int maxScroll = ((AppBarLayout)dependency).TotalScrollRange;
        float percentage = System.Math.Abs(dependency.GetY()) / (float)maxScroll;

        float childPosition = dependency.Height
                + dependency.GetY()
                - (child as View).Height
                - (getToolbarHeight() - (child as View).Height) * percentage / 2;


        childPosition = childPosition - mStartMarginBottom * (1f - percentage);

        CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams)(child as View).LayoutParameters;
        lp.RightMargin = (int)(100 * System.Math.Sin(percentage * System.Math.PI)) + mStartMarginRight / 2 + mEndMargintRight / 2;
        lp.LeftMargin = mMarginLeft;
        (child as View).LayoutParameters = lp;

        (child as View).SetY(childPosition);
        float x = (child as HeaderView).Title.TextSize;
        //Here is the algorithm for setting the text size
        (child as HeaderView).Title.SetTextSize(ComplexUnitType.Sp, 36 * (1 - percentage / 2));
        (child as HeaderView).SubTitle.SetTextSize(ComplexUnitType.Sp, 26 * (1 - percentage / 2));

        var toolbarTitleSize = (int)TypedValue.ApplyDimension(ComplexUnitType.Sp, 18, Application.Context.Resources.DisplayMetrics);
        var toolbarSubTitleSize = (int)TypedValue.ApplyDimension(ComplexUnitType.Sp, 16, Application.Context.Resources.DisplayMetrics);
        if ((child as HeaderView).Title.TextSize < toolbarTitleSize)
            (child as HeaderView).Title.SetTextSize(ComplexUnitType.Sp, 18);
        if ((child as HeaderView).SubTitle.TextSize < toolbarSubTitleSize)
            (child as HeaderView).SubTitle.SetTextSize(ComplexUnitType.Sp, 14);
        if (Build.VERSION.SdkInt < BuildVersionCodes.Lollipop)
        {
            if (isHide && percentage < 1)
            {
                (child as View).Visibility = ViewStates.Visible;
                isHide = false;
            }
            else if (!isHide && percentage == 1)
            {
                (child as View).Visibility = ViewStates.Gone;
                isHide = true;
            }
        }
        return true;
    }


    public void ShouldInitProperties(HeaderView child, View dependency)
    {

        if (mStartMarginRight == 0)
            mStartMarginRight = mContext.Resources.GetDimensionPixelOffset(Resource.Dimension.header_view_start_margin_right);

        if (mEndMargintRight == 0)
            mEndMargintRight = mContext.Resources.GetDimensionPixelOffset(Resource.Dimension.header_view_end_margin_right);

        if (mStartMarginBottom == 0)
            mStartMarginBottom = mContext.Resources.GetDimensionPixelOffset(Resource.Dimension.header_view_start_margin_bottom);

        if (mMarginLeft == 0)
            mMarginLeft = mContext.Resources.GetDimensionPixelOffset(Resource.Dimension.header_view_end_margin_left);

    }


    public int getToolbarHeight()
    {
        int result = 0;
        TypedValue tv = new TypedValue();
        if (mContext.Theme.ResolveAttribute(Android.Resource.Attribute.ActionBarSize, tv, true))
        {
            result = TypedValue.ComplexToDimensionPixelSize(tv.Data, mContext.Resources.DisplayMetrics);
        }
        return result;
    }
}

如何更改算法以便以更平滑的方式調整大小？

編輯視頻：
https://youtu.be/j6LseSW6h1s

Answer 1

正如其他人所提到的，通過textSize進行縮放在動畫中的Android上效果不佳，因為它不夠准確（它將十進制值向上舍入為整數）。

如果它滿足您的需要，您應該使用scaleX / scaleY屬性執行動畫，例如：

float scale = 1 - percentage * SCALE_MINIMUM;
(child as HeaderView).Title.SetScaleX(scale);
(child as HeaderView).Title.SetScaleY(scale);
(child as HeaderView).SubTitle.SetScaleX(scale);
(child as HeaderView).SubTitle.SetScaleY(scale);

Answer 2

您遇到的問題是，即使您將比例計算為化學值，它們也會在TextView中變為整數值。 您應該在TextView的Paint類中啟用LINEAR_TEXT_FLAG和SUBPIXEL_TEXT_FLAG標志，以實現平滑縮放和定位。

像這樣的東西：

yourTextView.Paint.SubpixelText = true;
yourTextView.Paint.LinearText = true;

Answer 3

我使用這種布局格式折疊工具欄，它工作順利。

  <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/height_300dp"
        android:background="?colorPrimary">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsible_Toolbar_Layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
            app:contentScrim="@color/colorDarkBlue"
            app:expandedTitleMarginEnd="@dimen/margin_64dp"
            app:expandedTitleMarginStart="@dimen/margin_20dp"
            app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:clickable="true"
                android:fitsSystemWindows="true"
                android:focusableInTouchMode="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/colorTransparent" />

            <ImageButton
                android:id="@+id/ib"
                android:layout_width="@dimen/margin_35dp"
                android:layout_height="@dimen/margin_35dp"
                android:layout_gravity="right"
                android:layout_marginRight="@dimen/margin_10dp"
                android:layout_marginTop="@dimen/height_245dp"
                android:background="@null"
                android:src="@drawable/ic_launcher" />


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                android:background="@android:color/transparent"
                android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:contentInsetStart="@dimen/margin_50dp"
                app:layout_collapseMode="pin">

                <ImageButton
                    android:id="@+id/ib2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:layout_marginRight="@dimen/margin_10dp"
                    android:background="@null"
                    android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    android:src="@drawable/ic_launcher"
                    android:visibility="invisible" />

            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

之后在IntializeComponents中的Fragment中我只初始化此布局並設置Text

     appBarLayout = (AppBarLayout)view.findViewById(R.id.app_bar_layout);

        CollapsingToolbarLayout toolbarLayout = (CollapsingToolbarLayout) view.findViewById(R.id.collapsible_Toolbar_Layout);
        toolbarLayout.setTitle(yourTitle);
        toolbarLayout.setCollapsedTitleTextColor(Color.WHITE);
        toolbarLayout.setExpandedTitleColor(Color.WHITE);
        appBarLayout.addOnOffsetChangedListener(this);

添加此方法以處理工具欄

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int offset) {
        int maxScroll = appBarLayout.getTotalScrollRange();
        float percentage = (float) Math.abs(offset) / (float) maxScroll;
        handleToolbarTitleVisibility(percentage);
    }

    private void handleToolbarTitleVisibility(float percentage) {
        if (percentage >= PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR) {
            if(!mIsTheTitleVisible) {
                imageButton.setVisibility(View.VISIBLE);
                ib.setVisibility(View.INVISIBLE);
                mIsTheTitleVisible = true;
            }

        } else  {

            if (mIsTheTitleVisible) {
                imageButton.setVisibility(View.INVISIBLE);
                ibMap.setVisibility(View.VISIBLE);
                mIsTheTitleVisible = false;
            }
        }
    }

我希望它會幫助你:)

Answer 4

不，如果你使用customTextview，它也會工作，因為我也只使用customTextView。

你會在這里發布customtextview代碼嗎？ 所以所有人都可以在customTextview中看到問題。