转载本专栏文章,请注明出处,尊重原创 。文章博客地址:
为了提高兴趣,咱们开头先看看最终要实现什么样的效果:
侧拉菜单在应用中非常常见,它的实现方式太多了,今天我们就说说使用Google提供的DrawerLayout来实现侧拉菜单效果。简单模仿一下网易客户端的侧边栏。
DrawerLayout的实现其实非常简单,可以说是“傻瓜式使用”。只要按照官方文档提供的步骤一步步实现,就没有太大的问题。
首先,我们对一个应用定义一个布局
首先,根布局就是DrawerLayout,在根布局之后又主要分为三大块(代码中描述了),第一块就是主界面的内容,第二块是左边拉出来的布局,第三块是右边拉出来的布局(一般应用只需要左侧布局)。那么系统怎么知道我们这个布局是主布局还是侧拉菜单的布局?请注意左边侧拉菜单布局android:layout_gravity="left"这个属性和右边菜单布局的android:layout_gravity="right"这个属性,我们必须指定这两个值才可以实现效果,系统通过layout_gravity属性的值来判断这个布局是左边菜单的布局还是右边菜单的布局,如果没有这个属性,只显示主界面的布局。
这个时候,让我们来运行一下程序看看效果:
布局文件写好之后,我们的侧拉效果其实就已经可以实现了,但是你发现左边拉出来什么东西都没有,那是因为还没有数据,所以我们要在MainActivity中初始化左边布局的ListView,给ListView赋值简直不能再简单的了,直接贴代码吧:
modeo类:
package com.itydl.drawerlayoutdemo;public class ContentModel { private int imageView; private String text; private int id; public int getId() { return id; } public void setId(int id) { this.id = id; } public ContentModel() { } public ContentModel(int imageView, String text, int id) { this.imageView = imageView; this.text = text; this.id = id; } public int getImageView() { return imageView; } public void setImageView(int imageView) { this.imageView = imageView; } public String getText() { return text; } public void setText(String text) { this.text = text; }}Adapter适配器:
package com.itydl.drawerlayoutdemo;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.TextView;import java.util.List;public class ContentAdapter extends BaseAdapter { private Context context; private Listlist; public ContentAdapter(Context context, List list) { super(); this.context = context; this.list = list; } @Override public int getCount() { if (list != null) { return list.size(); } return 0; } @Override public Object getItem(int position) { if (list != null) { return list.get(position); } return null; } @Override public long getItemId(int position) { return list.get(position).getId(); } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHold hold; if (convertView == null) { hold = new ViewHold(); convertView = LayoutInflater.from(context).inflate( R.layout.content_item, null); convertView.setTag(hold); } else { hold = (ViewHold) convertView.getTag(); } hold.imageView = (ImageView) convertView .findViewById(R.id.item_imageview); hold.textView = (TextView) convertView.findViewById(R.id.item_textview); hold.imageView.setImageResource(list.get(position).getImageView()); hold.textView.setText(list.get(position).getText()); return convertView; } class ViewHold { public ImageView imageView; public TextView textView; }}
ListView子项布局:
主活动代码。
public class MainActivity extends AppCompatActivity { private ListmList = new ArrayList ();; private ListView mListView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initData(); mListView = (ListView) findViewById(R.id.left_listview); ContentAdapter adapter = new ContentAdapter(this,mList); mListView.setAdapter(adapter); } private void initData() { mList.add(new ContentModel(R.drawable.doctoradvice2, "新闻", 1)); mList.add(new ContentModel(R.drawable.infusion_selected, "订阅", 2)); mList.add(new ContentModel(R.drawable.mypatient_selected, "图片", 3)); mList.add(new ContentModel(R.drawable.mywork_selected, "视频", 4)); mList.add(new ContentModel(R.drawable.nursingcareplan2, "跟帖", 5)); mList.add(new ContentModel(R.drawable.personal_selected, "投票", 6)); }}
以上操作十分简单,就不想多做口舌了~
好了,给左边的侧拉菜单中的ListView赋值之后,把它拉出来,这下就全都有数据了。我们可以运行看看效果了:
模拟器运行测拉并不好控制,真机测试是比较完美的。同时,我们看到标题栏上边我加了一个按钮,那么我们能不能点击让左侧菜单拉出来呢?还有,我能不能给左侧的每一项item加上点击事假呢?答案是肯定的,最后,就让我们实现点击打开测拉菜单,以及实现左侧测拉菜单item的点击事件吧、
首先通过点击menu打开左侧边栏,点击个人图片打开个人中心。我们只需要给按钮添加点击事件就可以了:
menu事件
findViewById(R.id.leftmenu).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mDrawerLayout.openDrawer(Gravity.LEFT); }});
个人事件:
findViewById(R.id.rightmenu).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mDrawerLayout.openDrawer(Gravity.RIGHT); }});
其实很简单,直接调用DrawerLayout的openDrawer方法,参数传Gravity.LEFT表示让左边的侧拉菜单出来,参数如果传Gravity.RIGHT,则表示让右边的侧拉菜单出来。
完成了点击事件,我们就要想着点击item后要处理的事件了:
在这里再加入点击按钮切换指定页面的功能。即当我点击“新闻”,主界面显示新闻内容,当我点击”订阅“,主界面显示订阅的内容。这个也很好实现,首先,点击事件不用说,就是ListView的setOnItemClickListener,点击之后,我们的主界面会显示相应的Fragment。即,如果点击了新闻,则主界面显示新闻的Fragment,如果点击了订阅,则主界面显示订阅的Fragment,代码写了出来
mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView parent, View view, int position, long id) { switch (position) { //模拟两条数据 case 0://新闻 //切换新闻的Fragment replaceFragment(new NewsFargment()); break; case 1://订阅 //切换订阅的Fragment replaceFragment(new SubscibeFragment()); break; default: break; } //点击任一项item项,都关闭左侧菜单 mDrawerLayout.closeDrawer(Gravity.LEFT); }});因为多个地方会用到切换Fragment,因此我又把这个功能封装了一个公共方法
public void replaceFragment(Fragment fragment){ //1、拿到FragmentManager管理器 FragmentManager manager = getSupportFragmentManager(); //2、获取事物 FragmentTransaction transaction = manager.beginTransaction(); //3、fragment的替换 transaction.replace(R.id.content,fragment); //4、提交事物 transaction.commit();}
每次点击之后,就用相应的Fragment替换主界面的LinearLayout,当然,替换完成之后要记得关闭左边的侧拉菜单,传入的参数为Gravity.LEFT表示关闭左边的侧拉菜单,如果传入的菜单为Gravity.RIGHT表示关闭右边的侧拉菜单。这里两个Fragment都太简单了,我就不贴源码了。
我们还可以针对左侧测拉布局做一些效果,比如说是,点击选中色,不点击为默认色。以及加入一些其它的更绚丽的设置等。我这里就做简单的设置。更多的效果,大家可根据自己兴趣来。
针对这个需求我加入了下面的代码:
/**切换listview的item背景色,选中为红色;否则为黑色的方式二。当点击item的时候,就会触发子项item的焦点*/mListView.setOnFocusChangeListener(new View.OnFocusChangeListener() { @Override public void onFocusChange(View v, boolean hasFocus) { if(hasFocus == true){ //获得焦点 mListView.setSelector(android.R.color.holo_red_light) ; } else{ //失去焦点 mListView.setSelector(android.R.color.black) ; } }});
项目开发完毕了,咱们来看看最终效果吧:
模仿网易新闻客户端测拉框架完毕,喜欢我的朋友可以关注我。
本文参考博客:1、http://blog.csdn.net/u012702547/article/details/49562747
2、http://www.cnblogs.com/mengdd/p/3213378.html
也可以打开微信搜索公众号 Android程序员开发指南 或者手机扫描下方二维码 在公众号阅读更多Android文章。
微信公众号图片: