Material Design CoordinatorLayout+AppBarLayout+Toolbar

最新推荐文章于 2024-05-16 04:43:42 发布
最新推荐文章于 2024-05-16 04:43:42 发布
阅读量448 收藏 1
点赞数
分类专栏： Material 文章标签： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tony499074462/article/details/95451871
版权

1.CoordinatorLayout 简介

CoordinatorLayout遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的折叠悬浮效果

它作为最上层的View
它作为一个 容器与一个或者多个子View进行交互

2.AppBarLayout

在这里插入图片描述
它是继承与LinearLayout的，默认 的 方向 是Vertical，它就是一个继承自LinearLayout的自定义vew而已，它有很多的自定义属性，最常用的就是 滑动属性 app:layout_scrollFlags

在这里插入图片描述
AppBarLayout的直接子控件可以设置的属性:layout_scrollFlags(滚动模式)
1.scroll|exitUntilCollapsed: 如果AppBarLayout的直接子控件设置该属性,该子控件可以滚动,向上滚动NestedScrollView出父布局(一般为CoordinatorLayout)时,会折叠到顶端,向下滚动时NestedScrollView必须滚动到最上面的时候才能拉出该布局

2.scroll|enterAlways:只要向下滚动该布局就会显示出来,只要向上滑动该布局就会向上收缩

3.scroll|enterAlwaysCollapsed:向下滚动NestedScrollView到最底端时该布局才会显示出来

4.scroll|snap:表示一个吸附效果，可以确保childView不会滑动停止在中间的状态

5.如果不设置该属性,则该布局不能滑动

AppBarLayout 的这些自定义属性是直接作用在它的直接子view上的，怎么理解了？

 <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
 
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
 
 
    </android.support.design.widget.AppBarLayout>

就是AppBarLayout作为父容器包裹子view Toolbar，并在Toolbar里面设置滑动属性值 app:layout_scrollFlags="scroll|enterAlways"
当然你也可以设置其它的滑动属性值看看效果

需要注意的是 AppBarLayout又必须作为CoordinatorLayout的直接子View，否则它的大部分功能将不会生效，要想产生滑动效果，则必须把屏幕填充满才可以，所以还需要用到RecyclerView才行，

并且 RecyclerView也有属性需要设置，这样才会有正常的效果

app:layout_behavior="@string/appbar_scrolling_view_behavior"

下面我们就把他们结合起来使用看看效果

布局文件

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
 
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
 
    </android.support.design.widget.AppBarLayout>
 
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
 

 

</android.support.design.widget.CoordinatorLayout>

布局思路

在这里插入图片描述

Activity文件

public class CoordinatorLayoutActivity extends AppCompatActivity
{
    private ArrayList<String> mData;
    private RecyclerView recyclerView;
    private NormalAdapter normalAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_coordinator_layout);
        intData();
        //如果不设置，则不会出现标题
        Toolbar tbAtToolbar = findViewById(R.id.tb_at_toolbar);
        //不设置会显示label的属性,也可以在清单文件中进行配置
        //tbAtToolbar.setTitle("");
        setSupportActionBar(tbAtToolbar);

        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null)
        {
            //设置Toolbar home键可点击
            actionBar.setDisplayHomeAsUpEnabled(true);
            //设置Toolbar home键图标
            //actionBar.setHomeAsUpIndicator(R.drawable.ic_drawer_am);
        }
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setAdapter(normalAdapter);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu)
    {
        getMenuInflater().inflate(R.menu.toobalr, menu);
        return true;
    }

    private void intData()
    {
        recyclerView=findViewById(R.id.recyclerView);
        mData=new ArrayList<>();
        for (int i=0;i<100;i++)
        {
            mData.add("我是第"+i+"数据");
        }
        normalAdapter=new NormalAdapter(mData,CoordinatorLayoutActivity.this);
    }
}

注意 Toolbar 必须由 AppBarLayout 包裹才会产生滑动效果
当 滑动属性为 app:layout_scrollFlags="scroll|enterAlways"时，可以看到向上滑动 RecyclerView滑动多少距离，Toolbar就会滑动多少距离，向下滑动时，不管RecyclerView的数据是否滑动到第一行，Toolbar都会立马滑动出现

在这里插入图片描述

我们把滑动属性改为 scroll|snap 可以看到 RecyclerView滑动多少距离，Toolbar就会滑动多少距离，上下都是一样的

在这里插入图片描述

AppBarLayout 继承于LinearLayout 它可以包含任何控件，不仅仅只限于Toolbar

我们修改上面代码，让它包含一个ImageView看看效果，并为其设置滑动属性
app:layout_scrollFlags=“scroll|enterAlways”
注意必须设置滑动属性 不然ImageView它不会滑动的

