Step 1: 布局文件中添加viewpager和切换页面button
<span style="font-size:18px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.phenix.iot_v1_tab.MainActivity" >
<android.support.v4.view.ViewPager
android:id="@+id/viewPagerId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<!-- -->
lay1.xml-----
<LinearLayout
android:id="@+id/mainBtnLinearId"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
>
<Button
android:id="@+id/settingCtrlPageBtnId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentBottom="true"
android:gravity="center"
android:text="Setting"
/>
<Button
android:id="@+id/dataStatusPageBtnId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_weight="1"
android:layout_toRightOf="@id/settingCtrlPageBtnId"
android:gravity="center"
android:text="Data"
/>
<Button
android:id="@+id/chartStatusPageBtnId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_weight="1"
android:layout_toRightOf="@id/dataStatusPageBtnId"
android:gravity="center"
android:text="Chart"
/>
</LinearLayout>
</RelativeLayout></span>
注意: viewpage和button的前后关系,如果颠倒,button的单击和viewpage的滑动事件有影响,原因也不知道。
Step 2: 添加布局文件,右键res
本例中添加三个布局文件,如上图蓝框所示
Step 3: MainActivity中添加相关变量
本例中有三个切换页面按钮:set / data / chart,在set page中有一个set gain按钮
<span style="font-size:18px;">//定义ViewPager变量
ViewPager pager = null;
View viewPager_set;
View viewPager_data;
View viewPager_chart;
ArrayList<View> viewContainter = new ArrayList<View>();
//定义ViewPager Button变量
private Button setPageBtn;
private Button dataPageBtn;
private Button chartPageBtn;
//定义setPage中Button变量
private Button setGain_setPage_Btn;</span>
在OnCreate中初始化viewpage和各相关控件
<span style="font-size:18px;">@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化ViewPager
InitViewPager();
//ViewPager绑定页面滑动监听器
pager.addOnPageChangeListener(new viewPagerOnPageChangeListener());
//初始化ViewPager的页面切换按钮
InitViewPagerSwitchBtn();
//Bluetooth初始化
m_BusinessBluetooth = new BlueToothProcess(this);
m_BusinessBluetooth.CreatePortListen();
//初始化set page
InitSetPage();
//set page监听器处理
setPageListenerProcess();
}</span>
step 4: 初始化viewpager控件具体代码
<span style="font-size:18px;">/*
* 初始化ViewPager
*/
public void InitViewPager() {
//实例化ViewPager
pager = (ViewPager)findViewById(R.id.viewPagerId);
//为viewPager设置内容
//view是我们放进viewPager里面的东西,要为它设置好布局,再放进去
viewPager_set = LayoutInflater.from(this).inflate(R.layout.setting_control, null);
viewPager_data = LayoutInflater.from(this).inflate(R.layout.data_status, null);
viewPager_chart = LayoutInflater.from(this).inflate(R.layout.chart_status, null);
//这是个ArrayList,加进去了3个view
viewContainter.add(viewPager_set);
viewContainter.add(viewPager_data);
viewContainter.add(viewPager_chart);
//设置适配器
pager.setAdapter(new PagerAdapter() {
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
//return false;
return arg0 == arg1;
}
//viewpager中的组件数量
@Override
public int getCount() {
// TODO Auto-generated method stub
return viewContainter.size();
}
@Override
public void destroyItem(View container, int position, Object object) {
// TODO Auto-generated method stub
//super.destroyItem(container, position, object);
((ViewPager)container).removeView(viewContainter.get(position));
}
@Override
public int getItemPosition(Object object) {
// TODO Auto-generated method stub
return super.getItemPosition(object);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
//return super.instantiateItem(container, position);
((ViewPager)container).addView(viewContainter.get(position));
return viewContainter.get(position);
}
});
}</span>
step 5: viewpager页面滑动监听器代码
<span style="font-size:18px;">/*
* ViewPager页面滑动监听器
*/
class viewPagerOnPageChangeListener implements OnPageChangeListener{
@Override
public void onPageSelected(int pItem) {
// TODO Auto-generated method stub
switch (pItem) {
//如果是第一个页面
case 0:
setPageBtn.setText("V");
dataPageBtn.setText("Data");
chartPageBtn.setText("Chart");
System.out.println("Set Page");
break;
//如果是第二个页面
case 1:
setPageBtn.setText("Set");
dataPageBtn.setText("V");
chartPageBtn.setText("Chart");
System.out.println("Data Page");
break;
//如果是第三个页面
case 2:
setPageBtn.setText("Set");
dataPageBtn.setText("Data");
chartPageBtn.setText("V");
System.out.println("Chart Page");
break;
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
}</span>
Step 6: 页面切换按钮功能实现
<span style="font-size:18px;">/**
* 初始化ViewPager切换按钮
*/
public void InitViewPagerSwitchBtn() {
//绑定控件ID
setPageBtn = (Button)this.findViewById(R.id.settingCtrlPageBtnId);
dataPageBtn = (Button)this.findViewById(R.id.dataStatusPageBtnId);
chartPageBtn = (Button)this.findViewById(R.id.chartStatusPageBtnId);
//设置按钮跳转到对应的viewPager页面
setPageBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
pager.setCurrentItem(0);
System.out.println("SettingPage");
Toast toast= Toast.makeText(getApplicationContext(), "测试", Toast.LENGTH_SHORT);
toast.show();
}
});
dataPageBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
pager.setCurrentItem(1);
System.out.println("DataPage");
}
});
chartPageBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
pager.setCurrentItem(2);
System.out.println("ChartPage");
}
});
}</span>
step 7: 获取子view中的控件(set gain button)并绑定对应操作监听器
<span style="font-size:18px;">/*
* 初始化set page
*/
public void InitSetPage() {
//获取setting view button
setGain_setPage_Btn = (Button)viewPager_set.findViewById(R.id.setGainBtnId);
}
/*
* set page监听器绑定
*/
public void setPageListenerProcess() {
setGain_setPage_Btn.setOnClickListener(new setGainBtnSetPageOnClickListener());
}
/*
* set page
* set gain button listener
*/
class setGainBtnSetPageOnClickListener implements OnClickListener {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast toast= Toast.makeText(getApplicationContext(), "view测试", Toast.LENGTH_SHORT);
toast.show();
}
}</span>
获取子view控件的方法重点讲一下:
首先通过inflate得到各个子view的对象
View viewPager_set = LayoutInflater.from(this).inflate(R.layout.setting_control, null); //setting_control就是step2中添加的子view布局文件的名称
然后通过子view对象,获取其内的控件ID
Button setGain_setPage_Btn = (Button)viewPager_set.findViewById(R.id.setGainBtnId);
参考文章:
viewpager的使用 http://blog.csdn.net/phenixyf/article/details/51280690
获取子view控件的操作 http://blog.csdn.net/phenixyf/article/details/51396570