如图是效果图 开发中经常会用到上面是一个Tab下面是一个ViewPager(ViewPager再包含几个Fragment),当点击Tab或是滑动ViewPager,Tab及ViewPager都会发生对应的变化如图我实现的上面一个Tab是自己定义的布局让其继 ...
如图是效果图
开发中经常会用到上面是一个Tab下面是一个ViewPager(ViewPager再包含几个Fragment),当点击Tab或是滑动ViewPager,Tab及ViewPager都会发生对应的变化
如图我实现的上面一个Tab是自己定义的布局让其继承HorizontalScrollView,下面一个使用系统PagerTabStrip很简单,
当然引用别人的框架Android-ViewPagerIndicator(https://github.com/JakeWharton/ViewPagerIndicator)实现更简单
如下是主要代码
package com.it.hello.activity.assets;import java.util.ArrayList;import com.it.hello.R;import com.it.hello.activity.entity.ChannelItem;import com.it.hello.activity.fragment.FourFragment;import com.it.hello.activity.fragment.MThreeFragment;import com.it.hello.activity.fragment.OneFragment;import com.it.hello.activity.myfragment.MyFragmentOne;import com.it.hello.activity.myfragment.MyFragmentTwo;import com.it.hello.activity.util.DensityUtils;import com.it.hello.activity.widget.ColumnHorizontalScrollView;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentStatePagerAdapter;import android.support.v4.view.PagerTabStrip;import android.support.v4.view.ViewPager;import android.util.SparseArray;import android.view.View;import android.widget.LinearLayout;import android.widget.RelativeLayout;import android.widget.TextView;import android.widget.RelativeLayout.LayoutParams;/** * PagerTabStrip实现ViewPager的滑动 * @author zh * */public class MyStripActivity extends FragmentActivity { private ViewPager mViewPager; private PagerTabStrip pager_tab_strip; /** 自定义的HorizontalScrollView */ private ColumnHorizontalScrollView mColumnHorizontalScrollView; private LinearLayout mRadioGroup_content; /** 用户选择的分类列表 */ private ArrayList<ChannelItem> userChannelItems = new ArrayList<ChannelItem>(); /** 当前选中的栏目 */ private int columnSelectIndex = 0; /** 屏幕的宽度 */ private int mScreeWidth = 0; /** Item宽度 */ private int mItemWidth = 0; private View view; @Override protected void onCreate(Bundle arg0) { // TODO Auto-generated method stub super.onCreate(arg0); setContentView(R.layout.activity_strip); mScreeWidth = DensityUtils.getWindowsWidth(this); mItemWidth = mScreeWidth / 3; // 一个Item宽度为屏幕的3分之一 mViewPager = (ViewPager) findViewById(R.id.vp); pager_tab_strip = (PagerTabStrip) findViewById(R.id.pager_tab_strip); // 设置标签下划线的颜色 mColumnHorizontalScrollView = (ColumnHorizontalScrollView) findViewById(R.id.mColumnHorizontal); mRadioGroup_content = (LinearLayout) findViewById(R.id.mRadioGroup); initColumData(); //取消Tab 下面的长横线 pager_tab_strip.setDrawFullUnderline(false); //改变Tab线的颜色 pager_tab_strip.setTabIndicatorColor(getResources().getColor( R.color.indecolor)); mViewPager.setOffscreenPageLimit(3); mViewPager.setAdapter(new MainAdapter(getSupportFragmentManager())); } private void initColumData() { // TODO Auto-generated method stub userChannelItems = new ArrayList<ChannelItem>(); ChannelItem item = new ChannelItem(0, "标签0", 0, 0); ChannelItem item1 = new ChannelItem(0, "标签1", 0, 0); ChannelItem item2 = new ChannelItem(0, "标签2", 0, 0); ChannelItem item3 = new ChannelItem(0, "标签3", 0, 0); ChannelItem item4 = new ChannelItem(0, "标签4", 0, 0); userChannelItems.add(item); userChannelItems.add(item1); userChannelItems.add(item2); userChannelItems.add(item3); userChannelItems.add(item4); initTabColumn(); /** * ViewPager切换监听的方法 */ mViewPager .setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() { @Override public void onPageSelected(int position) { // TODO Auto-generated method stub mViewPager.setCurrentItem(position); selectTab(position); initColumData(); } }); } /** * 初始化TabColumn栏目项 */ private void initTabColumn() { // TODO Auto-generated method stub mRadioGroup_content.removeAllViews(); int count = userChannelItems.size(); mColumnHorizontalScrollView.setParam(this, mScreeWidth, mRadioGroup_content); for (int i = 0; i < count; i++) { RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams( mItemWidth, LayoutParams.WRAP_CONTENT); params.leftMargin = 5; params.rightMargin = 5; view = View.inflate(this, R.layout.item_mytab, null); TextView tv = (TextView) view.findViewById(R.id.tab_title); View line = (View) view.findViewById(R.id.tab_line); tv.setId(i); tv.setText(userChannelItems.get(i).getName()); if (columnSelectIndex == i) { tv.setSelected(true); line.setSelected(true); } view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View arg0) { // TODO Auto-generated method stub for (int i = 0; i < mRadioGroup_content.getChildCount(); i++) { View localView = mRadioGroup_content.getChildAt(i); if (localView != arg0) { localView.setSelected(false); } else { localView.setSelected(true); mViewPager.setCurrentItem(i); } } } }); mRadioGroup_content.addView(view, i, params); } } /** * 选择的Column里面的Tab * */ private void selectTab(int tab_postion) { columnSelectIndex = tab_postion; for (int i = 0; i < mRadioGroup_content.getChildCount(); i++) { View checkView = mRadioGroup_content.getChildAt(tab_postion); int k = checkView.getMeasuredWidth(); int l = checkView.getLeft(); int i2 = l + k / 2 - mScreeWidth / 2; mColumnHorizontalScrollView.smoothScrollTo(i2, 0); } // 判断是否选中 for (int j = 0; j < mRadioGroup_content.getChildCount(); j++) { View checkView = mRadioGroup_content.getChildAt(j); boolean ischeck; if (j == tab_postion) { ischeck = true; } else { ischeck = false; } checkView.setSelected(ischeck); } } /** * ViewPager的适配器 * @author zh * */ private class MainAdapter extends FragmentStatePagerAdapter { public MainAdapter(FragmentManager fm) { super(fm); // TODO Auto-generated constructor stub } // 每个条目返回的Fragment @Override public Fragment getItem(int position) { // TODO Auto-generated method stub return createFragment(position); } // 一共多少个条目 @Override public int getCount() { // TODO Auto-generated method stub return 5; } // 返回每个条目的标题 @Override public CharSequence getPageTitle(int position) { return "标签" + position; } } //private static Map<Integer, Fragment> mFragmentMap = new HashMap<Integer, Fragment>(); private static SparseArray<Fragment> mFragmentMap = new SparseArray<Fragment>(); public Fragment createFragment(int position) { // TODO Auto-generated method stub Fragment fragment = null; fragment = mFragmentMap.get(position);//在集合中去除Fragment if(fragment == null){//如果没在集合中取出来 需要重新创建 if (position == 0) { fragment = new MyFragmentOne(); } else if (position == 1) { fragment = new MyFragmentTwo(); } else if (position == 3) { fragment = new MThreeFragment(); } else if (position == 4) { fragment = new FourFragment(); } else { fragment = new OneFragment(); } if(fragment != null){ mFragmentMap.put(position, fragment);//把创建好的Fragment存放到集合中缓存起来 } } return fragment; }}
原标题:PagerTabStrip及自定义的PagerTab
关键词:ip
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。