使用开源组件slidingmenu_library

参考:http://blog.csdn.net/developer_jiangqq/article/details/9466171 

今天学习一下使用开源组件slidingmenu_library来模拟实现人人客户端的主页侧滑界面。要模拟实现这个界面,首先要先学习这个开源组件的基本用法,开始今天的学习;

     1:slidingmenu_library基本使用;

     2:编写代码模仿实现人人客户端主页侧滑;

1.1:开源组件的下载:
    该组件开源,我们可以通过把该项目当做libs目录的jar包引入到我们的项目中轻松方便的使用。其中主要实现了侧滑与ActionBar.下载目录如下:
    SlidingMenu https://github.com/jfeinstein10/SlidingMenu
    ActionBarSherlock https://github.com/JakeWharton/ActionBarSherlock
    同时我在资源中已经上传点击下载slidingmenu_library
1.2:该组件的使用方式:
    ①:下载完该项目,通过Eclipse,import到工作项目中:
     
    ②:创建新项目,把该slidingmenu_library,通过libary方式引入进来:具体步骤为(myRenren).右击该项目,选择properties->点击Android->右下方libary,选择add,slidingmenu进来->apply,ok
      
      特别提醒一个问题,因为我之前都是按照这个方式去进行导入,但是新项目总是会出现一个问题,所以你要在项目要引入该开源组件之前,记得看下项目中的libs文件夹,把里面的android-support-v4.jar这个包给删除掉,因为开源组件中已经包含这个包了.
      
 2.1现在正是使用这个组件模式实现人人客户端侧滑主界面:
     2.1.1俗话说有图有真相,先看我实现的效果图,比较简单,首页的内容部分也就直接用图片去代替了;
     
    2.1.2:开始实现,分析一下右边列表的那个界面(我自己的实现的思路):
        
        下面是的常用,更多,操作,我设置成了三个listview,自然一个屏幕肯定放不下,所以快可以想到在三个listview的外边加入一个ScrollView。随即这样问题就出来了,ScrollView与Listview发生冲突了,因为Listview本来就带有滚动。这样的问题同样也会发生在ScrollView与GridView中。查阅网上资料给出一种比较常用的方法:重写ListView
         
 
 
  1. package com.pps.myrenren.custom;  
  2. import android.content.Context;  
  3. import android.util.AttributeSet;  
  4. import android.widget.ListView;  
  5. /** 
  6.  * 重写ListView->实现Listview和ScrollView的滚动不冲突 
  7.  * @author jiangqingqing 
  8.  * 
  9.  */  
  10. public class MyListView extends ListView {  
  11.     public MyListView(Context context) {  
  12.         super(context);  
  13.     }  
  14.     public MyListView(Context context, AttributeSet attrs) {  
  15.         super(context, attrs);  
  16.     }  
  17.   
  18.     public MyListView(Context context, AttributeSet attrs, int defStyle) {  
  19.         super(context, attrs, defStyle);  
  20.     }  
  21.     @Override  
  22.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
  23.         int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,  
  24.                 MeasureSpec.AT_MOST);  
  25.         super.onMeasure(widthMeasureSpec, expandSpec);  
  26.     }  
  27.   
  28. }  
     在该列表的顶部是一个横条,单独写这个布局,然后include进来(left_bottom_top.xml):

[html]  view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="wrap_content"  
  5.      >   
  6.     <ImageView   
  7.         android:id="@+id/img_icon_top"  
  8.         android:layout_width="50dip"  
  9.         android:layout_height="50dip"  
  10.         android:layout_centerVertical="true"  
  11.         android:src="@drawable/v_5_9_lbs_nearby_person_portrait_default"  
  12.         />  
  13.      <TextView   
  14.         android:id="@+id/tv_name_top"  
  15.         android:layout_width="wrap_content"  
  16.         android:layout_height="wrap_content"  
  17.         android:text="王老三"  
  18.         android:layout_toRightOf="@id/img_icon_top"  
  19.         android:textSize="20sp"  
  20.         android:layout_centerVertical="true"  
  21.         android:layout_marginLeft="20dip"  
  22.         android:textColor="@color/whilte"/>    
  23.           
  24.      <ImageButton   
  25.          android:id="@+id/imgbtn_toggle_top"  
  26.          android:layout_width="wrap_content"  
  27.          android:layout_height="wrap_content"  
  28.          android:background="@drawable/v5_3_0_profile_arrow_back"  
  29.          android:layout_alignParentRight="true"  
  30.          android:layout_centerInParent="true"  
  31.          android:layout_marginRight="15dip"/>  
  32. </RelativeLayout>  

         

        接着该列表的布局如下fragment_left_bottom.xml

      

