Android开发之开发者头条(二)实现左滑菜单_Android

在上篇文章给大家介绍了Android开发之开发者头条(一)启动页实现,感兴趣的朋友可以参考下。

title: 带你实现开发者头条(二) 实现左滑菜单

tags: 左滑菜单,android 自带侧滑,DrawerLayout

grammar_cjkRuby: true

今天开始模仿开发者头条的侧滑菜单,是本系列第二篇文章,相信大家已经看到很多app使用这种侧滑。今天我来教大家用android自带DrawerLayout控件实现。

DrawerLayout是SupportLibrary包中实现了侧滑菜单效果的控件,可以说DrawerLayout是因为第三方控件如MenuDrawer等的出现之后,google借鉴而出现的产物。DrawerLayout分为侧边菜单和主内容区两部分,侧边菜单可以根据手势展开与隐藏(DrawerLayout自身特性),主内容区的内容可以随着菜单的点击而变化(这需要使用者自己实现)。

一.先给大家展示下效果图:

 

二.代码实现

1.drawerLayout其实是一个布局控件,跟LinearLayout等控件是一种东西,但是drawerLayout带有滑动的功能。只要按照drawerLayout的规定布局方式写完布局,就能有侧滑的效果。我这边把侧滑菜单的内容放一个布局文件了。

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="true"
android:fitsSystemWindows="true" >
<include
android:id="@+id/rl_title"
layout="@layout/layout_main_title" />
<!-- The main content view -->
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/rl_title"
android:background="@color/white_normal" >
</FrameLayout>
</RelativeLayout>
<!-- The navigation view -->
<FrameLayout
android:id="@+id/left_drawer"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start" >
<!-- 左侧菜单 -->
<include layout="@layout/layout_main_left" />
</FrameLayout>
</android.support.v4.widget.DrawerLayout> 

注意事项

主内容区的布局代码要放在侧滑菜单布局的前面,这可以帮助DrawerLayout判断谁是侧滑菜单,谁是主内容区
侧滑菜单的部分的布局(这里是ListView)可以设置layout_gravity属性,他表示侧滑菜单是在左边还是右边。

2.MainActivity.java 继承FragmentActivity

1).设置内容Fragment,设置状态栏

2).处理左侧点击事件,在点击事件中设置选中背景,关闭左边侧滑菜单。

public class MainActivity extends FragmentActivity{
private DrawerLayout mDrawerLayout;
private RelativeLayout rlHome, rlGift, rlShare;
private int currentSelectItem = R.id.rl_home;// 默认首页
private ContentFragment contentFragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
findViewById(R.id.iv_menu).setOnClickListener(clickListener);
initLeftMenu();//初始化左边菜单
contentFragment=new ContentFragment();
getSupportFragmentManager().beginTransaction().add(R.id.content_frame,contentFragment).commit();
setWindowStatus();
}
private void initLeftMenu() {
rlHome = (RelativeLayout) findViewById(R.id.rl_home);
rlGift = (RelativeLayout) findViewById(R.id.rl_gift);
rlShare = (RelativeLayout) findViewById(R.id.rl_share);
rlHome.setOnClickListener(onLeftMenuClickListener);
rlGift.setOnClickListener(onLeftMenuClickListener);
rlShare.setOnClickListener(onLeftMenuClickListener);
rlHome.setSelected(true);
}
private OnClickListener onLeftMenuClickListener = new OnClickListener() {
@Override
public void onClick(View v) {
if (currentSelectItem != v.getId()) {//防止重复点击
currentSelectItem=v.getId();
noItemSelect();
switch (v.getId()) {
case R.id.rl_home:
rlHome.setSelected(true);
contentFragment.setContent("这是首页");
break;
case R.id.rl_gift:
rlGift.setSelected(true);
contentFragment.setContent("这是礼物兑换");
break;
case R.id.rl_share:
rlShare.setSelected(true);
contentFragment.setContent("这是我的分享");
break;
}
mDrawerLayout.closeDrawer(Gravity.LEFT);
}
}
};
private void noItemSelect(){
rlHome.setSelected(false);
rlGift.setSelected(false);
rlShare.setSelected(false);
}
private OnClickListener clickListener = new OnClickListener() {
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.iv_menu:// 打开左边抽屉
mDrawerLayout.openDrawer(Gravity.LEFT);
break;
}
}
};
// 设置状态栏
private void setWindowStatus() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
// 透明状态栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// 透明导航栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
// 设置状态栏颜色
getWindow().setBackgroundDrawableResource(R.color.main_color);
}
}
}

3.左侧菜单item选中背景的布局文件 selector_left_menu_item.xml。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/menu_left_item_select" android:state_selected="true"/>
<item android:drawable="@color/white_normal"/>
</selector> 

4.ContentFragment 显示内容的Fragment 这里我加了一个设置内容的方法,就是用来点击左侧切换显示用的。

public class ContentFragment extends Fragment{
private TextView tvContent;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState){
View rootView=LayoutInflater.from(getActivity()).inflate(R.layout.fragment_content, null);
tvContent=(TextView) rootView.findViewById(R.id.tv_content);
return rootView;
}
public void setContent(String content){
tvContent.setText(content);
}
}

5.drawerLayout与Fragment是什么关系?

