一、问题描述

  双导航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切换相关推荐

  1. Android典型界面设计(4)——使用ActionBar+Fragment实现tab切换

    一.问题描述 之前我们使用ViewPager+Fragment区域内头部导航,在Android 3.0之后Google增加了新的ActionBar,可方便的实现屏幕Head部区域的 设计如返回键.标题 ...

  2. Android典型界面设计(8) ——ViewPager+PagerSlidingTabStrip实现双导航

    一.问题描述 PagerSlidingTabStrip是android开源项目,指示器控件.官网地址:https://github.com/astuetz/PagerSlidingTabStrip 该 ...

  3. android零碎要点---android开发者的福音,59_1 Android的界面设计工具,直接拖拉就可以设计界面,Java技术qq交流群:JavaDream:251572072

    Java技术qq交流群:JavaDream:251572072 2013/5/16 59_1 Android的界面设计工具 -------------------------------------- ...

  4. android jsp界面设计,Android 4.0设计规范-UI博客精选

    在拜读和翻译了Android design设计指导后,对比Android 4.0与Android2.3及之前版本的app设计指导,总结了Android 4.0设计的10大改变: 1. 导航栏 (详见模 ...

  5. Android Studio 界面设计和运行的不一样

    Android Studio 界面设计和运行的不一样 初学Android开发,记录一下遇到的问题,及解决方法 在Android studio 设置界面拖拽控件到视图区,设计界面是这样的 运行虚拟机看到 ...

  6. Android 应用界面设计

    与 iOS 相比,Android 系统界面存在各种不协调,应用界面本身缺乏统一的规范.虽然 Android 的开放性为应用的自主发挥带来了最大的可能性,但如果系统本身能够提供标准的范例,也未必是一件坏 ...

  7. android做试卷的页面,《Android UI界面设计》17移动互联网A卷试题和答案(3页)-原创力文档...

    广州市蓝天技工学校质量记录 期末考试试卷 编号:QD-0812-22 A/0 流水号: 2018 -2019 学年度第一学期 2017级移动互联网应用技术高技专业<UI界面设计>试卷答案 ...

  8. android支付界面设计,Android支付宝支付设计开发

    在移动支付领域,支付宝支付占用巨大份额,根据艾瑞咨询公布的报告数据:2014Q3,支付宝斩获了82.6%的市场份额,在移动支付的霸主地位越来越稳固.财付通支付的发力点在微信支付和手Q支付,在移动支付格 ...

  9. android水果界面设计,一套小清新的水果元素的APP界面设计欣赏

    这套小清新的而可爱风格的的APP名字叫:\"Fresh It Up\" – App Design 这套APP设计图来自国外设计网站behance. \"Fresh It ...

最新文章

  1. Oracle EBS R12 客户表结构
  2. 记录这两日悲哀的血泪史,以便后来人能绕行
  3. 结构体字节对齐(转)
  4. 访问IIS元数据库失败
  5. FPGA的Veilog HDL语法、框架总结
  6. Java开发的Spring Boot的核心模块
  7. mysql blob图片类型存储bug解决:索引超出了数组界限错误_索引超出了数组界限(Microsoft.SqlServer.Smo)...
  8. JVM 内存管理机制
  9. Vue自定义属性的设置及获取
  10. java适配器有哪些_Java中适配器模式(Adapter)是什么? 适配器模式(详解)
  11. 海龟绘图两小时上手C语言 - 2 绘制正方形
  12. mysql事件关闭解决办法
  13. 十月微信小程序导航:官方文档+精品教程+demo集合(10月14日更新)
  14. GD32F103VET6替代STM32F103VET6遇到的问题
  15. PDManer数据库建模工具介绍
  16. 后端知识点:互联网中B端客户和C端客户的区别
  17. jenkins如何清缓存,jenkins在结账前清除存储库并强制克隆与清理
  18. (android文档原创翻译)管理Activity的生命周期一
  19. 【寒假每日一题】洛谷 P2404 自然数的拆分问题
  20. 来吧,嘤!,c++高级编程介绍

热门文章

  1. React 中 keys 的作用是什么?
  2. Kotlin学习笔记——安装配置kotlin
  3. 6.2.2 二叉树的创建
  4. @RequestParam和@RequestBody区别
  5. 结构化项目管理:十步法 [摘自:成功的软件项目管理]
  6. 传江民总裁王江民因心脏病突发逝世 享年59岁
  7. IT项目管理中如何应对预算削减的难题?
  8. consul使用的一些见解
  9. Java集合框架体系(超详细)
  10. Python学习:16.Python面对对象(三、反射,构造方法,静态字段,静态方法)