Android收藏集

Material Design技术分享

2019-06-17  本文已影响144人  Funny灬

Material design 的核心思想是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。
Material design引入了z轴的概念，z轴垂直于屏幕，用来表现元素的层叠关系。z值（海拔高度）越高，元素离界面底层（水平面）越远，投影越重。这里有一个前提，所有的元素的厚度都是1dp。所有元素都有默认的海拔高度，对它进行操作会抬升它的海拔高度，操作结束后，它应该落回默认海拔高度。同一种元素，同样的操作，抬升的高度是一致的。

Toolbar简单使用

Toolbar结构 
 <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:minHeight="?attr/actionBarSize"
                app:contentInsetStartWithNavigation="0dp"
                app:layout_collapseMode="pin"
                app:logo="@drawable/ic_android_white_24dp"
                app:navigationIcon="@drawable/ic_arrow_back_white_24dp"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:subtitle="subtitle"
                app:title="title">

        // Logo
        toolbar.setLogo(R.drawable.ic_android_white_24dp);
 
        // 主标题
        toolbar.setTitle("Title");
 
        // 副标题
        toolbar.setSubtitle("subtitle");
        
        //设置toolbar
        setSupportActionBar(toolbar);
 
        //左边的小箭头（注意需要在setSupportActionBar(toolbar)之后才有效果）
        toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white_24dp);
        
         //返回按钮的点击事件
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish();
            }
        });

        //菜单的点击事件
        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.action_search:
                        Toast.makeText(ToolbarActivity.this, "search", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_share:
                        Toast.makeText(ToolbarActivity.this, "share", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_setting:
                        Toast.makeText(ToolbarActivity.this, "setting", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_about:
                        Toast.makeText(ToolbarActivity.this, "about", Toast.LENGTH_SHORT).show();
                        break;
                    default:
                        break;
                }
                return true;
            }
        });

设置Toolbar的theme，可以让弹窗不遮挡标题栏，处于标题栏的下方。

<item name="overlapAnchor">false</item>
Toolbar

AppBarLayout + CollapsingToolbarLayout + Toolbar的使用

  1. CollapsingToobbarLayout常用属性：

  1. AppBarLayout是一种支持响应滚动手势的app bar布局（比如工具栏滚出或滚入屏幕），CollapsingToolbarLayout则是专门用来实现子布局内不同元素响应滚动细节的布局，CollapsingToolbarLayout是不能独立存在的，它必须只能作为AppBarLayout 的子布局来使用。

  2. 与AppBarLayout组合的滚动布局（Recyclerview、NestedScrollView等）需要设置app:layout_behavior="@string/appbar_scrolling_view_behavior"（上面代码中NestedScrollView控件所设置的）。没有设置的话，AppBarLayout将不会响应滚动布局的滚动事件。

  3. AppBarLayout的子布局有5种滚动标识

  1. CollapsingToolbarLayout的子布局有3种折叠模式。CollapsingToobarLayout折叠后的高度就是Toorbar的高度。

CollasToolbarLayout + TabLayout的使用

TabLayout没有设置app:layout_collapseMode，在CollapsingToolbarLayout收缩时就不会消失。
CollapsingToolbarLayout收缩时的高度是Toolbar的高度，所以我们需要把Toolbar的高度增加，给TabLayout留出位置，这样收缩后TabLayout就不会和Toolbar重叠。
Toolbar的高度增加，title会相应下移。android:gravity="top"方法使Toolbar的title位于Toolbar的上方，然后通过app:titleMarginTop调整下title距顶部高度，这样Toolbar就和原来显示的一样了。

展开状态
折叠状态

TabLayout悬停

项目中有时候会遇到这样的UI设计需求，标题 + 头部布局 + 可滑动切换的tab页 + ViewPager(里面的Fragment是可滑动的列表)。

可以利用AppBarLayout + CollapsingToolbarLayout可折叠的特性，把头部布局折叠起来，呈现出TabLayout在标题栏下方悬停的效果。
使用AppBarLayout + CollapsingToolbarLayout把头部布局包裹起来，这样 整个头部布局都可以折叠和展开，当头部布局全部折叠时，TabLayout就悬停在标题下面。

优点：实现简单，代码量少。只需要写XML文件就可以实现该效果，不需要额外写代码来处理滑动事件的冲突。


TabLayout展开状态
TabLayout悬停状态

CardView的使用

CardView继承自FramLayout。CardView常用属性：

BottomNavigationView

  1. 主要需要设置五个个属性
<android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            style="@style/Widget.Design.BottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_gravity="bottom"
            app:elevation="@dimen/dp_16"
            app:itemBackground="@color/viewBackground"
            app:itemIconTint="@drawable/selector_nav_item_color"
            app:itemTextColor="@drawable/selector_nav_item_color"
            app:layout_behavior="com.example.think.widget.BottomNavigationBehavior"
            app:menu="@menu/bottom_navigation_main"/>

BottomNavigationView可以设置一个OnNavigationItemSelectedListener用来响应切换的动作

 mBottomNavigation.setOnNavigationItemSelectedListener(item -> {
            switch (item.getItemId()) {
                case R.id.action_news:
                    mToolbar.setTitle(R.string.title_news);
                    NewsFragment newsFragment = NewsFragment.newInstance();
                    switchFragment(newsFragment, R.id.frame_layout);
                    break;
                case R.id.action_photo:
                    mToolbar.setTitle(R.string.title_photo);
                    PictureFragment pictureFragment = PictureFragment.newInstance();
                    switchFragment(pictureFragment, R.id.frame_layout);
                    break;
                case R.id.action_video:
                    mToolbar.setTitle(R.string.title_video);
                    VideoFragment videoFragment = VideoFragment.newInstance();
                    switchFragment(videoFragment, R.id.frame_layout);
                    break;
                case R.id.action_media:
                    mToolbar.setTitle(R.string.title_media);
                    ChannelFragment channelFragment = ChannelFragment.newInstance();
                    switchFragment(channelFragment, R.id.frame_layout);
                    break;
                default:
                    break;
            }
            return true;
        });
  1. 使用BottomNavigationView的问题

当BottomNavigationView超过三个menu时（三个及三个以下是正常显示的），只有选中的menu会显示图片和文字，其他的menu都只显示图片。且宽度不是均匀分布的，选中的menu宽度比其他的大。

可以通过一个工具方法解决这个问题

public  void disableShiftMode(BottomNavigationView navigationView) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigationView.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);

            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(i);
                itemView.setShiftingMode(false);
                itemView.setChecked(itemView.getItemData().isChecked());
            }
        } catch (NoSuchFieldException | IllegalAccessException e) {
            e.printStackTrace();
        }
    }
底部导航栏

DrawerLayout + NavigationView

DrawerLayout一般有两个子布局，第一子布局是内容布局，第二个子布局为侧滑菜单的布局。也可以有三个布局，第一子布局是内容布局，第二、三个布局分别为左右的侧滑菜单。

NavigationView，可以自行填充头部布局和菜单布局，还可以再添加任意布局。

上一篇下一篇

猜你喜欢

热点阅读