首页 > 学院 > 开发设计 > 正文

材料设计控件的基本用法

2019-11-09 14:00:44
字体:
来源:转载
供稿:网友

一 侧滑菜单 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")@Overridepublic 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。如果有什么不对的地方欢迎随时指正和交流!


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表