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
@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>