Android之界面切换并且图标显示状态效果实现

现在的很多Android手机软件都是使用的类似于微信的架构，即左右滑动底部图标颜色和文字颜色随之改变。









下面我们来实现一下这个效果

首先，准备几个view界面

用于页卡切换的显示视图，这里，我简单地用了四种颜色区分不同的视图

view1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FF0000"
android:orientation="vertical" >
</LinearLayout>
view2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#00FF00"
android:orientation="vertical" >
</LinearLayout>

view3.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#0000FF"
android:orientation="vertical" >
</LinearLayout>
view4.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FF00FF"
android:orientation="vertical" >
</LinearLayout>

然后，在主界面中布局
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mainweixin"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#eee" >

<RelativeLayout
android:id="@+id/main_bottom"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:orientation="vertical"
android:background="@drawable/bottom_bar"
>

<ImageView
android:id="@+id/img_tab_now"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
android:src="@drawable/tab_bg" />

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:paddingBottom="2dp"
>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="@+id/img_weixin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:clickable="true"
android:src="@drawable/tab_weixin_pressed" />
<TextView
android:id="@+id/tv_weixin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="#0f0"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="@+id/img_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:clickable="true"
android:src="@drawable/tab_address_normal" />
<TextView
android:id="@+id/tv_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="通讯录"
android:textColor="#fff"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="@+id/img_friends"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:clickable="true"
android:src="@drawable/tab_find_frd_normal" />
<TextView
android:id="@+id/tv_friends"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="朋友们"
android:textColor="#fff"
android:textSize="12sp" />
</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="@+id/img_settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:clickable="true"
android:src="@drawable/tab_settings_normal" />
<TextView
android:id="@+id/tv_settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="设置"
android:textColor="#fff"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="@id/main_bottom"
android:orientation="vertical" >

<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>

最后，在程序中实现功能

package com.tabicondemo;

import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.Display;
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.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity
{
private ViewPager mTabPager;
private ImageView mTabImg;// 动画图片
private ImageView mTab1,mTab2,mTab3,mTab4;
private TextView mText1,mText2,mText3,mText4;
private int zero = 0;// 动画图片偏移量
private int currIndex = 0;// 当前页卡编号
private int one;//单个水平动画位移
private int two;
private int three;

@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//启动activity时不自动弹出软键盘
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);

mTabPager = (ViewPager)findViewById(R.id.tabpager);
mTabPager.setOnPageChangeListener(new MyOnPageChangeListener());

mText1 = (TextView) findViewById(R.id.tv_weixin);
mText2 = (TextView) findViewById(R.id.tv_address);
mText3 = (TextView) findViewById(R.id.tv_friends);
mText4 = (TextView) findViewById(R.id.tv_settings);
mTab1 = (ImageView) findViewById(R.id.img_weixin);
mTab2 = (ImageView) findViewById(R.id.img_address);
mTab3 = (ImageView) findViewById(R.id.img_friends);
mTab4 = (ImageView) findViewById(R.id.img_settings);
mTabImg = (ImageView) findViewById(R.id.img_tab_now);
mTab1.setOnClickListener(new MyOnClickListener(0));
mTab2.setOnClickListener(new MyOnClickListener(1));
mTab3.setOnClickListener(new MyOnClickListener(2));
mTab4.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;
Log.i("info", "获取的屏幕分辨率为" + one + two + three + "X" + displayHeight);

//将要分页显示的View装入数组中
LayoutInflater mLi = LayoutInflater.from(this);
View view1 = mLi.inflate(R.layout.view1, null);
View view2 = mLi.inflate(R.layout.view2, null);
View view3 = mLi.inflate(R.layout.view3, null);
View view4 = mLi.inflate(R.layout.view4, null);

//每个页面的view数据
final ArrayList<View> views = new ArrayList<View>();
views.add(view1);
views.add(view2);
views.add(view3);
views.add(view4);
//填充ViewPager的数据适配器
PagerAdapter mPagerAdapter = new PagerAdapter()
{
@Override
public boolean isViewFromObject(View arg0, Object arg1)
{
return arg0 == arg1;
}

@Override
public int getCount() {
return views.size();
}

@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 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);
}
};

