Android仿網易用戶端頂部導覽列效果_Android

最近剛寫了一個網易用戶端首頁導航條的動畫效果，現在分享出來給大家學習學習。我說一下這個效果的核心原理。下面是效果圖：

       

 首先是布局，這個布局是我從網易用戶端反編譯後弄來的。大家看後應該明白，布局檔案如下：

<FrameLayout     android:id="@id/column_navi"     android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:background="@drawable/top_column_bg" >      <HorizontalScrollView       android:id="@id/column_scrollview"       android:layout_width="fill_parent"       android:layout_height="45.0dip"       android:layout_gravity="center"       android:fadingEdge="vertical"       android:paddingLeft="9.0dip"       android:paddingRight="9.0dip"       android:scrollbars="none" >        <FrameLayout         android:layout_width="wrap_content"         android:layout_height="fill_parent" >          <ImageView           android:id="@id/column_slide_bar"           android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:layout_gravity="center_vertical"           android:src="@drawable/slidebar" />          <LinearLayout           android:id="@id/column_title_layout"           android:layout_width="wrap_content"           android:layout_height="fill_parent"           android:layout_gravity="center_vertical"           android:gravity="center_vertical"           android:paddingLeft="5px"           android:weightSum="6.0" />       </FrameLayout>     </HorizontalScrollView>      <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_gravity="left|center"       android:layout_marginLeft="2.0dip"       android:layout_marginRight="1.0dip"       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_gravity="right|center"       android:layout_marginLeft="1.0dip"       android:layout_marginRight="2.0dip"       android:background="#00000000"       android:src="@drawable/arr_right"       android:visibility="visible" />   </FrameLayout> 

這裡用了HorizontalScrollView橫向滾動視圖主要是為了實現當導覽列個數超出螢幕以後可以實現左右移動的效果，這2個ImageButton則是用來實現左右滾動的操作。HorizontalScrollView裡面用的一個架構布局，大家都知道架構布局是一個疊加式的 布局，所以裡面的ImageView會在LinearLayout布局下面一層，這個ImageView就是實現動態背景效果的。而LinearLayout裡面放的是TextView,這裡是在背景程式裡面動態添加。

那要怎樣實現當我點擊一個TextView 後實現後面的ImageView動態移動到我選中的TextView位置呢？這裡我們需要為每一個TextView添加onTouchEvent()時間，並且監聽ACTION_DOWN時間，也就是手指按下的時候，這時我們就啟動一個TranslateAnimation平移動畫，在動畫結束時，再將ImageView移動到textview的位置。移動textview的位置我這裡是動態調整textview的布局來實現的。

下面是實現的代碼：

