android Title滑塊動畫實現(適合新聞用戶端多種欄目的展示)

標籤：滑塊   動畫   

先上，選擇不同的模組，滑動會通過動畫形式滑過去，這種適合新聞用戶端多種欄目的展示:

這麼寫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>}<pre name="code" class="java">

動畫採用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() {@Overridepublic void onAnimationStart(Animation animation) {((TextView) columnTitleLayout.getChildAt(lastTabIndex)).setTextColor(MainActivity.this.getResources().getColor(R.drawable.gray2));}@Overridepublic void onAnimationRepeat(Animation animation) {}@Overridepublic 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下載