//页卡切换监听
public class MyOnPageChangeListener implements OnPageChangeListener
{
@Override
public void onPageSelected(int arg0)
{
Animation animation = null;
switch (arg0) {
case 0:
mText1.setTextColor(Color.GREEN);
mTab1.setImageDrawable(getResources().getDrawable(R.drawable.tab_weixin_pressed));
if (currIndex == 1) {
mText2.setTextColor(Color.WHITE);
animation = new TranslateAnimation(one, 0, 0, 0);
mTab2.setImageDrawable(getResources().getDrawable(R.drawable.tab_address_normal));
} else if (currIndex == 2) {
mText3.setTextColor(Color.WHITE);
animation = new TranslateAnimation(two, 0, 0, 0);
mTab3.setImageDrawable(getResources().getDrawable(R.drawable.tab_find_frd_normal));
}
else if (currIndex == 3) {
mText4.setTextColor(Color.WHITE);
animation = new TranslateAnimation(three, 0, 0, 0);
mTab4.setImageDrawable(getResources().getDrawable(R.drawable.tab_settings_normal));
}
break;
case 1:
mText2.setTextColor(Color.GREEN);
mTab2.setImageDrawable(getResources().getDrawable(R.drawable.tab_address_pressed));
if (currIndex == 0) {
mText1.setTextColor(Color.WHITE);
animation = new TranslateAnimation(zero, one, 0, 0);
mTab1.setImageDrawable(getResources().getDrawable(R.drawable.tab_weixin_normal));
} else if (currIndex == 2) {
mText3.setTextColor(Color.WHITE);
animation = new TranslateAnimation(two, one, 0, 0);
mTab3.setImageDrawable(getResources().getDrawable(R.drawable.tab_find_frd_normal));
}
else if (currIndex == 3) {
mText4.setTextColor(Color.WHITE);
animation = new TranslateAnimation(three, one, 0, 0);
mTab4.setImageDrawable(getResources().getDrawable(R.drawable.tab_settings_normal));
}
break;
case 2:
mText3.setTextColor(Color.GREEN);
mTab3.setImageDrawable(getResources().getDrawable(R.drawable.tab_find_frd_pressed));
if (currIndex == 0) {
mText1.setTextColor(Color.WHITE);
animation = new TranslateAnimation(zero, two, 0, 0);
mTab1.setImageDrawable(getResources().getDrawable(R.drawable.tab_weixin_normal));
} else if (currIndex == 1) {
mText2.setTextColor(Color.WHITE);
animation = new TranslateAnimation(one, two, 0, 0);
mTab2.setImageDrawable(getResources().getDrawable(R.drawable.tab_address_normal));
}
else if (currIndex == 3) {
mText4.setTextColor(Color.WHITE);
animation = new TranslateAnimation(three, two, 0, 0);
mTab4.setImageDrawable(getResources().getDrawable(R.drawable.tab_settings_normal));
}
break;
case 3:
mText4.setTextColor(Color.GREEN);
mTab4.setImageDrawable(getResources().getDrawable(R.drawable.tab_settings_pressed));
if (currIndex == 0) {
mText1.setTextColor(Color.WHITE);
animation = new TranslateAnimation(zero, three, 0, 0);
mTab1.setImageDrawable(getResources().getDrawable(R.drawable.tab_weixin_normal));
} else if (currIndex == 1) {
mText2.setTextColor(Color.WHITE);
animation = new TranslateAnimation(one, three, 0, 0);
mTab2.setImageDrawable(getResources().getDrawable(R.drawable.tab_address_normal));
}
else if (currIndex == 2) {
mText3.setTextColor(Color.WHITE);
animation = new TranslateAnimation(two, three, 0, 0);
mTab3.setImageDrawable(getResources().getDrawable(R.drawable.tab_find_frd_normal));
}
break;
}
currIndex = arg0;
animation.setFillAfter(true);// True:图片停在动画结束位置
animation.setDuration(150);
mTabImg.startAnimation(animation);
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2)
{
}

@Override
public void onPageScrollStateChanged(int arg0)
{
}
}
}

效果如图


 

 

 


源码下载