最近剛寫了一個(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,這里是在后臺程序里面動(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
