[英]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.