ViewPager+Fragment实现

在网上也看了一下别人写的ViewPager+Fragment实现的实现方法，感觉晕晕的，而且一般情况下都是在修改覆盖层的时候得到屏幕宽度，然后计算偏移，这里提供另一种思路供各位参考。首先先上效果图。

大家别在意其他内容，我们只看ViewPager+Fragment的实现
首先是activity_main.xml的代码：

<?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:orientation="vertical">    <android.support.v4.view.ViewPager        android:id="@+id/act_main_vp"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" />    <View        android:layout_width="match_parent"        android:layout_height="1dp"        android:layout_marginBottom="3dp"        android:background="#888888" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:orientation="horizontal">        <LinearLayout            android:id="@+id/act_main_lin1"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical">            <ImageView                android:id="@+id/act_main_img1"                android:layout_width="20dp"                android:layout_height="20dp"                android:src="@mipmap/tuijianon" />            <TextView                android:id="@+id/act_main_tv1"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_margin="3dp"                android:gravity="center"                android:text="推荐"                android:textColor="@color/orange"                android:textSize="13sp" />        </LinearLayout>        <LinearLayout            android:id="@+id/act_main_lin2"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical">            <ImageView                android:id="@+id/act_main_img2"                android:layout_width="20dp"                android:layout_height="20dp"                android:src="@mipmap/faxianoff" />            <TextView                android:id="@+id/act_main_tv2"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_margin="3dp"                android:gravity="center"                android:text="发现"                android:textColor="@color/grey"                android:textSize="13sp" />        </LinearLayout>        <LinearLayout            android:id="@+id/act_main_lin3"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:gravity="center"            android:orientation="vertical">            <ImageView                android:id="@+id/act_main_img3"                android:layout_width="22dp"                android:layout_height="22dp"                android:src="@mipmap/wodeoff" />            <TextView                android:id="@+id/act_main_tv3"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_margin="3dp"                android:gravity="center"                android:text="我的"                android:textColor="@color/grey"                android:textSize="13sp" />        </LinearLayout>    </LinearLayout></LinearLayout>

其他的三个Fragement的布局比较简单我们就不展示了，接下来我们定义了三个Fragement，并在MainActivity中声明，MainActivity代码如下：

package com.adm.dictionary.dictionary;import android.graphics.Color;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;import com.adm.dictionary.base.BaseActivity;import java.util.ArrayList;import java.util.List;public class MainActivity extends BaseActivity implements View.OnClickListener {    private LinearLayout lin1, lin2, lin3;    private ViewPager viewpager;    private ImageView imgs[];    private TextView tvs[];    private int imgId[] = new int[]{R.mipmap.tuijianon, R.mipmap.faxianon, R.mipmap.wodeon, R.mipmap.tuijianoff, R.mipmap.faxianoff, R.mipmap.wodeoff};    private List<Fragment> fragments = new ArrayList<>();    private MyPagerAdapter pagerAdapter;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();        setListener();    }    /**     * 设置监听事件     */    private void setListener() {        lin1.setOnClickListener(this);        lin2.setOnClickListener(this);        lin3.setOnClickListener(this);    }    /**     * 初始化控件     */    @Override    public void initView() {        lin1 = findLinById(R.id.act_main_lin1);        lin2 = findLinById(R.id.act_main_lin2);        lin3 = findLinById(R.id.act_main_lin3);        ImageView img1 = findImageViewById(R.id.act_main_img1);        ImageView img2 = findImageViewById(R.id.act_main_img2);        ImageView img3 = findImageViewById(R.id.act_main_img3);        TextView tv1 = findTextViewById(R.id.act_main_tv1);        TextView tv2 = findTextViewById(R.id.act_main_tv2);        TextView tv3 = findTextViewById(R.id.act_main_tv3);        viewpager = (ViewPager) findViewById(R.id.act_main_vp);        fragments.add(new TuijianFragment());        fragments.add(new FaXianFragment());        fragments.add(new WoDeFragment());        imgs = new ImageView[]{img1, img2, img3};        tvs = new TextView[]{tv1, tv2, tv3};        pagerAdapter = new MyPagerAdapter(getSupportFragmentManager());        viewpager.setAdapter(pagerAdapter);        viewpager.setOffscreenPageLimit(3);        /**         * 设置ViewPager的滑动事件         */        viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                setItem(position);            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }    /**     * 设置监听事件     *     * @param v     */    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.act_main_lin1:                setItem(0);                viewpager.setCurrentItem(0);                break;            case R.id.act_main_lin2:                setItem(1);                viewpager.setCurrentItem(1);                break;            case R.id.act_main_lin3:                setItem(2);                viewpager.setCurrentItem(2);                break;        }    }    /**     * 设置显示的页面     *     * @param index 下标     */    private void setItem(int index) {        for (int i = 0; i < 3; i++) {            if (i == index) {                imgs[i].setImageResource(imgId[i]);                tvs[i].setTextColor(Color.parseColor("#D74B25"));            } else {                imgs[i].setImageResource(imgId[i + 3]);                tvs[i].setTextColor(Color.parseColor("#515151"));            }        }    }    class MyPagerAdapter extends FragmentPagerAdapter {        public MyPagerAdapter(FragmentManager fm) {            super(fm);        }        @Override        public Fragment getItem(int position) {            return fragments.get(position);        }        @Override        public int getCount() {            return 3;        }    }}

大家可以看到这里我们使用了setItem()这个函数进行图片的覆盖。并在

@Override
public void onPageSelected(int position) {
setItem(position);
}
中使用了它。这样就是实现了覆盖图片的切换。