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下载

android Title滑块动画实现(适合新闻客户端多种栏目的展示),布布扣,bubuko.com

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

上一篇:ios8 swift开发:let var 区别讨论


下一篇:Android 上的 制表符(tab) —— 一个神奇的字符 (二)