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

我们来看实现效果

思路是用一个HorizontalScrollView里面加入TextView来实现

我们看整个布局的layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white" >

    <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:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@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:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@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="5dp"
                android:paddingRight="5dp"
                android:paddingTop="3dp" >

                <!-- 选中的滑块 -->
                <ImageView
                    android:id="@+id/column_slide_bar"
                    android:layout_width="49dp"
                    android:layout_height="29dp" />

                <!-- 所有的TextView加到这个LinearLayout中 -->
                <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>

重点的实现代码:

@Override
protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);

   setContentView(R.layout.news_switch_main);

   animImage = (ImageView)findViewById(R.id.column_slide_bar);
   scrollToLeft = (ImageButton)findViewById(R.id.column_to_left);
    scrollToRight = (ImageButton)findViewById(R.id.column_to_right);
   columnTitleLayout = (LinearLayout) findViewById(R.id.column_title_layout);
   
   updateResource();

}

private void updateResource() {
   array.clear();
   String[] resource = this.getResources().getStringArray(R.array.all_choice);
   for (int j = 0; j < resource.length; j++) {
      String name = resource[j];
      array.add(name);
   }
   initTab();

}

private void initTab() {
   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);
   
}

所有构造出来的TextView都放到columnTitleLayout中，每次进入页面columnTitleLayout都得removeAllViews,不然会造成脏数据的问题

然后我们看选中不同栏目，滑块如何跟着滑动过去:

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(NewsSwitchActivity.this.getResources().getColor(R.drawable.gray2));
      }

      @Override
      public void onAnimationRepeat(Animation animation) {
      }

      @Override
      public void onAnimationEnd(Animation animation) {
         ((TextView) columnTitleLayout.getChildAt(currTabIndex)).setTextColor(NewsSwitchActivity.this.getResources().getColor(R.drawable.white));
         lastTabIndex = currTabIndex;
      }
   });
   animImage.startAnimation(animation);
}

   

@Override
public void onClick(View v) {
   int k = (Integer)v.getTag();
   lastTabIndex = currTabIndex;
   currTabIndex = k;

   String text = ((TextView) v).getText().toString();

   if (lastTabIndex != currTabIndex) {

      if (currTabIndex == array.size()) {
         return;
      }
      showAnimation();

   }
}

从代码可以看到滑动的只是ImageView,那些TextView是不动的

代码在https://github.com/nickgao1986/StepSport