Android - 使用百分比布局定位浮动操作按钮问题并定位

时间:2015-11-10 00:08:32

标签: android android-layout material-design floating-action-button android-percent-library

我遇到了设计支持库的浮动操作按钮小部件和新百分比布局的问题。

支持FAB似乎不支持导致布局正常工作的百分比布局。

我有一个我用LinearLayouts制作的自定义键盘,其中所有键均匀分布,具体取决于屏幕的大小和我分配的空间。在右下角,我有一个FAB来触发主要操作。

enter image description here

一切都运行得很好,但后来我想改变它,所以它会变成一个像下面那样的材料表,因为它当前会触发一个弹出对话框。

https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B8v7jImPsDi-TjBicTdvQjg4M1E/components-buttons-fab-transition_card_02.webm

我发现下面的库可以满足我的需要。

https://github.com/gowong/material-sheet-fab

该库有效,但为了使工作表视图正确动画,它不能包含在当前FAB之类的LinearLayout中。当它像这样设置时,它无法以微小的布局显示工作表。

我使用LinearLayouts几乎可以使用其他所需的代码来运行,在更大的相对布局内的LinearLayout之外,但FAB动画仍然无法正常工作,因为它包含在线性布局中,但工作表动画正确的方式。

我决定尝试将整个键盘更改为新的百分比布局,并想出了这个。

<android.support.percent.PercentRelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="@+id/title">

<TextView
    android:id="@+id/key_one"
    style="@style/keypad"
    android:layout_alignParentLeft="true"
    android:layout_below="@id/title"
    android:text="@string/number_one"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />


<TextView
    android:id="@+id/key_two"
    style="@style/keypad"
    android:layout_below="@id/title"
    android:layout_toLeftOf="@+id/key_three"
    android:layout_toRightOf="@id/key_one"
    android:text="@string/number_two"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />

<TextView
    android:id="@+id/key_three"
    style="@style/keypad"
    android:layout_alignParentRight="true"
    android:layout_below="@id/title"
    android:text="@string/number_three"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />

<TextView
    android:id="@+id/key_four"
    style="@style/keypad"
    android:layout_alignParentLeft="true"
    android:layout_below="@id/key_one"
    android:text="@string/number_four"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />


<TextView
    android:id="@+id/key_five"
    style="@style/keypad"
    android:layout_below="@id/key_one"
    android:layout_toLeftOf="@id/key_three"
    android:layout_toRightOf="@id/key_one"
    android:text="@string/number_five"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />

<TextView
    android:id="@+id/key_six"
    style="@style/keypad"
    android:layout_alignParentRight="true"
    android:layout_below="@id/key_three"
    android:text="@string/number_six"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />

<TextView
    android:id="@+id/key_seven"
    style="@style/keypad"
    android:layout_alignParentLeft="true"
    android:layout_below="@id/key_four"
    android:text="@string/number_seven"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />

<TextView
    android:id="@+id/key_eight"
    style="@style/keypad"
    android:layout_below="@id/key_four"
    android:layout_toLeftOf="@id/key_three"
    android:layout_toRightOf="@id/key_one"
    android:text="@string/number_eight"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />

<TextView
    android:id="@+id/key_nine"
    style="@style/keypad"
    android:layout_alignParentRight="true"
    android:layout_below="@id/key_four"
    android:text="@string/number_nine"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />

<ImageView
    android:id="@+id/key_clear"
    style="@style/keypad"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_below="@id/key_seven"
    android:src="@drawable/keypad_delete_selector"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />

<TextView
    android:id="@+id/key_zero"
    style="@style/keypad"
    android:layout_alignParentBottom="true"
    android:layout_below="@id/key_eight"
    android:layout_toLeftOf="@id/key_three"
    android:layout_toRightOf="@id/key_one"
    android:text="@string/number_zero"
    android:textIsSelectable="false"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%" />

<com.myapp.Fab
    android:id="@+id/fab"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_below="@id/key_nine"
    android:src="@drawable/ic_action_send_now"
    app:layout_heightPercent="25%"
    app:layout_widthPercent="33%"
    app:pressedTranslationZ="5dp" />
</android.support.percent.PercentRelativeLayout>

com.myapp.Fab&GT;扩展了支持设计库FAB,因此我可以实现库工作所需的AnimatedFab接口。

虽然它不适用于百分比布局,但这就是发生的事情

enter image description here

如果我没有将FAB对齐到底部,那么它只是坐在右上角,我找不到一种方法将它放在0和9之间,但尺寸是正确的..

如果我尝试将其与0的右边对齐,则不会改变任何内容。

我也尝试在框架布局中包装FAB,但这也打破了动画。

有没有办法以某种方式让百分比与FAB一起工作(如果这甚至可以修复它,我感觉FAB会变得那么大?)或者在保持FAB处于相对布局的同时解决这个问题表单动画是否正常工作?

如果没有 - 我已经看过其他选项,如下面列出的可绘制背景,但它只是填充整个空间,我无法将其大小调整为适当大小的FAB。

http://www.android4devs.com/2015/03/how-to-make-floating-action-button-fab.html

我尝试将图像视图放在那里而不是FAB,同样的问题。

任何帮助将不胜感激。

谢谢!

0 个答案:

没有答案