AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

[安卓] 17、一个简单的例子学安卓侧滑设计——用开源slidingmenu

2018-04-18 1595
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：


 

 

效果如下：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

下面是工程结构：

  

 

 

 

整个工程包括android-v7、SlidingMenu-lib和主工程SlidingMenuTest部分

其中前两个作为lib，后一个为主工程

主工程包含两个lib工程方法为：（易错点）

选择主工程属性

 

 

而主工程包括：

逻辑部分：（SRC）其中MainActivity.java是主入口，在主入口内调用部分函数可加载MainFragment.java所对应的Fragment

　　　　　　而CircleImageView.java主要负责使头像呈圆形用的

显示部分：（layout）activity_main.xml对应主页面，layout_actionbar.xml对应actionbar（actionbar的形式可以通过这个调节），

　　　　　　layout_menu.xml是侧栏，item_menu.xml是侧栏中的列表的item（上一节中讲了自定义列表和这个类似）

 

  • 这里MainActivity协调整体逻辑：

该avtivity中代码比较简洁，一看便知道怎么用fragment的了——17、18

怎么设置侧滑——15

怎么设置bar——16

此外，在setmenu中对侧滑栏点击事件的监听和list一样——43to78

一看便会用~而fragment的java文件只写了个类（没内容），圆形头像相关的java不必看（会用即可）

复制代码 
 1 public class MainActivity extends ActionBarActivity {
 2 
 3     private LayoutInflater inflator;
 4     public static FragmentManager fm;
 5     private ActionBar actionBar;
 6     private SlidingMenu menu;
 7     private ListView menuList;
 8     
 9     @Override
10     protected void onCreate(Bundle savedInstanceState) {
11         super.onCreate(savedInstanceState);
12         setContentView(R.layout.activity_main);
13         
14         inflator = (LayoutInflater) MainActivity.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
15         setMenu();
16         setActionBar();
17         fm=getSupportFragmentManager();
18         fm.beginTransaction().replace(R.id.content_frame,new MainFragment()).commit();//用MainFragment替换原来的content_fram
19     }
20     
21     private void setActionBar(){//自定义actionbar
22         actionBar = getSupportActionBar();
23         actionBar.setDisplayShowHomeEnabled( false );
24         actionBar.setDisplayShowCustomEnabled(true);
25         actionBar.setDisplayShowTitleEnabled(false);
26         actionBar.setDisplayHomeAsUpEnabled(false);
27         
28         View view = inflator.inflate(R.layout.layout_actionbar, null);
29         ActionBar.LayoutParams layout = new ActionBar.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
30         actionBar.setCustomView(view,layout);
31     }
32     
33     @SuppressLint("InflateParams")
34     private void setMenu(){
35         menu = new SlidingMenu(this);
36         menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);
37         menu.setShadowWidthRes(R.dimen.shadow_width);
38         menu.setShadowDrawable(R.drawable.shadow);
39         menu.setBehindWidthRes(R.dimen.slidingmenu_width);
40         menu.setFadeDegree(0.35f);
41         menu.attachToActivity(this, SlidingMenu.SLIDING_WINDOW);
42         
43         View view = inflator.inflate(R.layout.layout_menu, null);//设置menu的list及点击监听
44         menuList=(ListView)view.findViewById(R.id.list_menu);
45         final String[] listItems=getResources().getStringArray(R.array.menu_item);
46         menuList.setAdapter(new ArrayAdapter<String>(this, R.layout.item_menu,R.id.text1, listItems));
47         menuList.setOnItemClickListener(new OnItemClickListener(){
48 
49             @Override
50             public void onItemClick(AdapterView<?> parent, View view, int position,
51                     long id) {
52                 menu.toggle();
53                 String title;
54                 if(position!=3){
55                     title=listItems[position].charAt(0)+"  "+listItems[position].charAt(1);
56                 }else{
57                     title=listItems[position];
58                 }
59                 switch(position){
60                 case 0:
61 //                    fm.beginTransaction().replace(R.id.content_frame,new TrackFragment()).commit();
62                     break;
63                 case 1:
64 //                    fm.beginTransaction().replace(R.id.content_frame,new TrafficFragment()).commit();
65                     break;
66                 case 2:
67 //                    fm.beginTransaction().replace(R.id.content_frame,new SearchFragment()).commit();
68                     break;
69                 case 3:
70 //                    fm.beginTransaction().replace(R.id.content_frame,new PhoneBookFragment()).commit();
71                     break;
72                 case 4:
73 //                    fm.beginTransaction().replace(R.id.content_frame,new SettingFragment()).commit();
74                     break;
75                 }
76             }
77             
78         });
79         menu.setMenu(view);
80     }
81     
82     public void onClickMenu(View view){//这个是在layout_actionbar中说好的
83         menu.toggle();
84     }    
85 }
复制代码

 

