先看效果图: 左右拖动可切换Viewpager 点击 下方的item也可以进行切换处理
首先建立布局文件,top.xml,bottom.xml,中间是一个Viewpager实现
1: top.xml文件 就是一个textview实现的,
2: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="50dip"
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="50dip">
<LinearLayout
android:id="@+id/home_layout_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:id="@+id/home_image_view"
android:layout_width="20dip"
android:layout_height="20dip"
android:src="@drawable/comui_tab_home_selected"
android:background="#00000000"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页"
android:layout_gravity="center"
android:layout_marginTop="5dip"/>
</LinearLayout>
<LinearLayout
android:id="@+id/message_layout_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:id="@+id/message_image_view"
android:layout_width="20dip"
android:layout_height="20dip"
android:src="@drawable/comui_tab_message"
android:background="#00000000"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="消息"
android:layout_gravity="center"
android:layout_marginTop="5dip"/>
</LinearLayout>
<LinearLayout
android:id="@+id/person_layout_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:id="@+id/person_image_view"
android:layout_width="20dip"
android:layout_height="20dip"
android:src="@drawable/comui_tab_person"
android:background="#00000000"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的"
android:layout_gravity="center"
android:layout_marginTop="5dip"/>
</LinearLayout>
<LinearLayout
android:id="@+id/pond_layout_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:id="@+id/pond_image_view"
android:layout_width="20dip"
android:layout_height="20dip"
android:src="@drawable/comui_tab_pond"
android:background="#00000000"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="博客"
android:layout_gravity="center"
android:layout_marginTop="5dip"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
最后将这里个文件include进 activity_main中
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.yongninggo.application.MainActivity"
android:orientation="vertical">
<include layout="@layout/top" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
<include layout="@layout/bottom" />
</LinearLayout>
接下来就是mainactivity文件了,先定义xml文件中所有的控件,并获取ID, 初始化4个布局,并写入 给4个image点击事件进行跳转,实现viewpager左右滑动的监听
代码中有注释,我就不一一解释了哈
package com.yongninggo.application;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private ViewPager viewPager;
private PagerAdapter adapter;
private List<View> views = new ArrayList<View>();
private LinearLayout home_layout_view;
private LinearLayout message_layout_view;
private LinearLayout pond_layout_view;
private LinearLayout person_layout_view;
private ImageView home_image_view;
private ImageView message_image_view;
private ImageView pond_image_view;
private ImageView person_image_view;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
inisview();
initEvents();
}
private void inisview() {
viewPager = (ViewPager) findViewById(R.id.viewpager);
home_layout_view = (LinearLayout) findViewById(R.id.home_layout_view);
message_layout_view = (LinearLayout) findViewById(R.id.message_layout_view);
pond_layout_view = (LinearLayout) findViewById(R.id.pond_layout_view);
person_layout_view = (LinearLayout) findViewById(R.id.person_layout_view);
home_image_view = (ImageView) findViewById(R.id.home_image_view);
message_image_view = (ImageView) findViewById(R.id.message_image_view);
pond_image_view = (ImageView) findViewById(R.id.pond_image_view);
person_image_view = (ImageView) findViewById(R.id.person_image_view);
//初始化ViewPager的四个布局
LayoutInflater inflater = LayoutInflater.from(this);
View home = inflater.inflate(R.layout.home,null);
View message = inflater.inflate(R.layout.message,null);
View pond = inflater.inflate(R.layout.pond,null);
View person = inflater.inflate(R.layout.person,null);
views.add(home);
views.add(message);
views.add(pond);
views.add(person);
adapter = new PagerAdapter() {
@Override //初始化item
public Object instantiateItem(ViewGroup container, int position) {
View view = views.get(position);
container.addView(view);
return view;
}
@Override //摧毁View
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));
}
@Override //包含View的个数(4个)
public int getCount() {
return views.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view ==object ;
}
};
viewPager.setAdapter(adapter);
}
private void initEvents() {
home_layout_view.setOnClickListener(this);
message_layout_view.setOnClickListener(this);
pond_layout_view.setOnClickListener(this);
person_layout_view.setOnClickListener(this);
//监听Page变化的匿名类
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
int Currentitem = viewPager.getCurrentItem();
Resetimg();
switch (Currentitem){
case 0 :
home_image_view.setImageResource(R.drawable.comui_tab_home_selected);
break;
case 1 :
message_image_view.setImageResource(R.drawable.comui_tab_message_selected);
break;
case 2 :
person_image_view.setImageResource(R.drawable.comui_tab_person_selected);
break;
case 3 :
pond_image_view.setImageResource(R.drawable.comui_tab_pond_selected);
break;
default:
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
@Override
public void onClick(View v) {
Resetimg();
switch (v.getId()){
case R.id.home_layout_view :
viewPager.setCurrentItem(0); // 表示点击这个layout切换到第一个界面上
home_image_view.setImageResource(R.drawable.comui_tab_home_selected);
break;
case R.id.message_layout_view :
viewPager.setCurrentItem(1);
message_image_view.setImageResource(R.drawable.comui_tab_message_selected);
break;
case R.id.person_layout_view :
viewPager.setCurrentItem(2);
person_image_view.setImageResource(R.drawable.comui_tab_person_selected);
break;
case R.id.pond_layout_view :
viewPager.setCurrentItem(3);
pond_image_view.setImageResource(R.drawable.comui_tab_pond_selected);
break;
default:
break;
}
}
//将所有的图片切换为暗色的
private void Resetimg() {
home_image_view.setImageResource(R.drawable.comui_tab_home);
message_image_view.setImageResource(R.drawable.comui_tab_message);
pond_image_view.setImageResource(R.drawable.comui_tab_pond);
person_image_view.setImageResource(R.drawable.comui_tab_person);
}
}