android项目剖解之ViewPager+Fragment 实现tabhost效果

ccccshq 2015-05-09

展开全文

项目中需要用到底栏导航栏，滑动或者点击会切换上面的视图，如图：

这个效果使用Viewpager+Fragmen实现是主流方案，加入你之前对fragment不太了解，可以先看android之Fragment（官网资料翻译）

整个文件如下：

好了废话少说，先上布局文件：main.xml

[java] view plain copy print ?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas./apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="@+id/vPager"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1.0"
android:background="#000000"
android:flipInterval="30"
android:persistentDrawingCache="animation" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@color/coral"
android:paddingBottom="5dip"
android:paddingTop="10dip" >
<TextView
android:id="@+id/tv_tab_1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="@string/tab_1"
android:textColor="@color/white"
android:textSize="18sp" />
<TextView
android:id="@+id/tv_tab_2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="@string/tab_2"
android:textColor="@color/lightwhite"
android:textSize="18sp" />
<TextView
android:id="@+id/tv_tab_3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="@string/tab_3"
android:textColor="@color/lightwhite"
android:textSize="18sp" />
<TextView
android:id="@+id/tv_tab_4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="@string/tab_4"
android:textColor="@color/lightwhite"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical"
android:paddingBottom="3dip" >
<ImageView
android:id="@+id/iv_bottom_line"
android:layout_width="40dip"
android:layout_height="2dip"
android:layout_marginLeft="20dip"
android:scaleType="matrix"
android:src="#fff" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

其实上面的整个布局非常简单，就是ViewPager+LinearLayout，写完mian后，后面写lay1，lay2，lay3等文件，都只是普通布局文件，就不贴代码了，回头可以下载代码查看。

接下来是 MainActivity.java

[java] view plain copy print ?

package com.vatty.activity;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
import android.content.res.Resources;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
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;
/**
*
* MainActivity.java
* @author mayi
* 2014-8-2 下午11:51:28
*
*/
public class MainActivity extends FragmentActivity {
private static final String TAG = "MainActivity";
private ViewPager mPager;
private ArrayList<Fragment> fragmentsList;
private ImageView ivBottomLine;
private TextView tv_tab_1, tv_tab_2, tv_tab_3, tv_tab_4;
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() {
tv_tab_1 = (TextView) findViewById(R.id.tv_tab_1);
tv_tab_2 = (TextView) findViewById(R.id.tv_tab_2);
tv_tab_3 = (TextView) findViewById(R.id.tv_tab_3);
tv_tab_4 = (TextView) findViewById(R.id.tv_tab_4);
tv_tab_1.setOnClickListener(new MyOnClickListener(0));
tv_tab_2.setOnClickListener(new MyOnClickListener(1));
tv_tab_3.setOnClickListener(new MyOnClickListener(2));
tv_tab_4.setOnClickListener(new MyOnClickListener(3));
}
/**
* 初始化ViewPager
*/
private void InitViewPager() {
//获取布局中的viewpager控件
mPager = (ViewPager) findViewById(R.id.vPager);
//Fragment容器
fragmentsList = new ArrayList<Fragment>();
Map<String, Object> paramMap = new HashMap<String, Object>();
paramMap.put("userid","小洪");
paramMap.put("age",23);
Map<String, Object> paramMap2 = new HashMap<String, Object>();
paramMap2.put("userid","vatty");
paramMap2.put("age",24);
Map<String, Object> paramMap3 = new HashMap<String, Object>();
paramMap3.put("userid","小明");
paramMap3.put("age",25);
Map<String, Object> paramMap4 = new HashMap<String, Object>();
paramMap4.put("userid","hongshengpeng.com");
paramMap4.put("age",26);
//生成每个tab对应的fragment
Fragment activityfragment = TestFragment.newInstance("Hello Activity.",paramMap);
Fragment groupFragment = TestFragment.newInstance("Hello Group.",paramMap2);
Fragment friendsFragment=TestFragment.newInstance("Hello Friends.",paramMap3);
Fragment chatFragment=TestFragment.newInstance("Hello Chat.",paramMap4);
//添加到Fragment容器中
fragmentsList.add(activityfragment);
fragmentsList.add(groupFragment);
fragmentsList.add(friendsFragment);
fragmentsList.add(chatFragment);
//给ViewPager添加适配器
mPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList));
//设置默认的视图为第0个
mPager.setCurrentItem(0);
//给Viewpager添加监听事件
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;
//屏幕分4份，计算出每份中白色滑条外的间隔距离
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;
}
/**
* 自定义监听类如此定义监听类，可以实现共用。
* @author Administrator
*
*/
public class MyOnClickListener implements View.OnClickListener {
private int index = 0;
public MyOnClickListener(int i) {
index = i;
}
@Override
public void onClick(View v) {
//设置ViewPager的当前view
mPager.setCurrentItem(index);
}
};
/**
* 页面滑动监听
* @author Administrator
*
*/
public class MyOnPageChangeListener implements OnPageChangeListener {
@Override
public void onPageSelected(int index) {
//动画
Animation animation = null;
switch (index) {
case 0:
if (currIndex == 1) {
//代码生成滑动动画
animation = new TranslateAnimation(position_one, 0, 0, 0);
//改变tv_tab_2的颜色值，使其没有选中的效果
tv_tab_2.setTextColor(resources.getColor(R.color.lightwhite));
} else if (currIndex == 2) {
animation = new TranslateAnimation(position_two, 0, 0, 0);
tv_tab_3.setTextColor(resources.getColor(R.color.lightwhite));
} else if (currIndex == 3) {
animation = new TranslateAnimation(position_three, 0, 0, 0);
tv_tab_4.setTextColor(resources.getColor(R.color.lightwhite));
}
//改变tv_tab_1的颜色值，使其有选中的效果
tv_tab_1.setTextColor(resources.getColor(R.color.white));
break;
case 1:
if (currIndex == 0) {
animation = new TranslateAnimation(0, position_one, 0, 0);
tv_tab_1.setTextColor(resources.getColor(R.color.lightwhite));
} else if (currIndex == 2) {
animation = new TranslateAnimation(position_two, position_one, 0, 0);
tv_tab_3.setTextColor(resources.getColor(R.color.lightwhite));
} else if (currIndex == 3) {
animation = new TranslateAnimation(position_three, position_one, 0, 0);
tv_tab_4.setTextColor(resources.getColor(R.color.lightwhite));
}
tv_tab_2.setTextColor(resources.getColor(R.color.white));
break;
case 2:
if (currIndex == 0) {
animation = new TranslateAnimation(0, position_two, 0, 0);
tv_tab_1.setTextColor(resources.getColor(R.color.lightwhite));
} else if (currIndex == 1) {
animation = new TranslateAnimation(position_one, position_two, 0, 0);
tv_tab_2.setTextColor(resources.getColor(R.color.lightwhite));
} else if (currIndex == 3) {
animation = new TranslateAnimation(position_three, position_two, 0, 0);
tv_tab_4.setTextColor(resources.getColor(R.color.lightwhite));
}
tv_tab_3.setTextColor(resources.getColor(R.color.white));
break;
case 3:
if (currIndex == 0) {
animation = new TranslateAnimation(0, position_three, 0, 0);
tv_tab_1.setTextColor(resources.getColor(R.color.lightwhite));
} else if (currIndex == 1) {
animation = new TranslateAnimation(position_one, position_three, 0, 0);
tv_tab_2.setTextColor(resources.getColor(R.color.lightwhite));
} else if (currIndex == 2) {
animation = new TranslateAnimation(position_two, position_three, 0, 0);
tv_tab_3.setTextColor(resources.getColor(R.color.lightwhite));
}
tv_tab_4.setTextColor(resources.getColor(R.color.white));
break;
}
//记录当前的页面位置
currIndex = index;
//动画播放完后，保持结束时的状态
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) {
}
}
}

