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

Android仿網易客戶端頂部導航欄效果
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

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

       

 首先是佈局,這個佈局是我從網易客戶端反編譯後弄來的。大家看後應該明白,佈局檔案如下:


<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仿網易客戶端頂部導航欄

相關文章

Android 開發 最新文章