android案例---侧滑菜单，简单又好看
2017-08-10 本文已影响154人
return_toLife
今天来做个简单又好看的案例
今天的知识有如下内容：
- ToolBar
- DrawerLayout
- 两者结合（2333...）
先看看最吸引人的最终效果
GIF.gif
那我们现在来开始吧，这个代码量很少的
1. Toolbar
其实介绍toolbar的文章很多，我这里就只写案例用到一些内容，具体可以查看这个文章
首先我们修改styls.xml文件，将默认的主题修改为NotActionBar，并添加自己喜欢的颜色
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!--应用的主要色调，actionBar默认使用该颜色，Toolbar导航栏的底色-->
<item name="colorPrimary">@color/colorPrimary</item>
<!--应用的主要暗色调，statusBarColor（电池那个位置）默认使用该颜色-->
<item name="colorPrimaryDark">@color/SkyBlue</item>
<!--一般控件的选中效果默认采用该颜色-->
<item name="colorAccent">@color/colorAccent</item>
</style>
<!--这个是optionsmenu弹出的样式-->
<style name="MyPopupTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColor">@android:color/white</item>
<item name="android:textSize">12sp</item>
<item name="android:colorBackground">@android:color/black</item>
<!--overlapAnchor是让溢出菜单不要盖住ToolBar-->
<item name="overlapAnchor">false</item>
</style>
然后在主activity_main.xml中加入Toolbar，这里用到的是V7包下的，要导包，
导入包的步骤：
File->Project Structure->app->Dependencies
然后点击右边的+号，选中Library dependecy
最后搜索V7包，选择OK就会自动导入
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="MyTollBar"
android:background="@color/colorDeepSkyBlue"
app:popupTheme="@style/MyPopupTheme"
/>
我这里主要就设置下了Title和背景颜色，
popupTheme就是optionsmenu弹出菜单的样式，上面有给出styles
然后在MainActivity中将ToolBar设置为ActionBar：
toolbar=(Toolbar)findViewById(R.id.tollbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);// 给左上角图标的左边加上一个返回的图标
getSupportActionBar().setHomeButtonEnabled(false); //设置返回键可用
2. DrawerLayout
我用的是V4包，导入方法和V7一样
这个主要在布局文件中比较好说明
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--主布局-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/iv_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/c"/>
</LinearLayout>
<!--侧滑菜单-->
<include layout="@layout/drawerlayout2"></include>
</android.support.v4.widget.DrawerLayout>
这里用include 主要是为了让代码看起来比较简洁些，相当于分块吧，就是引用了一个普通的布局文件
(侧滑菜单的内容)drawerlayout2.xml:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:clickable="true"
android:tag="left">
<ImageView
android:id="@+id/iv_drawer_bg"
android:layout_width="match_parent"
android:layout_height="350dp"
android:scaleType="centerCrop"
android:src="@drawable/a"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/id_draw_menu_header"
android:layout_width="match_parent"
android:layout_height="200dp">
<TextView
android:id="@+id/id_draw_menu_item_backup"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="100dp"
android:drawableLeft="@mipmap/d"
android:drawablePadding="15dp"
android:gravity="center"
android:text="sunshine"
android:textColor="@android:color/black"
android:textSize="15sp" />
<ImageView
android:id="@+id/id_draw_menu_item_download"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:layout_marginTop="35dp"
android:scaleType="centerCrop"
android:src="@mipmap/e" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/background_light"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:textColor="@android:color/black"
android:paddingLeft="10dp"
android:text="内容1"
android:textSize="20dp"
android:gravity="center_vertical"/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
大家很容易看出来，drawerLayout的运用就是作用为根布局，然后子布局有一个主布局和一个侧滑布局
但是，这里要注意，侧滑布局的根节点要有一个
android:layout_gravity="start 这个是重点！！！
不然的话看不到侧滑布局，这里主要是让侧滑布局显示在主布局上面
最后同样在activity_main,xml中加入该布局
<LinearLayout 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"
tools:context="com.example.a455.toolbaranddraw.MainActivity"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="MyTollBar"
android:background="@color/colorDeepSkyBlue"
app:popupTheme="@style/MyPopupTheme"
/>
<include
android:id="@+id/drawerlayout"
layout="@layout/drawerlayout"/>
</LinearLayout>
3. 两个结合
主要作用是ActionBarDrawerToggle
我们直接看MainActivity代码
public class MainActivity extends AppCompatActivity {
Toolbar toolbar;
DrawerLayout drawerLayout;
ActionBarDrawerToggle actionBarDrawerToggle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar=(Toolbar)findViewById(R.id.toolbar);
drawerLayout=(DrawerLayout)findViewById(R.id.drawerlayout);
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);// 给左上角图标的左边加上一个返回的图标
actionBarDrawerToggle=new ActionBarDrawerToggle(
this, //上下文
drawerLayout,toolbar, //两个相应控件
R.string.drawer_open, //用来描述打开的时候状态
R.string.drawer_close){ //用来描述关闭的时候状态
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
Toast.makeText(MainActivity.this, "打开抽屉", Toast.LENGTH_SHORT).show();
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
Toast.makeText(MainActivity.this, "关闭抽屉", Toast.LENGTH_SHORT).show();
}
};
drawerLayout.addDrawerListener(actionBarDrawerToggle); //添加回调接口
}
@Override
protected void onPostCreate(@Nullable Bundle savedInstanceState) {
actionBarDrawerToggle.syncState(); //该方法我查阅了下，主要是用来同步侧滑菜单的状态信息，推荐在该回调方法中使用
super.onPostCreate(savedInstanceState);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu, menu); //添加菜单资源文件
return true;
}
其实主要就是加了个监听让ToolBar和DrawerLayout结合了起来
到这里，我们就已经实现啦~~，希望大家成功
总结思路：
- 修改App默认主题为NotActionBar
- 创建ToolBar控件并设置为ActionBar
- 创建drawerlayout布局，里面包含一个主布局和侧滑菜单
- 用actionBarDrawerToggle将drawerlayout和toolbar关联起来，设置一个监听
其实这次代码量真的很少，主要是布局的配置，布局大家可以自由发挥的，相信你们一定做得比好我看！
