横向滑动的列表
需要适配器Adapter适配每项Item视图。
查看类ViewPager结构。
//继承ViewGroup
public class ViewPager extends ViewGroup
//设置适配器对象PagerAdapter
public void setAdapter(PagerAdapter adapter);
查看类PagerAdapter结构。
//抽象类
public abstract class PagerAdapter
适配器类需要继承抽象类PagerAdapter，才能适配ViewPager视图。
了解了ViewPager的使用，下面开始Demo之旅：
先来看看项目需求效果图
流量使用详情效果图
布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/main_bg"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="101px"
android:background="@color/blue">
<ImageView
android:id="@+id/title_back_img"
android:layout_width="15px"
android:layout_height="27px"
android:layout_centerVertical="true"
android:layout_marginLeft="27px"
android:layout_marginTop="36px"
android:src="@drawable/ic_back" />
<TextView
android:id="@+id/tv_top_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="26px"
android:layout_marginTop="36px"
android:layout_toRightOf="@id/title_back_img"
android:gravity="center"
android:text="@string/flow_use_detailed"
android:textColor="#545454"
android:textSize="31px" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="90px">
<ImageView
android:id="@+id/tab_select_bg"
android:layout_width="fill_parent"
android:layout_height="60px"
android:layout_marginTop="30px"
android:gravity="center_horizontal"
android:src="#FF6EB4" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="90px"
android:gravity="center">
<TextView
android:id="@+id/tab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30px"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="@string/top_flow_month"
android:textColor="#808080" />
<TextView
android:id="@+id/tab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30px"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="@string/top_flow_weekly"
android:textColor="#808080" />
<TextView
android:id="@+id/tab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30px"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="@string/top_flow_day"
android:textColor="#808080" />
</LinearLayout>
</RelativeLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
适配器类
public class TabTopFlowAdapter extends PagerAdapter {
private List<View> mListViews;
public TabTopFlowAdapter(List<View> mListViews) {
this.mListViews = mListViews;
}
@Override
public void destroyItem(ViewGroup arg0, int arg1, Object arg2) {
arg0.removeView(mListViews.get(arg1));
}
@Override
public Parcelable saveState() {
return null;
}
@Override
public void startUpdate(ViewGroup container) {
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mListViews.get(position), 0);
return mListViews.get(position);
}
@Override
public void finishUpdate(ViewGroup container) {
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == (object);
}
@Override
public int getCount() {
if (mListViews != null) {
return mListViews.size();
}
return 0;
}
Activity类
public class ActivityDataFlowUsedDetailed extends BaseActivity implements View.OnClickListener {
private static final int PAGE1 = 0;// 页面1
private static final int PAGE2 = 1;// 页面2
private static final int PAGE3 = 2;// 页面3
private ImageView cursor;// 标题背景图片
private List<View> mListViews;// Tab页面
private ViewPager mPagerView;
private TextView tab1;
private TextView tab2;
private TextView tab3;
private int currentIndex = PAGE1;//当前选中的是页面1
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_data_flow_used_detailed);
initUI();
}
private void initUI() {
mPagerView = (ViewPager) findViewById(R.id.viewPager);
LayoutInflater inflater = LayoutInflater.from(this);
View lay1 = inflater.inflate(R.layout.tab_top_flow_month, null);
View lay2 = inflater.inflate(R.layout.tab_top_flow_weekly, null);
View lay3 = inflater.inflate(R.layout.tab_top_flow_day, null);
mListViews = new ArrayList<>();
mListViews.add(lay1);
mListViews.add(lay2);
mListViews.add(lay3);
mPagerView.setAdapter(new TabTopFlowAdapter(mListViews));
mPagerView.addOnPageChangeListener(new TabPagerChangeLister());
tab1 = (TextView) findViewById(R.id.tab1);
tab2 = (TextView) findViewById(R.id.tab2);
tab3 = (TextView) findViewById(R.id.tab3);
tab1.setOnClickListener(this);
tab2.setOnClickListener(this);
tab3.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.tab1:
mPagerView.setCurrentItem(PAGE1);
break;
case R.id.tab2:
mPagerView.setCurrentItem(PAGE2);
break;
case R.id.tab3:
mPagerView.setCurrentItem(PAGE3);
break;
default:
break;
}
}
/**
* 页面切换监听
*/
class TabPagerChangeLister implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
@Override
public void onPageSelected(int position) {
Animation animation = null;
switch (position) {
case PAGE1:
if (currentIndex == PAGE2) {
} else if (currentIndex == PAGE3) {
}
break;
case PAGE2:
if (currentIndex == PAGE1) {
} else if (currentIndex == PAGE3) {
}
break;
case PAGE3:
if (currentIndex == PAGE1) {
} else if (currentIndex == PAGE2) {
}
break;
default:
break;
}
}
}
}
Tab选中效果
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
//填充的颜色
<solid android:color="@color/app_btn_install" />
<size
android:width="40dp"
android:height="10dp"/>
</shape>
效果图
被选中效果图
