说明:这一篇文章的代码是我参考别人的(链接地址为http://blog.csdn.net/harvic880925/article/details/38453725),有什么不对的地方,还望大家指正,另外,感谢那些无私奉献的人
我们在开发javaweb的时候,一般都会遇到这样的一种布局,那就是T型布局,如下:
在这种布局中,我们一般使用的frameset,那么在Android中是否存在这类控件呢?答案是肯定的。不过Android中一般的布局都是这样的
Android中有两种方式能够实现这类功能,一种就是今天我们所学习的viewpage,还有一个就是fragement,针对fragement的内容我们将在下一篇中介绍
不知道大家还是否记得之前我们在《Android学习文档之数据适配器+DDMS介绍》中使用的listview控件,其实我个人感觉他们之间是很相似的,都需要获得总数,都需要设置position等等
废话不多说,我们直接看代码
首先是activity_main.xml文件
<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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.hackerant.viewpager.MainActivity" >
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<android.support.v4.view.PagerTabStrip
android:id="@+id/tabstrip"
android:layout_width="wrap_content"
android:layout_height="30dip"
android:gravity="center" />
<!-- <android.support.v4.view.PagerTitleStrip
android:id="@+id/titleStrip"
android:layout_width="wrap_content"
android:layout_height="30dip"
android:gravity="center" /> -->
</android.support.v4.view.ViewPager>
</RelativeLayout>
在这个布局文件中,我们需要使用到两个新的标签,一个是android.support.v4.view.ViewPager 和android.support.v4.view.PagerTabStrip ,这两个控件都在android-support-v4.jar这个包下
第一个ViewPager表示父类标签,是一个view,PgaerTabStrip表示子类标签,是一个table,就是上面的按钮。
Ok,activity_main.xml布局准备好,下面就是其他布局了,这就像listview弄好了,要弄单个的list了。目前我定义了两个布局,当然你也可以更多,或者通过其他方式生成,其布局如下
layout1.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/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab1"
/>
</LinearLayout>
layout2.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/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tab2"
/>
</LinearLayout>
布局文件弄好了,我们下面就开始写代码了
MainActivity.java
package com.hackerant.viewpager;
import java.util.ArrayList;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.PagerTitleStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v7.app.ActionBarActivity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
public class MainActivity extends ActionBarActivity {
private ViewPager viewpager;
private PagerTabStrip pts;
// private PagerTitleStrip pts;
private ArrayList<View> viewContent;
private ArrayList<String> titleName;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化
viewContent = new ArrayList<View>();
titleName = new ArrayList<String>();
viewpager = (ViewPager) findViewById(R.id.viewPager);
//PagerTitleStrip不可点击title
// pts = (PagerTitleStrip) findViewById(R.id.titleStrip);
// pts.setBackgroundColor(this.getResources().getColor(R.color.peachpuff));
// pts.setDrawingCacheBackgroundColor(this.getResources().getColor(R.color.azure));
//PagerTabStrip可点击table
pts = (PagerTabStrip) findViewById(R.id.tabstrip);
//设置tab的下划线
pts.setDrawFullUnderline(false);
//设置tab的背景色
pts.setBackgroundColor(this.getResources().getColor(R.color.peachpuff));
//设置标签下的下划线颜色
pts.setTabIndicatorColor(this.getResources().getColor(R.color.azure));
//设置字符串宽
pts.setTextSpacing(200);
//加载布局文件
View layout1 = LayoutInflater.from(this).inflate(R.layout.layout1, null);
View layout2 = LayoutInflater.from(this).inflate(R.layout.layout2, null);
viewContent.add(layout1);
viewContent.add(layout2);
titleName.add("tab1");
titleName.add("tab2");
viewpager.setAdapter(new myViewAdapter());
viewpager.setOnPageChangeListener(new myOnPageChangeListener());
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
public class myViewAdapter extends PagerAdapter{
@Override
public int getCount() {
return viewContent.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
// super.destroyItem(container, position, object);
container.removeView(viewContent.get(position));
}
@Override
public int getItemPosition(Object object) {
// TODO Auto-generated method stub
return super.getItemPosition(object);
}
@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titleName.get(position);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
// return super.instantiateItem(container, position);
container.addView(viewContent.get(position));
return viewContent.get(position);
}
}
public class myOnPageChangeListener implements OnPageChangeListener{
@Override
public void onPageScrollStateChanged(int arg0) {
System.out.println(arg0);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
System.out.println(arg0+"===="+arg1+"==="+arg2);
}
@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
System.out.println(arg0+"456");
}
}
}
代码解析:
首先,我们要创建一个viewpage和一个pagertabstrip用来接收主布局文件里的两个控件,然后我们还要有一个table的集合和视图的集合,然后就是初始化和赋值,这里代码简单,不作赘述
当我们查找到table(准确的说应该是title)就可以设置其一些属性了,有如下
//设置tab的下划线
pts.setDrawFullUnderline(false);
//设置tab的背景色
pts.setBackgroundColor(this.getResources().getColor(R.color.peachpuff));
//设置标签下的下划线颜色
pts.setTabIndicatorColor(this.getResources().getColor(R.color.azure));
//设置字符串宽
pts.setTextSpacing(200);
当然,我们从java面向对象的思想来看,只要对象有了,然后点一下就能看到其能够调用的方法,请阅读者自行尝试。
再然后就是设置适配器,这里使用到的适配器是android.support.v4.view.PagerAdapter,适配器方法中有什么获得总数啊,获得单个视图啊等等的信息,这和listview很是类似,我们就不一一讲述了,主要讲一下instantiateItem和destroyItem,这两个方法都是获得当前view对象并把当前对象返回进行处理,具体可参考http://blog.csdn.net/harvic880925/article/details/38487149
OnPageChangeListener方法是对当视图切换时做出的相应,这里只是打印了一下log,简单的了解一下。
Ok,下面我们看一下程勋的最终效果
源码下载http://pan.baidu.com/s/1dEtPdMp