首先写个主布局
<?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" > <include layout="@layout/top"/> <android.support.v4.view.ViewPager android:layout_height="match_parent" android:id="@+id/id_viewpager" android:layout_width="match_parent" android:layout_weight="1"> </android.support.v4.view.ViewPager> <include layout="@layout/bottom"/> </LinearLayout>
然后底部布局横向四个，每个上面一个img按钮，下面一个文字
<?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="65dp" android:background="@drawable/abc_ab_bottom_solid_light_holo" android:orientation="horizontal" > <LinearLayout android:id="@+id/id_tab1" android:layout_width="0dp" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" android:layout_weight="1"> <ImageButton android:id="@+id/id_tab_ibt1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/touch_app" android:background="#00000000"/> <TextView android:text="frist" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> <LinearLayout android:layout_width="0dp" android:id="@+id/id_tab2" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" android:layout_weight="1"> <ImageButton android:id="@+id/id_tab_ibt2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/toys" android:background="#00000000"/> <TextView android:text="second" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> <LinearLayout android:layout_width="0dp" android:id="@+id/id_tab3" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" android:layout_weight="1"> <ImageButton android:id="@+id/id_tab_ibt3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/view_quilt" android:background="#00000000"/> <TextView android:text="third" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> <LinearLayout android:layout_width="0dp" android:id="@+id/id_tab4" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" android:layout_weight="1"> <ImageButton android:id="@+id/id_tab_ibt4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/visibility" android:background="#00000000"/> <TextView android:text="fourth" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> </LinearLayout>
设置一个头部吧
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:background="@drawable/abc_ab_bottom_solid_dark_holo" android:layout_height="45dp" android:gravity="center" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="罚抄" android:textColor="#ffffff" android:textSize="20sp" android:layout_gravity="center" android:textStyle="bold" /> </LinearLayout>
主文件设置
package com.second.rewrite; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; 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.view.Window; import android.widget.ImageButton; import android.widget.LinearLayout; public class MainActivity extends Activity implements OnClickListener{ private ViewPager mViewPager;//声明 private PagerAdapter mAdapter;//实现滑动效果的 private List<View> mViews = new ArrayList<View>();//适配器 //初始化4个tab private LinearLayout mTab1; private LinearLayout mTab2; private LinearLayout mTab3; private LinearLayout mTab4; //初始化4个bt1 private ImageButton mTabIbt1; private ImageButton mTabIbt2; private ImageButton mTabIbt3; private ImageButton mTabIbt4; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE);//取消标题栏 setContentView(R.layout.main); initView(); initEvent(); } private void initView() { mViewPager = (ViewPager) findViewById(R.id.id_viewpager); //tabs mTab1 = (LinearLayout) findViewById(R.id.id_tab1); mTab2 = (LinearLayout) findViewById(R.id.id_tab2); mTab3 = (LinearLayout) findViewById(R.id.id_tab3); mTab4 = (LinearLayout) findViewById(R.id.id_tab4); //imagebuttons mTabIbt1 = (ImageButton) findViewById(R.id.id_tab_ibt1); mTabIbt2 = (ImageButton) findViewById(R.id.id_tab_ibt2); mTabIbt3 = (ImageButton) findViewById(R.id.id_tab_ibt3); mTabIbt4 = (ImageButton) findViewById(R.id.id_tab_ibt4); //初始化布局 LayoutInflater mInflater = LayoutInflater.from(this);//类似于findid,用来找布局文件 View tab1 = mInflater.inflate(R.layout.tab1, null); View tab2 = mInflater.inflate(R.layout.tab2, null); View tab3 = mInflater.inflate(R.layout.tab3, null); View tab4 = mInflater.inflate(R.layout.tab4, null); //装载布局 mViews.add(tab1); mViews.add(tab2); mViews.add(tab3); mViews.add(tab4); mAdapter = new PagerAdapter() {//滑动方法 //以下这两个方法自行创建，创建和销毁方法 @Override public void destroyItem(ViewGroup container, int position, Object object) {//摧毁 container.removeView(mViews.get(position)); } @Override public Object instantiateItem(ViewGroup container, int position) {//此处创建要返回，所以新建对象。 View view = mViews.get(position); container.addView(view); return view; } //以下两个为自带方法 @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0==arg1; } @Override public int getCount() {//个数 return mViews.size(); } }; mViewPager.setAdapter(mAdapter); } private void initEvent() { //监听按钮转换页面 mTabIbt1.setOnClickListener(this); mTabIbt2.setOnClickListener(this); mTabIbt3.setOnClickListener(this); mTabIbt4 .setOnClickListener(this); //监听滑动事件，随着滑动，按钮进行转变 mViewPager.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int arg0) { int currentItem = mViewPager.getCurrentItem();//拿到编号 resetImg(); switch (currentItem) { case 0: mTabIbt1.setImageResource(R.drawable.touch_app_select); break; case 1: mTabIbt2.setImageResource(R.drawable.toys_select); break; case 2: mTabIbt3.setImageResource(R.drawable.view_quilt_select); break; case 3: mTabIbt4.setImageResource(R.drawable.visibility_select); break; default: break; } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }); } @Override public void onClick(View arg0) {//重写监听 resetImg();//先用正常图片 switch (arg0.getId()) { case R.id.id_tab_ibt1: mViewPager.setCurrentItem(0);//切换到第一个界面 mTabIbt1.setImageResource(R.drawable.touch_app_select);//选择之后替换图片 break; case R.id.id_tab_ibt2: mViewPager.setCurrentItem(1); mTabIbt2.setImageResource(R.drawable.toys_select); break; case R.id.id_tab_ibt3: mViewPager.setCurrentItem(2); mTabIbt3.setImageResource(R.drawable.view_quilt_select); break; case R.id.id_tab_ibt4: mViewPager.setCurrentItem(3); mTabIbt4.setImageResource(R.drawable.visibility_select); break; default: break; } } private void resetImg() {//其实是换了图片，这里先用正常图片 mTabIbt1.setImageResource(R.drawable.touch_app); mTabIbt2.setImageResource(R.drawable.toys); mTabIbt3.setImageResource(R.drawable.view_quilt); mTabIbt4.setImageResource(R.drawable.visibility); } }
然后就是一个普通的主界面