[html]  view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:background="@drawable/renren_news_first_image_bg"  
  6.     android:orientation="vertical" >  
  7.     <!-- 顶部头像,姓名,标签 -->  
  8.     <include layout="@layout/left_bottom_top" />  
  9.     <ScrollView  
  10.         android:layout_width="fill_parent"  
  11.         android:layout_height="wrap_content" >  
  12.         <LinearLayout  
  13.             android:layout_width="fill_parent"  
  14.             android:layout_height="wrap_content"  
  15.             android:orientation="vertical" >  
  16.             <!-- 常用 -->  
  17.             <TextView  
  18.                 android:id="@+id/left_tv_commom"  
  19.                 android:layout_width="wrap_content"  
  20.                 android:layout_height="wrap_content"  
  21.                 android:paddingBottom="3dip"  
  22.                 android:paddingLeft="20dip"  
  23.                 android:paddingTop="3dip"  
  24.                 android:text="@string/left_bottom_commom"  
  25.                 android:textColor="@color/whilte" />  
  26.                        
  27.            <ImageView  
  28.                android:layout_width="fill_parent"  
  29.                android:layout_height="wrap_content"  
  30.                android:background="@drawable/v5_0_1_divider_new"/>  
  31.            <!-- 常用列表 --><!-- 常用列表与更多列表使用同一个item布局 自定义适配器 -->  
  32.            <com.pps.myrenren.custom.MyListView   
  33.                android:id="@+id/listview_common"  
  34.                android:layout_width="fill_parent"  
  35.                android:layout_height="wrap_content"  
  36.                android:cacheColorHint="#00000000"  
  37.                android:divider="@drawable/v5_0_1_divider_line_new"/>  
  38.             <TextView  
  39.                 android:id="@+id/left_tv_more"  
  40.                 android:layout_width="wrap_content"  
  41.                 android:layout_height="wrap_content"  
  42.                 android:paddingBottom="3dip"  
  43.                 android:paddingLeft="20dip"  
  44.                 android:paddingTop="3dip"  
  45.                 android:text="@string/left_bottom_more"  
  46.                 android:textColor="@color/whilte" />  
  47.            <ImageView  
  48.                android:layout_width="fill_parent"  
  49.                android:layout_height="wrap_content"  
  50.                android:background="@drawable/v5_0_1_divider_new"/>  
  51.            <!-- 更多列表 -->  
  52.            <com.pps.myrenren.custom.MyListView    
  53.                android:id="@+id/listview_more"  
  54.                android:layout_width="fill_parent"  
  55.                android:layout_height="wrap_content"  
  56.                android:cacheColorHint="#00000000"  
  57.                android:divider="@drawable/v5_0_1_divider_line_new"/>  
  58.          <!--     <TextView  
  59.                 android:id="@+id/left_tv_recommend"  
  60.                 android:layout_width="wrap_content"  
  61.                 android:layout_height="wrap_content"  
  62.                 android:paddingBottom="3dip"  
  63.                 android:paddingLeft="20dip"  
  64.                 android:paddingTop="3dip"  
  65.                 android:text="@string/left_bottom_recommend"  
  66.                 android:textColor="@color/whilte" />  
  67.            <ImageView  
  68.                android:layout_width="fill_parent"  
  69.                android:layout_height="wrap_content"  
  70.                android:background="@drawable/v5_0_1_divider_line_new"/>  
  71.        
  72.             
  73.            <ListView   
  74.                android:id="@+id/listview_recommend"  
  75.                android:layout_width="fill_parent"  
  76.                android:layout_height="wrap_content"  
  77.                android:cacheColorHint="#00000000"  
  78.                android:divider="@drawable/v5_0_1_divider_new"/>  
  79.            <TextView  
  80.                 android:id="@+id/left_tv_app"  
  81.                 android:layout_width="wrap_content"  
  82.                 android:layout_height="wrap_content"  
  83.                 android:paddingBottom="3dip"  
  84.                 android:paddingLeft="20dip"  
  85.                 android:paddingTop="3dip"  
  86.                 android:text="@string/left_bottom_app"  
  87.                 android:textColor="@color/whilte" />  
  88.              
  89.            <ImageView  
  90.                android:layout_width="fill_parent"  
  91.                android:layout_height="wrap_content"  
  92.                android:background="@drawable/v5_0_1_divider_line_new"/>  
  93.              
  94.            <ListView   
  95.                android:id="@+id/listview_app"  
  96.                android:layout_width="fill_parent"  
  97.                android:layout_height="wrap_content"  
  98.                android:cacheColorHint="#00000000"  
  99.                android:divider="@drawable/v5_0_1_divider_new"/>  -->  
  100.            <TextView  
  101.                 android:id="@+id/left_tv_setting"  
  102.                 android:layout_width="wrap_content"  
  103.                 android:layout_height="wrap_content"  
  104.                 android:paddingBottom="3dip"  
  105.                 android:paddingLeft="20dip"  
  106.                 android:paddingTop="3dip"  
  107.                 android:text="@string/left_bottom_setting"  
  108.                 android:textColor="@color/whilte" />         
  109.            <ImageView  
  110.                android:layout_width="fill_parent"  
  111.                android:layout_height="wrap_content"  
  112.                android:background="@drawable/v5_0_1_divider_new"/>  
  113.            <com.pps.myrenren.custom.MyListView    
  114.                android:id="@+id/listview_setting"  
  115.                android:layout_width="fill_parent"  
  116.                android:layout_height="wrap_content"  
  117.                android:cacheColorHint="#00000000"  
  118.                android:divider="@drawable/v5_0_1_divider_line_new"/>  
  119.         </LinearLayout>  
  120.     </ScrollView>  
  121.   
  122. </LinearLayout>  
           
        下面是主界面的真正实现MainActivity.java

 其中我们要进行初始化slidingmenu,在initSlidingMenu()方法中:

