Android仿網(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í)有所幫助，也希望大家多多支持腳本之家。
- Android 中使用RadioGroup和Fragment實(shí)現(xiàn)底部導(dǎo)航欄的功能
- 性能分析:指如何快速定位SQL問題
- android中Fragment+RadioButton實(shí)現(xiàn)底部導(dǎo)航欄
- Android自定義ViewPagerIndicator實(shí)現(xiàn)炫酷導(dǎo)航欄指示器（ViewPager+Fragment）
- Android程序開發(fā)之Fragment實(shí)現(xiàn)底部導(dǎo)航欄實(shí)例代碼
- Android實(shí)現(xiàn)沉浸式通知欄通知欄背景顏色跟隨app導(dǎo)航欄背景顏色而改變
- Android實(shí)現(xiàn)底部導(dǎo)航欄功能（選項(xiàng)卡）
- 超簡單的幾行代碼搞定Android底部導(dǎo)航欄功能
- Android 彈出Dialog時(shí)隱藏狀態(tài)欄和底部導(dǎo)航欄的方法
- Android 沉浸式狀態(tài)欄與隱藏導(dǎo)航欄實(shí)例詳解
- android 全屏去掉底部虛擬導(dǎo)航欄的方法
- 解決android 顯示內(nèi)容被底部導(dǎo)航欄遮擋的問題
- Android仿今日頭條頂部導(dǎo)航欄效果的實(shí)例代碼
- Android?Fragment實(shí)現(xiàn)頂部、底部導(dǎo)航欄
相關(guān)文章
Android 簡單實(shí)現(xiàn)一個(gè)流式布局的示例
本篇文章主要介紹了Android 簡單實(shí)現(xiàn)一個(gè)流式布局的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
Android編程實(shí)現(xiàn)自定義分享列表ACTION_SEND功能的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)自定義分享列表ACTION_SEND功能的方法,結(jié)合實(shí)例形式詳細(xì)分析了自定義分享列表功能的步驟與具體操作技巧,需要的朋友可以參考下2017-02-02
Android之ScrollView嵌套ListView和GridView沖突的解決方法
由于ListView，GridView本身都繼承于ScrollView，一旦在ScrollView中嵌套ScrollView，在ScrollView中嵌套使用ListView或者GridView，ListView只會(huì)顯示一行多一點(diǎn)。兩者進(jìn)行嵌套，即會(huì)發(fā)生沖突2013-09-09
這篇文章主要介紹了Android事件傳遞機(jī)制的相關(guān)資料,需要的朋友可以參考下2016-02-02
Android使用注解進(jìn)行代碼檢查的實(shí)現(xiàn)方法
這篇文章主要介紹了Android如何使用注解進(jìn)行代碼檢查,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
Android開發(fā)人臉識(shí)別統(tǒng)計(jì)人臉數(shù)
這篇文章主要介紹了Android開發(fā)人臉識(shí)別統(tǒng)計(jì)人臉數(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
android利用handler實(shí)現(xiàn)打地鼠游戲
這篇文章主要為大家詳細(xì)介紹了android利用handler實(shí)現(xiàn)打地鼠游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
下面我就簡單的說一下android對(duì)線程的c++封裝。需要的朋友可以過來參考下。希望對(duì)大家有所幫助2013-09-09
Android數(shù)據(jù)庫增刪改查實(shí)戰(zhàn)案例
我們?cè)诰幊讨薪?jīng)常會(huì)遇到數(shù)據(jù)庫的操作,這篇文章主要給大家介紹了關(guān)于Android數(shù)據(jù)庫增刪改查的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
android上想實(shí)現(xiàn)局部放大的效果，比如畫面中加個(gè)放大鏡的效果，發(fā)現(xiàn)ShapeDrawable是一個(gè)最好的選擇。2013-06-06