我们来看实现效果
思路是用一个HorizontalScrollView里面加入TextView来实现
我们看整个布局的layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" > <RelativeLayout android:id="@+id/column_navi" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/top_column_bg" > <!-- 最左边的小箭头 --> <ImageButton android:id="@+id/column_to_left" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:layout_marginLeft="5.0dp" android:background="#00000000" android:src="@drawable/arr_left" android:visibility="visible" /> <!-- 最右边的小箭头 --> <ImageButton android:id="@+id/column_to_right" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="5.0dp" android:background="#00000000" android:src="@drawable/arr_right" android:visibility="visible" /> <HorizontalScrollView android:id="@+id/column_scrollview" android:layout_width="fill_parent" android:layout_height="35.0dp" android:layout_toLeftOf="@+id/column_to_right" android:layout_toRightOf="@+id/column_to_left" android:fadingEdge="vertical" android:scrollbars="none" > <FrameLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:paddingLeft="5dp" android:paddingRight="5dp" android:paddingTop="3dp" > <!-- 选中的滑块 --> <ImageView android:id="@+id/column_slide_bar" android:layout_width="49dp" android:layout_height="29dp" /> <!-- 所有的TextView加到这个LinearLayout中 --> <LinearLayout android:id="@+id/column_title_layout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" android:layout_gravity="center_vertical" /> </FrameLayout> </HorizontalScrollView> </RelativeLayout> </RelativeLayout>
重点的实现代码:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.news_switch_main);
animImage = (ImageView)findViewById(R.id.column_slide_bar);
scrollToLeft = (ImageButton)findViewById(R.id.column_to_left);
scrollToRight = (ImageButton)findViewById(R.id.column_to_right);
columnTitleLayout = (LinearLayout) findViewById(R.id.column_title_layout);
updateResource();
}
private void updateResource() {
array.clear();
String[] resource = this.getResources().getStringArray(R.array.all_choice);
for (int j = 0; j < resource.length; j++) {
String name = resource[j];
array.add(name);
}
initTab();
}
private void initTab() {
this.columnTitleLayout.removeAllViews();
int j = this.array.size();
if (j <= 5) {
this.scrollToRight.setVisibility(View.INVISIBLE);
this.scrollToLeft.setVisibility(View.INVISIBLE);
}
currTabIndex = 0;
int i = 0;
animImage.setBackgroundResource(R.drawable.slidebar);
for (i = 0; i < array.size(); i++) {
String str = array.get(i);
TextView ColumnTextView = new TextView(this);
ColumnTextView.setText(str);
ColumnTextView.setTag(i);
ColumnTextView.setPadding(18, 2, 15, 4);
ColumnTextView.setOnClickListener(this);
ColumnTextView.setTextAppearance(this, R.style.column_tx_style);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
columnTitleLayout.addView(ColumnTextView, params);
}
TextView MoreColumnTextView = new TextView(this);
MoreColumnTextView.setTag(i);
CharSequence localCharSequence = getResources().getText(R.string.more_column);
MoreColumnTextView.setText(localCharSequence);
MoreColumnTextView.setPadding(18, 2, 15, 4);
MoreColumnTextView.setTextAppearance(this, R.style.column_tx_style);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
columnTitleLayout.addView(MoreColumnTextView, params);
}所有构造出来的TextView都放到columnTitleLayout中，每次进入页面columnTitleLayout都得removeAllViews,不然会造成脏数据的问题
然后我们看选中不同栏目，滑块如何跟着滑动过去:
private void showAnimation() {
if (lastTabIndex == currTabIndex) {
return;
}
((TextView) columnTitleLayout.getChildAt(lastTabIndex)).setTextColor(R.drawable.white);
int widgetItemWidth = ((TextView) columnTitleLayout.getChildAt(lastTabIndex)).getWidth();
int fromX = lastTabIndex * widgetItemWidth;
int toX = currTabIndex * widgetItemWidth;
Log.v("test", "widgetItemWidth" + widgetItemWidth + "fromX:" + fromX + " toX:" + toX);
TranslateAnimation animation = new TranslateAnimation(fromX, toX, 0, 0);
animation.setDuration(500);
animation.setFillAfter(true);
animation.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
((TextView) columnTitleLayout.getChildAt(lastTabIndex)).setTextColor(NewsSwitchActivity.this.getResources().getColor(R.drawable.gray2));
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
((TextView) columnTitleLayout.getChildAt(currTabIndex)).setTextColor(NewsSwitchActivity.this.getResources().getColor(R.drawable.white));
lastTabIndex = currTabIndex;
}
});
animImage.startAnimation(animation);
}
@Override
public void onClick(View v) {
int k = (Integer)v.getTag();
lastTabIndex = currTabIndex;
currTabIndex = k;
String text = ((TextView) v).getText().toString();
if (lastTabIndex != currTabIndex) {
if (currTabIndex == array.size()) {
return;
}
showAnimation();
}
}从代码可以看到滑动的只是ImageView,那些TextView是不动的