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群:JRedu技术交流 (452379712)

 

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

本文链接:Android典型界面设计(3)——访网易新闻实现双导航tab切换,转载请注明。



You must enable javascript to see captcha here!

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress

无觅相关文章插件,快速提升流量