使用ViewPager+LinearLayout来实现页面之间的切换和点击
运行大致效果为：
//从项目中粘贴出来的，随手一记，方便下次查看，这个写的很复杂，有时间在用其他方法。
strings.xml
<string name="text_home">主页string>
<string name="text_adress">联系人string>
<string name="text_message">信息string>
<string name="text_mine">个人中心string>
colors.xml
//色码不是很准确，需要的自己找
<color name="a55a">#a5a5a5
<color name="orange">#F18F40
<color name="line">#CCCCCC
<color name="bg_gray">#F2F2F2
<color name="blue">#2A94D2
<color name="green">#63B73E首先显示导航选项卡：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#eee">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:paddingBottom="0dp"
android:weightSum="4"
android:id="@+id/linearLayout"
android:background="@color/cdef">
<LinearLayout
android:id="@+id/liner_tab1"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:orientation="vertical"
android:layout_weight="1"
android:paddingTop="7dp"
android:background="@color/cd9d">
<ImageView
android:id="@+id/image_homepage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:clickable="true"
android:scaleType="matrix"
android:src="@drawable/tab_pre_one" />
<TextView
android:id="@+id/tv_home"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/text_home"
android:textColor="@color/c00b"
android:textSize="12sp"
android:gravity="center"
android:layout_gravity="center_horizontal"/>
LinearLayout>
<LinearLayout
android:id="@+id/liner_tab2"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:paddingTop="7dp"
android:layout_gravity="center_horizontal"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="@+id/image_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:scaleType="matrix"
android:src="@drawable/tab_two_normal"
android:layout_gravity="center_horizontal"/>
<TextView
android:id="@+id/tv_address"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/text_adress"
android:textColor="@color/a55a"
android:textSize="12sp"
android:gravity="center"
android:layout_gravity="center_horizontal"/>
LinearLayout>
<LinearLayout
android:id="@+id/liner_tab3"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_gravity="center_horizontal"
android:orientation="vertical"
android:layout_weight="1"
android:paddingTop="7dp">
<ImageView
android:id="@+id/image_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:clickable="true"
android:src="@drawable/tab_three_normal"
android:layout_gravity="center_horizontal"/>
<TextView
android:id="@+id/tv_message"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/text_message"
android:textColor="@color/a55a"
android:textSize="12sp"
android:gravity="center"
android:layout_gravity="center_horizontal"/>
LinearLayout>
<LinearLayout
android:id="@+id/liner_tab4"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_gravity="center_horizontal"
android:orientation="vertical"
android:layout_weight="1"
android:paddingTop="7dp">
<ImageView
android:id="@+id/image_personl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:scaleType="matrix"
android:src="@drawable/tab_four_normal"
android:layout_gravity="center_horizontal"/>
<TextView
android:id="@+id/tv_mine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/text_mine"
android:textColor="@color/a55a"
android:textSize="12sp"
android:gravity="center"
android:layout_gravity="center_horizontal"/>
LinearLayout>
LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="vertical"
android:layout_above="@+id/linearLayout">
<android.support.v4.view.ViewPager
android:id="@+id/tabpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
android.support.v4.view.ViewPager>
LinearLayout>
RelativeLayout>
其次是每个View，这里只写了四个中的其中一个：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/orange">
LinearLayout>
这里写代码中的逻辑:
package com.chuanshen.excelledoa;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.Display;
import android.view.Gravity;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.PopupWindow;
import android.widget.TextView;
import com.chuanshen.excelledoa.adapter.GridAdapter;
import java.util.ArrayList;
/**
* Created by S on 2017/5/24.
*/
public class HomePageActivity extends Activity {
public static HomePageActivity instance = null;
private ViewPager mTabPager;
private ImageView mTabImg;
private ImageView mHomePage,mAdress,mMessage,mPersonl;
private int zero = 0;
private int currIndex = 0;
private int one;
private int two;
private int three;
private LinearLayout mClose;
private LinearLayout mCloseBtn;
private PopupWindow menuWindow;
private LayoutInflater inflater;
private boolean menu_display = false;
private GridAdapter mAdapter;
private TextView tv_home,tv_address,tv_message,tv_mine;
private LinearLayout linear_tab1,linear_tab2,linear_tab3,linear_tab4;
private View layout;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_oa);
getWindow().setSoftInputMode(
WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
initView();
}
private void initView() {
instance = this;
mTabPager = (ViewPager)findViewById(R.id.tabpager);
mTabPager.setOnPageChangeListener(new MyOnPageChangeListener());
tv_home = (TextView) findViewById(R.id.tv_home);
tv_address = (TextView) findViewById(R.id.tv_address);
tv_message = (TextView) findViewById(R.id.tv_message);
tv_mine = (TextView) findViewById(R.id.tv_mine);
linear_tab1 = (LinearLayout) findViewById(R.id.liner_tab1);
linear_tab2 = (LinearLayout) findViewById(R.id.liner_tab2);
linear_tab3 = (LinearLayout) findViewById(R.id.liner_tab3);
linear_tab4 = (LinearLayout) findViewById(R.id.liner_tab4);
mHomePage = (ImageView) findViewById(R.id.image_homepage);
mAdress = (ImageView) findViewById(R.id.image_address);
mMessage = (ImageView) findViewById(R.id.image_message);
mPersonl = (ImageView) findViewById(R.id.image_personl);
mHomePage.setOnClickListener(new MyOnClickListener(0));
mAdress.setOnClickListener(new MyOnClickListener(1));
mMessage.setOnClickListener(new MyOnClickListener(2));
mPersonl.setOnClickListener(new MyOnClickListener(3));
Display currDisplay = getWindowManager().getDefaultDisplay();
int displayWidth = currDisplay.getWidth();
int displayHeight = currDisplay.getHeight();
one = displayWidth/4;
two = one*2;
three = one*3;
LayoutInflater mLi = LayoutInflater.from(this);
View view1 = mLi.inflate(R.layout.tab_homepage,null);
View view2 = mLi.inflate(R.layout.tab_address,null);
View view3 = mLi.inflate(R.layout.tab_message,null);
View view4 = mLi.inflate(R.layout.tab_person,null);
final ArrayList views = new ArrayList();
views.add(view1);
views.add(view2);
views.add(view3);
views.add(view4);
PagerAdapter mPagerAdapter = new PagerAdapter() {
@Override
public int getCount() {
return views.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==arg1;
}
@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager)container).removeView(views.get(position));
}
@Override
public Object instantiateItem(View container, int position) {
((ViewPager)container).addView(views.get(position));
//return super.instantiateItem(container, position);
return views.get(position);
}
};
mTabPager.setAdapter(mPagerAdapter);
}
/**
* 头标点击监听
*/
public class MyOnClickListener implements View.OnClickListener {
private int index = 0;
public MyOnClickListener(int i){
index = i;
}
@Override
public void onClick(View v) {
mTabPager.setCurrentItem(index);
}
}
/**
* 页卡切换监听
*/
private class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageSelected(int arg0) {
Animation animation = null;
switch (arg0){
case 0:
mHomePage.setImageDrawable(getResources().getDrawable(R.drawable.tab_pre_one));
//TextView1.setTextColor(this.getResources().getColor(R.drawable.red));
tv_home.setTextColor(getResources().getColor(R.color.c00b));
linear_tab1.setBackgroundColor(getResources().getColor(R.color.cd9d));
//mHomePage.setImageDrawable(getResources().getDrawable(R.mipmap.tab_pre_one));
if(currIndex == 1){
animation = new TranslateAnimation(one,0,0,0);
mAdress.setImageDrawable(getResources().getDrawable(R.drawable.tab_two_normal));
tv_address.setTextColor(getResources().getColor(R.color.a55a));
linear_tab2.setBackgroundColor(getResources().getColor(R.color.cdef));
}else if(currIndex == 2){
animation = new TranslateAnimation(two,0,0,0);
mMessage.setImageDrawable(getResources().getDrawable(R.drawable.tab_three_normal));
tv_message.setTextColor(getResources().getColor(R.color.a55a));
linear_tab3.setBackgroundColor(getResources().getColor(R.color.cdef));
}else if(currIndex == 3){
animation = new TranslateAnimation(three,0,0,0);
mPersonl.setImageDrawable(getResources().getDrawable(R.drawable.tab_four_normal));
tv_mine.setTextColor(getResources().getColor(R.color.a55a));
linear_tab4.setBackgroundColor(getResources().getColor(R.color.cdef));
}
break;
case 1:
mAdress.setImageDrawable(getResources().getDrawable(R.drawable.tab_pre_two));
tv_address.setTextColor(getResources().getColor(R.color.c00b));
linear_tab2.setBackgroundColor(getResources().getColor(R.color.cd9d));
if(currIndex == 0){
animation = new TranslateAnimation(zero,one,0,0);
mHomePage.setImageDrawable(getResources().getDrawable(R.drawable.tab_one_normal));
tv_home.setTextColor(getResources().getColor(R.color.a55a));
linear_tab1.setBackgroundColor(getResources().getColor(R.color.cdef));
}else if(currIndex == 2){
animation = new TranslateAnimation(two,one,0,0);
mMessage.setImageDrawable(getResources().getDrawable(R.drawable.tab_three_normal));
tv_message.setTextColor(getResources().getColor(R.color.a55a));
linear_tab3.setBackgroundColor(getResources().getColor(R.color.cdef));
}else if(currIndex == 3){
animation = new TranslateAnimation(three,one,0,0);
mPersonl.setImageDrawable(getResources().getDrawable(R.drawable.tab_four_normal));
tv_mine.setTextColor(getResources().getColor(R.color.a55a));
linear_tab4.setBackgroundColor(getResources().getColor(R.color.cdef));
}
break;
case 2:
mMessage.setImageDrawable(getResources().getDrawable(R.drawable.tab_pre_three));
tv_message.setTextColor(getResources().getColor(R.color.c00b));
linear_tab3.setBackgroundColor(getResources().getColor(R.color.cd9d));
if(currIndex == 0){
animation = new TranslateAnimation(zero,two,0,0);
mHomePage.setImageDrawable(getResources().getDrawable(R.drawable.tab_one_normal));
tv_home.setTextColor(getResources().getColor(R.color.a55a));
linear_tab1.setBackgroundColor(getResources().getColor(R.color.cdef));
}else if(currIndex == 1){
animation = new TranslateAnimation(one,two,0,0);
mAdress.setImageDrawable(getResources().getDrawable(R.drawable.tab_two_normal));
tv_address.setTextColor(getResources().getColor(R.color.a55a));
linear_tab2.setBackgroundColor(getResources().getColor(R.color.cdef));
}else if(currIndex == 3){
animation = new TranslateAnimation(three,two,0,0);
mPersonl.setImageDrawable(getResources().getDrawable(R.drawable.tab_four_normal));
tv_mine.setTextColor(getResources().getColor(R.color.a55a));
linear_tab4.setBackgroundColor(getResources().getColor(R.color.cdef));
}
break;
case 3:
mPersonl.setImageDrawable(getResources().getDrawable(R.drawable.tab_pre_four));
tv_mine.setTextColor(getResources().getColor(R.color.c00b));
linear_tab4.setBackgroundColor(getResources().getColor(R.color.cd9d));
if(currIndex == 0){
animation = new TranslateAnimation(zero,three,0,0);
mHomePage.setImageDrawable(getResources().getDrawable(R.drawable.tab_one_normal));
tv_home.setTextColor(getResources().getColor(R.color.a55a));
linear_tab1.setBackgroundColor(getResources().getColor(R.color.cdef));
}else if(currIndex == 1){
animation = new TranslateAnimation(one,three,0,0);
mAdress.setImageDrawable(getResources().getDrawable(R.drawable.tab_two_normal));
tv_address.setTextColor(getResources().getColor(R.color.a55a));
linear_tab2.setBackgroundColor(getResources().getColor(R.color.cdef));
}else if(currIndex == 2){
animation = new TranslateAnimation(two,three,0,0);
mMessage.setImageDrawable(getResources().getDrawable(R.drawable.tab_three_normal));
tv_message.setTextColor(getResources().getColor(R.color.a55a));
linear_tab3.setBackgroundColor(getResources().getColor(R.color.cdef));
}
break;
}
currIndex = arg0;
animation.setFillAfter(true);
animation.setDuration(150);
//设置底部滑动动画
// mTabImg.startAnimation(animation);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if(keyCode==KeyEvent.KEYCODE_BACK&&event.getRepeatCount()==0){
if(menu_display){
menuWindow.dismiss();
menu_display = false;
}else{
Intent intent = new Intent();
intent.setClass(HomePageActivity.this,Exit.class);
startActivity(intent);
}
}else if(keyCode==KeyEvent.KEYCODE_MENU) {
if (!menu_display) {
inflater = (LayoutInflater) this.getSystemService(LAYOUT_INFLATER_SERVICE);
layout = inflater.inflate(R.layout.main_menu, null);
menuWindow = new PopupWindow(layout, ViewPager.LayoutParams.FILL_PARENT,
WindowManager.LayoutParams.WRAP_CONTENT);
menuWindow.showAtLocation(this.findViewById(R.id.mainhome),
Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, 0);
mClose = (LinearLayout) layout.findViewById(R.id.menu_close);
mCloseBtn = (LinearLayout) layout.findViewById(R.id.menu_close_btn);
mCloseBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
Intent intent = new Intent();
intent.setClass(HomePageActivity.this, Exit.class);
startActivity(intent);
menuWindow.dismiss();
}
});
menu_display = true;
}else{
menuWindow.dismiss();
menu_display = false;
}
return false;
}
return false;
}
private class Exit {
}
}