在top.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="45dp"
android:gravity="center"
android:background="#080808"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="#ffffff"
android:textSize="25sp"
android:textStyle="bold"/>
</LinearLayout>
在bottom.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="wrap_content"
android:background="#0d0d0d"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/id_tab_weixin"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/id_tab_weixin_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:src="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="#ffffff"/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_friend"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/id_tab_friend_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:src="@drawable/android32"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="朋友"
android:textColor="#ffffff"/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_address"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/id_tab_address_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:src="@drawable/android32"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="通讯录"
android:textColor="#ffffff"/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_setting"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/id_tab_setting_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:src="@drawable/android32"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="设置"
android:textColor="#ffffff"/>
</LinearLayout>
</LinearLayout>
在activity_main.xml文件中
<?xml version="1.0"encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
//布局顶部
<include layout="@layout/top"/>
//布局滑动的页面
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/id_viewpager">
</android.support.v4.view.ViewPager>
//布局底部的四个Tab
<include layout="@layout/bottom"/>
</LinearLayout>
以下是四个滑动页面的布局
在tab01.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:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:textSize="40dp"
android:text="这是微信TAB"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="点击"
android:id="@+id/tab01_button"/>
</LinearLayout>
在tab02.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:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="40dp"
android:text="这是朋友TAB"/>
</LinearLayout>
在tab03.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:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="40dp"
android:text="这是通讯录TAB"/>
</LinearLayout>
在tab04.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:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="40dp"
android:text="这是设置TAB"/>
</LinearLayout>
在MainActivity.class文件中
package com.example.yuxue.learntab_viewpager;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;
public class MainActivityextendsAppCompatActivityimplementsView.OnClickListener {
// TAB
privateLinearLayouttab_weixin;
private LinearLayouttab_friend;
private LinearLayouttab_address;
private LinearLayouttab_setting;
// IMG
privateImageViewtab_weixin_img;
private ImageView tab_friend_img;
private ImageView tab_address_img;
private ImageView tab_setting_img;
// ViewPager
privateViewPagerviewPager;
private PagerAdapterpagerAdapter;
private List<View> viewList = newArrayList<View>();
@Override
protected voidonCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView(); // 所有的控件初始化
initEvents();//初始化事件
}
private void initView() {
// Tab
tab_weixin= (LinearLayout) findViewById(R.id.id_tab_weixin);
tab_friend = (LinearLayout) findViewById(R.id.id_tab_friend);
tab_address = (LinearLayout) findViewById(R.id.id_tab_address);
tab_setting = (LinearLayout) findViewById(R.id.id_tab_setting);
// IMG
tab_weixin_img= (ImageView) findViewById(R.id.id_tab_weixin_img);
tab_friend_img = (ImageView) findViewById(R.id.id_tab_friend_img);
tab_address_img = (ImageView) findViewById(R.id.id_tab_address_img);
tab_setting_img = (ImageView) findViewById(R.id.id_tab_setting_img);
// ViewPager
viewPager= (ViewPager) findViewById(R.id.id_viewpager);
// 将布局转换为 View
LayoutInflater inflater = LayoutInflater.from(this);
View tab01 = inflater.inflate(R.layout.tab01,null);
View tab02 = inflater.inflate(R.layout.tab02,null);
View tab03 = inflater.inflate(R.layout.tab03,null);
View tab04 = inflater.inflate(R.layout.tab04,null);
// 将 View添加到集合中
viewList.add(tab01);
viewList.add(tab02);
viewList.add(tab03);
viewList.add(tab04);
pagerAdapter =newPagerAdapter() {
@Override
//返回View的个数
public intgetCount() {
return viewList.size();
}
@Override
public booleanisViewFromObject(View view, Object object) {
return view == object;
}
@Override
//初始化View
publicObject instantiateItem(ViewGroup container,intposition) {
View view = viewList.get(position);
container.addView(view);
return view;
}
@Override
//摧毁View
public voiddestroyItem(ViewGroup container,intposition, Object object) {
container.removeView(viewList.get(position));
}
};
viewPager.setAdapter(pagerAdapter);
}
private void initEvents() {
tab_weixin.setOnClickListener(this);
tab_friend.setOnClickListener(this);
tab_address.setOnClickListener(this);
tab_setting.setOnClickListener(this);
viewPager.setOnPageChangeListener(newViewPager.OnPageChangeListener() {
@Override
public voidonPageScrolled(intposition, float positionOffset,intpositionOffsetPixels) {
}
@Override
public voidonPageSelected(intposition) {
//滑动到当前页面时调用,改变一些相关属性
set_Img();
int currentItem =viewPager.getCurrentItem();
switch (currentItem) {
case 0:
tab_weixin_img.setImageResource(R.mipmap.ic_launcher);
break;
case 1:
tab_friend_img.setImageResource(R.mipmap.ic_launcher);
break;
case 2:
tab_address_img.setImageResource(R.mipmap.ic_launcher);
break;
case 3:
tab_setting_img.setImageResource(R.mipmap.ic_launcher);
break;
}
}
@Override
public voidonPageScrollStateChanged(intstate) {
}
});
viewList.get(0).findViewById(R.id.tab01_button).setOnClickListener(newView.OnClickListener() {
@Override
public voidonClick(View v) {
Log.e("qwe",">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>");
Toast.makeText(getApplicationContext(), "1234567890", Toast.LENGTH_SHORT).show();
}
});
}
@Override
public voidonClick(View v) {
set_Img();// 先将所有的图片设置为暗色
switch(v.getId()) {
// TAB 的点击事件
caseR.id.id_tab_weixin:
// 切换到第一个界面
viewPager.setCurrentItem(0);
//将相应图片设置为亮色
tab_weixin_img.setImageResource(R.mipmap.ic_launcher);
break;
case R.id.id_tab_friend:
viewPager.setCurrentItem(1);
tab_friend_img.setImageResource(R.mipmap.ic_launcher);
break;
case R.id.id_tab_address:
viewPager.setCurrentItem(2);
tab_address_img.setImageResource(R.mipmap.ic_launcher);
break;
case R.id.id_tab_setting:
viewPager.setCurrentItem(3);
tab_setting_img.setImageResource(R.mipmap.ic_launcher);
break;
}
}
private void set_Img() {
// 将所有的图片设置为暗色
tab_weixin_img.setImageResource(R.drawable.android32);
tab_friend_img.setImageResource(R.drawable.android32);
tab_address_img.setImageResource(R.drawable.android32);
tab_setting_img.setImageResource(R.drawable.android32);
}
}
为了布局的好看,应该将主题设置为NoActionBar