android Title滑块动画实现(适合新闻client多种栏目的展示)
先上效果图,选择不同的模块,滑动会通过动画形式滑过去,这样的适合新闻client多种栏目的展示:
这么写Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffffff" > <include layout="@layout/title_layout" /> <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="5.0dp" android:paddingRight="5.0dp" android:paddingTop="3.0dp" > <ImageView android:id="@+id/column_slide_bar" android:layout_width="49.0dp" android:layout_height="29.0dp" /> <span style="white-space:pre"> </span>//这个能够把子栏目都加到column_title_layout中 <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>
代码中在string.xml中增加数据:
<string-array name="all_choice" translatable="false"> <item>科技</item> <item>財经</item> <item>体育</item> <item>本地</item> <item>最新</item> <item>百家</item> <item>娱乐</item> </string-array>
private void initTab() { String[] resource = this.getResources().getStringArray(R.array.all_choice); for (int j = 0; j < resource.length; j++) { String name = resource[j]; array.add(name); } 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); }
在点击子栏目的时候启动动画:
@Override <span style="white-space:pre"> </span>public void onClick(View v) { <span style="white-space:pre"> </span>int k = (Integer)v.getTag(); <span style="white-space:pre"> </span>lastTabIndex = currTabIndex; <span style="white-space:pre"> </span>currTabIndex = k; <span style="white-space:pre"> </span>String text = ((TextView) v).getText().toString(); <span style="white-space:pre"> </span>if (lastTabIndex != currTabIndex) { <span style="white-space:pre"> </span>if (currTabIndex == array.size()) { <span style="white-space:pre"> </span>return; <span style="white-space:pre"> </span>} <span style="white-space:pre"> </span>showAnimation(); <span style="white-space:pre"> </span>} <span style="white-space:pre"> </span>}动画採用TranslateAnimation animation.setFillAfter(true);
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(MainActivity.this.getResources().getColor(R.drawable.gray2)); } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { ((TextView) columnTitleLayout.getChildAt(currTabIndex)).setTextColor(MainActivity.this.getResources().getColor(R.drawable.white)); lastTabIndex = currTabIndex; } }); animImage.startAnimation(animation); }
代码能够在http://download.csdn.net/detail/baidu_nod/7576663下载