FlooatアクションButtonの連動効果
Googleの新しいdesignバッグのFloat at ingAction Button ボタンは普通の円形のボタンだけではなく、ある空間をアンカーしてこの空間に従って連動します.xmlで設定すればいいです.
はい、http://demo.netfoucs.com/liyuanjinglyj/article/details/50441040いい文章を見ましたが、残念ながらよく書けませんでした.ここで整理します.
まず、アンカーポイントに関する属性を貼り付けます.
①app:fabSize:二つの採値、一つはmini、一つはnormalで、FABの大きさを定義するために用いられます.normalは正常サイズで、miniはコンパクトです.
②app:backgroundTint:FAB背景色は、StyleファイルにcolorAccentとして配置されています.
③app:presedTranslation Z :FABが押されると影が大きくなるアニメです.
④app:elevation:FABアイドル状態シャドウ効果です.
⑤app:rippleColor:クリック時のさざ波色は、波としても理解できます.style設定するなら、colorCotrol Highlightです.
⑥app:border Width:この属性は特に重要であり、0 dpを設定しないと4.1のsdkでFABは正方形として表示され、5.0以降のsdkには影効果がない.だからborder Width="0 dp"に設定します.
⑦ap:layout_アンチョー:FABのアンカーポイント、つまりどのコントロールを基準点として位置を設定しますか?
⑧ap:layout_ANchorrGravity:FABの相対的なアンカーポイントの位置を設定し、bottom、センター、right、left、topなどがあります.
まずボタン自体に下記の属性を追加します.
はい、http://demo.netfoucs.com/liyuanjinglyj/article/details/50441040いい文章を見ましたが、残念ながらよく書けませんでした.ここで整理します.
まず、アンカーポイントに関する属性を貼り付けます.
①app:fabSize:二つの採値、一つはmini、一つはnormalで、FABの大きさを定義するために用いられます.normalは正常サイズで、miniはコンパクトです.
②app:backgroundTint:FAB背景色は、StyleファイルにcolorAccentとして配置されています.
③app:presedTranslation Z :FABが押されると影が大きくなるアニメです.
④app:elevation:FABアイドル状態シャドウ効果です.
⑤app:rippleColor:クリック時のさざ波色は、波としても理解できます.style設定するなら、colorCotrol Highlightです.
⑥app:border Width:この属性は特に重要であり、0 dpを設定しないと4.1のsdkでFABは正方形として表示され、5.0以降のsdkには影効果がない.だからborder Width="0 dp"に設定します.
⑦ap:layout_アンチョー:FABのアンカーポイント、つまりどのコントロールを基準点として位置を設定しますか?
⑧ap:layout_ANchorrGravity:FABの相対的なアンカーポイントの位置を設定し、bottom、センター、right、left、topなどがあります.
まずボタン自体に下記の属性を追加します.
<android.support.design.widget.FloatingActionButton
android:id="@+id/lyj_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:layout_behavior="com.example.xxx.LyjBehavior" // Beheavor
app:target="@+id/lyj_framelayout" //
android:src="@drawable/blog_tag_parent_expert"
/>
次はアンカーされるコントロールです.<FrameLayout
android:id="@+id/lyj_framelayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="@id/coordinatorlayout" //
app:layout_anchorGravity="bottom"
>
</FrameLayout>
そして、Behaviorの動きについて書きます.public class AlxBehavior extends CoordinatorLayout.Behavior { private int targetId;
// ID
public AlxBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.Follow);
for (int i = 0; i < a.getIndexCount(); i++) {
int attr = a.getIndex(i);
if(a.getIndex(i) == R.styleable.Follow_target)
{
targetId = a.getResourceId(attr, -1);
}
}
a.recycle();
}
// ID,
// @Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency)
{
return dependency.getId() == targetId;
}
//
@Override public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency)
{
child.setY(dependency.getY()-170);//child dependency , dependency , ,FAB
return true;
}
}
より良いのはそのアンカーの特性を利用して、たとえばCollappingToolbar Layoutをアンカーして一緒に上下運動します.下には図付きCollappingToolbar Layoutがあります.<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<ImageView
android:id="@+id/lyj_image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="@drawable/biz_live_foot_bg"
app:layout_collapseMode="parallax"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
対応するフロートボタン<android.support.design.widget.FloatingActionButton android:id="@+id/lyj_showbut"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#FF3030"
app:rippleColor="#FF4500"
android:src="@drawable/add_attention"
app:elevation="6dp"
app:fabSize="normal"
app:pressedTranslationZ="12dp"
app:borderWidth="0dp"
app:layout_anchor="@id/collapsing_toolbar" //
app:layout_anchorGravity="bottom|center"<span style="white-space:pre"> </span>//
/>