*本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布
原创文章,转载请注明 ( 来自:http://blog.csdn.net/leejizhou/article/details/52013343 李济洲的博客 )
滑动导航菜单一直都是移动App中比较流行的UI设计,随着Material Design的盛行Android也越来越多采用这种设计,当然这种滑动菜单样式也是各种各样五花八门,这篇文章就来总结下如何利用Android Api去快速构建各种类型的滑动导航菜单效果。
1.先看第一种样式,这也是QQ客户端V6版本的滑动菜单样式
快速实现这个UI效果需要利用V4包的SlidingPaneLayout控件,这是一个帮助开发者实现水平的多层滑动的Layout,继承自ViewGroup。
下面看下具体的实现代码
layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SlidingPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/SlidingPane"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#D32F2F"
>
<LinearLayout
android:id="@+id/ll_menu"
android:layout_width="200dp"
android:layout_height="match_parent"
android:background="#D32F2F"
android:gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu"
android:textSize="25sp"
android:textColor="#ffffff"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical" >
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</LinearLayout>
</android.support.v4.widget.SlidingPaneLayout>
代码还是很简单的,最外层是SlidingPaneLayout这个容器控件,里面放了两个子布局,第一个用来放置导航菜单布局,第二个放置主视图布局。
Java代码
SlidingPaneLayout 一些主要方法
- setParallaxDistance(int parallaxBy) 设置滑动视差
- setCoveredFadeColor(int color) 导航菜单视图的滑动颜色渐变
- setSliderFadeColor(int color) 主视图的滑动颜色渐变
- setPanelSlideListener(SlidingPaneLayout.PanelSlideListener listener) 滑动监听
- openPane() 打开导航菜单
- closePane() 关闭导航菜单
- https://developer.android.com/reference/android/support/v4/widget/SlidingPaneLayout.html
/**
* Created by www.lijizhou.com on 2016/7/23.
* SlidingPaneLayout Sample
*/
public class SlidingPaneLayoutActivity extends AppCompatActivity {
private SlidingPaneLayout mSlidingPane;
private LinearLayout ll_menu,ll_main;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_slidingpane);
mSlidingPane= (SlidingPaneLayout) findViewById(R.id.SlidingPane);
ll_menu=(LinearLayout)findViewById(R.id.ll_menu);
ll_main=(LinearLayout)findViewById(R.id.ll_main);
setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
//设置滑动视差 可选
mSlidingPane.setParallaxDistance(200);
//菜单滑动的颜色渐变设置 可选
//mSlidingPane.setCoveredFadeColor(getResources().getColor(R.color.colorAccent));
//主视图滑动的颜色渐变设置 可选
mSlidingPane.setSliderFadeColor(0);
//滑动监听 可选
mSlidingPane.setPanelSlideListener(new SlidingPaneLayout.PanelSlideListener() {
@Override
public void onPanelSlide(View panel, float slideOffset) {
Log.i("mylog","slide --- "+slideOffset);
// slideOffset这个参数 是跟随滑动0-1变化的 通过这个数值变化我们可以做出一些不一样的滑动效果
// ll_menu.setScaleY(slideOffset / 2 + 0.5F);
// ll_menu.setScaleX(slideOffset/ 2 + 0.5F);
// ll_main.setScaleY(1 - slideOffset / 5);
}
@Override
public void onPanelOpened(View panel) {
Log.i("mylog","slide --- open");
}
@Override
public void onPanelClosed(View panel) {
Log.i("mylog","slide --- close");
}
});
}
}
OK,这样就实现了滑动导航的效果,注意在滑动监听中的这个方法里面,跟据slideOffset参数0~1的变化可以去改变视图大小就会做出更多种类的效果,这里我们设置滑动过程中改变主视图的大小,代码如下
public void onPanelSlide(View panel, float slideOffset) {
Log.i("mylog","slide --- "+slideOffset);
// slideOffset这个参数 是跟随滑动0-1变化的 通过这个数值变化我们可以做出一些不一样的滑动效果
ll_menu.setScaleY(slideOffset / 2 + 0.5F);
ll_menu.setScaleX(slideOffset/ 2 + 0.5F);
ll_main.setScaleY(1 - slideOffset / 5);
}
运行效果
2.下面介绍第二种滑动导航菜单的效果,主视图不动,然后在边缘划出菜单。
快速实现这个效果需要利用V4包的DrawerLayout 这个布局容器,可见V4包下面有多少好东西,另外其实SlidingPaneLayout和这个DrawerLayout都是利用V4的ViewDragHelper去实现的,这是一个帮助类,这里就不多做介绍了,对它感兴趣的可以深入了解下。
看下代码实现
Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<android.support.v4.widget.DrawerLayout
android:id="@+id/dl_left"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:background="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
<!--drawer layout -->
<LinearLayout
android:layout_width="200dp"
android:layout_height="match_parent"
android:background="#D32F2F"
android:layout_gravity="start">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Menu"
android:textSize="25sp"
android:gravity="center"
android:textColor="#ffffff"
/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
需要注意的是主视图的布局代码要放在侧滑菜单布局的前面,侧滑菜单布局的代码中android:layout_gravity=”start” 从左侧滑动,反之end右侧滑动。
Java代码
DrawerLayout 的一些主要方法
addDrawerListener(DrawerLayout.DrawerListener listener) 添加滑动监听
openDrawer(int gravity) 开启导航菜单 参数:GravityCompat.START GravityCompat.END 要跟XML设置相同
closeDrawer(int gravity) 关闭导航菜单
isDrawerOpen(int drawerGravity) 菜单是否开启
https://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html
/**
* Created by www.lijizhou.com on 2016/7/23.
* DrawerLayout Sample
*/
public class DrawerLayoutActivity extends AppCompatActivity {
private DrawerLayout drawerLayout;
private Toolbar toolbar;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_drawerlayout);
setSupportActionBar(toolbar=(Toolbar) findViewById(R.id.toolbar));
drawerLayout=(DrawerLayout)findViewById(R.id.dl_left);
//ActionBarDrawerToggle是DrawerLayout.DrawerListener的实现,可以方便的将drawlayout和actionbar结合起来
ActionBarDrawerToggle actionBarDrawerToggle=new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open,R.string.close){
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
};
actionBarDrawerToggle.syncState();
drawerLayout.addDrawerListener(actionBarDrawerToggle);
}
}
DrawerLayout跟ActionBarDrawerToggle配合快速就可以快速构建出具有动画交互的滑动导航菜单效果,是不是很简单。
由于篇幅有限先介绍这两个滑动效果,下一篇(二)http://blog.csdn.net/leejizhou/article/details/52046748 将介绍具有material design官方设计标准的滑动菜单设计,先看下运行图,下篇见,也欢迎朋友在下方留言和点击坐上角的关注,感谢。