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

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

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

       项目结构截图如下:

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

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

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

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

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

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

  2.1:界面分别分析:

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

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

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

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@drawable/biz_pics_menu_bg" android:id="@+id/left_category_id" > <ListView android:id="@+id/listview_left_category" android:layout_width="fill_parent" android:layout_height="fill_parent" android:cacheColorHint="#00000000"/> </LinearLayout>

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

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

public class LeftCategoryFragment extends Fragment { private View mView; private Context mContext; private ListView listview_right_category; private LeftCateGoryAdapter mAdapter; private String[] category_name; private String[] category_title; private Integer[] category_img; private List<ItemCategoryModel> mLists; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { if (null == mView) { mView = inflater.inflate(R.layout.left_category, container, false); initView(); initValidata(); bindData(); initListener(); } return mView; } /** * 初始化界面元素 */ private void initView() { listview_right_category = (ListView) mView .findViewById(R.id.listview_left_category); } /** * 初始化变量 */ private void initValidata() { mContext = mView.getContext(); // 进行模拟和初始化需要进行服务类别设置的数据 category_name = mContext.getResources().getStringArray( R.array.category_name); category_title = mContext.getResources().getStringArray( R.array.category_title); category_img = new Integer[] { R.drawable.biz_navigation_tab_news, R.drawable.biz_navigation_tab_local_news, R.drawable.biz_navigation_tab_ties, R.drawable.biz_navigation_tab_pics, R.drawable.biz_navigation_tab_ugc, R.drawable.biz_navigation_tab_voted, R.drawable.biz_navigation_tab_micro, R.drawable.biz_pc_list_polymetric_icon }; mLists = new ArrayList<ItemCategoryModel>(); // 构造要显示的服务类别对象集合 for (int i = 0; i < category_img.length; i++) { mLists.add(new ItemCategoryModel(category_img[i], category_name[i], category_title[i])); } // 初始化适配器 mAdapter = new LeftCateGoryAdapter(mContext, mLists); } /** * 绑定数据 */ private void bindData() { listview_right_category.setAdapter(mAdapter); } /** * 初始化监听器 */ private void initListener() { listview_right_category .setOnItemClickListener(new MyOnItemClickListener()); } /** * listview列表的item的点击监听 */ class MyOnItemClickListener implements OnItemClickListener { public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) { Toast.makeText(mContext, "你选择了"+category_name[arg2], Toast.LENGTH_SHORT).show(); } }

   

            

          2.1.2:主页相应新闻tab:

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

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:orientation="vertical">      <RelativeLayout           android:layout_width="fill_parent"          android:layout_height="wrap_content"          android:background="@drawable/base_actionbar_bg">          <ImageButton               android:id="@+id/main_left_imgbtn"              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:layout_centerVertical="true"              android:background="@drawable/biz_news_main_back_normal"              android:layout_marginLeft="5dip"              />          <ImageView               android:id="@+id/main_center_logo"              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:layout_centerVertical="true"              android:src="@drawable/logo"              android:layout_toRightOf="@id/main_left_imgbtn"/>          <TextView               android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:layout_toRightOf="@id/main_center_logo"              android:layout_centerVertical="true"              android:text="新闻"              android:textColor="@color/whilte"              android:textSize="25sp"/>          <ImageButton              android:id="@+id/main_right_imgbtn"              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:layout_alignParentRight="true"              android:layout_centerVertical="true"              android:layout_marginRight="5dip"              android:background="@drawable/night_base_main_action_personal_normal"/>      </RelativeLayout>       <android.support.v4.view.ViewPager           android:id="@+id/myviewpager"           android:layout_width="fill_parent"           android:layout_height="wrap_content"           >           <android.support.v4.view.PagerTitleStrip             android:id="@+id/pagertitle"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_gravity="top" />       </android.support.v4.view.ViewPager>       </LinearLayout>

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

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

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

public class MainPagerAdapter extends FragmentPagerAdapter { 	private List<Fragment> mFragments; 	private String[] mViewpager_title; 	 	public MainPagerAdapter(FragmentManager fm) { 		super(fm); 		mFragments=new ArrayList<Fragment>(); 		//把所有要显示的Fragment选项卡加入到集合中 		mFragments.add(new HeadlinesFragment()); 		mFragments.add(new EntertainFragment()); 		mFragments.add(new SportFragment()); 		mFragments.add(new EconomicsFragment()); 		mFragments.add(new ScienceFragment()); 		mViewpager_title=new String[]{"头条","娱乐","体育","财经","科技"}; 	} 	 	@Override 	public CharSequence getPageTitle(int position) { 		// TODO Auto-generated method stub 		return mViewpager_title[position]; 	}  	@Override 	public Fragment getItem(int arg0) { 		return mFragments.get(arg0); 	} 	@Override 	public int getCount() { 		// TODO Auto-generated method stub 		return mFragments!=null?mFragments.size():0; 	}

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

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

// 设置滑动菜单的属性值 getSlidingMenu().setMode(SlidingMenu.LEFT_RIGHT); getSlidingMenu().setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN); getSlidingMenu().setShadowWidthRes(R.dimen.shadow_width); getSlidingMenu().setShadowDrawable(R.drawable.shadow); getSlidingMenu().setBehindOffsetRes(R.dimen.slidingmenu_offset); getSlidingMenu().setFadeDegree(0.35f); //设置主界面的视图 setContentView(R.layout.main); // 设置左边菜单打开后的视图界面 setBehindContentView(R.layout.left_content); getSupportFragmentManager().beginTransaction().replace(R.id.left_content_id, new LeftCategoryFragment()).commit(); // 设置右边菜单打开后的视图界面 getSlidingMenu().setSecondaryMenu(R.layout.right_content); getSupportFragmentManager().beginTransaction().replace(R.id.right_content_id, new RightPerMsgCenterFragment()).commit();

                      

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

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

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

