材料设计控件的基本用法

最新推荐文章于 2023-01-23 10:21:18 发布

wjn_yes

最新推荐文章于 2023-01-23 10:21:18 发布

阅读量659

点赞数

分类专栏： Android 文章标签：视差特效 Material 材料设计安卓5.0控件

本文链接：https://blog.csdn.net/wjn_yes/article/details/54970594

版权

Android 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一侧滑菜单 DrawerLayout+NavigationView

1.布局文件:drawerlayout里面包含了一个是你的主布局（自己的布局），另一个NavigationView则是侧滑布局

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

    <include layout="@layout/content_main" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>

注解：headerLayout:侧滑布局的头布局，menu 为菜单布局

1.1menu菜单布局

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navigation_item_book"
            android:icon="@mipmap/ic_favorite"
            android:title="@string/navigation_book" />
        <item
            android:id="@+id/navigation_item_example"
            android:icon="@mipmap/ic_favorite"
            android:title="@string/navigation_example" />

        <item
            android:id="@+id/navigation_item_about"
            android:icon="@mipmap/ic_favorite"
            android:title="@string/navigation_about" />
    </group>
</menu>

2.使用

2.1侧边栏的menu点击监听

navigationView.setNavigationItemSelectedListener(this);

@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
    // Handle navigation view item clicks here.
    int id = item.getItemId();

    if (id == R.id.navigation_item_book) {
        ((FrameLayout) findViewById(R.id.fragment_content)).removeAllViews();
        ((FrameLayout) findViewById(R.id.fragment_content)).addView(vContent);
        fab.setVisibility(View.VISIBLE);
        // Handle the camera action
        AlertUtils.showToast(this,"书籍");
        lastKey = currentKey;
        currentKey = "三生三世十里桃花";
        loadData();
    } else if (id == R.id.navigation_item_example) {
        ((FrameLayout) findViewById(R.id.fragment_content)).removeAllViews();
        ((FrameLayout) findViewById(R.id.fragment_content)).addView(vContent2);
        fab.setVisibility(View.GONE);
        AlertUtils.showToast(this,"例子");

    } else if (id == R.id.navigation_item_about) {
        ((FrameLayout) findViewById(R.id.fragment_content)).removeAllViews();
        ((FrameLayout) findViewById(R.id.fragment_content)).addView(vContent3);
        fab.setVisibility(View.GONE);
        AlertUtils.showToast(this,"关于");


    }
    drawer.closeDrawer(GravityCompat.START);
    return true;
}

二视差特效 coordinatorLayout+AppBarLayout+collapsingToolbarLayout+ImageView+ToolBar

1.coordinatorLayout:最外层布局相当于控制滑动联动

2.collapsingToolbarLayout:包裹ImageView和ToolBar完成滑动由图片切换成标题栏的视差特效

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">


    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


            <ImageView
                android:id="@+id/ivImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:transitionName="@string/iv_share_transication"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <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/ThemeOverlay.AppCompat.Light" />


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


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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabMode="fixed"
            android:background="@android:color/white"
            />

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white"

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

解释：

1.expandedTitleMarginStart - 设置扩张时候(还没有收缩时)title向左填充的距离。

2.layout_scrollFlags

scroll - 想滚动就必须设置这个。

enterAlways - 当向下移动时，立即显示View（比如Toolbar)。

exitUntilCollapsed - 向上滚动时收缩View，但可以固定Toolbar一直在上面。

enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。

3.layout_collapseMode (折叠模式) - 有两个值:

pin - 设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。

parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。

layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子，值为：0~1。

总结：当设置了layout_behavior的控件响应起了CollapsingToolbarLayout中的layout_scrollFlags事件时，ImageView会有视差效果的向上滚动移除屏幕，当开始折叠时CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就会变为我们设置好的背景色，Toolbar也一直会固定在最顶端。

三 BottomNavigationBar 底部导航

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     >

    <include
        android:id="@+id/appbar"
        layout="@layout/app_bar_main" />

    <LinearLayout
        android:id="@+id/ll_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:text="Hello World!"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>


    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        />

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

