标签:
一、问题描述 |
本系列将结合案例应用,陆续向大家介绍一些Android典型界面的设计,首先说说tab导航,导航分为一层和两层(底部区块+区域内头部导航),主要实现方案有RadioGroup+ViewPage+Fragment、Viewpager Indicator、ActionBar Tabs、FragmentTabHost+Fragment等,下面我们先采用RadioGroup+ViewPage+Fragment实现区域头部导航。
如图所示:
二、案例主要组件 |
1、先看一下MainActivity布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <HorizontalScrollView android:id="@+id/hvChannel" android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="none" > <RadioGroup android:id="@+id/rgChannel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> </RadioGroup> </HorizontalScrollView> <android.support.v4.view.ViewPager android:id="@+id/vpNewsList" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" > </android.support.v4.view.ViewPager> </LinearLayout>
2、MainActivity代码:
public class MainActivity extends FragmentActivity implements OnPageChangeListener{ private ViewPager viewPager; private RadioGroup rgChannel=null; private HorizontalScrollView hvChannel; private PageFragmentAdapter adapter=null; private List<Fragment> fragmentList=new ArrayList<Fragment>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } private void initView(){ rgChannel=(RadioGroup)super.findViewById(R.id.rgChannel); viewPager=(ViewPager)super.findViewById(R.id.vpNewsList); hvChannel=(HorizontalScrollView)super.findViewById(R.id.hvChannel); rgChannel.setOnCheckedChangeListener( new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { viewPager.setCurrentItem(checkedId); } }); viewPager.setOnPageChangeListener(this); initTab();//动态产生RadioButton initViewPager(); rgChannel.check(0); } private void initTab(){ List<Channel> channelList=ChannelDb.getSelectedChannel(); for(int i=0;i<channelList.size();i++){ RadioButton rb=(RadioButton)LayoutInflater.from(this). 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); } } private void initViewPager(){ List<Channel> channelList=ChannelDb.getSelectedChannel(); for(int i=0;i<channelList.size();i++){ NewsFragment frag=new NewsFragment(); Bundle bundle=new Bundle(); bundle.putString("weburl", channelList.get(i).getWeburl()); bundle.putString("name", channelList.get(i).getName()); frag.setArguments(bundle); //向Fragment传入数据 fragmentList.add(frag); } adapter=new PageFragmentAdapter(super.getSupportFragmentManager(),fragmentList); viewPager.setAdapter(adapter); //viewPager.setOffscreenPageLimit(0); } /** * 滑动ViewPager时调整ScroollView的位置以便显示按钮 * @param 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.getWindowManager().getDefaultDisplay().getMetrics(metrics); int screenWidth=metrics.widthPixels; int len=left+width/2-screenWidth/2; hvChannel.smoothScrollTo(len, 0);//滑动ScroollView } @Override public void onPageScrollStateChanged(int arg0) { } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageSelected(int position) { // TODO Auto-generated method stub setTab(position); } }
其中initTab()方法实现向RadioGroup动态添加RadioButton
导航按钮数据来源于ChannelDb
private static List<Channel> selectedChannel=new ArrayList<Channel>(); static{ selectedChannel.add(new Channel("","头条",0,"","")); selectedChannel.add(new Channel("","娱乐",0,"","")); selectedChannel.add(new Channel("","体育",0,"","")); selectedChannel.add(new Channel("","财经",0,"","")); selectedChannel.add(new Channel("","热点",0,"","")); selectedChannel.add(new Channel("","科技",0,"","")); selectedChannel.add(new Channel("","图片",0,"","")); selectedChannel.add(new Channel("","汽车",0,"","")); selectedChannel.add(new Channel("","时尚",0,"","")); } public static List<Channel> getSelectedChannel(){ return selectedChannel; }
导航按钮外观:tab_rb.xml和tab_selector.xml背景选择器(实现选择后带红色下划线效果)
<?xml version="1.0" encoding="utf-8"?> <RadioButton xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="30dp" android:text="今日" android:background="@drawable/tab_selector" android:paddingLeft="15dp" android:paddingRight="15dp" android:paddingTop="10dp" android:paddingBottom="10dp" android:button="@null" /> tab_selector.xml: <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_checked="true" ><!-- 选中状态 --> <layer-list > <item > <shape android:shape="rectangle"> <stroke android:width="5dp" android:color="#ff0000"/> </shape> </item> <item android:bottom="5dp" > <shape android:shape="rectangle" > <solid android:color="#fff"/> </shape> </item> </layer-list> </item> <item ><!-- 默认状态 --> <shape > <solid android:color="#FAFAFA"/> </shape> </item> </selector>
3、PageFragmentAdapter适配器
public class PageFragmentAdapter extends FragmentPagerAdapter{ private List<Fragment> fragmentList; private FragmentManager fm; public PageFragmentAdapter(FragmentManager fm,List<Fragment> fragmentList){ super(fm); this.fragmentList=fragmentList; this.fm=fm; } @Override public Fragment getItem(int idx) { return fragmentList.get(idx%fragmentList.size()); } @Override public int getCount() { return fragmentList.size(); } @Override public int getItemPosition(Object object) { return POSITION_NONE; //没有找到child要求重新加载 } }
4、NewsFragment组件:
public class NewsFragment extends Fragment { private String weburl; private String channelName; @Override public void onAttach(Activity activity) { super.onAttach(activity); } private View view; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { if(view==null){//优化View减少View的创建次数 //该部分可通过xml文件设计Fragment界面,再通过LayoutInflater转换为View组件 //这里通过代码为fragment添加一个TextView TextView tvTitle=new TextView(getActivity()); tvTitle.setText(channelName); tvTitle.setTextSize(16); tvTitle.setGravity(Gravity.CENTER); tvTitle.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT)); view=tvTitle; } ViewGroup parent=(ViewGroup)view.getParent(); if(parent!=null){//如果View已经添加到容器中,要进行删除,负责会报错 parent.removeView(view); } return view; } @Override public void setArguments(Bundle bundle) {//接收传入的数据 weburl=bundle.getString("weburl"); channelName=bundle.getString("name"); } }
想要了解更多内容的小伙伴,可以点击查看源码,亲自运行测试。
疑问咨询或技术交流,请加入官方QQ群: (452379712)
版权声明:本文为博主原创文章,未经博主允许不得转载。
Android典型界面设计——ViewPage+Fragment实现区域顶部tab滑动切换
标签:
原文地址:http://blog.csdn.net/jerehedu/article/details/46911955