[安卓] 17、一个简单的例子学安卓侧滑设计——用开源slidingmenu
效果如下:
下面是工程结构:
整个工程包括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不必看(会用即可)
public class MainActivity extends ActionBarActivity { private LayoutInflater inflator;
public static FragmentManager fm;
private ActionBar actionBar;
private SlidingMenu menu;
private ListView menuList; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); inflator = (LayoutInflater) MainActivity.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
setMenu();
setActionBar();
fm=getSupportFragmentManager();
fm.beginTransaction().replace(R.id.content_frame,new MainFragment()).commit();//用MainFragment替换原来的content_fram
} private void setActionBar(){//自定义actionbar
actionBar = getSupportActionBar();
actionBar.setDisplayShowHomeEnabled( false );
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayHomeAsUpEnabled(false); View view = inflator.inflate(R.layout.layout_actionbar, null);
ActionBar.LayoutParams layout = new ActionBar.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
actionBar.setCustomView(view,layout);
} @SuppressLint("InflateParams")
private void setMenu(){
menu = new SlidingMenu(this);
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);
menu.setShadowWidthRes(R.dimen.shadow_width);
menu.setShadowDrawable(R.drawable.shadow);
menu.setBehindWidthRes(R.dimen.slidingmenu_width);
menu.setFadeDegree(0.35f);
menu.attachToActivity(this, SlidingMenu.SLIDING_WINDOW); View view = inflator.inflate(R.layout.layout_menu, null);//设置menu的list及点击监听
menuList=(ListView)view.findViewById(R.id.list_menu);
final String[] listItems=getResources().getStringArray(R.array.menu_item);
menuList.setAdapter(new ArrayAdapter<String>(this, R.layout.item_menu,R.id.text1, listItems));
menuList.setOnItemClickListener(new OnItemClickListener(){ @Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
menu.toggle();
String title;
if(position!=3){
title=listItems[position].charAt(0)+" "+listItems[position].charAt(1);
}else{
title=listItems[position];
}
switch(position){
case 0:
// fm.beginTransaction().replace(R.id.content_frame,new TrackFragment()).commit();
break;
case 1:
// fm.beginTransaction().replace(R.id.content_frame,new TrafficFragment()).commit();
break;
case 2:
// fm.beginTransaction().replace(R.id.content_frame,new SearchFragment()).commit();
break;
case 3:
// fm.beginTransaction().replace(R.id.content_frame,new PhoneBookFragment()).commit();
break;
case 4:
// fm.beginTransaction().replace(R.id.content_frame,new SettingFragment()).commit();
break;
}
} });
menu.setMenu(view);
} public void onClickMenu(View view){//这个是在layout_actionbar中说好的
menu.toggle();
}
}
对于layout中的几个文件的关系是:
activity_main.xml对应主页面,layout_actionbar.xml对应actionbar(actionbar的形式可以通过这个调节),layout_menu.xml是侧栏,item_menu.xml是侧栏中的列表的item(上一节中讲了自定义列表和这个类似)
- 这里的主界面就是最简单layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.beautifulzzzz.ui.MainActivity" > <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" /> </RelativeLayout>
- actionbar则包含一个图片和一个textview:
这里要注意11行,actionbar上的图标的点击监听已经指明,必须要实现该函数
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" > <ImageView
android:id="@+id/img_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
11 android:onClick="onClickMenu"
12 android:src="@drawable/selector_menu" /> <TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="@color/white"
android:textSize="20sp" /> </RelativeLayout>
- 侧滑栏的样式稍微复杂点:
上面头像+用户名采用垂直的linearLayout布局,在其中左边是自定义圆形图片,右边是一个textview
这里的button只是为了作为头像部分和list部分的分割线,仅此而已!!!
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="150dp"
android:layout_height="match_parent"
android:background="@color/myblue"
android:orientation="vertical"> <LinearLayout
android:id="@+id/layout_user"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:orientation="horizontal" > <com.beautifulzzzz.widget.CircleImageView
android:id="@+id/image_userhead"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_margin="10dp"
android:src="@drawable/icon_user_default"
app:border_width="0dp" /> <TextView
android:id="@+id/tv_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="UserName"
android:textColor="@color/white" />
</LinearLayout> <Button
android:layout_width="150dp"
android:layout_height="1dp"
android:background="@color/blue_line" /> <ListView
android:id="@+id/list_menu"
android:layout_width="150dp"
android:layout_height="match_parent" /> </LinearLayout>
- 这里的list的item比较简单(当然你可以参照上一节做出很炫酷的list)
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/white"
android:textSize="20sp"
android:padding="10dp"
android:gravity="center" />
注意: 整个工程还自定义了一些资源,包括颜色、drawable、按钮动画...
上述工程连接:(一个zip包含3个)
http://pan.baidu.com/s/1dDyQjpZ
其他同类博文:
【Android UI设计与开发】9:滑动菜单栏(一)开源项目SlidingMenu的使用和示例
【Android UI设计与开发】第16期:滑动菜单栏(一)开源项目SlidingMenu的使用
@beautifulzzzz
2015-11-11 持续更新中~
[安卓] 17、一个简单的例子学安卓侧滑设计——用开源slidingmenu的更多相关文章
- Spring-Context之一:一个简单的例子
很久之前就想系统的学习和掌握Spring框架,但是拖了很久都没有行动.现在趁着在外出差杂事不多,就花时间来由浅入深的研究下Spring框架.Spring框架这几年来已经发展成为一个巨无霸产品.从最初的 ...
- 用一个简单的例子来理解python高阶函数
============================ 用一个简单的例子来理解python高阶函数 ============================ 最近在用mailx发送邮件, 写法大致如 ...
- 关于apriori算法的一个简单的例子
apriori算法是关联规则挖掘中很基础也很经典的一个算法,我认为很多教程出现大堆的公式不是很适合一个初学者理解.因此,本文列举一个简单的例子来演示下apriori算法的整个步骤. 下面这个表格是代表 ...
- 扩展Python模块系列(二)----一个简单的例子
本节使用一个简单的例子引出Python C/C++ API的详细使用方法.针对的是CPython的解释器. 目标:创建一个Python内建模块test,提供一个功能函数distance, 计算空间中两 ...
- fitnesse - 一个简单的例子(slim)
fitnesse - 一个简单的例子(slim) 2017-09-30 目录1 编写测试代码(Fixture code)2 编写wiki page并运行 2.1 新建wikiPage 2.2 运行 ...
- Struts2的配置和一个简单的例子
Struts2的配置和一个简单的例子 笔记仓库:https://github.com/nnngu/LearningNotes 简介 这篇文章主要讲如何在 IntelliJ IDEA 中使用 Strut ...
- 一个简单的例子搞懂ES6之Promise
ES5中实现异步的常见方式不外乎以下几种: 1. 回调函数 2. 事件驱动 2. 自定义事件(根本上原理同事件驱动相同) 而ES6中的Promise的出现就使得异步变得非常简单.promise中的异步 ...
- 一个简单的例子了解states
在大规模的配置管理工作中,我们要编写大量的states.sls文件.top.sls是states系统的入口文件,它负责指定哪些设备调用哪些states.sls文件.statse的默认工作目录是在/sr ...
- 跨站脚本功攻击,xss,一个简单的例子让你知道什么是xss攻击
跨站脚本功攻击,xss,一个简单的例子让你知道什么是xss攻击 一.总结 一句话总结:比如用户留言功能,用户留言中写的是网页可执行代码,例如js代码,然后这段代码在可看到这段留言的不同一户的显示上就会 ...
随机推荐
- AngularJS实现单页应用的原理——路由(Route)
AngularJS实现单页应用的原理——路由(Route) 路由:告诉你一个通往某个特定页面的途径 http://127.0.0.1/index.html#/start http://127.0.0. ...
- eclipse生成uml
安装eclipse插件在help->Install new software里面add 有本地和网络两种 1.ModelGoon 该插件需要在file中new ModelGoon Diagram ...
- hdu 5976 Detachment
Detachment Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...
- 数位DP
题意:(hdu 4734) 我们定义十进制数x的权值为f(x) = a(n)*2^(n-1)+a(n-1)*2(n-2)+...a(2)*2+a(1)*1,a(i)表示十进制数x中第i位的数字. 题目 ...
- easyui datagrid中关联combox
datagrid中列上关联combobox{ field: 'SysCode', title: '系统代码', width: 150, align: 'left', editor: { type: ' ...
- 看来System.dll是没法剔除依赖了
今天花了半天时间将System.Xml换成了Mono.Xml 想干掉System.dll发现不行了,System.Net以及System.IO都在这下面,还有protobuf-net也逃不掉这个 算啦 ...
- C++ 中 int 转string, 以及10进制转2进制
感谢:http://blog.csdn.net/xiaofei2010/article/details/7434737 以及:http://www.cnblogs.com/nzbbody/p/3504 ...
- linux启动流程
看了深入理解linux内核一书的最后对linux启动流程的介绍,下面就把我能理解的写一下吧: bios(硬件加电自检POST,寻找第一个启动设备) the boot loader(可以从硬盘启动也可以 ...
- Bookstore project using XAMPP 详细配置 Part 1
这是学校的一个project,记录在这里,以备复习.主要是用XAMPP通过phpMyAdmin连接MySQL数据库,实现一个简单的查询功能. Outline Setup of XAMPP Implem ...
- JavaScript 基础第二天
一.前言 感觉昨天的内容确实是有点细碎.复杂.感觉是没有书上写的那么的细致而且有导入性,但是我还是喜欢这样只说干货.今天的内容将继续接着昨天最后的内容JS中的语言结构继续讲解并且重点讲解一下其中的内容 ...