ViewPager作为Tap的应用
2015-01-23 本文已影响300人
陈利健
布局文件
布局文件中需要注意的地方：
1.主activity布局文件中，善用weight属性使ViewPager填充满屏幕
<include layout="@layout/top" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:flipInterval="30"
android:persistentDrawingCache="animation">
</android.support.v4.view.ViewPager>
<include layout="@layout/bottom" />
2.底部由4个LinearLayout占据，ImageButton的background属性要制定白色，两个控件要指定为wrap_content，clickabale属性设置为flase是为了不让button阻扰LinearLayout的监听事件，因为控件的优先级比其父容器高。
<LinearLayout
android:id="@+id/tab_1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageButton
android:id="@+id/tab_1_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@drawable/tab_weixin_pressed" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="one"
android:textColor="#ffffff"
android:textSize="12sp"
android:textStyle="bold" />
</LinearLayout>
3.主代码：
initView方法：
1.find出4个tab的实例，4个tab中ImageButton的实例，
2.动态加载4个布局add进View集合，
3.new一个ViewAdapter（4个方法格式基本通用，功能就是对View集合的各种设置，加载，销毁，选择，数量），
4.给ViewPager适配ViewAdapter
initEvent方法：
1.给4个tab（LinearLayout）设置监听事件（功能：翻页，变色）
2.给ViewPager添加监听器，注意代码中标注的细节（功能：变色）
public class MainActivity extends Activity implements OnClickListener{
private ViewPager mViewPager;
private PagerAdapter mAdapter;
private List<View> mViews = new ArrayList<View>();
//底部4个TAB
private LinearLayout mTab1;
private LinearLayout mTab2;
private LinearLayout mTab3;
private LinearLayout mTab4;
private ImageButton mTab1Img;
private ImageButton mTab2Img;
private ImageButton mTab3Img;
private ImageButton mTab4Img;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initEvent();
setSelect(1);
}
private void initView() {
mViewPager = (ViewPager) findViewById(R.id.viewpager);
//底部的4个tab区域，需要设置监听事件的
mTab1 = (LinearLayout) findViewById(R.id.tab_1);
mTab2 = (LinearLayout) findViewById(R.id.tab_2);
mTab3 = (LinearLayout) findViewById(R.id.tab_3);
mTab4 = (LinearLayout) findViewById(R.id.tab_4);
//底部的4个ImageButton，需要改变其背景图片
mTab1Img = (ImageButton) findViewById(R.id.tab_1_btn);
mTab2Img = (ImageButton) findViewById(R.id.tab_2_btn);
mTab3Img = (ImageButton) findViewById(R.id.tab_3_btn);
mTab4Img = (ImageButton) findViewById(R.id.tab_4_btn);
//装载View进集合，为ViewAdapter准备
LayoutInflater inflater = LayoutInflater.from(this);
View tab1 = inflater.inflate(R.layout.tab1, null);
View tab2 = inflater.inflate(R.layout.tab2, null);
View tab3 = inflater.inflate(R.layout.tab3, null);
View tab4 = inflater.inflate(R.layout.tab4, null);
mViews.add(tab1);
mViews.add(tab2);
mViews.add(tab3);
mViews.add(tab4);
//创建ViewAdapter，此处我直接new一个
mAdapter = new PagerAdapter() {
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mViews.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
//遍历View集合，加载所有view
View view = mViews.get(position);
container.addView(view);
return view;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return (arg0 == arg1);
}
@Override
public int getCount() {
return mViews.size();
}
};
//创建好了PagerAdapter就可以适配给ViewPager了
mViewPager.setAdapter(mAdapter);
}
private void initEvent() {
//给4个Tab设置监听事件
//注意此处要给layout添加监听事件，而不是ImageButton。但如果点击了IamageButton的话，点击事件只传给ImageButton，不会外传给LinearLayout，所以再布局里要给ImageButton加上点击无效属性
mTab1.setOnClickListener(this);
mTab2.setOnClickListener(this);
mTab3.setOnClickListener(this);
mTab4.setOnClickListener(this);
//给ViewPager加载监听器，改变ImageButon颜色
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
int currentItem = mViewPager.getCurrentItem();
initImg();
switch (currentItem) {
case 0:
mTab1Img.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
mTab2Img.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
mTab3Img.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
mTab4Img.setImageResource(R.drawable.tab_settings_pressed);
break;
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
//重写Tab的监听事件
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.tab_1:
setSelect(1);
break;
case R.id.tab_2:
setSelect(2);
break;
case R.id.tab_3:
setSelect(3);
break;
case R.id.tab_4:
setSelect(4);
break;
default:
break;
}
}
//将方法抽取出来（根据点击翻页，以及变换TabImage颜色）
private void setSelect(int i) {
initImg();
switch (i) {
case 1:
mViewPager.setCurrentItem(0);
mTab1Img.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 2:
mViewPager.setCurrentItem(1);
mTab2Img.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 3:
mViewPager.setCurrentItem(2);
mTab3Img.setImageResource(R.drawable.tab_address_pressed);
break;
case 4:
mViewPager.setCurrentItem(3);
mTab4Img.setImageResource(R.drawable.tab_settings_pressed);
break;
}
}
//将所有ImageButton的源图片切换为暗色，主意不是backgroundResource
private void initImg() {
mTab1Img.setImageResource(R.drawable.tab_weixin_normal);
mTab2Img.setImageResource(R.drawable.tab_find_frd_normal);
mTab3Img.setImageResource(R.drawable.tab_address_normal);
mTab4Img.setImageResource(R.drawable.tab_settings_normal);
}
}
