Android 添加动画的标签栏

运行效果图：


 

 

实现原理：标签布局好了以后，标签所在View响应onClick事件。添加另外的标签View，不响应点击事件，用于实现动画效果。在标签的onClick事件中调整移动的起始位置，和滑动标签的状态。

 

布局文件activity_label.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="wrap_content"
    android:gravity="center" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="40dip"
        android:background="@android:drawable/title_bar" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:orientation="horizontal" >

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight="1" >

                <TextView
                    android:id="@+id/label_1"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:layout_centerInParent="true"
                    android:gravity="center"
                    android:text="图片" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight="1" >

                <TextView
                    android:id="@+id/label_2"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:layout_centerInParent="true"
                    android:gravity="center"
                    android:text="地图" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight="1" >

                <TextView
                    android:id="@+id/label_3"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:layout_centerInParent="true"
                    android:gravity="center"
                    android:text="搜索" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight="1" >

                <TextView
                    android:id="@+id/label_4"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:layout_centerInParent="true"
                    android:gravity="center"
                    android:text="问答" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight="1" >

                <TextView
                    android:id="@+id/label_5"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:layout_centerInParent="true"
                    android:gravity="center"
                    android:text="新闻" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight="1" >

                <TextView
                    android:id="@+id/label_6"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:layout_centerInParent="true"
                    android:gravity="center"
                    android:text="更多" />
            </RelativeLayout>
        </LinearLayout>

        <TextView
            android:id="@+id/label_move"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:background="@android:drawable/editbox_background"
            android:gravity="center"
            android:text="图片" />
    </RelativeLayout>

</LinearLayout>

说明：

• 为了让被点击的标签所占区域更大，使用了android:layout_height="fill_parent"设置；
• 使用android:layout_weight="1"控制显示的相对大小；

主要代码：

import android.app.Activity;
import android.os.Bundle;
import android.view.Display;
import android.view.View;
import android.view.WindowManager;
import android.view.View.OnClickListener;
import android.view.animation.TranslateAnimation;
import android.widget.TextView;

public class LabelActivity extends Activity implements OnClickListener {
	
	/**
	 * 标签字符
	 */
	private String[] labelValues = {"图片", "地图", "搜索", "问答", "新闻", "更多"};

	/**
	 * 标签数组
	 */
	private TextView[] labelViews = new TextView[6];

	/**
	 * 动画标签
	 */
	private TextView labelMove;

	/**
	 * 标签宽度
	 */
	private int labelWidth;

	/**
	 * 移动开始位置
	 */
	private int fromX;

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_label);
		
		setTitle("标签");
		
		// 获得标签引用
		labelViews[0] = (TextView) findViewById(R.id.label_1);
		labelViews[1] = (TextView) findViewById(R.id.label_2);
		labelViews[2] = (TextView) findViewById(R.id.label_3);
		labelViews[3] = (TextView) findViewById(R.id.label_4);
		labelViews[4] = (TextView) findViewById(R.id.label_5);
		labelViews[5] = (TextView) findViewById(R.id.label_6);
		labelMove = (TextView) findViewById(R.id.label_move);
		
		// 添加点击事件
		for (int i = 0, length = labelViews.length; i< length; i++) {
			labelViews[i].setOnClickListener(this);
		}
		
		// 获得并设置标签宽度
		WindowManager windowManager = getWindowManager();
		Display display = windowManager.getDefaultDisplay();
		labelWidth = display.getWidth() / 6;
		labelMove.setWidth(labelWidth);
		
	}

	@Override
	public void onClick(View v) {
		
		int index = 0;
		switch (v.getId()) {
		case R.id.label_1:
			index = 0;
			break;
		case R.id.label_2:
			index = 1;
			break;
		case R.id.label_3:
			index = 2;
			break;
		case R.id.label_4:
			index = 3;
			break;
		case R.id.label_5:
			index = 4;
			break;
		case R.id.label_6:
			index = 5;
			break;
		default:
			return;
		}
		
		// 移动View
		translate(labelMove, fromX, labelWidth * index);
		// 设置标题
		labelMove.setText(labelValues[index]);
		// 更新fromX，为下次移动做准备
		fromX = labelWidth * index;

	}
	
	/**
	 * 将View从（fromX，0）移动到（toX，0）
	 * @param view
	 * @param fromX
	 * @param toX
	 */
	public static void translate(View view, int fromX, int toX) {
		TranslateAnimation translateAnimation = new TranslateAnimation(fromX, toX, 0, 0);
		translateAnimation.setDuration(200);
		translateAnimation.setFillAfter(true);
		view.startAnimation(translateAnimation);
	}

}

 说明：

• labelMove：用于移动和标识被选中标签的View，可以通过改变这个View的属性来达到想要的选中效果；
• translate：把View水平方向移动；
• onClick中的switch获得需要的index，然后设置labelMove的属性和下次移动水平的开始位置；