我们看到很多使用drawerLayout的代码中都同时使用了Fragment,这会造成误解,以为使用drawerLayout必须用到Fragment,其实这是错误的,使用Fragment是因为在侧滑菜单被点击的时候,主内容区如果内容比较复杂,用Fragment去填充会更容易,如果你的主内容区只是一个简单的字符串,只想在不同菜单点击的时候更新一下字符串的内容,我觉得没必要用Fragment。我这边用Fragment所做的就是更新字符串内容这么简单。

以上内容是针对Android开发之开发者头条(二)实现左滑菜单的全部介绍,希望对大家有所帮助!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索android开发者头条
android左滑菜单
开发者头条、今日头条开发者平台、开发者头条 电脑版、开发者头条 mac、今日头条开发者,以便于您获取更多的相关知识。

时间: 2025-01-21 01:03:05

Android开发之开发者头条(二)实现左滑菜单_Android的相关文章

带你实现开发者头条(二) 实现左滑菜单

title: 带你实现开发者头条(二) 实现左滑菜单 tags: 左滑菜单,android 自带侧滑,DrawerLayout grammar_cjkRuby: true --- 今天开始模仿开发者头条的侧滑菜单,是本系列第二篇文章,相信大家已经看到很多app使用这种侧滑.今天我来教大家用android自带DrawerLayout控件实现. DrawerLayout是SupportLibrary包中实现了侧滑菜单效果的控件,可以说DrawerLayout是因为第三方控件如MenuDrawer等的

Android开发之开发者头条APP(三)实现首页_Android

相关阅读: Android开发之开发者头条(一)启动页实现 Android开发之开发者头条(二)实现左滑菜单 title: 带你实现开发者头条APP(三) 首页实现 tags: 轮播广告,ViewPager切换,圆形图片 grammar_cjkRuby: true 一.前言 今天实现开发者头条APP的首页.是本系列的第三篇文章,效果图如下: 从gif动态效果图中我们可以看出,最外层有三个tab(精选,订阅,发现),在精选界面顶部有一个轮播的图片广告,广告下面是一个精选文章列表. 二.外层三个ta

Android开发之开发者头条(一)启动页实现_Android

废话就不多说了,开始今天的正题,带你实现开发者头条APP的启动页. 一.老规矩,先上效果图 从效果图中我们可以看出,整个滑动的界面就是一个ViewPager实现,然后监听ViewPager的滑动事件,改变底部四个小图标的切换,以及跳转到首页的按钮的隐藏显示. 二.代码实现 1).整个布局文件.上面是ViewPager,下面是四个小图标存放的容器. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/androi

Android开发之开发者头条APP(三)实现首页

相关阅读: Android开发之开发者头条(一)启动页实现 Android开发之开发者头条(二)实现左滑菜单 title: 带你实现开发者头条APP(三) 首页实现 tags: 轮播广告,ViewPager切换,圆形图片 grammar_cjkRuby: true 一.前言 今天实现开发者头条APP的首页.是本系列的第三篇文章,效果图如下: 从gif动态效果图中我们可以看出,最外层有三个tab(精选,订阅,发现),在精选界面顶部有一个轮播的图片广告,广告下面是一个精选文章列表. 二.外层三个ta

Xamarin.Android开发实践(十二)

原文:Xamarin.Android开发实践(十二) Xamarin.Android之ContentProvider 一.前言 掌握了如何使用SQLiteOpenHelper之后,我们就可以进行下一步的学习.本章我们将会学习如何使用ContentProvider来将数据库方面的操作封装起来,同时它还可以供其他应用访问并操作数据库.   二.概念 首先我们不会急于写代码,而是要搞懂如何利用ContentProvider对数 据库进行操作,因为我们不会直接操作数据库对象,而是通过URI来操作数据库.

Android开发入门(十二)列表控件 12.3 ListView的总结范例

使用一个例子,来总结一下ListView的基本使用. 1. 新建一个工程:ListViewDemo. 2. main.xml中的代码. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_pare

Android开发入门(十二)列表控件 12.2 ListView的扩展功能

ListView是一个可以被深度扩展的视图.在做项目的时候,扩展ListView去显示数据是必不可免的.接下 来会展示如何在ListView中去选择多个物件,以及如何使用ListView的"过滤"功能. 1. 使用上一 节的工程:BasicViews5. 2. 在BasicViews5Activity.java中添加一些代码. String[] presidents; /** Called when the activity is first created. */ @Override

Android开发入门(十二)列表控件 12.1 ListView的基本使用

今天总结一下Android中的列表控件:ListView和Spinner. ListView可以垂直并可滑动地地显示 一些信息.下面阐述如何使用ListView显示一系列的信息. 1. 创建一个工程:BasicViews5. 2. strings.xml中的代码. <?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">He

Android 开发音频组件(Vitamio FAQ)详细介绍_Android

 一.Vitamio介绍   1.1 Vitamio是什么?    Vitamio是Android平台视音频播放组件,支持播放几乎格式的视频以及主流网络视频流(http/rtsp/mms等),详细的中文介绍: 这里.    Vitamio官网:http://vitamio.org/    Vitamio微博:http://weibo.com/vitamio     VPlayer官网:http://vplayer.net    Vitamio豆瓣:http://site.douban.com/1