对于layout中的几个文件的关系是：

activity_main.xml对应主页面，layout_actionbar.xml对应actionbar（actionbar的形式可以通过这个调节），layout_menu.xml是侧栏，item_menu.xml是侧栏中的列表的item（上一节中讲了自定义列表和这个类似）

  • 这里的主界面就是最简单layout:
复制代码 
 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:id="@+id/content_frame"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     tools:context="com.beautifulzzzz.ui.MainActivity" >
 7 
 8     <TextView
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:text="@string/hello_world" />
12 
13 </RelativeLayout>
复制代码

 

  • actionbar则包含一个图片和一个textview:

这里要注意11行，actionbar上的图标的点击监听已经指明，必须要实现该函数

复制代码 
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent" >
 5 
 6     <ImageView
 7         android:id="@+id/img_menu"
 8         android:layout_width="wrap_content"
 9         android:layout_height="wrap_content"
10         android:layout_centerVertical="true"
11         android:onClick="onClickMenu"
12         android:src="@drawable/selector_menu" />
13 
14     <TextView
15         android:id="@+id/tv_title"
16         android:layout_width="wrap_content"
17         android:layout_height="wrap_content"
18         android:layout_centerInParent="true"
19         android:textColor="@color/white"
20         android:textSize="20sp" />
21 
22 </RelativeLayout>
复制代码

 

  • 侧滑栏的样式稍微复杂点：

上面头像+用户名采用垂直的linearLayout布局，在其中左边是自定义圆形图片，右边是一个textview

这里的button只是为了作为头像部分和list部分的分割线，仅此而已！！！

 

复制代码 
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     android:layout_width="150dp"
 5     android:layout_height="match_parent"
 6     android:background="@color/myblue"
 7     android:orientation="vertical">
 8 
 9     <LinearLayout
10         android:id="@+id/layout_user"
11         android:layout_width="150dp"
12         android:layout_height="wrap_content"
13         android:orientation="horizontal" >
14 
15         <com.beautifulzzzz.widget.CircleImageView
16             android:id="@+id/image_userhead"
17             android:layout_width="48dp"
18             android:layout_height="48dp"
19             android:layout_margin="10dp"
20             android:src="@drawable/icon_user_default"
21             app:border_width="0dp" />
22 
23         <TextView
24             android:id="@+id/tv_username"
25             android:layout_width="wrap_content"
26             android:layout_height="wrap_content"
27             android:layout_gravity="center_vertical"
28             android:text="UserName"
29             android:textColor="@color/white" />
30     </LinearLayout>
31 
32     <Button
33         android:layout_width="150dp"
34         android:layout_height="1dp"
35         android:background="@color/blue_line" />
36 
37     <ListView
38         android:id="@+id/list_menu"
39         android:layout_width="150dp"
40         android:layout_height="match_parent" />
41 
42 </LinearLayout>
复制代码

 

  • 这里的list的item比较简单（当然你可以参照上一节做出很炫酷的list）
复制代码 
1 <?xml version="1.0" encoding="utf-8"?>
2 <TextView xmlns:android="http://schemas.android.com/apk/res/android"
3     android:id="@+id/text1" 
4     android:layout_width="match_parent"
5     android:layout_height="wrap_content"
6     android:textColor="@color/white"
7     android:textSize="20sp"    
8     android:padding="10dp"
9     android:gravity="center" />
复制代码

 

注意： 整个工程还自定义了一些资源，包括颜色、drawable、按钮动画...

 

上述工程连接：（一个zip包含3个）

http://pan.baidu.com/s/1dDyQjpZ

 

其他同类博文：

【Android UI设计与开发】9：滑动菜单栏（一）开源项目SlidingMenu的使用和示例

【Android UI设计与开发】第16期：滑动菜单栏（一）开源项目SlidingMenu的使用

 

 

 

@beautifulzzzz

  2015-11-11 持续更新中~

 



本文转自beautifulzzzz博客园博客，原文链接：http://www.cnblogs.com/zjutlitao/p/4957824.html，如需转载请自行联系原作者

