[英]CollapsingToolbarLayout: position the ExpandedText programmatically
[英]CollapsingToolbarLayout and floating action button position inside CollapsingToolbarLayout
我指的是Cheesesquare app。 我目前的设计要求略有不同..
这样的事情(忽略图片和名称下面的部分)
我想要圆形图像右下角的浮动操作按钮和它下面的人的名字(这将是CollapsingToolbarLayout标题)。
到目前为止,我能够做到这一点 -
这个布局的问题是,我无法下拉图像下面的标题,我无法重新定位浮动动作按钮..
这是我正在使用的布局(从cheesesquare应用程序略微修改)
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/detail_backdrop_height"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="@style/HeaderTitleStyle"
app:expandedTitleMarginEnd="64dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/imgProfileUserImage"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="@drawable/cheese_1"
android:alpha="0.35" />
<Cheesesquare.Utils.CircleImageView
android:layout_width="180dp"
android:layout_height="180.0dp"
android:id="@+id/imgProfileCircleImage"
android:src="@drawable/cheese_2"
custom:border="true"
custom:border_color="#d5d5d5"
custom:border_width="4dp"
custom:shadow="true"
android:layout_gravity="center"
android:minHeight="80dp"
android:minWidth="80dp" />
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</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"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/card_margin">
<LinearLayout
style="@style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Info"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/cheese_ipsum" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/card_margin"
android:layout_marginLeft="@dimen/card_margin"
android:layout_marginRight="@dimen/card_margin">
<LinearLayout
style="@style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Friends"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/cheese_ipsum" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/card_margin"
android:layout_marginLeft="@dimen/card_margin"
android:layout_marginRight="@dimen/card_margin">
<LinearLayout
style="@style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Related"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/cheese_ipsum" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:id="@+id/uploadPhotoButton"
android:layout_width="wrap_content"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="@drawable/ic_discuss"
android:layout_margin="@dimen/fab_margin"
android:clickable="true"/>
很少的帮助将不胜感激:-)
更新
问题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锚定到视图的角落,但不是圆形边界处的点。 我建议的解决方案如下:
在这里,我们使用包装器布局,以避免通过其边距重新定位锚定视图的潜在问题。
值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"
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.