android ViewPager实现App主界面Tab菜单页面切换和点击事件
Tabhost实现页面滑动切换比较麻烦，这里介绍一下viewPage 控件。
实现了三屏滑动带标题点击和tab页面内按钮的的点击事件实现；
viewPage 的优点是可以滑动切换缺点是MainActivity 代码冗余。
关于其他的实现方式可以参考我的其他博客
Fragment实现APP主界面Tab页面切换和点击事件
viewpager+FragmentAdapter实现App主界面Tab
效果图 关于下边的三个标题我是写了3个textview 大家可以改进为3个LinearLayout 布局在布局中加入imageview 就变成了有图标有文字的底部菜单了 这里我就不写了
源代码我已经上传了资源页 下载请去（免积分）
http://download.csdn.net/detail/u012373815/9012723
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.TextView;
importandroid.widget.Toast;
publicclassMainActivityextends Activityimplements OnClickListener {
Contextcontext=null;
ViewPagerpager=null;
TextViewt1,t2,t3;
Viewview1,view2,view3;
@Override
publicvoid onCreate(BundlesavedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
context = MainActivity.this;
initTextView();
initPagerViewer();
}
/**
* 初始化标题
*/
privatevoid initTextView() {
t1 = (TextView)findViewById(R.id.text1);
t2 = (TextView)findViewById(R.id.text2);
t3 = (TextView)findViewById(R.id.text3);
t1.setOnClickListener(this);
t2.setOnClickListener(this);
t3.setOnClickListener(this);
}
/**
* 初始化PageViewer
*/
privatevoid initPagerViewer() {
pager = (ViewPager)findViewById(R.id.viewpage);
LayoutInflaterli = LayoutInflater.from(this);
final ArrayList<View>list =newArrayList<View>();
view1 = li.inflate(R.layout.tab1,null);
view2 = li.inflate(R.layout.tab2,null);
view3 = li.inflate(R.layout.tab3,null);
list.add(view1);
list.add(view2);
list.add(view3);
pager.setAdapter(new MyPagerAdapter(list));
pager.setCurrentItem(0);
pager.setOnPageChangeListener(newMyOnPageChangeListener());
}
/**
* Pager适配器
*/
publicclass MyPagerAdapterextends PagerAdapter {
List<View>list=newArrayList<View>();
publicMyPagerAdapter(ArrayList<View> list) {
this.list = list;
}
@Override
publicvoid destroyItem(ViewGroupcontainer,intposition, Object object) {//销毁view
ViewPagerpViewPager = ((ViewPager) container);
pViewPager.removeView(list.get(position));
}
@Override
publicboolean isViewFromObject(Viewarg0, Object arg1) {
return arg0 == arg1;
}
@Override
publicint getCount() {
returnlist.size();
}
@Override
public ObjectinstantiateItem(View arg0,int arg1) {//初始化Item
//通过位置arg1拿到view
ViewPagerpViewPager = ((ViewPager) arg0);
pViewPager.addView(list.get(arg1));
returnlist.get(arg1);
}
}
/**
* 页卡切换监听
*/
publicclass MyOnPageChangeListenerimplementsOnPageChangeListener {
@Override
publicvoid onPageSelected(int arg0) {//通过view的位置来更改按钮的text
resert();
int currentItems =pager.getCurrentItem();
switch (currentItems) {
case 0:
t1.setText("选中");
break;
case 1:
t2.setText("选中");
break;
case 2:
t3.setText("选中");
break;
default:
break;
}
}
@Override
publicvoidonPageScrollStateChanged(int arg0) {
}
@Override
publicvoid onPageScrolled(int arg0,float arg1, int arg2) {
}
}
// 点击按钮
publicvoid button2(View v) {
Toast.makeText(this,"点击了我", Toast.LENGTH_SHORT).show();
}
@Override
publicvoid onClick(View v) {
resert();
//TODO Auto-generated method stub
switch (v.getId()) {
case R.id.text1:
pager.setCurrentItem(0);
t1.setText("选中");
break;
case R.id.text2:
pager.setCurrentItem(1);
t2.setText("选中");
break;
case R.id.text3:
pager.setCurrentItem(2);
t3.setText("选中");
break;
}
}
//初始化按钮的选中情况
publicvoid resert()
{
t1.setText("标题1");
t2.setText("标题2");
t3.setText("标题3");
}
}
activity_main.xml 文件如下 关于下边的三个标题我们可以改进为3个LinearLayout 布局在布局中加入image 就变成了有图标有文字的底部菜单了 这里我就不写了 （android:layout_height="0dp"android:layout_weight="1"）就是占用屏幕剩余的高度
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EEEEEE"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/viewpage"
android:layout_width="match_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="40.0dip"
android:background="#EEEEEE">
<TextView
android:id="@+id/text1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="标题1"
android:textColor="#000000"
android:textSize="18.0dip"/>
<TextView
android:id="@+id/text2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="标题2"
android:textColor="#000000"
android:textSize="18.0dip"/>
<TextView
android:id="@+id/text3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="标题3"
android:textColor="#000000"
android:textSize="18.0dip"/>
</LinearLayout>
</LinearLayout>
三个 view 其他两个就只是加了一个背景图片 只有这个view 里面有点击事件所以展示下来，这里只写一个按钮
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/image29"
android:orientation="vertical">
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="button2"
android:text="Button"/>
</LinearLayout>