快捷導(dǎo)航

Android仿網(wǎng)易客戶端頂部導(dǎo)航欄效果

更新時間：2016年06月02日 16:02:26 作者：楊先生

這篇文章主要為大家詳細介紹了Android仿網(wǎng)易客戶端頂部導(dǎo)航欄效果，幫助大家制作網(wǎng)易客戶端導(dǎo)航欄特效，感興趣的小伙伴們可以參考一下

最近剛寫了一個網(wǎng)易客戶端首頁導(dǎo)航條的動畫效果，現(xiàn)在分享出來給大家學(xué)習(xí)學(xué)習(xí)。我說一下這個效果的核心原理。下面是效果圖：

首先是布局，這個布局是我從網(wǎng)易客戶端反編譯后弄來的。大家看后應(yīng)該明白，布局文件如下：

<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橫向滾動視圖主要是為了實現(xiàn)當(dāng)導(dǎo)航欄個數(shù)超出屏幕以后可以實現(xiàn)左右移動的效果，這2個ImageButton則是用來實現(xiàn)左右滾動的操作。HorizontalScrollView里面用的一個框架布局，大家都知道框架布局是一個疊加式的布局，所以里面的ImageView會在LinearLayout布局下面一層，這個ImageView就是實現(xiàn)動態(tài)背景效果的。而LinearLayout里面放的是TextView,這里是在后臺程序里面動態(tài)添加。

那要怎樣實現(xiàn)當(dāng)我點擊一個TextView 后實現(xiàn)后面的ImageView動態(tài)移動到我選中的TextView位置呢？這里我們需要為每一個TextView添加onTouchEvent()時間，并且監(jiān)聽ACTION_DOWN時間，也就是手指按下的時候，這時我們就啟動一個TranslateAnimation平移動畫，在動畫結(jié)束時，再將ImageView移動到textview的位置。移動textview的位置我這里是動態(tài)調(diào)整textview的布局來實現(xiàn)的。

下面是實現(xiàn)的代碼：

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的坐標(biāo)位置，而lastX是上一次手指按下的位置，我這里做了判斷來確定移動的方向，然后給動畫添加了一個動畫監(jiān)聽事件，在動畫結(jié)束時我就動態(tài)的把imageview移動到新的坐標(biāo)位置。setFillEnabled(true);這里的作用主要是避免動畫亂跳，這里具體是什么原因我也還不太清楚，但是設(shè)置以后動畫一切都正常。

下面是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; 
 }

在這段代碼中我主要是實現(xiàn)了textview的字體顏色的變還，大家應(yīng)該看得懂，沒什么好說的吧。

最后就是實現(xiàn)HorizontalScrollView控件通過單機左右的imageButton來實現(xiàn)左右移動，這個就是在ImageButton的OnClick事件中來調(diào)用HorizontalScrollView的smoothScrollTo(x,y)方法這里面是傳入新的坐標(biāo)。下面是實現(xiàn)代碼：

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

下面是動態(tài)添加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("財經(jīng)"); 
   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文件中定義的動態(tài)生成控件的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仿網(wǎng)易客戶端頂部導(dǎo)航欄

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: