viewpager左右滑动的 +Tab指示(方式1-------------RadioGroup+ViewPage+Fragment)

http://www.hackbase.com/article-1495-1.html

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");	
  }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值