你的位置:首页 > 操作系统

[操作系统]Android典型界面设计——访网易新闻实现双导航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 ="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群:JRedu技术交流 (452379712)

 

作者:杰瑞教育
出处:http://www.cnblogs.com/jerehedu/ 
本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。