现在的位置: 首页 > 综合 > 正文

模拟实现网易新闻客户端主界面(侧滑SlidingMenu+ViewPager+Fragment)

2019年11月14日 ⁄ 综合 ⁄ 共 16304字 ⁄ 字号 评论关闭

原博客地址:http://blog.csdn.net/developer_jiangqq/article/details/9617781

====================================================================================================================================

  今天来学习一下模仿实现一个网易新闻客户端的主界面。话不多说,直接看效果图:

         
    

        

       项目结构截图如下:

        

   1.1:分析主页界面实现方法:

              ①:主界面的效果是,两边分别是左侧新闻服务列别,右侧是个人信息中心,分别是左右侧滑的。中间是各类别的新闻浏览,也是滑动的。

              ②:模拟实现方式:两侧可以使用上一讲我们实现人人客户端的的开源组件(SlidingMenu),使用方法请看上一篇(点击进入)。

              ③:中间滑动界面,可以使用ViewPager进行加入相应的布局,ViewPager的基本使用方法(请点击进入)。

              ④:中间切换类似于TabHost,这里我们不适用tabhost,直接使用ViewPager+Fragment来进行实现。

  2.1:界面分别分析:

        2.1.1:左边新闻服务列表界面:

                   

           这个界面很清晰,直接放入一个ListView布局就行:left_category.xml      

[html] view
plain
copy

  1. <span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical"   
  6.     android:background="@drawable/biz_pics_menu_bg"  
  7.     android:id="@+id/left_category_id"  
  8.     >  
  9.     <ListView   
  10.         android:id="@+id/listview_left_category"  
  11.         android:layout_width="fill_parent"  
  12.         android:layout_height="fill_parent"  
  13.         android:cacheColorHint="#00000000"/>  
  14.       
  15. </LinearLayout></span>  

           因为是模拟实现,所以其中要显示的数据我们全部自己模拟,但是里面的资源图片,可以去解压缩网页新闻客户端的apk文件。

           下面是实现的该布局的fragment:LeftCategoryFragment.java         

[java] view
plain
copy

  1. <span style="font-size:18px;">public class LeftCategoryFragment extends Fragment {  
  2.     private View mView;  
  3.     private Context mContext;  
  4.     private ListView listview_right_category;  
  5.     private LeftCateGoryAdapter mAdapter;  
  6.     private String[] category_name;  
  7.     private String[] category_title;  
  8.     private Integer[] category_img;  
  9.     private List<ItemCategoryModel> mLists;  
  10.     @Override  
  11.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  12.             Bundle savedInstanceState) {  
  13.         if (null == mView) {  
  14.             mView = inflater.inflate(R.layout.left_category, container, false);  
  15.             initView();  
  16.             initValidata();  
  17.             bindData();  
  18.             initListener();  
  19.         }  
  20.         return mView;  
  21.     }  
  22.   
  23.     /** 
  24.      * 初始化界面元素 
  25.      */  
  26.     private void initView() {  
  27.         listview_right_category = (ListView) mView  
  28.                 .findViewById(R.id.listview_left_category);  
  29.   
  30.     }  
  31.   
  32.     /** 
  33.      * 初始化变量 
  34.      */  
  35.     private void initValidata() {  
  36.         mContext = mView.getContext();  
  37.         // 进行模拟和初始化需要进行服务类别设置的数据  
  38.         category_name = mContext.getResources().getStringArray(  
  39.                 R.array.category_name);  
  40.         category_title = mContext.getResources().getStringArray(  
  41.                 R.array.category_title);  
  42.         category_img = new Integer[] { R.drawable.biz_navigation_tab_news,  
  43.                 R.drawable.biz_navigation_tab_local_news,  
  44.                 R.drawable.biz_navigation_tab_ties,  
  45.                 R.drawable.biz_navigation_tab_pics,  
  46.                 R.drawable.biz_navigation_tab_ugc,  
  47.                 R.drawable.biz_navigation_tab_voted,  
  48.                 R.drawable.biz_navigation_tab_micro,  
  49.                 R.drawable.biz_pc_list_polymetric_icon };  
  50.   
  51.         mLists = new ArrayList<ItemCategoryModel>();  
  52.         // 构造要显示的服务类别对象集合  
  53.         for (int i = 0; i < category_img.length; i++) {  
  54.             mLists.add(new ItemCategoryModel(category_img[i], category_name[i],  
  55.                     category_title[i]));  
  56.         }  
  57.         // 初始化适配器  
  58.         mAdapter = new LeftCateGoryAdapter(mContext, mLists);  
  59.     }  
  60.   
  61.     /** 
  62.      * 绑定数据 
  63.      */  
  64.     private void bindData() {  
  65.         listview_right_category.setAdapter(mAdapter);  
  66.     }  
  67.   
  68.     /** 
  69.      * 初始化监听器 
  70.      */  
  71.     private void initListener() {  
  72.         listview_right_category  
  73.                 .setOnItemClickListener(new MyOnItemClickListener());  
  74.     }  
  75.   
  76.     /** 
  77.      * listview列表的item的点击监听 
  78.      */  
  79.     class MyOnItemClickListener implements OnItemClickListener {  
  80.           
  81.         public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,  
  82.                 long arg3) {  
  83.             Toast.makeText(mContext, "你选择了"+category_name[arg2], Toast.LENGTH_SHORT).show();  
  84.         }  
  85.     }</span>  

   

            

          2.1.2:主页相应新闻tab:

                  

              中间很通常的想法就是使用TabHost,不过现在新版本基本已经不建议使用这种方式,那就用一种替代的方法,更加的方便好用ViewPager+Fragment; ViewPager选项卡,可以滑动,动态添加或者删除view。我们需要在布局文件中添加这个ViewPager,接下来看布局文件:main.xml   

