欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2016年06月02日 16:02:26   作者：楊先生  
這篇文章主要為大家詳細(xì)介紹了Android仿網(wǎng)易客戶端頂部導(dǎo)航欄效果，幫助大家制作網(wǎng)易客戶端導(dǎo)航欄特效，感興趣的小伙伴們可以參考一下

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

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

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

下面是實(shí)現(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; 
 }

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

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

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

最后就是實(shí)現(xiàn)HorizontalScrollView控件通過單機(jī)左右的imageButton來實(shí)現(xiàn)左右移動(dòng)，這個(gè)就是在ImageButton的OnClick事件中來調(diào)用HorizontalScrollView的smoothScrollTo(x,y)方法這里面是傳入新的坐標(biāo)。下面是實(shí)現(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); 
  } 
 }); 
}

下面是動(dòng)態(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("財(cái)經(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文件中定義的動(dòng)態(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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論