使用viewpager adapter实现微信的滑动界面

来源：互联网发布：mac照片应用储存位置编辑：程序博客网时间：2024/05/18 13:23

1.布局文件（最上面是一个viewpager，下面是四个linearlayout水平排列）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <android.support.v4.view.ViewPager        android:id="@+id/vp"        android:layout_width="wrap_content"        android:layout_height="0dp"         android:layout_weight="1">    </android.support.v4.view.ViewPager>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal" >        <LinearLayout            android:id="@+id/lin_weixin"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical"            android:layout_marginBottom="5dp" >            <ImageView                android:id="@+id/lin_weixin_iv"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_weight="1"                android:src="@drawable/mk" />            <TextView                android:id="@+id/lin_weixin_tv"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textColor="#389B15"                android:text="微信" />        </LinearLayout>        <LinearLayout            android:id="@+id/lin_tongxun"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical" >            <ImageView               android:id="@+id/lin_tongxun_iv"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_weight="1"                android:src="@drawable/tg" />            <TextView                android:id="@+id/lin_tongxun_tv"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="通讯录" />        </LinearLayout>        <LinearLayout            android:id="@+id/lin_faxian"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical" >            <ImageView                android:id="@+id/lin_faxian_iv"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_weight="1"                android:src="@drawable/fg" />            <TextView                android:id="@+id/lin_faxian_tv"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="发现" />        </LinearLayout>        <LinearLayout            android:id="@+id/lin_wo"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical" >            <ImageView                android:id="@+id/lin_wo_iv"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_weight="1"                android:src="@drawable/pg" />            <TextView                 android:id="@+id/lin_wo_tv"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="我" />        </LinearLayout>    </LinearLayout></LinearLayout>

2.主activity

public class MainActivity extends Activity implements OnClickListener {    //定义一个集合，里面存放的是界面下方存放的四个布局文件个    private List<View> listvViews = new ArrayList<View>();    //定义一个数组    private LinearLayout[] linearLayouts = new LinearLayout[4];    //定义一个数组，里面存放的是界面下方四个布局的ID    private int[] linIDs = { R.id.lin_weixin, R.id.lin_tongxun,            R.id.lin_faxian, R.id.lin_wo };    //定义一个数据，用于存储图片    private ImageView[] imageView = new ImageView[4];    //定义一个数组，里面存放的是布局中需要的图片的id    private int[] imgIDs = { R.id.lin_weixin_iv, R.id.lin_tongxun_iv,            R.id.lin_faxian_iv, R.id.lin_wo_iv };    //定义一个数组，里面存放的是当四个布局被选中的时候显示的图片    private int[] imageK = { R.drawable.mk, R.drawable.tk, R.drawable.fk,            R.drawable.pk };    //定义一个数组，里面存放的是当四个布局未被选中的时候显示的图片    private int[] imageG = { R.drawable.mg, R.drawable.tg, R.drawable.fg,            R.drawable.pg };    //定义一个数组，里面存放的是布局中显示的文字    private TextView[] textViews = new TextView[4];    //定义一个数组，里面存放的是布局中显示的文字的ID    private int[] tvIDs = { R.id.lin_weixin_tv, R.id.lin_tongxun_tv,            R.id.lin_faxian_tv, R.id.lin_wo_tv };    private ViewPager viewPager;    private MyViewPagerAdapter myViewPagerAdapter;    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();        initData();        initViewOpers();        // 给viewpager绑定数据源        myViewPagerAdapter = new MyViewPagerAdapter(listvViews);        viewPager.setAdapter(myViewPagerAdapter);    }    private void initViewOpers() {        viewPager.setOnPageChangeListener(new OnPageChangeListener() {            public void onPageSelected(int arg0) {            //当滑动viewpager的时候，下面的图片和字体随之改变                changeColor(arg0);            }            public void onPageScrolled(int arg0, float arg1, int arg2) {            }            public void onPageScrollStateChanged(int arg0) {            }        });    }    private void initView() {        viewPager = (ViewPager) findViewById(R.id.vp);        //获取每一个布局控件并给每一个布局设置点击事件        for (int i = 0; i < linIDs.length; i++) {            linearLayouts[i] = (LinearLayout) findViewById(linIDs[i]);            linearLayouts[i].setOnClickListener(MainActivity.this);        }        //获取图片空间        for (int i = 0; i < imgIDs.length; i++) {            imageView[i] = (ImageView) findViewById(imgIDs[i]);        }        //获取textview控件        for (int i = 0; i < textViews.length; i++) {            textViews[i] = (TextView) findViewById(tvIDs[i]);        }    }    private void initData() {        //使用布局填充器获取布局（每一个布局里面显示的是我们看到的具体内容）        View view1 = getLayoutInflater().inflate(R.layout.weixin_item, null);        View view2 = getLayoutInflater().inflate(R.layout.tongxun_item, null);        View view3 = getLayoutInflater().inflate(R.layout.faxian_item, null);        View view4 = getLayoutInflater().inflate(R.layout.wo_item, null);        //将每一个局部添加到集合中        listvViews.add(view1);        listvViews.add(view2);        listvViews.add(view3);        listvViews.add(view4);    }    public void onClick(View v) {    //当点击下面布局的时候图片和文字随之改变        switch (v.getId()) {        case R.id.lin_weixin:            changeColor(0);            viewPager.setCurrentItem(0);            break;        case R.id.lin_tongxun:            changeColor(1);            viewPager.setCurrentItem(1);            break;        case R.id.lin_faxian:            changeColor(2);            viewPager.setCurrentItem(2);            break;        case R.id.lin_wo:            changeColor(3);            viewPager.setCurrentItem(3);            break;        }    }    // 更改图片和textview中的字体颜色（选择的图片和字体都是#389B15，没有选择的是#6D6D6D）    private void changeColor(int index) {        for (int i = 0; i < 4; i++) {            if (index == i) {                textViews[index].setTextColor(Color.parseColor("#389B15"));                imageView[i].setImageResource(imageK[i]);            } else {                textViews[i].setTextColor(Color.parseColor("#6D6D6D"));                imageView[i].setImageResource(imageG[i]);            }        }    }}

3.给viewpager设置适配器

public class MyViewPagerAdapter extends PagerAdapter {    private List<View> listvViews = null;    private Context context;    public MyViewPagerAdapter(List<View> listvViews) {        super();        this.listvViews = listvViews;    }    public int getCount() {        return listvViews.size();    }    public boolean isViewFromObject(View arg0, Object arg1) {        return arg0 == arg1;    }    public void destroyItem(ViewGroup container, int position, Object object) {        // super.destroyItem(container, position, object);        //这一步必须写（用于移除viewpager）        container.removeView(listvViews.get(position));    }    public Object instantiateItem(ViewGroup container, int position) {        View view = listvViews.get(position);        //container指的就是viewpager对象        container.addView(listvViews.get(position));        return view;    }}

这里写图片描述

0 0