md风格android app,Android MD风格相关控件小结

最新推荐文章于 2022-01-26 15:19:07 发布

米国脱口秀

最新推荐文章于 2022-01-26 15:19:07 发布

阅读量365

点赞数

文章标签： md风格android app

要使用MD风格控件，首先需要在Gradle中加入Support Design Library，例如：

compile 'com.android.support:design:24.1.1'

一、CoordinatorLayout

1、CoordinatorLayout + AppBarLayout

布局文件代码如下：

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:id="@+id/appbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/AppTheme.AppBarOverlay">

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:id="@+id/tablayout"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

android:id="@+id/viewpager"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior" />

................

看一下效果：

5e6f2ae1d2ec

CoordinatorLayout_1

配合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: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

布局文件代码如下：

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:id="@+id/app_bar"

android:layout_width="match_parent"

android:layout_height="200dp"

android:fitsSystemWindows="true"

android:theme="@style/AppTheme.AppBarOverlay">

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">

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:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

app:layout_collapseMode="pin"

app:popupTheme="@style/AppTheme.PopupOverlay" />

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

android:id="@+id/webview"

android:layout_width="match_parent"

android:layout_height="match_parent" />

.....................

看一下效果：

5e6f2ae1d2ec

CoordinatorLayout_2

结合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

看一下布局文件代码：

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: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" />

FloatingActionButton的父View是CoordinatorLayout，在屏幕右下角显示，在java代码中我们可以这样使用：

mFab.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Snackbar.make(mCoordinatorLayout, "点我分享哦！", Snackbar.LENGTH_SHORT).show();

}

});

看效果：

5e6f2ae1d2ec

CoordinatorLayout_3

在Snackbar展示的时候FloatingActionButton上移，隐藏时下移。如果FloatingActionButton的父View是RelativeLayout或其它Container则FloatingActionButton不会上移而导致被Snackbar覆盖。

在CoordinatorLayout_2的gif效果中，我们上滑时FloatingActionButton会折叠消失，其实只需要如下两个属性就可以

app:layout_anchor="@id/app_bar"

app:layout_anchorGravity="bottom|end"

第一个属性使FloatingActionButton显示在AppBarLayout的区域，第二个属性确定显示的具体位置。

二、Toolbar

使用Toolbar首先要隐藏原有的ActionBar，我们可以增加一个主题

false

true

也可以扩展原有的主题,

@color/colorPrimary

@color/colorPrimaryDark

@color/colorAccent

colorPrimary：对应ActionBar的颜色。

colorPrimaryDark：对应状态栏的颜色

colorAccent：对应EditText编辑时、FloatingActionButton背景等颜色。

在布局文件中的用法可以参考上边的代码，之后在java代码中得到Toolbar，通过setSupportActionBar(mToolbar);使Toolbar取代原本的ActionBar。

接下来看一张图：

5e6f2ae1d2ec

Toolbar

标出了一些Toolbar常用的扩展方法，这样我们可以更好的根据需求定制我们的Toolbar了。具体的实践可参考源码。

三、NavigationView

先看一下效果：

5e6f2ae1d2ec

NavigationView

其实NavigationView就是用来实现我们常见的侧滑菜单的效果的。

在布局文件中的代码：

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">

layout="@layout/content_main"

android:layout_width="match_parent"

android:layout_height="match_parent" />

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" />

以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，即可实现右滑菜单的开关。

有需要的话可下载源码：点我下载哦!

米国脱口秀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