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/
本文版权归烟台杰瑞教育科技有限公司和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

巴特西

Android典型界面设计(3)——访网易新闻实现双导航tab切换

最新文章

热门文章