微信效果:ViewPager+按钮 联动方案
具体原理:
布局三段组合方案
贴码分析:
1.初始化控件:
图片按钮
线性布局
布局数组填充
多面视图适配器
2.加点击事件: 线性布局点击事件: 暗色,切换ViewPager的下标,点亮 当前图片按钮背景 (知道当前的下标场景)
多面视图切换事件: 暗色,得到ViewPager的下标,switch判断点亮图按钮 (不知道当前下标场景)
package com.imooc.tab01;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;
public class MainActivity extends Activity implements OnClickListener {
private ViewPager mViewPager; //多面视图
private PagerAdapter mAdapter; //适配器
private List<View> mViews = new ArrayList<View>(); //视图集合
private LinearLayout mTab1; //线性布局
private LinearLayout mTab2;
private LinearLayout mTab3;
private LinearLayout mTab4;
private ImageButton mBut1; //图片按钮
private ImageButton mBut2;
private ImageButton mBut3;
private ImageButton mBut4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView(); /*【初始化控件】*/
initEvents(); /*【加入事件监听】*/
}
private void initView() {
mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
// 线性布局
mTab1 = (LinearLayout) findViewById(R.id.id_tab_weixin);
mTab2 = (LinearLayout) findViewById(R.id.id_tab_frd);
mTab3 = (LinearLayout) findViewById(R.id.id_tab_address);
mTab4 = (LinearLayout) findViewById(R.id.id_tab_settings);
// 图片按钮
mBut1 = (ImageButton) findViewById(R.id.id_tab_weixin_img);
mBut2 = (ImageButton) findViewById(R.id.id_tab_frd_img);
mBut3 = (ImageButton) findViewById(R.id.id_tab_address_img);
mBut4 = (ImageButton) findViewById(R.id.id_tab_settings_img);
//填充数组
LayoutInflater mInflater = LayoutInflater.from(this);
View tab01 = mInflater.inflate(R.layout.tab01, null);
View tab02 = mInflater.inflate(R.layout.tab02, null);
View tab03 = mInflater.inflate(R.layout.tab03, null);
View tab04 = mInflater.inflate(R.layout.tab04, null);
mViews.add(tab01);
mViews.add(tab02);
mViews.add(tab03);
mViews.add(tab04);
//适配
mViewPager.setAdapter(new mAdapter());
}
private void initEvents() {
mTab1.setOnClickListener(this);
mTab2.setOnClickListener(this);
mTab3.setOnClickListener(this);
mTab4.setOnClickListener(this);
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
int currentItem = mViewPager.getCurrentItem();
resetImg();
switch (currentItem) {
case 0:
mBut1.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
mBut2.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
mBut3.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
mBut4.setImageResource(R.drawable.tab_settings_pressed);
break;
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
@Override
public void onClick(View v) {
resetImg();
switch (v.getId()) {
case R.id.id_tab_weixin:
mViewPager.setCurrentItem(0);
mBut1.setImageResource(R.drawable.tab_weixin_pressed);
break;
case R.id.id_tab_frd:
mViewPager.setCurrentItem(1);
mBut2.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case R.id.id_tab_address:
mViewPager.setCurrentItem(2);
mBut3.setImageResource(R.drawable.tab_address_pressed);
break;
case R.id.id_tab_settings:
mViewPager.setCurrentItem(3);
mBut4.setImageResource(R.drawable.tab_settings_pressed);
break;
}
}
/**
* 内部类多面适配
* */
class mAdapter extends 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 = 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();
}
}
/**
* 将所有的图片切换为暗色的
*/
private void resetImg() {
mBut1.setImageResource(R.drawable.tab_weixin_normal);
mBut2.setImageResource(R.drawable.tab_find_frd_normal);
mBut3.setImageResource(R.drawable.tab_address_normal);
mBut4.setImageResource(R.drawable.tab_settings_normal);
}
}