修改我们的布局文件

 <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_at_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            android:visibility="gone"// 隐藏Toolbar
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:gravity="center"
                android:text="我是标题"
                android:textColor="#FFFFFF" />

        </android.support.v7.widget.Toolbar>

        <ImageView android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="?attr/colorPrimary"
            android:scaleType="fitXY"
            android:src="@mipmap/tangyan"
            app:layout_scrollFlags="scroll|enterAlways"/>


    </android.support.design.widget.AppBarLayout>

在这里插入图片描述

那如果我们想要实现下面这种效果了？

在这里插入图片描述

其实相对于前 一个例子，只是把 摆放RecyclerView 的位置替换成ViewPager而已，为了有页面导航器的效果，再使用 TabLayout而已，而TabLayout 在我们滑动的时候最终会停靠在 最顶部，是因为我们没有设置其layout_scrollFlags，即TabLayout是静态的

在这里插入图片描述
在这里插入图片描述

贴上全部代码

主 布局文件

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_at_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:visibility="gone"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:gravity="center"
                android:text="我是标题"
                android:textColor="#FFFFFF" />

        </android.support.v7.widget.Toolbar>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="?attr/colorPrimary"
            android:scaleType="fitXY"
            android:src="@mipmap/tangyan"
            app:layout_scrollFlags="scroll|snap" />


        <android.support.design.widget.TabLayout
            android:id="@+id/toolbar_tab"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_gravity="bottom"
            android:background="#ffffff"
            android:fillViewport="false"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="2.0dp"
            app:tabSelectedTextColor="@color/colorAccent"
            app:tabTextColor="#151515">

            <!--指示器颜色-->
            <!-- app:tabIndicatorColor="#0835f8"-->

            <!--tab条目中字体颜色-->
            <!--app:tabSelectedTextColor="#0835f8"-->

            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:icon="@mipmap/v5" />
            <!--布局选择器-->
            <!--android:icon="@drawable/tab_selector"-->
            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="头条" />

            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="社交" />

            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="直播" />

            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="嘿嘿" />


        </android.support.design.widget.TabLayout>


    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/main_vp_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    <!--在CoordinatorLayout中只要是能滑动控件的都需要设置layout_behavior-->
    <!--app:layout_behavior="@string/appbar_scrolling_view_behavior"-->


</android.support.design.widget.CoordinatorLayout>

Activity

public class CoordinatorLayoutActivity extends AppCompatActivity
{
    private ViewPager viewPager;
    private TabLayout tabLayout;
    private ArrayList<Fragment>     fragments = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_coordinator_layout);
        intData();
        //如果不设置，则不会出现标题
        Toolbar tbAtToolbar = findViewById(R.id.tb_at_toolbar);
        //不设置会显示label的属性,也可以在清单文件中进行配置
        //tbAtToolbar.setTitle("");
        setSupportActionBar(tbAtToolbar);

        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null)
        {
            //设置Toolbar home键可点击
            actionBar.setDisplayHomeAsUpEnabled(true);
            //设置Toolbar home键图标
            //actionBar.setHomeAsUpIndicator(R.drawable.ic_drawer_am);
        }

        //相互绑定，这样可以防止图标被替换
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener
                (tabLayout));
        tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener
                (viewPager));

        initFragments();

        viewPager.setAdapter(new FragmentsAdapter(getSupportFragmentManager(), fragments));
        viewPager.setOffscreenPageLimit(5);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu)
    {
        getMenuInflater().inflate(R.menu.toobalr, menu);
        return true;
    }

    private void initFragments() {
        fragments.add(new MovieFragment());
        fragments.add(new MovieFragment());
        fragments.add(new MovieFragment());
        fragments.add(new MovieFragment());
        fragments.add(new MovieFragment());
    }

    private void intData()
    {
        tabLayout = findViewById(R.id.toolbar_tab);
        viewPager = findViewById(R.id.main_vp_container);
    }
}

FragmentsAdapter

public class FragmentsAdapter extends FragmentPagerAdapter
{

    private ArrayList<Fragment> fragments;

    String[] titles=new String[]{"","头条","社交","直播","约吗"};

    public FragmentsAdapter(FragmentManager fm, ArrayList<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

MovieFragment

public class MovieFragment extends Fragment
{
    private RecyclerView recyclerView;
    private NormalAdapter normalAdapter;
    private ArrayList<String> mData;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState)
    {
        View view = inflater.inflate(R.layout.fragment_rv, container, false);
        recyclerView=view.findViewById(R.id.rv_fr_list);
        mData=new ArrayList<>();
        for (int i=0;i<100;i++)
        {
            mData.add("我是第"+i+"数据");
        }
        recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
        normalAdapter=new NormalAdapter(mData,getActivity());
        recyclerView.setAdapter(normalAdapter);
        return view;
    }

}
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/srl_fr_refresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_fr_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </android.support.v4.widget.SwipeRefreshLayout>


</LinearLayout>

NormalAdapter

public class NormalAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>
{
    private Context mContext;
    private ArrayList<String> mData;