private void translateImage(MotionEvent event) {     float x = event.getX();     float rx = event.getRawX();     final float nx = rx - x - 12;     TranslateAnimation trans = null;     if (nx > lastX) {       trans = new TranslateAnimation(0, nx - lastX, 0, 0);     } else if (nx < lastX) {       trans = new TranslateAnimation(0, (lastX - nx) * -1, 0, 0);     } else {       return;     }     trans.setDuration(300);      trans.setAnimationListener(new AnimationListener() {        @Override       public void onAnimationStart(Animation animation) {         // TODO Auto-generated method stub        }        @Override       public void onAnimationRepeat(Animation animation) {         // TODO Auto-generated method stub        }        @Override       public void onAnimationEnd(Animation animation) {         FrameLayout.LayoutParams params = (android.widget.FrameLayout.LayoutParams) column_slide_bar             .getLayoutParams();         params.leftMargin = (int) nx;         column_slide_bar.setLayoutParams(params);       }     });     trans.setFillEnabled(true);     column_slide_bar.startAnimation(trans);     lastX = (int) nx;   } 

這個方法的開頭我是取到手指按下的textview的座標位置，而lastX是上一次手指按下的位置，我這裡做了判斷來確定移動的方向，然後給動畫添加了一個動畫監聽事件，在動畫結束時我就動態把imageview移動到新的座標位置。setFillEnabled(true);這裡的作用主要是避免動畫亂跳，這裡具體是什麼原因我也還不太清楚，但是設定以後動畫一切都正常。

下面是textview的onTouchEvent事件的代碼：

@Override   public boolean onTouch(View v, MotionEvent event) {     if (event.getAction() == MotionEvent.ACTION_DOWN) {       if (up_text != null) {         up_text.setTextColor(Color.BLACK);       } else {         TextView text = (TextView) context             .findViewById(R.id.head_lines);         text.setTextColor(Color.BLACK);       }       translateImage(event);       TextView tv = (TextView) v;       tv.setTextColor(Color.WHITE);       up_text = tv;     }     return true;   } 

 在這段代碼中我主要是實現了textview的字型顏色的變還，大家應該看得懂，沒什麼好說的吧。

最後就是實現HorizontalScrollView控制項通過單機左右的imageButton來實現左右移動，這個就是在ImageButton的OnClick事件中來調用HorizontalScrollView的smoothScrollTo(x,y)方法這裡面是傳入新的座標。下面是實現代碼：

private void addListener() {   column_to_left.setOnClickListener(new OnClickListener() {      @Override     public void onClick(View v) {       column_scrollview.smoothScrollTo(           column_scrollview.getScrollX() - 40, 0);     }   });   column_to_right.setOnClickListener(new View.OnClickListener() {      @Override     public void onClick(View v) {       column_scrollview.smoothScrollTo(           column_scrollview.getScrollX() + 40, 0);     }   }); } 

下面是動態添加textview的代碼：

private void initView() {   column_title_layout = (LinearLayout) findViewById(R.id.column_title_layout);   column_scrollview = (HorizontalScrollView) findViewById(R.id.column_scrollview);   column_slide_bar = (ImageView) findViewById(R.id.column_slide_bar);   column_to_left = (ImageButton) findViewById(R.id.column_to_left);   column_to_right = (ImageButton) findViewById(R.id.column_to_right);    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(65,       LayoutParams.WRAP_CONTENT);   params.gravity = Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL;   params.leftMargin = 9;    TextViewOnTouchListener listener = new TextViewOnTouchListener(       column_slide_bar, this);   TextView text = null;   for (int i = 0; i < 6; i++) {     text = new TextView(this);     text.setTextSize(16);     switch (i) {     case 0:       text.setId(R.id.head_lines);       text.setTextColor(Color.WHITE);       text.setText("頭條");       break;     case 1:       text.setId(R.id.sport);       text.setTextColor(Color.BLACK);       text.setText("體育");       break;     case 2:       text.setId(R.id.entertainment);       text.setTextColor(Color.BLACK);       text.setText("娛樂");       break;     case 3:       text.setId(R.id.finance);       text.setTextColor(Color.BLACK);       text.setText("財經");       break;     case 4:       text.setId(R.id.technology);       text.setTextColor(Color.BLACK);       text.setText("科技");       break;     case 5:       text.setId(R.id.more);       text.setTextColor(Color.BLACK);       text.setText("更多");       break;     }     text.setOnTouchListener(listener);     column_title_layout.addView(text, params);   } } 

下面是ids.xml檔案中定義的動態產生控制項的id：

<?xml version="1.0" encoding="utf-8"?> <resources>    <item name="column_scrollview" type="id"/>   <item name="column_slide_bar" type="id"/>   <item name="column_title_layout" type="id"/>   <item name="column_navi" type="id"/>   <item name="column_to_left" type="id"/>   <item name="column_to_right" type="id"/>   <item name="scroll_layout" type="id"/>   <item name="vote" type="id"/>   <item name="comment" type="id"/>   <item name="picture" type="id"/>   <item name="topic" type="id"/>   <item name="news" type="id"/>   <item name="head_lines" type="id"/>   <item name="sport" type="id"/>   <item name="entertainment" type="id"/>   <item name="finance" type="id"/>   <item name="technology" type="id"/>   <item name="more" type="id"/>  </resources> 

源碼下載： Android仿網易用戶端頂部導覽列

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。