2. IT
    3. CoordinatorLayout的使用

    CoordinatorLayout的使用

    xiaoxiao2023-03-24  3

    人生如白驹过隙，一瞬而已啊。所以，要懂得珍惜时间。 参考文章连接会在文章末尾给出 1：CoordinatorLayout的简单使用例子，在Android Studio中新建一个module，minSdk21.然后新建一个ScrollingActivity,这样项目在build的时候会在build文件中加入一行：

    compile 'com.android.support:design:24.2.0'

    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" android:fitsSystemWindows="true" tools:context="com.humanheima.md50above.ScrollingActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="256dp" android:fitsSystemWindows="true" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbar_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:background="@mipmap/sun_main" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <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/AppTheme.PopupOverlay" /> </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"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/text_margin" android:text="@string/large_text" /> </android.support.v4.widget.NestedScrollView> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/fab_margin" app:layout_anchor="@id/app_bar" app:layout_anchorGravity="bottom|end|right" app:srcCompat="@android:drawable/ic_dialog_email" /> </android.support.design.widget.CoordinatorLayout>

    Activity使用的主题是在values-21下面的style

    <style name="AppTheme.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> <item name="android:windowDrawsSystemBarBackgrounds">true</item> <item name="android:statusBarColor">@android:color/transparent</item> </style>

    效果图

    所有想滚动出屏幕的view都需要设置属性，上面的CollapsingToolbarLayout设置了这个属性，才能滚动出屏幕

    app:layout_scrollFlags="scroll"

    这个属性的取值还有三个，有什么作用，干说没什么用，自己试过才知道

    exitUntilCollapsed：滚动退出屏幕，最后折叠在顶端 enterAlways：设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。 enterAlwaysCollapsed：当你的视图已经设置minHeight属性又使用此标志时，你的视图只 能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。

    ToolBar能够滚动需要满足以下三点

    CoordinatorLayout作为布局的父布局容器。给需要滑动出屏幕的组件设置app:layout_scrollFlags=”scroll|exitUntilCollapsed” 属性。 在这个例子中就是CollapsingToolbarLayout给滑动的组件设置app:layout_behavior属性，代码中的NestedScrollView

    CollapsingToolbarLayout的一些属性

    //折叠起来的时候的背景色 app:contentScrim="?attr/colorPrimary" //toolBar的标题 app:title="haha" //折叠起来标题的gravity app:collapsedTitleGravity="center" //展开的时候标题的gravity app:expandedTitleGravity="left|bottom" //状态栏的颜色 app:statusBarScrim="@color/colorAccent"

    CoordinatorLayout 还提供了一个 layout_anchor 的属性，连同 layout_anchorGravity 一起，可以用来放置与其他视图关联在一起的悬浮视图（如 FloatingActionButton）。本例中使用FloatingActionButton。

    通过下面的参数设置了FloatingActionButton的位置，两个属性共同作用使得FAB 浮动 按钮也能折叠消失，展现。 app:layout_anchor="@id/appbar" app:layout_anchorGravity=“bottom|right|end”

    使用CollapsingToolbarLayout实现折叠效果，需要注意3点

    AppBarLayout的高度固定CollapsingToolbarLayout的子视图设置layout_collapseMode属性关联悬浮视图设置app:layout_anchor，app:layout_anchorGravity属性

    CoordinatorLayout 替代ScrollView 或者NestedScrollView 嵌套RecyclerView。

    CoordinatorLayout 替代ScrollView 或者NestedScrollView 嵌套RecyclerView可以避免滑动冲突的问题。

    布局文件

    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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="match_parent"> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="256dp" android:background="#00000000"> <ImageView android:id="@+id/img_top" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@mipmap/sun_main" app:layout_scrollFlags="scroll" /> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout> </RelativeLayout>

    代码

    public class Main2Activity extends AppCompatActivity { @BindView(R.id.img_top) ImageView imgTop; @BindView(R.id.recycler_view) RecyclerView recyclerView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main2); ButterKnife.bind(this); imgTop.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(Main2Activity.this, "i am the top ImageView", Toast.LENGTH_SHORT).show(); } }); LinearLayoutManager layoutManager = new LinearLayoutManager(this); recyclerView.setLayoutManager(layoutManager); recyclerView.setAdapter(new RvAdapter()); } private class RvAdapter extends RecyclerView.Adapter<VH> { @Override public VH onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(Main2Activity.this) .inflate(R.layout.rv_item, parent, false); return new VH(view); } @Override public void onBindViewHolder(VH holder, int position) { holder.textRv.setText("hahah" + position); } @Override public int getItemCount() { return 100; } } class VH extends RecyclerView.ViewHolder { @BindView(R.id.text_rv) TextView textRv; public VH(View itemView) { super(itemView); ButterKnife.bind(this, itemView); } } }

    参考链接

    android CoordinatorLayout使用
    转载请注明原文地址: https://ju.6miu.com/read-1201801.html
    最新回复(0)