Android MD风格相关控件小结
来源:互联网 发布:matlab矩阵乘法代码 编辑:程序博客网 时间:2024/06/05 10:36
要使用MD风格控件,首先需要在Gradle中加入Support Design Library,例如:
compile 'com.android.support:design:24.1.1'
一、CoordinatorLayout
1、CoordinatorLayout + AppBarLayout
布局文件代码如下:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/AppTheme.PopupOverlay" app:title="MdView" /> <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.AppBarLayout> <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" /> ................</android.support.design.widget.CoordinatorLayout>
看一下效果(动态图的图片太大,只能使用静态图了):
配合CoordinatorLayout、AppBarLayout,我们实现了这样的效果,向上滚动列表时,Toolbar隐藏,TabLayout置顶,再向下滚动Toolbar则显示。
Toolbar之所以可以滚动隐藏\显示,是通过如下属性实现的:app:layout_scrollFlags=”scroll|enterAlways”
相关属性值解释如下:
scroll:需要滚动出屏幕的view需要设置该flag, 没有设置则view将被固定在屏幕顶部。enterAlways: 使用该flag,则向下的滚动会使view变为可见状态。
为Toolbar设置layout_scrollFlags属性只是第一步,还需要在CoordinatorLayout 中提供一个可滚动的View,我们使用ViewPager,并在里边嵌套RecyclerView。同时需要为ViewPager设置如下属性:app:layout_behavior=”@string/appbar_scrolling_view_behavior”
这里简单说下Tablayout的用法:
/设置TabLayout可滚动,保证Tab数量过多时也可正常显示
mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
//两个参数分别对应Tab未选中的文字颜色和选中的文字颜色
mTabLayout.setTabTextColors(Color.WHITE, Color.RED);
//绑定ViewPager
mTabLayout.setupWithViewPager(mViewPager);
//设置TabLayout的布局方式(GRAVITY_FILL、GRAVITY_CENTER)
mTabLayout.setTabMode(TabLayout.MODE_FIXED);
mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
//设置TabLayout的选择监听
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
//点击Tab时回调
@Override
public void onTabSelected(TabLayout.Tab tab) {
mViewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
} //重复点击Tab时回调 @Override public void onTabReselected(TabLayout.Tab tab) { scrollToTop(mFragments.get(tab.getPosition()).getTypeList()); } });
Tablayout选中与否的颜色也可以在xml文件中配置:
<android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorColor="@color/c1" //tab指示条颜色 app:tabSelectedTextColor="@color/c1" //选中的tab文字颜色 app:tabTextColor="@color/c11" /> //tab文字默认颜色
注意添加命名空间:
xmlns:app="http://schemas.android.com/apk/res-auto"
2、CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout
布局文件代码如下:
<?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:id="@+id/detail_content" tools:context="com.othershe.mdview.DetailActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="200dp" android:fitsSystemWindows="true" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbar_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/detail_img" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:scaleType="fitXY" 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/AppTheme.PopupOverlay" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.v4.widget.NestedScrollView> .....................</android.support.design.widget.CoordinatorLayout>
看一下效果:
结合CollapsingToolbarLayout,我们向上滑动时ImageView隐藏、Toolbar显示,向下滑动则反之,类似折叠展开的效果。
在CollapsingToolbarLayout中通过app:contentScrim=”?attr/colorPrimary”属性设置Toolbar折叠到顶部的背景,同时设置了app:layout_scrollFlags=”scroll|exitUntilCollapsed”属性,其中scroll的=含义已经解释过了,exitUntilCollapsed的含义如下:
exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端
同时AppBarLayout的高度需要时第一个固定值,这样CollapsingToolbarLayout就有了折叠的效果。
折叠后Toolbar可以固定在顶部是因为使用了app:layout_collapseMode=”pin”属性,属性值除了pin还有一个parallax:
pin:固定模式,在折叠的时候最后固定在顶端parallax:视差模式,在折叠时会有个视差折叠的效果
同时在ImageView中使用了app:layout_collapseMode=”parallax”属性,来产生视差渐变的效果,使用app:layout_collapseParallaxMultiplier=”0.7”可以控制视差的变化,属性值的范围是[0.0, 1.0],值越大视察越大。
最后还需要在NestedScrollView中设置app:layout_behavior=”@string/appbar_scrolling_view_behavior属性。
3、CoordinatorLayout + FloatingActionButton
看一下布局文件代码:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent"> ....................... <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="16dp" android:src="@android:drawable/ic_menu_share" /></android.support.design.widget.CoordinatorLayout>
FloatingActionButton的父View是CoordinatorLayout,在屏幕右下角显示,在java代码中我们可以这样使用:
mFab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(mCoordinatorLayout, "点我分享哦!", Snackbar.LENGTH_SHORT).show(); } });
看效果:
在Snackbar展示的时候FloatingActionButton上移,隐藏时下移。如果FloatingActionButton的父View是RelativeLayout或其它Container则FloatingActionButton不会上移而导致被Snackbar覆盖。
在CoordinatorLayout_2的效果中,我们上滑时FloatingActionButton会折叠消失,其实只需要如下两个属性就可以
app:layout_anchor="@id/app_bar"app:layout_anchorGravity="bottom|end"
第一个属性使FloatingActionButton显示在AppBarLayout的区域,第二个属性确定显示的具体位置。
二、Toolbar
使用Toolbar首先要隐藏原有的ActionBar,我们可以增加一个主题
<style name="AppTheme.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style>
也可以扩展原有的主题,
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>
colorPrimary:对应ActionBar的颜色。
colorPrimaryDark:对应状态栏的颜色
colorAccent:对应EditText编辑时、FloatingActionButton背景等颜色。
在布局文件中的用法可以参考上边的代码,之后在java代码中得到Toolbar,通过setSupportActionBar(mToolbar);使Toolbar取代原本的ActionBar。
接下来看一张图:
标出了一些Toolbar常用的扩展方法,这样我们可以更好的根据需求定制我们的Toolbar了。具体的实践可参考源码
三、NavigationView
先看一下效果:
其实NavigationView就是用来实现我们常见的侧滑菜单的效果的。
在布局文件中的代码:
<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <include layout="@layout/content_main" android:layout_width="match_parent" android:layout_height="match_parent" /> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:menu="@menu/menu_drawer" app:headerLayout="@layout/nav_head_main" /></android.support.v4.widget.DrawerLayout>
以DrawerLayout作为根布局,content_main作为主界面布局,最后是NavigationView,通过android:layout_gravity=”start”设置为左侧滑菜单,同理android:layout_gravity=”end”代表右侧滑菜单。
其中
app:menu="@menu/menu_drawer"app:headerLayout="@layout/nav_head_main"
两个属性分别代表NavigationView的顶部header布局以及下边的menu item布局,具体可以参考源代码。
准备好了布局文件,接下来就是初始化工作:
private void initNavigationView() { //初始化NavigationView顶部head的icon和name ImageView icon = (ImageView) mNavView.getHeaderView(0).findViewById(R.id.nav_head_icon); icon.setImageResource(R.mipmap.ic_launcher); TextView name = (TextView) mNavView.getHeaderView(0).findViewById(R.id.nav_head_name); name.setText("VipOthershe"); //设置NavigationView对应menu item的点击事情 mNavView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.nav_item1: break; case R.id.nav_item2: break; case R.id.nav_set: break; case R.id.menu_share: break; case R.id.nav_about: break; } //隐藏NavigationView mDrawerLayout.closeDrawer(GravityCompat.START); return true; } }); }
很简单,就是初始化NavigationView的顶部header和Menu Item。
接下来看一下如何将右滑菜单和Toolbar结合使用:
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle( this, mDrawerLayout, mToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close); mDrawerLayout.addDrawerListener(toggle); //设置左上角显示三道横线 toggle.syncState();
通过设置将两者绑定在一起,同时Toolbar左上角显示三道横线,左上角可打开左滑菜单。
还可以采用另外一种方式:
//设置Toolbar左上角图标 mToolbar.setNavigationIcon(R.mipmap.ic_launcher); mToolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mDrawerLayout.openDrawer(GravityCompat.START); } });
先设置Toolbar左上角图标,并绑定事件,通过mDrawerLayout.openDrawer(GravityCompat.START);打开左滑菜单。
以上两个方法,分别对应打开和关闭左滑菜单:
mDrawerLayout.openDrawer(GravityCompat.START);mDrawerLayout.closeDrawer(GravityCompat.START);
如果使用右滑菜单则将GravityCompat.START改成GravityCompat.END,即可实现右滑菜单的开关。
源码下载:点我下载
- Android MD风格相关控件小结
- Android-MD风格设置
- Android MD风格颜色汇总
- Android中MD相关的控件介绍及使用
- MD风格
- Android 走向MD的配色风格
- Android——MD风格转场动画
- Android MD控件之CardView
- Android MD控件之CardView
- Android:使用android-support-design实现MD风格对话框
- DrawerLayout NavigationView 实现侧滑(Android MD风格一)
- android MD新控件之toolbar
- MD的配色风格
- Android 图片相关小结
- 初学md小结
- 自己设计MD风格侧滑栏
- MD风格(ToolBar+Theme)
- Android 5.0 MD控件系列(1)——NavigationView
- 关于ProjectConfig.mk文件相关配置编译名字长度规定
- OSI七层通信的简易理解-举例说明
- 第一个汇编程序
- 历史党撕逼图(转)
- 在云上配置docker的2048小游戏
- Android MD风格相关控件小结
- ibaits中使用迭代器遍历list
- POJ3320-Jessica's Reading Problem
- HDU 6103 Kirinriki
- jvm 类加载机制
- RedHat 6.2 Linux修改yum源免费使用CentOS源
- tf.subtract()
- 数据结构入门6—文艺平衡树(Splay)
- 1109. Group Photo (25)