最外层包裹的是CoordinatorLayout 目的是当内部空间填充的是滑动控件时候，如listview，滑动的时候可以动态显示和隐藏底部导航

 //底部导航可以自动隐藏
        bottomnavigationbar.setAutoHideEnabled(true);//自动隐藏

        //底部导航模式
        //BottomNavigationBar.MODE_SHIFTING;
        //BottomNavigationBar.MODE_FIXED;
        //BottomNavigationBar.MODE_DEFAULT;
        bottomnavigationbar.setMode(BottomNavigationBar.MODE_FIXED);

        //底部导航风格
        // BottomNavigationBar.BACKGROUND_STYLE_DEFAULT;
        // BottomNavigationBar.BACKGROUND_STYLE_RIPPLE
        // BottomNavigationBar.BACKGROUND_STYLE_STATIC
        bottomnavigationbar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);


        bottomnavigationbar.setBarBackgroundColor(R.color.white);//背景颜色
        bottomnavigationbar.setInActiveColor(R.color.nav_gray);//未选中时的颜色
        bottomnavigationbar.setActiveColor(R.color.colorPrimaryDark);//选中时的颜色

        //我们还可以设置角标
        badgeItem1 = new BadgeItem().setBackgroundColor(Color.RED).setText("3").setHideOnSelect(true);//角标
        badgeItem2 = new BadgeItem().setBackgroundColor(Color.RED).setText("4").setHideOnSelect(true);//角标
        badgeItem3 = new BadgeItem().setBackgroundColor(Color.RED).setText("5").setHideOnSelect(true);//角标
        badgeItem4 = new BadgeItem().setBackgroundColor(Color.RED).setText("9").setHideOnSelect(true);//角标
        item1 = new BottomNavigationItem(R.mipmap.ic_launcher, "Home");
        item2 = new BottomNavigationItem(R.mipmap.ic_launcher, "Books");
        item3 = new BottomNavigationItem(R.mipmap.ic_launcher, "Music");
        item4 = new BottomNavigationItem(R.mipmap.ic_launcher, "Games");
        //添加选项卡
        bottomnavigationbar
                .addItem(item1.setBadgeItem(badgeItem1))
                .addItem(item2.setBadgeItem(badgeItem2))
                .addItem(item3.setBadgeItem(badgeItem3))
                .addItem(item4.setBadgeItem(badgeItem4))
                .setFirstSelectedPosition(lastSelectedPosition)
                .initialise();
        bottomnavigationbar.setTabSelectedListener(this);
        setDefaultFragment();
    }

    private void setDefaultFragment() {
        FragmentManager fm = getFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        mBottomFragment = BottomFragment.newInstance("位置");
        transaction.replace(R.id.ll_content, mBottomFragment);
        transaction.commit();
    }

    boolean isSelected[] = {true, false, false, false};

    @Override
    public void onTabSelected(int position) {

        Log.d("位置：", "onTabSelected() called with: " + "position = [" + position + "]");
        FragmentManager fm = this.getFragmentManager();
        //开启事务
        FragmentTransaction transaction = fm.beginTransaction();
        switch (position) {
            case 0:
                isSelected[0] = true;
                if (mBottomFragment == null) {
                    mBottomFragment = BottomFragment.newInstance("位置");
                }
                transaction.replace(R.id.ll_content, mBottomFragment);
                break;
            case 1:
                isSelected[1] = true;
                if (mBottomFragment2 == null) {
                    mBottomFragment2 = BottomFragment2.newInstance("发现");
                }
                transaction.replace(R.id.ll_content, mBottomFragment2);
                break;
            case 2:
                isSelected[2] = true;
                if (mBottomFragment3 == null) {
                    mBottomFragment3 = BottomFragment3.newInstance("爱好");
                }
                transaction.replace(R.id.ll_content, mBottomFragment3);
                break;
            case 3:
                isSelected[3] = true;
                if (mBottomFragment4 == null) {
                    mBottomFragment4 = BottomFragment4.newInstance("图书");
                }
                transaction.replace(R.id.ll_content, mBottomFragment4);
                break;
            default:
                break;
        }
        // 事务提交
        transaction.commit();
    }

    @Override
    public void onTabUnselected(int position) {
        if (isSelected[0] == true) {
            badgeItem1.hide();
        }
        if (isSelected[1] == true) {
            badgeItem2.hide();
        }
        if (isSelected[2] == true) {
            badgeItem3.hide();
        }
        if (isSelected[3] == true) {
            badgeItem4.hide();
        }

    }

    @Override
    public void onTabReselected(int position) {

    }
}

注意：当需要listview滑动可以让底部导航联动显示和隐藏，listview需要设置一个属性android:nestedScrollingEnabled="true"

此外除了上面主要的一些控件效果之外，还有一些控件如 TextInputLayout,CardView,RecyclerView,MaterialDialog.基本控件的使用我总结写了一个小demo，有需要的话可以去我的github下载：https://github.com/wjn919/MyMaterialDemo。如果有什么不对的地方欢迎随时指正和交流！