整个代码中就是做初始化准备作用，加载layout，拿到各个控件，设置adapter，添加监听等。代码中有比较详细的注释，这里不再讲。

接下来就是Fragment模块：

TestFragment.java

[java] view plain copy print ?

package com.vatty.activity;
import java.util.ArrayList;
import java.util.Map;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import com.vatty.adapter.ContactAdapter;
import com.vatty.model.Contact;
/**
*
* TestFragment.java
* @author mayi
* 2014-8-2 下午11:54:19
*
*/
public class TestFragment extends Fragment {
private static final String TAG = "TestFragment";
private Map<String, Object> maplist;
/**
* 获取新的Fragment
* @param s
* @param map
* @return
*/
static TestFragment newInstance(String s, Map<String, Object> map) {
TestFragment newFragment = new TestFragment();
final SerializableMap myMap = new SerializableMap();
myMap.setMap(map);
//Bundle 存储数据
Bundle bundle = new Bundle();
bundle.putSerializable("map", myMap);
//Fragment传送数据
newFragment.setArguments(bundle);
return newFragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Log.d(TAG, "TestFragment-----onCreate");
//获取Fragment传送的数据
Bundle bundle = getArguments();
SerializableMap serializableMap = (SerializableMap) bundle.get("map");
maplist = serializableMap.getMap();
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Log.d(TAG, "TestFragment-----onCreateView");
//加载要在此Fragment中显示的layout(布局文件)
View view = inflater.inflate(R.layout.lay1, container, false);
//-------------------------------以下的根据自己项目的需要做开发----------------------------------------------
//获取layout中的控件
ListView lv = (ListView) view.findViewById(R.id.listView3);
//getActivity().getApplicationContext()方法获取Context
ContactAdapter hc = new ContactAdapter(getActivity().getApplicationContext(), getContact());
lv.setAdapter(hc);
lv.setCacheColorHint(0);
return view;
}
private ArrayList<Contact> getContact() {
ArrayList<Contact> hcList = new ArrayList<Contact>();
for (int i = 0; i < 10; i++) {
Contact c0 = new Contact();
c0.setTxPath(R.drawable.more_game + "");
c0.setName(maplist.get("userid") + " 年龄：" + maplist.get("age"));
hcList.add(c0);
}
return hcList;
}
@Override
public void onDestroy() {
super.onDestroy();
// Log.d(TAG, "TestFragment-----onDestroy");
}
}