[html] view
plain
copy

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical">  
  6.      <RelativeLayout   
  7.          android:layout_width="fill_parent"  
  8.          android:layout_height="wrap_content"  
  9.          android:background="@drawable/base_actionbar_bg">  
  10.          <ImageButton   
  11.              android:id="@+id/main_left_imgbtn"  
  12.              android:layout_width="wrap_content"  
  13.              android:layout_height="wrap_content"  
  14.              android:layout_centerVertical="true"  
  15.              android:background="@drawable/biz_news_main_back_normal"  
  16.              android:layout_marginLeft="5dip"  
  17.              />  
  18.          <ImageView   
  19.              android:id="@+id/main_center_logo"  
  20.              android:layout_width="wrap_content"  
  21.              android:layout_height="wrap_content"  
  22.              android:layout_centerVertical="true"  
  23.              android:src="@drawable/logo"  
  24.              android:layout_toRightOf="@id/main_left_imgbtn"/>  
  25.          <TextView   
  26.              android:layout_width="wrap_content"  
  27.              android:layout_height="wrap_content"  
  28.              android:layout_toRightOf="@id/main_center_logo"  
  29.              android:layout_centerVertical="true"  
  30.              android:text="新闻"  
  31.              android:textColor="@color/whilte"  
  32.              android:textSize="25sp"/>  
  33.          <ImageButton  
  34.              android:id="@+id/main_right_imgbtn"  
  35.              android:layout_width="wrap_content"  
  36.              android:layout_height="wrap_content"  
  37.              android:layout_alignParentRight="true"  
  38.              android:layout_centerVertical="true"  
  39.              android:layout_marginRight="5dip"  
  40.              android:background="@drawable/night_base_main_action_personal_normal"/>  
  41.      </RelativeLayout>  
  42.       <android.support.v4.view.ViewPager  
  43.           android:id="@+id/myviewpager"  
  44.           android:layout_width="fill_parent"  
  45.           android:layout_height="wrap_content"  
  46.           >  
  47.           <android.support.v4.view.PagerTitleStrip  
  48.             android:id="@+id/pagertitle"  
  49.             android:layout_width="wrap_content"  
  50.             android:layout_height="wrap_content"  
  51.             android:layout_gravity="top" />  
  52.       </android.support.v4.view.ViewPager>  
  53.        
  54. </LinearLayout>  

            在MainActivity中进行获取该ViewPager与ViewPager的选项卡标题:

               myViewPager=(ViewPager)this.findViewById(R.id.myviewpager);
               pagertitle=(PagerTitleStrip)this.findViewById(R.id.pagertitle);

            接着把要显示的视图(这边是相应的Fragment)添加到ViewPager中,此时我需要一个PagerAdapter,这里我们自定义一个PagerAdapter,继承FragmentPagerAdapter类

