ViewPager+Fragment的结合使用，实现QQ界面的理解

ViewPager+Fragment的结合使用，实现QQ界面的理解

2

作者：zb2276190更新于 08月09日访问（5692）评论（45）

效果如图：

实现代码解析：
MainActivity.java
1.引入布局文件
2.4个标题控件的初始化以及点击事件的监听设置
3.viewpager控件的初始化，获取Fragment对象并保存在容器中，设置viewpager的适配器和监听
4.viewpager的监听OnPageChangeListener方法的实现，主要是标题栏下的指示横线的移动操作。

  1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193

package com.aven.qqdemo;import java.util.ArrayList;import java.util.List;import android.content.res.Resources;import android.os.Bundle;import android.os.Parcelable;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.app.FragmentTransaction;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.DisplayMetrics;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.Window;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.ImageView;import android.widget.TextView;import com.demo.R;/** * 参考原作者D.Winter基础， *  * @author avenwu * [e-mail] *  */public class MainActivity extends FragmentActivity {    private static final String TAG = "MainActivity";    private ViewPager mPager;    private ArrayList<Fragment> fragmentsList;    private ImageView ivBottomLine;    private TextView tvTabActivity, tvTabGroups, tvTabFriends, tvTabChat;    private int currIndex = 0;    private int bottomLineWidth;    private int offset = 0;    private int position_one;    private int position_two;    private int position_three;    private Resources resources;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.main);        resources = getResources();        InitWidth();        InitTextView();        InitViewPager();    }    private void InitTextView() {        tvTabActivity = (TextView) findViewById(R.id.tv_tab_activity);        tvTabGroups = (TextView) findViewById(R.id.tv_tab_groups);        tvTabFriends = (TextView) findViewById(R.id.tv_tab_friends);        tvTabChat = (TextView) findViewById(R.id.tv_tab_chat);        tvTabActivity.setOnClickListener(new MyOnClickListener(0));        tvTabGroups.setOnClickListener(new MyOnClickListener(1));        tvTabFriends.setOnClickListener(new MyOnClickListener(2));        tvTabChat.setOnClickListener(new MyOnClickListener(3));    }    private void InitViewPager() {        mPager = (ViewPager) findViewById(R.id.vPager);        fragmentsList = new ArrayList<Fragment>();        Fragment activityfragment = TestFragment.newInstance("Hello Activity.");        Fragment groupFragment = TestFragment.newInstance("Hello Group.");        Fragment friendsFragment=TestFragment.newInstance("Hello Friends.");        Fragment chatFragment=TestFragment.newInstance("Hello Chat.");        fragmentsList.add(activityfragment);        fragmentsList.add(groupFragment);        fragmentsList.add(friendsFragment);        fragmentsList.add(chatFragment);        mPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList));        mPager.setCurrentItem(0);        mPager.setOnPageChangeListener(new MyOnPageChangeListener());    }    private void InitWidth() {        ivBottomLine = (ImageView) findViewById(R.id.iv_bottom_line);        bottomLineWidth = ivBottomLine.getLayoutParams().width;        Log.d(TAG, "cursor imageview width=" + bottomLineWidth);        DisplayMetrics dm = new DisplayMetrics();        getWindowManager().getDefaultDisplay().getMetrics(dm);        int screenW = dm.widthPixels;        offset = (int) ((screenW / 4.0 - bottomLineWidth) / 2);        Log.i("MainActivity", "offset=" + offset);        position_one = (int) (screenW / 4.0);        position_two = position_one * 2;        position_three = position_one * 3;    }    public class MyOnClickListener implements View.OnClickListener {        private int index = 0;        public MyOnClickListener(int i) {            index = i;        }        @Override        public void onClick(View v) {            mPager.setCurrentItem(index);        }    };    public class MyOnPageChangeListener implements OnPageChangeListener {        @Override        public void onPageSelected(int arg0) {            Animation animation = null;            switch (arg0) {            case 0:                if (currIndex == 1) {                    animation = new TranslateAnimation(position_one, 0, 0, 0);                    tvTabGroups.setTextColor(resources.getColor(R.color.lightwhite));                } else if (currIndex == 2) {                    animation = new TranslateAnimation(position_two, 0, 0, 0);                    tvTabFriends.setTextColor(resources.getColor(R.color.lightwhite));                } else if (currIndex == 3) {                    animation = new TranslateAnimation(position_three, 0, 0, 0);                    tvTabChat.setTextColor(resources.getColor(R.color.lightwhite));                }                tvTabActivity.setTextColor(resources.getColor(R.color.white));                break;            case 1:                if (currIndex == 0) {                    animation = new TranslateAnimation(0, position_one, 0, 0);                    tvTabActivity.setTextColor(resources.getColor(R.color.lightwhite));                } else if (currIndex == 2) {                    animation = new TranslateAnimation(position_two, position_one, 0, 0);                    tvTabFriends.setTextColor(resources.getColor(R.color.lightwhite));                } else if (currIndex == 3) {                    animation = new TranslateAnimation(position_three, position_one, 0, 0);                    tvTabChat.setTextColor(resources.getColor(R.color.lightwhite));                }                tvTabGroups.setTextColor(resources.getColor(R.color.white));                break;            case 2:                if (currIndex == 0) {                    animation = new TranslateAnimation(0, position_two, 0, 0);                    tvTabActivity.setTextColor(resources.getColor(R.color.lightwhite));                } else if (currIndex == 1) {                    animation = new TranslateAnimation(position_one, position_two, 0, 0);                    tvTabGroups.setTextColor(resources.getColor(R.color.lightwhite));                } else if (currIndex == 3) {                    animation = new TranslateAnimation(position_three, position_two, 0, 0);                    tvTabChat.setTextColor(resources.getColor(R.color.lightwhite));                }                tvTabFriends.setTextColor(resources.getColor(R.color.white));                break;            case 3:                if (currIndex == 0) {                    animation = new TranslateAnimation(0, position_three, 0, 0);                    tvTabActivity.setTextColor(resources.getColor(R.color.lightwhite));                } else if (currIndex == 1) {                    animation = new TranslateAnimation(position_one, position_three, 0, 0);                    tvTabGroups.setTextColor(resources.getColor(R.color.lightwhite));                } else if (currIndex == 2) {                    animation = new TranslateAnimation(position_two, position_three, 0, 0);                    tvTabFriends.setTextColor(resources.getColor(R.color.lightwhite));                }                tvTabChat.setTextColor(resources.getColor(R.color.white));                break;            }            currIndex = arg0;            animation.setFillAfter(true);            animation.setDuration(300);            ivBottomLine.startAnimation(animation);        }        @Override        public void onPageScrolled(int arg0, float arg1, int arg2) {        }        @Override        public void onPageScrollStateChanged(int arg0) {        }    }}

TestFragment
获取Fragment对应的布局，并且设置相应的参数。

 1 2 3 4 5 6 7 8 9101112131415161718192021222324252627282930313233343536373839404142434445464748495051

package com.aven.qqdemo;import com.demo.R;import android.os.Bundle;import android.support.v4.app.Fragment;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;public class TestFragment extends Fragment {    private static final String TAG = "TestFragment";    private String hello;// = "hello android";    private String defaultHello = "default value";    static TestFragment newInstance(String s) {        TestFragment newFragment = new TestFragment();        Bundle bundle = new Bundle();        bundle.putString("hello", s);        newFragment.setArguments(bundle);        return newFragment;    }    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        Log.d(TAG, "TestFragment-----onCreate");        Bundle args = getArguments();        hello = args != null ? args.getString("hello") : defaultHello;    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {        Log.d(TAG, "TestFragment-----onCreateView");        View view = inflater.inflate(R.layout.lay1, container, false);        TextView viewhello = (TextView) view.findViewById(R.id.tv_hello);        viewhello.setText(hello);        return view;    }    @Override    public void onDestroy() {        super.onDestroy();        Log.d(TAG, "TestFragment-----onDestroy");    }}

MyFragmentPagerAdapter
对包含Fragment对象的容器进行适配。

 1 2 3 4 5 6 7 8 9101112131415161718192021222324252627282930313233343536

package com.aven.qqdemo;import java.util.ArrayList;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;public class MyFragmentPagerAdapter extends FragmentPagerAdapter {    private ArrayList<Fragment> fragmentsList;    public MyFragmentPagerAdapter(FragmentManager fm) {        super(fm);    }    public MyFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> fragments) {        super(fm);        this.fragmentsList = fragments;    }    @Override    public int getCount() {        return fragmentsList.size();    }    @Override    public Fragment getItem(int arg0) {        return fragmentsList.get(arg0);    }    @Override    public int getItemPosition(Object object) {        return super.getItemPosition(object);    }}

代码下载地址

http://code.eoe.cn/1898.html

参考：

http://www.apkbus.com/android-88510-1-1.html