android Title滑块动画片实现(适合新闻客户端多种栏目的展示)

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() {			@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下载

3楼yuzhibo__you15分钟前

没试验出来

2楼wyabc2734分钟前

了解一下谢谢啊

1楼qq_171574333小时前

shuai