編輯：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加載Spinner
可以顯示在的Android任務，通過加載進度條的進展。進度條有兩種形狀。加載欄和加載微調(spinner)。在本章中，我們將討論微調(spinner)。Spinner 用
Android使用ImageView 制作透明圓弧實例代碼
這篇文章主要介紹了Android使用ImageView 制作透明圓弧實例代碼的相關資料,需要的朋友可以參考下 這幾天因為項目需求，需要在
android編程實現局部界面動態切換的方法
本文實例講述了android編程實現局部界面動態切換的方法。分享給大家供大家參考，具體如下： 局部界面固定，局部界面可以動態切換。效果如下： 這個效果由3個
Android加載Spinner
可以顯示在的Android任務，通過加載進度條的進展。進度條有兩種形狀。加載欄和加載微調(spinner)。在本章中，我們將討論微調(spinner)。Spinner 用
