android 实现类似微信滑动切换界面

先声明参考来源： http://blog.csdn.net/lijunhuayc/article/details/40543237

本文在参考基础上进行了部分改进，原文更倾向于效果展示，而本文在效果展示的基础上添加了一些数据展示，并添加了控件监听功能

先上效果图



代码如下：

public class MainActivity extends Activity {

private ViewPager mVpage;
private List<View> pages;
public TabHost tabHost;
List<Map<String, View>> tabViews = new ArrayList<Map<String, View>>();
private ArrayList<String> list = new ArrayList<String>();

@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mVpage = (ViewPager) findViewById(R.id.vp);
pages = new ArrayList<View>();
for (int i = 0; i < 300; i++) {
list.add("item" + (i + 1));
}
getViews();
mVpage.setAdapter(new PagerAdapter() {

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0 == arg1;
}

@Override
public int getCount() {
// TODO Auto-generated method stub
return pages.size();
}

@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
// TODO Auto-generated method stub
container.removeView(pages.get(position));
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
View v = pages.get(position);
container.addView(v);
return v;
}

});
mVpage.setOnPageChangeListener(new OnPageChangeListener() {

public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub

}

public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub

}

public void onPageSelected(int position) {
// TODO Auto-generated method stub
tabHost.setCurrentTab(position);
}
});
// //////////////////////////////////////////////////////////////////
tabHost = (TabHost) findViewById(android.R.id.tabhost);
tabHost.setup();
tabHost.addTab(tabHost.newTabSpec("0").setIndicator(createTab("页一", 0))
.setContent(android.R.id.tabcontent));
tabHost.addTab(tabHost.newTabSpec("1").setIndicator(createTab("页二", 1))
.setContent(android.R.id.tabcontent));
tabHost.addTab(tabHost.newTabSpec("2").setIndicator(createTab("页三", 2))
.setContent(android.R.id.tabcontent));
tabHost.addTab(tabHost.newTabSpec("3").setIndicator(createTab("页四", 3))
.setContent(android.R.id.tabcontent));
// 点击tabHost 来切换不同的消息
tabHost.setOnTabChangedListener(new OnTabChangeListener() {

public void onTabChanged(String tabId) {
// TODO Auto-generated method stub
int index = Integer.parseInt(tabId);
setTabSelectedState(index, 4);
tabHost.getTabContentView().setVisibility(View.GONE);// 隐藏content
}
});
tabHost.setCurrentTab(1);
tabHost.setCurrentTab(0);
}

private void getViews() {
View view1 = View.inflate(this, R.layout.fg_item, null);
int bg = Color.rgb((int) Math.floor(Math.random() * 128) + 64,
(int) Math.floor(Math.random() * 128) + 64,
(int) Math.floor(Math.random() * 128) + 64);
view1.setBackgroundColor(bg);
TextView textView = (TextView) view1.findViewById(R.id.num);
textView.setText("页面1");
textView.setOnClickListener(new OnClickListener() {

public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "页面1", 0).show();
}

});
ListView listView = (ListView) view1.findViewById(R.id.list);
listView.setAdapter(new ArrayAdapter<String>(getBaseContext(), 0) {

@Override
public int getCount() {
// TODO Auto-generated method stub
return 30;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
convertView=View.inflate(getBaseContext(), R.layout.item_list,null);
TextView tv=(TextView) convertView.findViewById(R.id.text);
tv.setText(list.get(position));
return convertView;
}

});
// //////////////////////////////////////////////////////////////////////////////////////
View view2 = View.inflate(this, R.layout.fg_item, null);
int bg2 = Color.rgb((int) Math.floor(Math.random() * 128) + 64,
(int) Math.floor(Math.random() * 128) + 64,
(int) Math.floor(Math.random() * 128) + 64);
view2.setBackgroundColor(bg2);
TextView textView2 = (TextView) view2.findViewById(R.id.num);
textView2.setText("页面2");
textView2.setOnClickListener(new OnClickListener() {

public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "页面2", 0).show();
}

});
ListView listView2 = (ListView) view2.findViewById(R.id.list);
listView2.setAdapter(new ArrayAdapter<String>(getBaseContext(), 0) {

@Override
public int getCount() {
// TODO Auto-generated method stub
return 30;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
convertView=View.inflate(getBaseContext(), R.layout.item_list,null);
TextView tv=(TextView) convertView.findViewById(R.id.text);
tv.setText(list.get(position+30));
return convertView;
}

});
/////////////////////////////////////////////////////////////////////////////
View view3 = View.inflate(this, R.layout.fg_item, null);
int bg3 = Color.rgb((int) Math.floor(Math.random() * 128) + 64,
(int) Math.floor(Math.random() * 128) + 64,
(int) Math.floor(Math.random() * 128) + 64);
view3.setBackgroundColor(bg3);
TextView textView3 = (TextView) view3.findViewById(R.id.num);
textView3.setText("页面3");
textView3.setOnClickListener(new OnClickListener() {

public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "页面3", 0).show();
}

});
ListView listView3 = (ListView) view3.findViewById(R.id.list);
listView3.setAdapter(new ArrayAdapter<String>(getBaseContext(), 0) {

@Override
public int getCount() {
// TODO Auto-generated method stub
return 30;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
convertView=View.inflate(getBaseContext(), R.layout.item_list,null);
TextView tv=(TextView) convertView.findViewById(R.id.text);
tv.setText(list.get(position+60));
return convertView;
}

});
///////////////////////////////////////////////////////////////////
View view4 = View.inflate(this, R.layout.fg_item, null);
int bg4 = Color.rgb((int) Math.floor(Math.random() * 128) + 64,
(int) Math.floor(Math.random() * 128) + 64,
(int) Math.floor(Math.random() * 128) + 64);
view4.setBackgroundColor(bg4);
TextView textView4 = (TextView) view4.findViewById(R.id.num);
textView4.setText("页面4");
textView4.setOnClickListener(new OnClickListener() {

public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "页面4", 0).show();
}

});
ListView listView4 = (ListView) view4.findViewById(R.id.list);
listView4.setAdapter(new ArrayAdapter<String>(getBaseContext(), 0) {

@Override
public int getCount() {
// TODO Auto-generated method stub
return 30;
}

@Override
publi
4000
c View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
convertView=View.inflate(getBaseContext(), R.layout.item_list,null);
TextView tv=(TextView) convertView.findViewById(R.id.text);
tv.setText(list.get(position+90));
return convertView;
}

});
pages.add(view1);
pages.add(view2);
pages.add(view3);
pages.add(view4);
}