文章标签：
Android开发
数据格式
XML
Java
关键词：
Android开源
Android SlidingMenu
史迪奇2号
目录
相关文章
初学者-Study
|
7月前
|
XML Android开发 数据安全/隐私保护
Android 自定义开源库 EasyView
Android 自定义开源库 EasyView
初学者-Study
99 0
Ant.Dream
|
4月前
|
监控 Java API
Android经典实战之OkDownload：一个经典强大的文件下载开源库，支持断点续传
本文介绍的 OkDownload 是一个专为 Android 设计的开源下载框架，支持多线程下载、断点续传和任务队列管理等功能，具备可靠性、灵活性和高性能特点。它提供了多种配置选项和监听器，便于开发者集成和扩展。尽管已多年未更新，但依然适用于大多数文件下载需求。
Ant.Dream
414 1
蓝色流星1000
|
6月前
|
存储 API 开发工具
kotlin安卓开发，如何获取设备的唯一id， 有哪些开源库
在Kotlin的Android开发中，获取设备唯一ID的方法包括不稳定的ANDROID_ID、需要权限的IMEI、使用UUID与SharedPreference结合，以及考虑隐私的Firebase Installations ID和Advertising ID。由于隐私问题和Google Play政策，IMEI和ANDROID_ID不推荐作为长期唯一标识。推荐使用UUID（首次安装时生成并存储），或在涉及广告时使用Advertising ID（需用户同意），而Firebase Installations ID则提供了一种合规的设备标识选项。在选择方法时，必须遵守隐私指南和政策。
蓝色流星1000
605 0
RedEric
|
小程序 JavaScript API
支付宝微信小程序连接蓝牙兼容IOS和安卓（开源）
支付宝微信小程序连接蓝牙兼容IOS和安卓（开源）
RedEric
218 0
GameProgramer
|
Android开发
Android图片加载开源库对比
Android图片加载开源库对比
GameProgramer
110 0
小蓝枣
|
Java 测试技术 Android开发
Sonic 开源移动端云真机测试平台 - 设备中心接入安卓设备实例演示，Agent端服务部署过程详解（下）
Sonic 开源移动端云真机测试平台 - 设备中心接入安卓设备实例演示，Agent端服务部署过程详解
小蓝枣
429 0
小蓝枣
|
Web App开发 JavaScript Java
Sonic 开源移动端云真机测试平台 - 设备中心接入安卓设备实例演示，Agent端服务部署过程详解（上）
Sonic 开源移动端云真机测试平台 - 设备中心接入安卓设备实例演示，Agent端服务部署过程详解
小蓝枣
509 0
公众号：小余的自习室
|
存储 ARouter Java
Android开源系列-组件化框架Arouter-(三)APT技术详解
最近组里需要进行**组件化框架**的改造，用到了**ARouter**这个开源框架，为了更好的对项目进行改造，笔者花了一些时间去了解了下ARouter
公众号：小余的自习室
619 0
公众号：小余的自习室
|
存储 缓存 ARouter
Android开源系列-组件化框架Arouter-(二)深度原理解析
最近组里需要进行**组件化框架**的改造，用到了**ARouter**这个开源框架，为了更好的对项目进行改造，笔者花了一些时间去了解了下ARouter
公众号：小余的自习室
1554 0
公众号：小余的自习室
|
缓存 JSON ARouter
Android开源系列-组件化框架Arouter-(一)使用方式详解
最近组里需要进行**组件化框架**的改造，用到了`Arouter`这个开源框架，为了更好的对项目进行改造，笔者花了一些时间去了解了下`Arouter
公众号：小余的自习室
3950 0

热门文章

最新文章

  • 1
    Android项目实战（二十四）：项目包成jar文件，并且将工程中引用的jar一起打入新的jar文件中
  • 2
    Android消息机制-Handler,Message,MessageQueue,Looper
  • 3
    Android Service 组件
  • 4
    《Android游戏开发详解》——第2章，第2.12节设置和访问对象的状态
  • 5
    I.MX6 Android 移除 Settings wifi功能
  • 6
    Android 数据库ORM框架GreenDao学习心得及使用总结<二>
  • 7
    Android Service完全解析，关于服务你所需知道的一切(下)
  • 8
    Android UI开发第八篇——ViewFlipper 左右滑动效果
  • 9
    android自定义状态栏颜色
  • 10
    我的Android进阶之旅------&gt;Android关于Log的一个简单封装
  • 1
    构建高效Android应用：探究Kotlin协程的优化实践
    57
  • 2
    鸿蒙HarmonyOS 与 Android 的NDK有什么区别？
    390
  • 3
    Android应用开发：实现自定义View的高效绘制
    77
  • 4
    构建高效Android应用：Kotlin协程的实践与优化
    66
  • 5
    构建高效Android应用：Kotlin协程的实践指南
    78
  • 6
    jenkins编译H5做的android端编译卫士app记录
    53
  • 7
    利用Bundle实现Android Activity间消息的传递
    60
  • 8
    Intent在Android中的几种用法
    86
  • 9
    Android如何在Activity和Service之间传递数据
    310
  • 10
    android TextView HTML 的效果
    44

    • 相关课程

    更多
  • 开源Android容器化框架Atlas开发者指南

    • 相关电子书

    更多
  • 58同城Android客户端Walle框架演进与实践之路
  • Android组件化实现
  • 蚂蚁聚宝Android秒级编译——Freeline
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。