[java] view
plain
copy

  1. public class MainPagerAdapter extends FragmentPagerAdapter {  
  2.     private List<Fragment> mFragments;  
  3.     private String[] mViewpager_title;  
  4.       
  5.     public MainPagerAdapter(FragmentManager fm) {  
  6.         super(fm);  
  7.         mFragments=new ArrayList<Fragment>();  
  8.         //把所有要显示的Fragment选项卡加入到集合中  
  9.         mFragments.add(new HeadlinesFragment());  
  10.         mFragments.add(new EntertainFragment());  
  11.         mFragments.add(new SportFragment());  
  12.         mFragments.add(new EconomicsFragment());  
  13.         mFragments.add(new ScienceFragment());  
  14.         mViewpager_title=new String[]{"头条","娱乐","体育","财经","科技"};  
  15.     }  
  16.       
  17.     @Override  
  18.     public CharSequence getPageTitle(int position) {  
  19.         // TODO Auto-generated method stub  
  20.         return mViewpager_title[position];  
  21.     }  
  22.   
  23.     @Override  
  24.     public Fragment getItem(int arg0) {  
  25.         return mFragments.get(arg0);  
  26.     }  
  27.     @Override  
  28.     public int getCount() {  
  29.         // TODO Auto-generated method stub  
  30.         return mFragments!=null?mFragments.size():0;  
  31.     }  

               到此ViewPager一些准备工作已经完成,最后mAdapter=new MainPagerAdapter(getSupportFragmentManager());myViewPager.setAdapter(mAdapter);填充进去即可。

               上面的是ViewPager+Fragment视图滑动显示,因为网易新闻的主界面效果是侧滑效果,在这里我们是用SlidingMenu,使用方式见点击查看 
                 

[java] view
plain
copy

  1. <span style="font-size:18px;">// 设置滑动菜单的属性值  
  2.         getSlidingMenu().setMode(SlidingMenu.LEFT_RIGHT);  
  3.         getSlidingMenu().setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);  
  4.         getSlidingMenu().setShadowWidthRes(R.dimen.shadow_width);     
  5.         getSlidingMenu().setShadowDrawable(R.drawable.shadow);  
  6.         getSlidingMenu().setBehindOffsetRes(R.dimen.slidingmenu_offset);  
  7.         getSlidingMenu().setFadeDegree(0.35f);  
  8.         //设置主界面的视图        
  9.         setContentView(R.layout.main);  
  10.         // 设置左边菜单打开后的视图界面  
  11.         setBehindContentView(R.layout.left_content);      
  12.         getSupportFragmentManager().beginTransaction().replace(R.id.left_content_id, new LeftCategoryFragment()).commit();  
  13.         // 设置右边菜单打开后的视图界面  
  14.         getSlidingMenu().setSecondaryMenu(R.layout.right_content);  
  15.         getSupportFragmentManager().beginTransaction().replace(R.id.right_content_id, new RightPerMsgCenterFragment()).commit();</span>  

                      

          2.1.3:右边个人信息中心界面:

                  

                 分析这个功能界面,顶部是一个RetativeLayout布局,中间是三个Button的LinearLayout,下面是一个ListView布局(个人实现分析.当然各位还有可能有其他的想法,只要能实现就OK)

                 ①:顶部布局:

