一、問題描述

　　雙導航tab切換（底部區塊+區域內頭部導航），實現方案底部區域使用FragmentTabHost+Fragment, 區域內頭部導航使用ViewPager+Fragment，可在之前博客Android典型界面設計2（FragmentTabHost+Fragment實現底部tab切換）基礎之上和Android典型界面設計1（ViewPage+Fragment實現區域頂部tab滑動切換）整合應用實現。查看兩篇博客請點擊：http://www.cnblogs.com/jerehedu/p/4607599.html#dxjmsj。效果如圖所示：

二、案例主要組件

　　1、首先實現底部區塊的tab切換，這部分請參考博客：Android典型界面設計2（FragmentTabHost+Fragment實現底部tab切換）

　　2、底部tab各自對應Fragment組件，共5個Fragment為NewsFragment、ReadFragment、FoundFragment、OwnerFragment、VideoFragment,根據不同板塊各自設計界面，接下下來在之前基礎上實現NewsFragment界面的設計，該界面實現新聞各個頻道之間的切換，即區域內頭部導航

　　先看一下NewsFragment的布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><RelativeLayout android:layout_width="match_parent"android:layout_height="wrap_content"><HorizontalScrollViewandroid:id="@+id/hvChannel"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_toLeftOf="@+id/ivShowChannel"android:scrollbars="none"><RadioGroupandroid:id="@+id/rgChannel"android:layout_width="wrap_content"android:layout_height="wrap_content" android:orientation="horizontal"> </RadioGroup> </HorizontalScrollView><ImageView android:layout_width="40dp"android:layout_height="40dp"android:id="@+id/ivShowChannel"android:layout_alignParentRight="true"android:src="@drawable/channel_down_narrow"android:scaleType="fitXY"/> </RelativeLayout><android.support.v4.view.ViewPagerandroid:id="@+id/vpNewsList"android:layout_width="match_parent"android:layout_height="match_parent"></android.support.v4.view.ViewPager></LinearLayout>

NewsFragment代碼如下：

public class NewsFragment extends Fragment implements OnPageChangeListener {private View view=null;private RadioGroup rgChannel=null;private ViewPager viewPager;private HorizontalScrollView hvChannel=null;@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {if(view==null){view=inflater.inflate(R.layout.news_fragment_layout, null);rgChannel=(RadioGroup)view.findViewById(R.id.rgChannel);viewPager=(ViewPager)view.findViewById(R.id.vpNewsList);hvChannel=(HorizontalScrollView)view.findViewById(R.id.hvChannel);rgChannel.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {viewPager.setCurrentItem(checkedId); }}); initTab(inflater);initViewPager();}ViewGroup parent=(ViewGroup)view.getParent();if(parent!=null){parent.removeView(view);}return view;} private List<Fragment> newsChannelList=new ArrayList<Fragment>(); private NewsPageFragmentAdapter adapter;private void initViewPager(){List<Channel> channelList=ChannelDb.getSelectedChannel();for(int i=0;i<channelList.size();i++){NewsChannelFragment fragment=new NewsChannelFragment();Bundle bundle=new Bundle();bundle.putString("cname", channelList.get(i).getName());fragment.setArguments(bundle);newsChannelList.add(fragment);}adapter=new NewsPageFragmentAdapter(super.getActivity().getSupportFragmentManager(), newsChannelList);viewPager.setAdapter(adapter);viewPager.setOffscreenPageLimit(2);viewPager.setCurrentItem(0);viewPager.setOnPageChangeListener(this);}private void initTab(LayoutInflater inflater){List<Channel> channelList=ChannelDb.getSelectedChannel();for(int i=0;i<channelList.size();i++){RadioButton rb=(RadioButton)inflater.inflate(R.layout.tab_rb, null);rb.setId(i);rb.setText(channelList.get(i).getName());RadioGroup.LayoutParams params=new RadioGroup.LayoutParams(RadioGroup.LayoutParams.WRAP_CONTENT,RadioGroup.LayoutParams.WRAP_CONTENT);rgChannel.addView(rb,params);}rgChannel.check(0);}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int idx) {setTab(idx);}private void setTab(int idx){RadioButton rb=(RadioButton)rgChannel.getChildAt(idx);rb.setChecked(true);int left=rb.getLeft();int width=rb.getMeasuredWidth();DisplayMetrics metrics=new DisplayMetrics();super.getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);int screenWidth=metrics.widthPixels;int len=left+width/2-screenWidth/2;hvChannel.smoothScrollTo(len, 0);}}

　　3、NewsChannelFragment ?組件代碼：

public class NewsChannelFragment extends Fragment {private String channelName;@Overridepublic void setArguments(Bundle args) {channelName=args.getString("cname");}@Overridepublic void onAttach(Activity activity) {// TODO Auto-generated method stubsuper.onAttach(activity);}private TextView view;@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {if(view==null){view=new TextView(super.getActivity());view.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));view.setGravity(Gravity.CENTER);view.setTextSize(30);view.setText(channelName);}ViewGroup parent=(ViewGroup)view.getParent();if(parent!=null){parent.removeView(view);}return view;}@Overridepublic void onDestroy() {// TODO Auto-generated method stubsuper.onDestroy();} }

?

　　想要了解更多內容的小伙伴，可以點擊查看源碼，親自運行測試。

　　疑問咨詢或技術交流，請加入官方QQ群：?（452379712）

?

作者：杰瑞教育
出處：http://www.cnblogs.com/jerehedu/?
本文版權歸煙臺杰瑞教育科技有限公司和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。

總結

以上是生活随笔為你收集整理的Android典型界面设计(3)——访网易新闻实现双导航tab切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。