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