In this tutorial, we’ll be discussing CoordinatorLayout in our Android Application using Kotlin.
在本教程中,我们将使用Kotlin在Android应用程序中讨论CoordinatorLayout。
CooridinatorLayout (CooridinatorLayout)
We have discussed FrameLayouts in the past.
CoordinatorLayout is super-powered FrameLayouts with more properties.
Properties such as:
过去我们讨论过FrameLayouts 。
CoordinatorLayout是具有更多属性的超级功能FrameLayouts。
属性例如:
- Setting certain behaviors on the layout based on actions performed on the views. 根据对视图执行的操作在布局上设置某些行为。
- Setting views dependent on one another based on certain actions. One view acts as the layout_anchor of the other. This way we can define how one view changes when another is changed. 根据某些操作设置相互依赖的视图。 一个视图充当另一个视图的layout_anchor。 这样,我们可以定义一个视图在另一个视图改变时如何改变。
Create a fresh new android studio project and choose Basic Activity Type. Do not forget to enable Kotlin Support!
创建一个全新的android studio项目,然后选择基本活动类型。 不要忘记启用Kotlin支持!
In your layout folder, you’ll have two files
activity_main.xml
andcontent_main.xml
.
content_main.xml
is a part of theactivity_main.xml
layout and is included using the <include> tag在布局文件夹中,将有两个文件
activity_main.xml
和content_main.xml
。
content_main.xml
是activity_main.xml
布局的一部分,并包含在<include>标签中Following is how each of these XML layouts look like:
以下是每个XML布局的外观:
activity_main.xml
activity_main.xml
The CoordinatorLayout by default consists of an AppBarLayout and a FloatingActionButton.
These are a part of the material design support library.默认情况下,CoordinatorLayout由AppBarLayout和FloatingActionButton组成。
这些是材料设计支持库的一部分。AppBarLayout (AppBarLayout)
The AppBarLayout is used to hold the Toolbar. Those the Toolbar would animate the way the AppBarLayout would want it to.
AppBarLayout in itself is a vertical LinearLayout.
To provide it’s child views the desired scrolling behaviour, we need to set the app:layout_scrollFlags on the child view.AppBarLayout用于保存工具栏。 那些工具栏将使AppBarLayout想要的方式具有动画效果。
AppBarLayout本身是垂直的LinearLayout。
为了向子视图提供所需的滚动行为,我们需要在子视图上设置app:layout_scrollFlags。app:layout_scrollFlags can be set on the Toolbar. It can have the following properties,
app:layout_scrollFlags可以在工具栏上设置。 它可以具有以下属性,
- scroll: This flag is generally set for all views that need to scroll off-screen. Views that don’t use this flag remain static allowing the other scrollable views to slide behind it scroll :通常为需要在屏幕外滚动的所有视图设置此标志。 不使用此标志的视图保持静态,从而允许其他可滚动视图在其后滑动
- enterAlways: This flag ensures that any downward scroll will cause the view to become visible, enabling the quick return pattern enterAlways :此标志确保任何向下滚动都将导致视图变为可见,从而启用快速返回模式
- enterAlwaysCollapsed: An additional flag for ‘enterAlways’ which modifies the returning view to only initially scroll back to it’s collapsed height. enterAlwaysCollapsed :'enterAlways'的附加标志,用于修改返回的视图,使其仅最初滚动回到其折叠高度。
- exitUntilCollapsed: This flag causes the view to be scrolled until it is collapsed (its minHeight is reached) before exiting exitUntilCollapsed :此标志导致视图在退出之前一直滚动到其合拢(达到其minHeight)为止
- snap: Upon a scroll ending, if the view is only partially visible then it will be snapped and scrolled to it’s the closest edge. Hence this avoids mid-animation states of a view snap :滚动结束后,如果视图仅部分可见,则将对其进行捕捉并滚动到最接近的边缘。 因此,这避免了视图的中期动画状态
content_main.xml
content_main.xml
Ignore the ConstraintLayout for now. We’ll discuss it in a later tutorial.
Notice theapp:layout_behavior="@string/appbar_scrolling_view_behavior"
.
Its the standard scrolling behaviour that scrolls the content underneath the AppBarLayout.现在忽略ConstraintLayout。 我们将在以后的教程中进行讨论。
注意app:layout_behavior="@string/appbar_scrolling_view_behavior"
。
它是在AppBarLayout下面滚动内容的标准滚动行为。Back to the activity_main.xml let’s look at some of the important XML Attributes
回到activity_main.xml,让我们看一些重要的XML属性
重要的XML属性 (Important XML Attributes)
android:layout_gravity
: Specifies the gravity of the child view relative to the parent.
Ifapp_layoutAnchorGravity
is used then the layout_gravity attribute would set the gravity relative to the anchor view.
app:layout_anchor
is used to set the anchor view on the current child. The view would be positioned relatively.android:layout_gravity
:指定子视图相对于父视图的重力。
如果使用app_layoutAnchorGravity
,则layout_gravity属性将设置相对于锚视图的重力。
app:layout_anchor
用于设置当前子项的锚点视图。 该视图将相对放置。app:layout_insetEdge
is used to set insets on the view. That locks the certain space for the view.
app:layout_dodgeInsetEdges
is used to set whether the view is willing to move away from it’s one side when needed. We can pass start, end, top or bottom.app:layout_insetEdge
用于设置视图上的插图。 这样就为视图锁定了一定的空间。
app:layout_dodgeInsetEdges
用于设置视图在需要时是否愿意从一侧移开。 我们可以传递开始,结束,顶部或底部。FloatingActionButton has a default layout behaviour where it shifts up to give space to the SnackBar when pressed.FloatingActionButton具有默认的布局行为,该行为会在按下时向上移动以为SnackBar留出空间。layout_insetEdge和layout_dodgeInsetEdges (layout_insetEdge and layout_dodgeInsetEdges)
Let’s add another button in our activity_main.xml CoordinatorLayout.
让我们在activity_main.xml CoordinatorLayout中添加另一个按钮。
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
app:srcCompat="@android:drawable/ic_dialog_email" />
<Button
android:layout_width="wrap_content"
android:text="WATCH ME"
android:layout_gravity="bottom|start"
android:layout_height="wrap_content" />
</android.support.design.widget.CoordinatorLayout>
As you see the Button is hidden and the SnackBar is displayed over it.
To overcome this issue change the button to:
如您所见,按钮是隐藏的,并且SnackBar显示在其上方。
要解决此问题,请将按钮更改为:
<Button
android:layout_width="wrap_content"
android:text="WATCH ME"
android:layout_gravity="bottom|start"
app:layout_dodgeInsetEdges="bottom"
android:layout_height="wrap_content" />
So app:layout_dodgeInsetEdges
is set to bottom which displaces the bottom side of the button from its position when the Snackbar is displayed.
因此,将app:layout_dodgeInsetEdges
设置为bottom,这将在显示Snackbar时将按钮的底部从其位置移开。
layout_anchor和layout_anchor重力 (layout_anchor and layout_anchorGravity)
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="@dimen/fab_margin" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/fab"
app:layout_anchorGravity="left|top"
android:layout_margin="@dimen/fab_margin" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/fab1"
app:layout_anchorGravity="end|top"
android:layout_margin="@dimen/fab_margin" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/fab2"
android:layout_gravity="top"
app:layout_anchorGravity="end|top"
android:layout_margin="@dimen/fab_margin" />
</android.support.design.widget.CoordinatorLayout>
With this, we’ve covered all the major XML Attributes present in a CoordinatorLayout.
至此,我们涵盖了CoordinatorLayout中存在的所有主要XML属性。
The MainActivity.kt is unchanged and looks like the following:
MainActivity.kt保持不变,如下所示:
This brings an end to this tutorial. You can download the project from the link below:
本教程到此结束。 您可以从下面的链接下载项目:
翻译自: https://www.journaldev.com/37765/android-coordinatorlayout-using-kotlin