CollapsingToolbarLayout和CollapsingToolbarLayout内的浮动操作按钮位置

时间:2015-10-12 11:46:25

标签: android material-design android-support-library android-collapsingtoolbarlayout

我指的是Cheesesquare app.我目前的设计要求略有不同......

这样的事情(忽略图片和名称下面的部分)

enter image description here

我想要圆形图像右下角的浮动操作按钮和它下面的人的名字(这将是CollapsingToolbarLayout标题)。

到目前为止,我能够做到这一点 -

enter image description here

这个布局的问题是,我无法下拉图片下面的标题,我无法重新定位浮动动作按钮..

这是我正在使用的布局(从cheesesquare应用程序略微修改)

3 div 2

很少得到赞赏:-)

更新

  1. 我设法使文本居中并使其看起来像所需的用户界面..唯一剩下的就是将圆形ImageView设置为FAB的锚点,然后在CollapsingToolbarLayout关闭后立即消失..
  2. enter image description here

2 个答案:

答案 0 :(得分:10)

问题1。在折叠相关视图时隐藏锚定视图。

据我所知,一个锚属性确实对视图隐藏在折叠上的可能性有一些奇怪的影响。如此经过良好尝试的解决方案是以编程方式执行它:

appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        /**
         * verticalOffset changes in diapason
         * from 0 - appBar is fully unwrapped
         * to -appBarLayout's height - appBar is totally collapsed
         * so in example we hide FAB when user folds half of the appBarLayout
         */
        if (appBarLayout.getHeight() / 2 < -verticalOffset) {
            fab.setVisibility(View.GONE);
        } else {
            fab.setVisibility(View.VISIBLE);
        }
    }
});

问题2。如何将视图直接绑定到圆形图像的边框。

不幸的是,“CircleView”是一个普通的视图,具有通常的矩形形状。您可以通过设置它的背景参数轻松验证这一点。

因此,在您的情况下,FAB锚定在视图的角落,而不是圆形边界处的点。我建议的解决方案如下:

  1. 将FAB放入包装器布局
  2. 应用与锚规则相关的包装器属性(并从FAB中删除这些属性)
  3. 通过设置布局填充来更正FAB位置。填充值为(0.2928 * CircleImage.width)
  4. 这里我们使用包装器布局,以避免通过其边缘重新定位锚定视图的潜在问题。

    值0.2928是计算从正方形角到最接近圆的点的距离的系数。

    毕竟这个神奇的FAB应该变成这样的东西(假设我们将FAB绑定到宽度== 180dp的圆形图像,如问题所示):

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="53dp"
        android:paddingRight="53dp"
        app:layout_anchor="@+id/imgProfileCircleImage"
        app:layout_anchorGravity="bottom|right">
    
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/uploadPhotoButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:src="@drawable/ic_discuss" />
    </FrameLayout>
    

    <强>被修改

    可以改进第二种解决方案以避免手动计算填充。我们只需要可以自己执行的自定义布局:

    public class CustomFrameLayout extends FrameLayout {
        public CustomFrameLayout(Context context) {
            super(context);
        }
    
        public CustomFrameLayout(Context context, AttributeSet attrs) {
            super(context, attrs);
            setupPaddings(context, attrs);
        }
    
        public CustomFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            setupPaddings(context, attrs);
        }
    
        private void setupPaddings(Context context, AttributeSet attrs) {
            int diameter = 0;
            TypedArray attrArray = context.getTheme().obtainStyledAttributes(
                    attrs,
                    R.styleable.FabLayout,
                    0, 0);
            try {
                diameter = attrArray.getInteger(R.styleable.FabLayout_anchor_diameter, 0);
            } finally {
                attrArray.recycle();
            }
    
            int padding = (int) Math.round((double) diameter * (1d - 1d / (Math.sqrt(2d)))); // in dips
            int paddingPx = Math.round(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, padding, getResources().getDisplayMetrics()));
    
            String xmlAnchorGravity = attrs.getAttributeValue("http://schemas.android.com/apk/res-auto", "layout_anchorGravity");
            int gravity = Integer.parseInt(xmlAnchorGravity.substring(2), 16);
    
            int top = ((gravity & 0x30) == 0x30) ? 1 : 0;
            int bottom = ((gravity & 0x50) == 0x50) ? 1 : 0;
            int left = ((gravity & 0x03) == 0x03) ? 1 : 0;
            int right = ((gravity & 0x05) == 0x05) ? 1 : 0;
    
            setPadding(left * paddingPx,
                    top * paddingPx,
                    right * paddingPx,
                    bottom * paddingPx);
        }
    }
    

    并在declare-styleable中声明其附加属性:

    <declare-styleable name="FabLayout">
        <attr name="anchor_diameter" format="integer" />
    </declare-styleable>
    

    之后我们可以替换它:

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="53dp"
        android:paddingRight="53dp"
        ...
    

    更合适的形式:

    <com.example.CustomFrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:anchor_diameter="180"
        ...
    

答案 1 :(得分:0)

您遇到的问题是CircleImageView是一个方框内的圆圈,当您将FAB设置为锚定到CircleImageView时,它会锚定到边界框的角落而不是实际的ImageView本身。

通常情况下,您可以通过在右侧和底部添加边距来将FAB移动到位来纠正此问题,但似乎设计支持库中存在导致边距被忽略的错误。

这是另一个SO issue进一步讨论的问题。

以下是使用Google登录的issue

此问题已分配给Android小组的某个人,因此希望在以后的版本中得到解决。