頻道欄目
首頁 > 資訊 > Android實例 > 正文

Android仿網易客戶端頂部導航欄效果

16-06-21        來源:[db:作者]  
收藏   我要投稿

  這篇文章主要為大家詳細介紹了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> 

 

相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

美女MM131爽爽爽毛片