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>}

 动画采用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下载

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 15
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值