运行效果图:
实现原理:标签布局好了以后,标签所在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的属性和下次移动水平的开始位置;