private View createTab(String tabLabelText, int tabIndex) {
View tabIndicator = LayoutInflater.from(this).inflate(
R.layout.main_tabwidget_layout, null);
TextView normalTV = (TextView) tabIndicator.findViewById(R.id.normalTV);
TextView selectedTV = (TextView) tabIndicator
.findViewById(R.id.selectedTV);
normalTV.setText(tabLabelText);
selectedTV.setText(tabLabelText);
ImageView normalImg = (ImageView) tabIndicator
.findViewById(R.id.normalImg);
ImageView selectedImg = (ImageView) tabIndicator
.findViewById(R.id.selectedImage);
switch (tabIndex) {
case 0:
normalImg.setImageResource(R.drawable.allg_tab);
selectedImg.setImageResource(R.drawable.all_tab);
break;
case 1:
normalImg.setImageResource(R.drawable.yesg_tab);
selectedImg.setImageResource(R.drawable.yes_tab);
break;
case 2:
normalImg.setImageResource(R.drawable.nog_tab);
selectedImg.setImageResource(R.drawable.no_tab);
break;
case 3:
normalImg.setImageResource(R.drawable.chaog_tab);
selectedImg.setImageResource(R.drawable.chao_tab);
break;
}
View normalLayout = tabIndicator.findViewById(R.id.normalLayout);
normalLayout.setAlpha(1f);// 透明度显示
View selectedLayout = tabIndicator.findViewById(R.id.selectedLayout);
selectedLayout.setAlpha(0f);// 透明的隐藏
Map<String, View> map = new HashMap<String, View>();
map.put("normal", normalLayout);
map.put("selected", selectedLayout);
tabViews.add(map);
return tabIndicator;
}

private void setTabSelectedState(int index, int tabCount) {
for (int i = 0; i < tabCount; i++) {
if (i == index) {
tabViews.get(i).get("normal").setAlpha(0f);
tabViews.get(i).get("selected").setAlpha(1f);
} else {
tabViews.get(i).get("normal").setAlpha(1f);
tabViews.get(i).get("selected").setAlpha(0f);
}
}
mVpage.setCurrentItem(index, false);// false表示 代码切换 pager 的时候不带scroll动画
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FFFFFF"
android:visibility="gone" >
</FrameLayout>

<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="50dp" />

<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom" />

</TabHost>

fg_item.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" >

<TextView
android:id="@+id/num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="页面"
android:textSize="45sp" />
<ListView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>

item_list.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" >
<TextView
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
/>

</LinearLayout>

main_tabwidget_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="48dp"
android:layout_height="48dp"
android:padding="5dp" >

<RelativeLayout
android:id="@+id/normalLayout"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_centerInParent="true"
android:gravity="center"
android:orientation="vertical" >

<TextView
android:id="@+id/normalTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:textColor="#888888"
android:textSize="20sp" />

<ImageView
android:id="@+id/normalImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/normalTV"
android:layout_centerHorizontal="true"
android:src="@drawable/chao_tab" />
</RelativeLayout>

<RelativeLayout
android:id="@+id/selectedLayout"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_centerInParent="true"
android:gravity="center"
android:orientation="vertical" >

<TextView
android:id="@+id/selectedTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:textColor="#00FF00"
android:textSize="20sp" />

<ImageView
android:id="@+id/selectedImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/selectedTV"
android:layout_centerHorizontal="true"
android:src="@drawable/chao_tab" />
</RelativeLayout>

</RelativeLayout>