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"><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切换相关推荐
- Android典型界面设计(4)——使用ActionBar+Fragment实现tab切换
一.问题描述 之前我们使用ViewPager+Fragment区域内头部导航,在Android 3.0之后Google增加了新的ActionBar,可方便的实现屏幕Head部区域的 设计如返回键.标题 ...
- Android典型界面设计(8) ——ViewPager+PagerSlidingTabStrip实现双导航
一.问题描述 PagerSlidingTabStrip是android开源项目,指示器控件.官网地址:https://github.com/astuetz/PagerSlidingTabStrip 该 ...
- android零碎要点---android开发者的福音,59_1 Android的界面设计工具,直接拖拉就可以设计界面,Java技术qq交流群:JavaDream:251572072
Java技术qq交流群:JavaDream:251572072 2013/5/16 59_1 Android的界面设计工具 -------------------------------------- ...
- android jsp界面设计,Android 4.0设计规范-UI博客精选
在拜读和翻译了Android design设计指导后,对比Android 4.0与Android2.3及之前版本的app设计指导,总结了Android 4.0设计的10大改变: 1. 导航栏 (详见模 ...
- Android Studio 界面设计和运行的不一样
Android Studio 界面设计和运行的不一样 初学Android开发,记录一下遇到的问题,及解决方法 在Android studio 设置界面拖拽控件到视图区,设计界面是这样的 运行虚拟机看到 ...
- Android 应用界面设计
与 iOS 相比,Android 系统界面存在各种不协调,应用界面本身缺乏统一的规范.虽然 Android 的开放性为应用的自主发挥带来了最大的可能性,但如果系统本身能够提供标准的范例,也未必是一件坏 ...
- android做试卷的页面,《Android UI界面设计》17移动互联网A卷试题和答案(3页)-原创力文档...
广州市蓝天技工学校质量记录 期末考试试卷 编号:QD-0812-22 A/0 流水号: 2018 -2019 学年度第一学期 2017级移动互联网应用技术高技专业<UI界面设计>试卷答案 ...
- android支付界面设计,Android支付宝支付设计开发
在移动支付领域,支付宝支付占用巨大份额,根据艾瑞咨询公布的报告数据:2014Q3,支付宝斩获了82.6%的市场份额,在移动支付的霸主地位越来越稳固.财付通支付的发力点在微信支付和手Q支付,在移动支付格 ...
- android水果界面设计,一套小清新的水果元素的APP界面设计欣赏
这套小清新的而可爱风格的的APP名字叫:\"Fresh It Up\" – App Design 这套APP设计图来自国外设计网站behance. \"Fresh It ...
最新文章
- Oracle EBS R12 客户表结构
- 记录这两日悲哀的血泪史,以便后来人能绕行
- 结构体字节对齐(转)
- 访问IIS元数据库失败
- FPGA的Veilog HDL语法、框架总结
- Java开发的Spring Boot的核心模块
- mysql blob图片类型存储bug解决:索引超出了数组界限错误_索引超出了数组界限(Microsoft.SqlServer.Smo)...
- JVM 内存管理机制
- Vue自定义属性的设置及获取
- java适配器有哪些_Java中适配器模式(Adapter)是什么? 适配器模式(详解)
- 海龟绘图两小时上手C语言 - 2 绘制正方形
- mysql事件关闭解决办法
- 十月微信小程序导航:官方文档+精品教程+demo集合(10月14日更新)
- GD32F103VET6替代STM32F103VET6遇到的问题
- PDManer数据库建模工具介绍
- 后端知识点:互联网中B端客户和C端客户的区别
- jenkins如何清缓存,jenkins在结账前清除存储库并强制克隆与清理
- (android文档原创翻译)管理Activity的生命周期一
- 【寒假每日一题】洛谷 P2404 自然数的拆分问题
- 来吧,嘤!,c++高级编程介绍