Android典型介面設計(3)——訪網易新聞實現雙導航tab切換

標籤：

一、問題描述

　　雙導航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">      <HorizontalScrollView        android:id="@+id/hvChannel"         android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_toLeftOf="@+id/ivShowChannel"        android:scrollbars="none">        <RadioGroup         android: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.ViewPager              android: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;    @Override    public 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() {                @Override                public 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);    }    @Override    public void onPageScrollStateChanged(int arg0) {    }    @Override    public void onPageScrolled(int arg0, float arg1, int arg2) {    }    @Override    public 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;    @Override    public void setArguments(Bundle args) {        channelName=args.getString("cname");    }    @Override    public void onAttach(Activity activity) {        // TODO Auto-generated method stub        super.onAttach(activity);    }    private TextView view;    @Override    public 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;    }    @Override    public void onDestroy() {        // TODO Auto-generated method stub        super.onDestroy();    }}

 

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

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

 

傑瑞教育
出處：http://blog.csdn.net/jerehedu/ 
本文著作權歸煙台傑瑞教育科技有限公司和CSDN共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文串連，否則保留追究法律責任的權利。 

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

Android典型介面設計(3)——訪網易新聞實現雙導航tab切換