[java]  view plain copy print ?
  1. /** 
  2.      * 初始化滑动菜单 
  3.      */  
  4.     private void initSlidingMenu(Bundle savedInstanceState) {  
  5.         // 设置滑动菜单的视图  
  6.         setBehindContentView(R.layout.menu_frame);  
  7.         getSupportFragmentManager().beginTransaction().replace(R.id.menu_frame, new LeftBottomFragment()).commit();       
  8.         // 实例化滑动菜单对象  
  9.         SlidingMenu sm = getSlidingMenu();  
  10.         // 设置滑动阴影的宽度  
  11.         sm.setShadowWidthRes(R.dimen.shadow_width);  
  12.         // 设置滑动阴影的图像资源  
  13.         sm.setShadowDrawable(R.drawable.shadow);  
  14.         // 设置滑动菜单视图的宽度  
  15.         sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);  
  16.         // 设置渐入渐出效果的值  
  17.         sm.setFadeDegree(0.35f);  
  18.         // 设置触摸屏幕的模式  
  19.         sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);       
  20.     }  
    在对侧滑屏幕进行打开与关闭过程了中,我们可以进行调用slidingmenu的toggle()这个开关方法,再次MainActivity.java中的代码就不贴了,这个demo的例子我会上传,点击底部的下载链接就可以进行下载了;


    2.2.3最后是列表的Fragment中的代码,就是一些去资源文件,数据,布局的一些设置。比较简单,

    

