博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Material Design之AppBarLayout
阅读量:6483 次
发布时间:2019-06-23

本文共 3921 字,大约阅读时间需要 13 分钟。

AppBarLayout简介

AppBarLayout是Android5.0的Material Design的一个特色控件,从控件的名字可以知道其主要作用于App的bar。

AppBarLayout继承LinearLayout,布局方向默认是垂直布局,子控件在布局中通过设置app:layout_scrollFlags或者在java中setScrollFlags()方法设置它的滑动手势,但子控件的根布局必须是 CoordinatorLayout才能实现。

实现效果

刚开始的时候显示Toolbar和TableLayout,当我往上滑动的时候,整个页面一起往上滑动,TableLayout推到Toolbar位置的时候会悬停住,固定在此位置。当我往下滑动的时候,Toolbar会跟随手势显示出来,TableLayout滑回原来的位置。

此功能主要是通过AppBarLayout来实现,其子控件设置layout_scrollFlags属性即可。

实现

AppBarActivity

public class AppBarActivity extends AppCompatActivity {    private TabLayout tabLayout;    private String[] title = {            "科技",            "美女",            "财经",            "头条",            "新闻",            "娱乐",            "体育",            "头条"    };    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_app_bar);        final ViewPager viewPager = (ViewPager) findViewById(R.id.vp);        tabLayout = (TabLayout)findViewById(R.id.tablayout);        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());        //1.TabLayout和Viewpager关联        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {            @Override            public void onTabSelected(TabLayout.Tab tab) {                viewPager.setCurrentItem(tab.getPosition(),true);            }            @Override            public void onTabUnselected(TabLayout.Tab tab) {            }            @Override            public void onTabReselected(TabLayout.Tab tab) {            }        });        //2.ViewPager滑动关联tabLayout        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));        //设置tabLayout的标签来自于PagerAdapter        tabLayout.setTabsFromPagerAdapter(adapter);        viewPager.setAdapter(adapter);    }    class MyPagerAdapter extends FragmentPagerAdapter {        public MyPagerAdapter(FragmentManager fm) {            super(fm);            // TODO Auto-generated constructor stub        }        @Override        public CharSequence getPageTitle(int position) {            // TODO Auto-generated method stub            return title[position];        }        @Override        public Fragment getItem(int position) {            Fragment f = new DetailFragment();            Bundle bundle = new Bundle();            bundle.putString("title", title[position]);            f.setArguments(bundle);            return f;        }        @Override        public int getCount() {            // TODO Auto-generated method stub            return title.length;        }    }}复制代码

这里不需要过多的解释,主要是ViewPager 的设置。

DetailFragment

public class DetailFragment extends Fragment {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment_layout, container, false);        return view;    }}复制代码

Fragment 的布局文件

复制代码

以上的代码都是比较简单的实现ViewPager的过程,接下来我们看下主要的布局文件。

复制代码

主布局文件的跟布局需要CoordinatorLayout才能实现AppBarLayout。AppBarLayout是继承LinearLayout,可以直接将Toolbar和TabLayout作为其子View即可。

这里最重要的一点就是给子View设置app:layout_scrollFlags,其设置的值:scroll、enterAlways、enterAlwaysCollapsed、exitUntilCollapsed和snap。

scroll:子控件跟随列表滑出屏幕;

enterAlways:('quick return' pattern)跟scroll一块使用时,向上滑动时ToolBar移出屏幕,我们向下滑动时Toolbar进入屏幕。

enterAlwaysCollapsed:视图设置了minHeight属性的时候,那么视图只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。

enterAlwaysCollapsed:滚动退出屏幕,最后折叠在顶端。

snap:与scroll一起使用时,我们只需要滑动一小段距离,AppBarLayout就会随着我们滑动的View向上滑出屏幕。

这样就可以做到上面效果图的页面效果了。

转载地址:http://iwsuo.baihongyu.com/

你可能感兴趣的文章
[改善Java代码]构造函数尽量简化
查看>>
优化PHP程序的方法(温故知新)
查看>>
阿里开源Mysql分布式中间件:Cobar
查看>>
JavaScript对数组的处理(一)
查看>>
[iBoard 电子学堂][第八卷 设计任意波发生器]第一篇 iBoard 任意波发生器简介
查看>>
[iBoard 电子学堂][第〇卷 电子基础]第二篇 电路图与印刷电路板
查看>>
配置JAVA环境
查看>>
java环境变量
查看>>
浅谈API设计
查看>>
java----OO的概念和设计原则(转)
查看>>
Java 实现 淘宝秒杀 聚划算 自己主动提醒 源代码
查看>>
如何下载一个物种的全部EST序列 | NCBI | 表达序列标签
查看>>
代码编辑器Sublime Text 3 免费使用方法与简体中文汉化包下载
查看>>
5款最适合新手的包管理器
查看>>
Android測试APP工具(一)
查看>>
HTTP状态码一览表(HTTP Status Code)
查看>>
TeamCola - 最好用的团队工作日志软件
查看>>
恶意代码简介
查看>>
模块的_name_
查看>>
【javascript】checkbox——类似邮箱全选功能
查看>>