ToolBar相关的简单例子

最新推荐文章于 2019-07-20 20:08:08 发布

临山有木

最新推荐文章于 2019-07-20 20:08:08 发布

阅读量398

点赞数

分类专栏： UI android 文章标签： ToolBar TabLayout BottomSeetDialog Design

本文链接：https://blog.csdn.net/Phoenix_F/article/details/79641306

版权

android 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

前景之类的介绍就不说了，上正题

下拉上拉隐藏显示标题栏

标题栏就是个toolbar

toolBar

直接上代码


    <?xml version="1.0" encoding="utf-8"?>
    <!--CoordinatorLayout是一个很强大的布局，如果想要实现上面效果就必须用这个作为顶级布局-->
    <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="com.daniel.toolbardemo.MainActivity">
        <!--必须用AppBarLayout包裹ToolBar-->
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            <!--?attr/actionBarSize：取Theme的高度，可以自己定义-->
            android:layout_height="?attr/actionBarSize"
            android:fitsSystemWindows="true">
            <!--我们的标题栏-->
            <android.support.v7.widget.Toolbar
                android:id="@id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                <!--申明此未滚动时被隐藏的控件-->
                app:layout_scrollFlags="scroll|enterAlways"
                app:subtitle="subTitle"
                app:subtitleTextColor="#FFFFFFFF"
                app:title="title"
                app:titleTextColor="#ffffffff" />
        </android.support.design.widget.AppBarLayout>

        <android.support.v7.widget.RecyclerView 
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@id/recyclerview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            <!--申明此控件是滚动隐藏效果的触发者-->
            <!--申明了这个属性在滚动的时候才会让申明了layout_scrollFlags的toolbar隐藏显示-->
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

RecyclerView随便填一二十个item，查看效果！

Tablayout

tabLayout

布局，属性与上一个类似,外层同样需要CoordinatorLayout包裹，因为太占篇幅，就不贴出来了，下面也是


    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways"
            app:title="TabLayout"
            app:titleTextColor="#ffffffff" />

        <!--tab的标签页-->
        <android.support.design.widget.TabLayout
            android:id="@id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@android:color/white"
            app:tabIndicatorHeight="6dp"
            app:tabSelectedTextColor="@android:color/white"
            app:tabTextColor="@android:color/white" />

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

    <!--fragment在这显示(废话···)-->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

代码

    // 获得ViewPager
    ViewPager viewPager = findViewById(R.id.viewPager);

    // 初始化ViewPager适配器
    ViewPagerAdapter pagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());

    // 向Viewpager添加fragment
    // add方法是在适配器定义的，第一个参数是fragment，第二个参数是TabLayout标签的字符（这里显示的时候编译器自动给我换成大写了）
    pagerAdapter.addFragment(TabLayoutLeftFragment.createInstance(50), "left");
    pagerAdapter.addFragment(TabLayoutCenterFragment.createInstance(30), "center");
    pagerAdapter.addFragment(TabLayoutRightFragment.createInstance(10), "right");

    // 装载适配器
    viewPager.setAdapter(pagerAdapter);

    // 获得TabLayout【是TabLayout，不是TableLayout！！！我比较粗心点错了，结果发现点不出方法···】
    TabLayout tabLayout = findViewById(R.id.tablayout);
    // 装载ViewPager
    tabLayout.setupWithViewPager(viewPager);

添加page页切换监控回调

    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            Log.d(TAG, "当前选中页: " + tab.getPosition());
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            Log.d(TAG, "解除选中页: " + tab.getPosition());
            //就是离开的fragment
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
            Log.d(TAG, "onTabReselected: " + tab.getPosition());
            //字面意思，重新选中的fragment
        }
    });

适配器代码

    // 继承FragmentPagerAdapter
    class ViewPagerAdapter extends FragmentPagerAdapter {

        // 定义fragment集合
        private final List<Fragment> fragmentList = new ArrayList<>();
        // 定义TabLayout的标签集合
        private final List<String> fragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        // 添加fragment和标题
        void addFragment(Fragment fragment, String title) {
            fragmentList.add(fragment);
            fragmentTitleList.add(title);
        }

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

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

        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return fragmentTitleList.get(position);
        }
    }

Over!

类似Dialog的弹出View

看效果···

BottomSheetBehavior

布局

    <!--这个随便写，只是一个触发的按钮-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="?attr/actionBarSize"
        android:gravity="center"
        android:orientation="vertical">

        <android.support.v7.widget.CardView
            style="@style/CardViewStyle"
            card_view:cardCornerRadius="4dp">

            <TextView
                android:id="@id/click"
                style="@style/LaunchActivityTextView"
                android:text="ShowView" />
        </android.support.v7.widget.CardView>
    </LinearLayout>

    <!--滑出来的View-->
    <LinearLayout
        android:id="@+id/share_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="?attr/actionBarSize"
        app:behavior_hideable="true"
        app:behavior_peekHeight="300dp"
        app:layout_behavior="@string/bottom_sheet_behavior">

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

代码

    // RecyclrView，不用说了吧
    RecyclerView recyclerView = view.findViewById(R.id.recyclerview);
    recyclerView.setLayoutManager(new LinearLayoutManager(this));

    // Utils.loadData是拉测试数据的方法
    recyclerView.setAdapter(new Adapter(R.layout.adapter_item, Utils.loadData(20)));

    // 设置默认状态为隐藏
    sheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN); 

    // dialog触发按钮
    findViewById(R.id.click).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 如果隐藏，就显示，反之就隐藏
                if (sheetBehavior.getState() != BottomSheetBehavior.STATE_COLLAPSED) {
                    sheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                } else {
                    sheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
                }
            }
        });

Over

BottomSheetDialog

布局，这个就是Dialog了，上面的是一个事先隐藏的可拉取View

主界面还是一个按钮，触发Dialog用，就不贴出来了

这是Dialog的布局文件，普普通通，主要还是在代码上

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

        <TextView
            style="@style/LaunchActivityTextView"
            android:layout_width="match_parent"
            android:layout_height="55dp"
            android:layout_marginStart="30dp"
            android:gravity="center_vertical"
            android:text="请选择" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginEnd="20dp"
            android:layout_marginStart="20dp" />
    </LinearLayout>

代码

    private void showBottomSheetDialog() {

        // 如常，创建一个BottomSheetDialog对象
        final BottomSheetDialog dialog = new BottomSheetDialog(this);

        // 加载布局文件，就是上面贴的那个
        View contentView = LayoutInflater.from(this).inflate(R.layout.dialog_bottom_sheet, null);

        // RecycelerView数据填充
        RecyclerView review = contentView.findViewById(R.id.recyclerview);
        review.setLayoutManager(new LinearLayoutManager(this));
        Adapter adapter = new Adapter(R.layout.adapter_item, Utils.loadData(30));
        adapter.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(BaseQuickAdapter adapter, View view, int position) {
                dialog.dismiss();
                SmartToast.show(Utils.loadData(30).get(position));
            }
        });
        review.setAdapter(adapter);
        // 加载布局
        dialog.setContentView(contentView);
        // 设置默认显示行数
        dialog.setVolumeControlStream(5);
        // show···
        dialog.show();
    }