    public NormalAdapter(ArrayList<String> mData, Context context)
    {
        this.mData = mData;
        this.mContext = context;
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType)
    {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item, viewGroup, false);
        return new RecyclerViewItemHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, int position)
    {
        RecyclerViewItemHolder recyclerViewHolder = (RecyclerViewItemHolder) viewHolder;
        recyclerViewHolder.tv_name.setText(mData.get(position));
    }

    @Override
    public int getItemCount()
    {
        return mData.size();
    }

    /**
     * 正常条目的item的ViewHolder
     */
    private class RecyclerViewItemHolder extends RecyclerView.ViewHolder
    {

        public TextView tv_name;

        public RecyclerViewItemHolder(View itemView)
        {
            super(itemView);
            tv_name = itemView.findViewById(R.id.tv_name);
        }
    }
}
tony499074462
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android Material 常用组件详解（十）—— ToolBar、AppBarLayout、CoordinatorLayout、CollapsingToolbarLayout 使用详解
weixin_42046829的博客
12-01 5238
一、ToolBar ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar，由于其高度的可定制性、灵活性、具有Material Design风格等优点。 1.1 ToolBar属性 整理 Toolbar 比较常用的属性 app:navigationIcon 设置 navigation button app:logo 设置 logo 图标 app:title 设置标题 app:titleTextColor 设置标题文字颜色 app:subtitle 设置副标题 app
AppBarLayout使用详解
hj2drf的博客
08-02 7855
AppBarLayout 应用栏布局 google在L中推出了新的安卓设计理念-Material Design,同时也推出了不少的新控件，AppBarLayout就是其中之一。AppBarLayout继承自垂直方向的LinearLayout,不过在此基础上添加了滑动手势的处理，以便开发者结合其他控件实现更好的交互。通常内部设置一个子View，设置scrollflags值，结合可滑动的view（N
CoordinatorLayout配合AppBarLayout,Toolbar和TabLayout的使用
小聪人生的博客
08-23 434
关于Toolbar和TabLayout的使用,如果不了解的话,可以先看看者两篇文章: ToolBar的使用 TabLayout的使用 今天要实现的效果如下图所示:   当ToolBar滚出屏幕的时候,TabLayout固定在屏幕顶部,然后下滑的时候在划出Toolbar. 先来介绍下AppBarLayout控件,它是继承LinerLayout实现的一个ViewGroup容器组件，是为了Mater...
2024年安卓最新Android之AppBarLayout实现悬停吸附伸缩效果，面试官撕简历
最新发布
2301_79985012的博客
05-16 1121
对程序员来说，很多技术的学习都是“防御性”的。也就是说，我们是在为未来学习。我们学习新技术的目的，或是为了在新项目中应用，或仅仅是为了将来的面试。但不管怎样，一定不能“止步不前”，不能荒废掉。!文章以下内容会给出阿里与美团的面试题（答案+解析）、面试题库、Java核心知识点梳理等网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化学习资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！
AppBarLayout，更酷炫的顶部栏
gqg_guan的博客
07-25 862
AppBarLayout
CoordinatorLayout ＋ AppBarLayout + ToolBar
weixin_34014555的博客
01-18 68
2019独角兽企业重金招聘Python工程师标准>>> ...
CoordinatorLayout+AppBarLayout小栗子
11-06
在Android开发中，`CoordinatorLayout`和`AppBarLayout`是两个非常重要的布局组件，它们主要用于构建具有高级交互和动画效果的用户界面，尤其在实现滑动隐藏/显示顶部栏（如Toolbar）这样的行为时非常常见。...
CoordinatorLayout+AppBarLayout+TabLayout+viewpager实现跟随隐藏tablayout功能
05-06
总之，"CoordinatorLayout+AppBarLayout+TabLayout+viewpager实现跟随隐藏tablayout功能"是一个实用的Android开发示例，它演示了如何利用Android支持库中的组件来创建符合Material Design标准的高级交互效果。...
CoordinatorLayout与AppBarLayout
06-28
在Android开发中，`CoordinatorLayout`和`AppBarLayout`是Google推广的Material Design设计风格中的两个关键组件。它们主要用于创建现代、美观且交互性强的用户界面。`CoordinatorLayout`是一种高级布局，它允许子...
CoordinatorLayout AppBarLayout 标题渐变 悬浮
09-16
`AppBarLayout` 是 `CoordinatorLayout` 的一个子类，专为顶部应用栏（通常包含`Toolbar`或`ActionBar`）设计。它可以轻松实现诸如滚动隐藏、滑动展开等动画效果。`AppBarLayout` 内部包含了多个垂直堆叠的视图，...
MaterialDesign.zip
05-12
总的来说，MaterialDesign.zip这个压缩包为开发者提供了一个实践Material Design的实例，包含了AppBarLayout、CoordinatorLayout和RecyclerView的使用，以及如何通过属性设置来快速实现Material Design的界面效果。...
CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager+RecyclerView+CardView
07-16
CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager+RecyclerView+CardView的使用，详细说明 http://blog.csdn.net/amazing7/article/details/51918623
详解Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果
08-19
主要为大家详细介绍了Android使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayou实现手指滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CoordinatorLayout+AppBarLayout顶部栏吸顶效果
Jason_Lee155的博客
05-24 5893
看需求/效果 如果要实现如下效果，顶部标题栏随着上滑隐藏，且能显示缩略文字标题，那么就要用到CoordinatorLayout+几个layout了。 控件简介 CoordinatorLayout遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的折叠悬浮效果。 作为最上层的View 作为一个 容器与一个或者多个子View进行交互 Google官方地址 Coordinator
Android UI之CoordinatorLayout、AppbarLayout、CollapsingToolbarLayout的使用
yinzhx的专栏
08-10 1010
1.CoordinatorLayout 是什么 CoordinatorLayout 是一种功能更强大的FrameLayout 主要用于：  1.作为window的顶层布局 decor  2.作为父容器调度协调子布局，通过设置子View的 Behavior来调度子View的布局实现手势影响布局的形式产生动画效果  3.Behavior是CoordinatorLayout中的一个抽象类，用来协助C...
CoordinatorLayout系列（二）AppBarLayout
whoami_I的博客
11-24 756
这一篇文章结合AppBarLayout来实现头部滑动的跟随。 先看实际效果： 上面就是实现了recyclerview和ToolBar的联动效果。 其实要实现这个功能很简单，因为CoordinatorLayout和AppBarLayout将大部分功能实现了。 布局文件： <?xml version="1.0" encoding="utf-8"?> <androidx.coordi...
AppBarLayout中的五种ScrollFlags使用方式汇总
GracefulGuigui的博客
12-28 641
AppBarLayout通过设置layout_scrollFlags参数，来控制AppBarLayout中控件的行为. childView : 就是AppBarLayout内的某个孩子控件; ScrollingView : 就是可以滚动的View;比如RecyclerView，NestedScrollView等等， Your scrollable view 只支持实现了NestedScrollin...
CoordinatorLayout+AppBarLayout布局使用，打造滑动悬浮效果。
qq_31381349的博客
11-17 136
只是简单的使用，炫酷效果还需探索。
Android开发笔记（一百三十五）应用栏布局AppBarLayout
aqi00的博客
02-22 5426
应用栏布局AppBarLayoutAndroid5.0推出工具栏Toolbar用来替代ActionBar，灵活性和易用性大大增强，有关Toolbar的详细介绍参见《Android开发笔记（一百一十九）工具栏Toolbar》。可是仅仅使用Toolbar的话，还是有些呆板，比如说Toolbar固定占据着页面顶端，既不能跟着主体页面移上去，也不会跟着主体页面拉下来。为了让App页面更加生动活泼，势必要求
coordinatorlayout + appbarlayout + tablayout +fragment
12-19
CoordinatorLayout是Android Design Support Library中的一个布局，它可以用来协调子视图的显示和行为。它通常用于协调AppBarLayout和其他子视图的交互。AppBarLayout是一个专门用于支持Material Design风格的应用栏布局，它通常包含Toolbar和CollapsingToolbarLayout等组件，可以实现应用栏的展开和折叠效果。TabLayout是一个用于管理多个选项卡的布局组件，可以方便地切换不同的页面内容。Fragment是Android中的一个重要概念，它可以帮助我们构建灵活、可重用的界面组件。 在一个典型的应用中，可以使用CoordinatorLayout作为根布局，通过AppBarLayout来实现应用栏的展开和折叠效果，同时结合TabLayout来管理不同页面的切换。每个选项卡对应一个Fragment，通过Fragment可以实现不同页面内容的展示和切换。当用户滚动界面时，CoordinatorLayout会根据用户的操作来协调AppBarLayout和其他子视图的显示和行为，实现一个流畅的用户体验。 总之，使用CoordinatorLayout、AppBarLayout、TabLayout和Fragment可以帮助我们构建出一个功能丰富、界面灵活的Android应用，让用户可以方便地通过选项卡切换不同的页面内容，同时实现应用栏的展开和折叠效果，提升用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值