                 ①:顶部布局:

 <!-- 顶部个人基本信息 -->     <RelativeLayout          android:layout_width="fill_parent"         android:layout_height="70dip">         <ImageView              android:id="@+id/right_permsg_center_img_usericon"             android:layout_width="60dip"             android:layout_height="60dip"             android:layout_marginLeft="5dip"             android:layout_marginTop="5dip"             android:layout_marginBottom="5dip"             android:src="@drawable/night_biz_pc_account_avatar_bg"             android:scaleType="fitXY"/>         <TextView              android:id="@+id/right_permsg_center_tv_name"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="@string/permsg_center_name"             android:layout_toRightOf="@id/right_permsg_center_img_usericon"             android:layout_marginLeft="10dip"             android:textColor="@color/whilte"             android:textSize="15sp"             android:layout_marginTop="13dip"/>         <ImageView              android:id="@+id/right_permsg_center_img_icon"             android:layout_width="15dip"             android:layout_height="15dip"             android:scaleType="fitXY"             android:layout_toRightOf="@id/right_permsg_center_img_usericon"             android:layout_below="@id/right_permsg_center_tv_name"             android:src="@drawable/biz_pc_main_money_icon"             android:layout_alignLeft="@id/right_permsg_center_tv_name"/>         <TextView              android:id="@+id/right_permsg_center_tv_level"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_below="@id/right_permsg_center_tv_name"             android:layout_toRightOf="@id/right_permsg_center_img_icon"             android:text="@string/permsg_center_level"             android:textColor="@color/whilte"             android:layout_marginLeft="5dip"             android:textSize="10sp"             android:layout_alignBaseline="@id/right_permsg_center_img_icon"             android:layout_marginTop="2dip"/>         <ImageButton              android:id="@+id/right_permsg_center_imgbtn_select"             android:layout_width="30dip"             android:layout_height="30dip"             android:layout_alignParentRight="true"             android:layout_marginRight="10dip"             android:background="@drawable/app_recommend_arrow"             android:layout_centerVertical="true"/>     </RelativeLayout>

               ②:中间三个Button布局:
         

<!-- 中间三个button  我的跟帖,我的收藏,消息推送 -->     <LinearLayout          android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:orientation="horizontal">         <Button             android:id="@+id/right_permsg_center_btn_thread"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="@string/permsg_center_thread"             android:drawableTop="@drawable/biz_pc_go_tie"             android:background="#00000000"             android:textColor="@color/whilte"             android:layout_weight="1"              />         <Button             android:id="@+id/right_permsg_center_btn_collect"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="@string/permsg_center_collect"             android:drawableTop="@drawable/biz_pc_go_favor"             android:background="#00000000"             android:textColor="@color/whilte"             android:layout_weight="1"             />         <Button                         android:id="@+id/right_permsg_center_btn_msgpush"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="@string/permsg_center_msgpush"             android:drawableTop="@drawable/biz_pc_go_msg"             android:background="#00000000"             android:textColor="@color/whilte"             android:layout_weight="1"             />      

              ③:底部listview:

 <ListView         android:id="@+id/right_permsg_center_listview"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:divider="@drawable/biz_main_tab_divider"         android:cacheColorHint="#00000000"/>

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

public class RightPerMsgCenterFragment extends Fragment { 	private View mView; 	private Context mContext; 	private RightPerMsgCenterAdapter mAdapter; 	private ListView right_permsg_center_listview; 	private List<ItemPerMsgCenterModel> mLists; 	private String[] msg_center; 	private Integer[] img_center; 	     @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,     		Bundle savedInstanceState) {     	if(mView==null)     	{     	 mView=inflater.inflate(R.layout.right_per_msg_center, container, false);     	 initView();     	 initValidata();     	 bindData();     	}     	return mView;     }     /**      * 初始化界面元素      */     private void initView()     {     	right_permsg_center_listview=(ListView)mView.findViewById(R.id.right_permsg_center_listview);     }          /**      * 初始化变量      */     private void initValidata()     {     	mContext=mView.getContext();     	msg_center=mContext.getResources().getStringArray(R.array.msg_center);     	img_center=new Integer[]{R.drawable.biz_pc_list_extra_plugin_icon_dark,     			R.drawable.biz_pc_list_setting_icon_dark,     			R.drawable.biz_pc_list_weather_icon_dark,     			R.drawable.biz_pc_list_offline_icon_dark,     			R.drawable.biz_pc_list_theme_icon_night_dark,     			R.drawable.biz_pc_list_search_icon_dark,     			R.drawable.biz_pc_list_mail_icon_dark};     	mLists=new ArrayList<ItemPerMsgCenterModel>();     	for(int i=0;i<msg_center.length;i++)     	{     		mLists.add(new ItemPerMsgCenterModel(img_center[i], msg_center[i]));     	}     	mAdapter=new RightPerMsgCenterAdapter(mContext, mLists);     }            /**      * 绑定数据      */     private void bindData()     {     	right_permsg_center_listview.setAdapter(mAdapter);     }     

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

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

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

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