android app 主界面,android ViewPager实现App主界面Tab菜单页面切换和点击事件

Tabhost实现页面滑动切换比较麻烦，这里介绍一下viewPage 控件。

实现了三屏滑动带标题点击和tab页面内按钮的的点击事件实现；

viewPage  的优点是可以滑动切换缺点是MainActivity 代码冗余。

关于其他的实现方式可以参考我的其他博客

效果图    关于下边的三个标题我是写了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 ArrayListlist =newArrayList();

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 {

Listlist=newArrayList();

publicMyPagerAdapter(ArrayList 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();

//TODOAuto-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")就是占用屏幕剩余的高度

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#EEEEEE"

android:orientation="vertical">

android:layout_width="wrap_content"

android:layout_height="0dp"

android:layout_weight="1"

android:orientation="vertical">

android:id="@+id/viewpage"

android:layout_width="match_parent"

android:layout_height="fill_parent"/>

android:id="@+id/linearLayout1"

android:layout_width="fill_parent"

android:layout_height="40.0dip"

android:background="#EEEEEE">

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"/>

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"/>

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"/>

三个 view 其他两个就只是加了一个背景图片 只有这个view 里面有点击事件所以展示下来，这里只写一个按钮

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/image29"

android:orientation="vertical">

android:id="@+id/button2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:onClick="button2"

android:text="Button"/>