先来看看效果图
当你点击菜单可以更改图标,例如点击happy,首页就会变一个笑脸,这个实现的过程超级简单
你需要使用ToolBar与DrawableLayout两个比较新的控件
首先要写三个xml布局文件,我这里的布局文件是使用了include标签嵌入的,代码如下
headbar_toolbar.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tbHeadBar" android:layout_width="match_parent" android:layout_height="50dp" android:background="@color/red"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="@string/emotion" android:textColor="@color/white" android:textSize="16sp" /> </android.support.v7.widget.Toolbar>
my_drawablelayout.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/dlMenu" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/llContent" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/ivContent" android:layout_width="100dp" android:layout_height="100dp" android:src="@drawable/angry" /> </LinearLayout> <!--android:layout_gravity="start"属性使这部分作为侧滑部分--> <!--一定要放在下面!!!关于控件的层次性如果不知道的同学去百度!哦不去谷歌--> <LinearLayout android:id="@+id/llMenu" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" android:background="@color/white" android:orientation="vertical"> <!--用于设置菜单项--> <ListView android:id="@+id/lvMenu" android:layout_width="match_parent" android:layout_height="match_parent" android:divider="@null" /> </LinearLayout> </android.support.v4.widget.DrawerLayout>
main_activity.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.demo.usher.demo_slidingmenu.MainActivity"> <!--头部--> <include layout="@layout/headbar_toolbar" /> <!--主布局--> <include layout="@layout/my_drawablelayout" /> </LinearLayout>
如何应用在java文件中【一个文件搞定】
package com.demo.usher.demo_slidingmenu; import android.os.Bundle; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBarDrawerToggle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.View; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.ListView; import java.util.ArrayList; import java.util.List; import butterknife.BindView; import butterknife.ButterKnife; public class MainActivity extends AppCompatActivity { @BindView(R.id.tbHeadBar) Toolbar mTbHeadBar; /*侧滑菜单布局*/ @BindView(R.id.llMenu) LinearLayout mLlMenu; /*侧滑菜单ListView放置菜单项*/ @BindView(R.id.lvMenu) ListView mLvMenu; @BindView(R.id.ivContent) ImageView mIvContent; @BindView(R.id.dlMenu) DrawerLayout mMyDrawable; ActionBarDrawerToggle mToggle; private List<String> lvMenuList = new ArrayList<String>() {{ add("angry"); add("happy"); add("sad"); add("embarrassed"); }}; private List<Integer> imageList = new ArrayList<Integer>() {{ add(R.drawable.angry); add(R.drawable.happy); add(R.drawable.sad); add(R.drawable.embarrassed); }}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); /*初始化Toolbar与DrawableLayout*/ initToolBarAndDrawableLayout(); mLvMenu.setAdapter(new ArrayAdapter(this, android.R.layout.simple_expandable_list_item_1, lvMenuList)); mLvMenu.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { mIvContent.setImageResource(imageList.get(position)); mMyDrawable.closeDrawers();/*收起抽屉*/ } }); } private void initToolBarAndDrawableLayout() { setSupportActionBar(mTbHeadBar); /*以下俩方法设置返回键可用*/ getSupportActionBar().setHomeButtonEnabled(true); getSupportActionBar().setDisplayHomeAsUpEnabled(true); /*设置标题文字不可显示*/ getSupportActionBar().setDisplayShowTitleEnabled(false); mToggle = new ActionBarDrawerToggle(this, mMyDrawable, mTbHeadBar, R.string.open, R.string.close) { @Override public void onDrawerOpened(View drawerView) { super.onDrawerOpened(drawerView); //Toast.makeText(MainActivity.this, R.string.open, Toast.LENGTH_SHORT).show(); } @Override public void onDrawerClosed(View drawerView) { super.onDrawerClosed(drawerView); //Toast.makeText(MainActivity.this, R.string.close, Toast.LENGTH_SHORT).show(); } }; /*mMyDrawable.setDrawerListener(mToggle);不推荐*/ mMyDrawable.addDrawerListener(mToggle); mToggle.syncState();/*同步状态*/ } }
关于butterknife注解与样式
butterknife直接在gradle文件中配置好如下【缺什么就补什么】
apply plugin: 'com.android.application' apply plugin: 'android-apt' android { compileSdkVersion 24 buildToolsVersion "24.0.2" defaultConfig { applicationId "com.demo.usher.demo_slidingmenu" minSdkVersion 15 targetSdkVersion 24 versionCode 1 versionName "1.0" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } buildscript { repositories { mavenCentral() } dependencies { classpath 'com.neenbedankt.gradle.plugins:android-apt:1.8' } } dependencies { compile fileTree(include: ['*.jar'], dir: 'libs') testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:24.2.0' compile 'com.jakewharton:butterknife:8.4.0' /*butterknife相关*/ apt 'com.jakewharton:butterknife-compiler:8.4.0' compile 'com.android.support:support-v4:24.2.0' }
style【关于返回键的颜色样式等在style文件中修改】
<resources> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item> </style> <style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle"> <item name="color">@android:color/white</item> </style> </resources>
总结
其实很多时候我们在使用第三方控件的时候往往不知道背后是怎么实现的,使用原生控件可以让我们更好的理解一个交互或者说实现一个功能的原理,有利于做出性能与交互都非常优秀的APP,以上就是这篇文章的全部内容,希望对大家的工作或学习带来一定的帮助。
本文向大家介绍Android实现侧滑菜单DrawerLayout,包括了Android实现侧滑菜单DrawerLayout的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android实现侧滑菜单的具体代码,供大家参考,具体内容如下 点击左侧滑动 效果如下 代码实现过程: 1.导入框架build.gradle中 2.xml文件 主要的界面放在DrawerLayout 中,需要强调的是
本文向大家介绍Android自定义控件简单实现侧滑菜单效果,包括了Android自定义控件简单实现侧滑菜单效果的使用技巧和注意事项,需要的朋友参考一下 侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup,然后隐藏菜单栏,当手指滑动时,通过Scroller或者不断的改变leftMargin等实现;多少都有点复杂,完成以后还需要对滑动冲突
本文向大家介绍Android中DrawerLayout实现侧滑菜单效果,包括了Android中DrawerLayout实现侧滑菜单效果的使用技巧和注意事项,需要的朋友参考一下 众所周知,android里面我们很熟悉的一个功能,侧滑菜单效果在以前我们大部分都是用的slidingmenu这个开源框架,自从谷歌官方新出的一个DrawerLayout控件之后,越来越多的应用开始使用谷歌的官方的控件写这个效
主要内容:本节引言:,1.使用的注意事项,2.使用代码示例,3.代码示例下载,本节小结:本节引言: 本节给大家带来基础UI控件部分的最后一个控件:DrawerLayout,官方给我们提供的一个侧滑菜单 控件,和上一节的ViewPager一样,3.0以后引入,低版本使用它,需要v4兼容包,说到侧滑,相信 很多人都用过github上的SlidingMenu,不过好像有两个版本,一个是单独的,另一个需要依赖另一 个开源项目:ActionBarSherlock;既然Google为我们提供了这
本文向大家介绍Android_UI 仿QQ侧滑菜单效果的实现,包括了Android_UI 仿QQ侧滑菜单效果的实现的使用技巧和注意事项,需要的朋友参考一下 相信大家对QQ侧滑菜单的效果已经不陌生了吧,侧滑进入个人头像一侧,进行对头像的更改,我的收藏,QQ钱包,我的文件等一系列的操作,今天呢,主要是实现进入侧滑菜单的这一效果原理进行分析. 主要思路分析 1.首先写一个SlideMenu 继承一个
本文向大家介绍Android使用DrawerLayout实现仿QQ双向侧滑菜单,包括了Android使用DrawerLayout实现仿QQ双向侧滑菜单的使用技巧和注意事项,需要的朋友参考一下 1、概述 之前写了一个Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭 ,恰逢QQ5.2又加了一个右侧菜单,刚好看了下DrawerLayout,一方面官方的东西,我都比较感兴趣;另一方面,这玩意