[java]  view plain copy print ?
  1. package com.pps.myrenren.activity;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.content.Context;  
  7. import android.os.Bundle;  
  8. import android.support.v4.app.Fragment;  
  9. import android.view.LayoutInflater;  
  10. import android.view.View;  
  11. import android.view.ViewGroup;  
  12. import android.widget.ListView;  
  13.   
  14. import com.pps.myrenren.adapter.CommonOrMoreAdapter;  
  15. import com.pps.myrenren.adapter.SettingAdapter;  
  16. import com.pps.myrenren.model.ItemComOrMoreModel;  
  17. import com.pps.myrenren.model.ItemSettingModel;  
  18.   
  19. public class LeftBottomFragment extends Fragment{  
  20.     private View mView;  
  21.     private Context mContext;  
  22.     private ListView listview_common;  
  23.     private ListView listview_more;  
  24.     private ListView listview_setting;  
  25.   
  26.     private List<ItemComOrMoreModel> commonModels;  //常用列表的Item集合  
  27.     private List<ItemComOrMoreModel> moreModels;    //更多列表的item集合  
  28.     private List<ItemSettingModel> settingModels;   //设置列表的item集合  
  29.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  30.             Bundle savedInstanceState) {  
  31.         if (null == mView) {  
  32.             mView = inflater.inflate(R.layout.fragment_left_bottom, container,  
  33.                     false);  
  34.             initView();  
  35.             initValidata();  
  36.             bindData();  
  37.         }  
  38.         return mView;  
  39.     }  
  40.     /** 
  41.      * 初始化界面元素 
  42.      */  
  43.     private void initView() {  
  44.         listview_common = (ListView) mView.findViewById(R.id.listview_common);  
  45.         listview_more = (ListView) mView.findViewById(R.id.listview_more);  
  46.         listview_setting = (ListView) mView.findViewById(R.id.listview_setting);  
  47.   
  48.     }  
  49.     /** 
  50.      * 初始化变量 
  51.      */  
  52.     private void initValidata() {  
  53.         mContext = mView.getContext();  
  54.         commonModels=new ArrayList<ItemComOrMoreModel>();  
  55.         moreModels=new ArrayList<ItemComOrMoreModel>();  
  56.         settingModels=new ArrayList<ItemSettingModel>();  
  57.         //1:进行构造常用列表中的数据,图标,名称,数量  
  58.         Integer[] common_icon_id = new Integer[] {  
  59.                 R.drawable.v5_2_1_desktop_list_newsfeed,  
  60.                 R.drawable.v5_2_1_desktop_list_message,  
  61.                 R.drawable.v5_2_1_desktop_list_chat,  
  62.                 R.drawable.v5_2_1_desktop_list_friends,  
  63.                 R.drawable.v5_2_1_desktop_list_search,  
  64.                 R.drawable.v5_9_3_desktop_list_barcode };  
  65.         String[] arrays_commom=mContext.getResources().getStringArray(R.array.arrays_commom);  
  66.         int[] common_number=new int[]{0,1,2,3,4,1};  
  67.         for(int i=0;i<common_icon_id.length;i++)  
  68.         {  
  69.             ItemComOrMoreModel commcon=new ItemComOrMoreModel(common_icon_id[i], arrays_commom[i], common_number[i]);  
  70.             commonModels.add(commcon);  
  71.         }  
  72.           
  73.         //2:进行构造更多列表中的数据,图标,名称,数量  
  74.         Integer[] more_icon_id=new Integer[]  
  75.                 {R.drawable.v5_2_1_desktop_list_location,R.drawable.v5_2_1_desktop_list_page,R.drawable.v5_2_0_desktop_list_hot,R.drawable.v5_2_1_desktop_list_apps_center};  
  76.         String[] arrays_more=mContext.getResources().getStringArray(R.array.arrays_more);  
  77.         int[] more_number=new int[]{0,0,0,0};  
  78.         for(int i=0;i<more_icon_id.length;i++)  
  79.         {  
  80.             ItemComOrMoreModel more=new ItemComOrMoreModel(more_icon_id[i],arrays_more[i],more_number[i]);  
  81.             moreModels.add(more);  
  82.         }  
  83.           
  84.         //3:进行构造设置列表中的数据,图标,名称  
  85.         Integer[] setting_icon_id=new Integer[]{R.drawable.v_5_8day_mode_unselected,R.drawable.v5_2_1_desktop_list_settings,R.drawable.v5_2_1_desktop_list_log_out};  
  86.         String[] arrays_setting=mContext.getResources().getStringArray(R.array.arrays_setting);  
  87.         for(int i=0;i<setting_icon_id.length;i++)  
  88.         {  
  89.             ItemSettingModel setting=new ItemSettingModel(setting_icon_id[i],arrays_setting[i]);  
  90.             settingModels.add(setting);  
  91.         }         
  92.     }  
  93.   
  94.     /** 
  95.      * 绑定数据 
  96.      */  
  97.     private void bindData() {  
  98.        //创建适配器并且进行绑定数据到listview中  
  99.         listview_common.setAdapter(new CommonOrMoreAdapter(mContext, commonModels));  
  100.         listview_more.setAdapter(new CommonOrMoreAdapter(mContext, moreModels));  
  101.         listview_setting.setAdapter(new SettingAdapter(mContext, settingModels));  
  102.     }  
  103.   
  104. }  

   上面是实现效果的主要代码,有兴趣的直接可以下载看下详细代码

    http://download.csdn.net/detail/jiangqq781931404/5815443

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值