[html] view
plain
copy

  1. <!-- 顶部个人基本信息 -->  
  2.    <RelativeLayout   
  3.        android:layout_width="fill_parent"  
  4.        android:layout_height="70dip">  
  5.        <ImageView   
  6.            android:id="@+id/right_permsg_center_img_usericon"  
  7.            android:layout_width="60dip"  
  8.            android:layout_height="60dip"  
  9.            android:layout_marginLeft="5dip"  
  10.            android:layout_marginTop="5dip"  
  11.            android:layout_marginBottom="5dip"  
  12.            android:src="@drawable/night_biz_pc_account_avatar_bg"  
  13.            android:scaleType="fitXY"/>  
  14.        <TextView   
  15.            android:id="@+id/right_permsg_center_tv_name"  
  16.            android:layout_width="wrap_content"  
  17.            android:layout_height="wrap_content"  
  18.            android:text="@string/permsg_center_name"  
  19.            android:layout_toRightOf="@id/right_permsg_center_img_usericon"  
  20.            android:layout_marginLeft="10dip"  
  21.            android:textColor="@color/whilte"  
  22.            android:textSize="15sp"  
  23.            android:layout_marginTop="13dip"/>  
  24.        <ImageView   
  25.            android:id="@+id/right_permsg_center_img_icon"  
  26.            android:layout_width="15dip"  
  27.            android:layout_height="15dip"  
  28.            android:scaleType="fitXY"  
  29.            android:layout_toRightOf="@id/right_permsg_center_img_usericon"  
  30.            android:layout_below="@id/right_permsg_center_tv_name"  
  31.            android:src="@drawable/biz_pc_main_money_icon"  
  32.            android:layout_alignLeft="@id/right_permsg_center_tv_name"/>  
  33.        <TextView   
  34.            android:id="@+id/right_permsg_center_tv_level"  
  35.            android:layout_width="wrap_content"  
  36.            android:layout_height="wrap_content"  
  37.            android:layout_below="@id/right_permsg_center_tv_name"  
  38.            android:layout_toRightOf="@id/right_permsg_center_img_icon"  
  39.            android:text="@string/permsg_center_level"  
  40.            android:textColor="@color/whilte"  
  41.            android:layout_marginLeft="5dip"  
  42.            android:textSize="10sp"  
  43.            android:layout_alignBaseline="@id/right_permsg_center_img_icon"  
  44.            android:layout_marginTop="2dip"/>  
  45.        <ImageButton   
  46.            android:id="@+id/right_permsg_center_imgbtn_select"  
  47.            android:layout_width="30dip"  
  48.            android:layout_height="30dip"  
  49.            android:layout_alignParentRight="true"  
  50.            android:layout_marginRight="10dip"  
  51.            android:background="@drawable/app_recommend_arrow"  
  52.            android:layout_centerVertical="true"/>  
  53.    </RelativeLayout>  

               ②:中间三个Button布局:         

[html] view
plain
copy

  1. <!-- 中间三个button  我的跟帖,我的收藏,消息推送 -->  
  2.     <LinearLayout   
  3.         android:layout_width="fill_parent"  
  4.         android:layout_height="wrap_content"  
  5.         android:orientation="horizontal">  
  6.         <Button  
  7.             android:id="@+id/right_permsg_center_btn_thread"  
  8.             android:layout_width="wrap_content"  
  9.             android:layout_height="wrap_content"  
  10.             android:text="@string/permsg_center_thread"  
  11.             android:drawableTop="@drawable/biz_pc_go_tie"  
  12.             android:background="#00000000"  
  13.             android:textColor="@color/whilte"  
  14.             android:layout_weight="1"  
  15.              />  
  16.         <Button  
  17.             android:id="@+id/right_permsg_center_btn_collect"  
  18.             android:layout_width="wrap_content"  
  19.             android:layout_height="wrap_content"  
  20.             android:text="@string/permsg_center_collect"  
  21.             android:drawableTop="@drawable/biz_pc_go_favor"  
  22.             android:background="#00000000"  
  23.             android:textColor="@color/whilte"  
  24.             android:layout_weight="1"  
  25.             />  
  26.         <Button  
  27.              
  28.             android:id="@+id/right_permsg_center_btn_msgpush"  
  29.             android:layout_width="wrap_content"  
  30.             android:layout_height="wrap_content"  
  31.             android:text="@string/permsg_center_msgpush"  
  32.             android:drawableTop="@drawable/biz_pc_go_msg"  
  33.             android:background="#00000000"  
  34.             android:textColor="@color/whilte"  
  35.             android:layout_weight="1"  
  36.             />        

              ③:底部listview:

[html] view
plain
copy

  1. <ListView  
  2.        android:id="@+id/right_permsg_center_listview"  
  3.        android:layout_width="fill_parent"  
  4.        android:layout_height="wrap_content"  
  5.        android:divider="@drawable/biz_main_tab_divider"  
  6.        android:cacheColorHint="#00000000"/>  

         布局文件OK了,那我们接下来需要在Fragment中进行实现了,也比较简单,直接看代码就行了RightPerMsgCenterFragment.java

[java] view
plain
copy

  1. public class RightPerMsgCenterFragment extends Fragment {  
  2.     private View mView;  
  3.     private Context mContext;  
  4.     private RightPerMsgCenterAdapter mAdapter;  
  5.     private ListView right_permsg_center_listview;  
  6.     private List<ItemPerMsgCenterModel> mLists;  
  7.     private String[] msg_center;  
  8.     private Integer[] img_center;  
  9.       
  10.     @Override  
  11.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  12.             Bundle savedInstanceState) {  
  13.         if(mView==null)  
  14.         {  
  15.          mView=inflater.inflate(R.layout.right_per_msg_center, container, false);  
  16.          initView();  
  17.          initValidata();  
  18.          bindData();  
  19.         }  
  20.         return mView;  
  21.     }  
  22.     /** 
  23.      * 初始化界面元素 
  24.      */  
  25.     private void initView()  
  26.     {  
  27.         right_permsg_center_listview=(ListView)mView.findViewById(R.id.right_permsg_center_listview);  
  28.     }  
  29.       
  30.     /** 
  31.      * 初始化变量 
  32.      */  
  33.     private void initValidata()  
  34.     {  
  35.         mContext=mView.getContext();  
  36.         msg_center=mContext.getResources().getStringArray(R.array.msg_center);  
  37.         img_center=new Integer[]{R.drawable.biz_pc_list_extra_plugin_icon_dark,  
  38.                 R.drawable.biz_pc_list_setting_icon_dark,  
  39.                 R.drawable.biz_pc_list_weather_icon_dark,  
  40.                 R.drawable.biz_pc_list_offline_icon_dark,  
  41.                 R.drawable.biz_pc_list_theme_icon_night_dark,  
  42.                 R.drawable.biz_pc_list_search_icon_dark,  
  43.                 R.drawable.biz_pc_list_mail_icon_dark};  
  44.         mLists=new ArrayList<ItemPerMsgCenterModel>();  
  45.         for(int i=0;i<msg_center.length;i++)  
  46.         {  
  47.             mLists.add(new ItemPerMsgCenterModel(img_center[i], msg_center[i]));  
  48.         }  
  49.         mAdapter=new RightPerMsgCenterAdapter(mContext, mLists);  
  50.     }  
  51.         
  52.     /** 
  53.      * 绑定数据 
  54.      */  
  55.     private void bindData()  
  56.     {  
  57.         right_permsg_center_listview.setAdapter(mAdapter);  
  58.     }  
  59.       

            至此一个主界面的Demo完成了,由于是模拟实现,所以上面的数据都是自己模拟实现的,有些地方和网易新闻客户端主界面不是很一样的。但是功能实现供大家参考,如果各位感兴趣可以相互交流其他的更好的实现方式,互相学习。代码已经上传感兴趣的可以点击下面的连接地址:

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

       [注意]:这个Demo用到了开源组件slidingmenu_library,没有这个jar支持是有错误的,使用方法请见;

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

抱歉!评论已关闭.