今天來學習一下模仿實作一個網易新聞用戶端的主界面。話不多說，直接看效果圖:
1.1:分析首頁界面實作方法:
①:主界面的效果是，兩邊分别是左側新聞服務列别，右側是個人資訊中心，分别是左右側滑的。中間是各類别的新聞浏覽，也是滑動的。
②:模拟實作方式:兩側可以使用上一講我們實作人人用戶端的的開源元件(SlidingMenu)，使用方法請看上一篇(點選進入)。
③:中間滑動界面，可以使用ViewPager進行加入相應的布局,ViewPager的基本使用方法(請點選進入)。
④:中間切換類似于TabHost,這裡我們不适用tabhost，直接使用ViewPager+Fragment來進行實作。
2.1:界面分别分析:
2.1.1:左邊新聞服務清單界面:
<?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：
中間很通常的想法就是使用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:右邊個人資訊中心界面:
分析這個功能界面，頂部是一個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