Android實(shí)現(xiàn)頂部導(dǎo)航菜單左右滑動效果
本文給大家介紹在Android中如何實(shí)現(xiàn)頂部導(dǎo)航菜單左右滑動效果，具體內(nèi)容如下
第一種解決方案：
實(shí)現(xiàn)原理是使用android-support-v4.jar包中ViewPager控件，在ViewPager控件中設(shè)置流布局，再在流布局中設(shè)置幾項(xiàng)TextView,給每一個(gè)TextView設(shè)置相關(guān)參數(shù)，事件等。關(guān)于ViewPager控件可以設(shè)置全屏幕滑動效果，當(dāng)然也可以實(shí)現(xiàn)局部滑動效果，下面介紹導(dǎo)航菜單。
關(guān)于導(dǎo)航菜單，相信大家對它并不陌生，比如在新聞客戶端中就經(jīng)常使用左右滑動菜單來顯示不同類別的新聞。網(wǎng)上也有關(guān)于這方面的一些示例，但是許多都是使用Tabhost來做的，實(shí)現(xiàn)了圖片平滑動畫效果，但沒有實(shí)現(xiàn)菜單左右滑動的效果。我們先來看下本示例的效果圖：
以上是效果圖，以下讓我們來看來如何才能實(shí)現(xiàn)，先建立程序結(jié)構(gòu)，結(jié)構(gòu)圖如下：
在程序中，我們需要導(dǎo)入android-support-v4.jar包。在SlideMenuUtil類中設(shè)置導(dǎo)航菜單項(xiàng)標(biāo)簽，如下：
package com.slide.util;
/**
* 滑動菜單選項(xiàng)類
* @Description: 滑動菜單選項(xiàng)類
* @FileName: SlideMenuUtil.java
* @Package com.slide.util
* @Author Hanyonglu
* @Date 2012-4-20 下午04:51:24
* @Version V1.0
*/
public class SlideMenuUtil {
// 菜單選項(xiàng)
public static String ITEM_MOBILE = "移動";
public static String ITEM_WEB = "Web";
public static String ITEM_CLOUD = "云計(jì)算";
public static String ITEM_DATABASE = "數(shù)據(jù)庫";
public static String ITEM_EMBED = "嵌入式";
public static String ITEM_SERVER = "服務(wù)器";
public static String ITEM_DOTNET = ".NET";
public static String ITEM_JAVA = "JAVA";
public static String ITEM_SAFE = "安全";
public static String ITEM_DOMAIN = "業(yè)界";
public static String ITEM_RESEASRCH = "研發(fā)";
public static String ITEM_MANAGE = "管理";
// 菜單項(xiàng)計(jì)數(shù)器
public int count = 0;
}
為了實(shí)現(xiàn)導(dǎo)航菜單上的左右圖片，需要在main.xml布局文件中設(shè)置相對布局。
這個(gè)示例中，是把左右導(dǎo)航的圖片顯示在文字上方，在點(diǎn)擊上圖中右三角圖片時(shí)會顯示下一個(gè)頁面導(dǎo)航，具體大家可以看下面代碼。
main.xml中設(shè)置左右圖片的相對布局代碼：
<RelativeLayout android:id="@+id/linearLayout01" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <android.support.v4.view.ViewPager android:id="@+id/slideMenu" android:layout_width="fill_parent" android:layout_height="35dp" android:background="@drawable/top_bg" /> <RelativeLayout android:id="@+id/linearLayout01" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <ImageView android:id="@+id/ivPreviousButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:paddingTop="10dp" android:paddingLeft="5dp" android:visibility="invisible" android:src="@drawable/previous_button" /> </RelativeLayout> <RelativeLayout android:id="@+id/linearLayout01" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <ImageView android:id="@+id/ivNextButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:paddingTop="10dp" android:paddingRight="5dp" android:visibility="invisible" android:src="@drawable/next_button" /> <!-- <ImageView android:id="@+id/ivMenuBackgroundCopy" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:paddingTop="2dp" android:src="@drawable/menu_bg" /> --> </RelativeLayout> <ImageView android:id="@+id/ivMenuBackground" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="2dp" android:layout_toRightOf="@+id/ivPreviousButton" android:paddingTop="2dp" android:visibility="gone" android:src="@drawable/menu_bg" /> </RelativeLayout>
代碼中id為ivMenuBackground的圖片是為了在點(diǎn)擊一項(xiàng)菜單后設(shè)置其背景圖片，菜單中默認(rèn)選中第一項(xiàng)“移動”。
在程序結(jié)構(gòu)圖中的item_xxx.xml是為了在選一項(xiàng)菜單后顯示下面的布局內(nèi)容。這只是個(gè)示例，有興趣的朋友可以改造成其它的布局內(nèi)容。
使用二維數(shù)組存儲導(dǎo)航菜單項(xiàng)：
private String[][] menus = {{SlideMenuUtil.ITEM_MOBILE,SlideMenuUtil.ITEM_WEB,
SlideMenuUtil.ITEM_CLOUD,SlideMenuUtil.ITEM_DATABASE},
{SlideMenuUtil.ITEM_EMBED,SlideMenuUtil.ITEM_SERVER,
SlideMenuUtil.ITEM_DOTNET,SlideMenuUtil.ITEM_JAVA},
{SlideMenuUtil.ITEM_SAFE,SlideMenuUtil.ITEM_DOMAIN,
SlideMenuUtil.ITEM_RESEASRCH,SlideMenuUtil.ITEM_MANAGE}};
上例代碼中：數(shù)組的第一維是用來顯示幾頁數(shù)據(jù)，第二維是用來顯示每一頁中的幾個(gè)菜單項(xiàng)。
在剛開始時(shí)，需要初始化導(dǎo)航菜單內(nèi)容：
LayoutInflater inflater = getLayoutInflater();
menuViews = new ArrayList<View>();
SlideMenuLayout menu = new SlideMenuLayout(this);
for(int i = 0;i < menus.length;i++){
menuViews.add(menu.getSlideMenuLinerLayout(menus[i],screenWidth));
}
main = (ViewGroup)inflater.inflate(R.layout.main, null);
其中，menuViews是用來裝載頁面布局控件，有3個(gè)頁面menuViews就有3項(xiàng)。screenWidth是代表屏幕寬度。這里還使用到SlideMenuLayout類的實(shí)例方法：getSlideMenuLinerLayout(String[] menuTextViews,int layoutWidth)
menuTextViews是代表每頁中有幾項(xiàng)菜單，layoutWidth是屏幕寬度。該方法中代碼如下：
/**
* 頂部滑動菜單布局
* @param menuTextViews
* @param layoutWidth
*/
public View getSlideMenuLinerLayout(String[] menuTextViews,int layoutWidth){
// 包含TextView的LinearLayout
LinearLayout menuLinerLayout = new LinearLayout(activity);
menuLinerLayout.setOrientation(LinearLayout.HORIZONTAL);
// 參數(shù)設(shè)置
LinearLayout.LayoutParams menuLinerLayoutParames = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT,
1);
menuLinerLayoutParames.gravity = Gravity.CENTER_HORIZONTAL;
// 添加TextView控件
for(int i = 0;i < menuTextViews.length; i++){
TextView tvMenu = new TextView(activity);
// 設(shè)置標(biāo)識值
tvMenu.setTag(menuTextViews[i]);
tvMenu.setLayoutParams(new LayoutParams(layoutWidth / 4,30));
tvMenu.setPadding(30, 14, 30, 10);
tvMenu.setText(menuTextViews[i]);
tvMenu.setTextColor(Color.WHITE);
tvMenu.setGravity(Gravity.CENTER_HORIZONTAL);
tvMenu.setOnClickListener(SlideMenuOnClickListener);
// 菜單項(xiàng)計(jì)數(shù)
menuUtil.count ++;
// 設(shè)置第一個(gè)菜單項(xiàng)背景
if(menuUtil.count == 1){
tvMenu.setBackgroundResource(R.drawable.menu_bg);
}
menuLinerLayout.addView(tvMenu,menuLinerLayoutParames);
menuList.add(tvMenu);
}
return menuLinerLayout;
}
上例代碼只是初始化菜單效果，我是使用TextView做為每一項(xiàng)菜單，當(dāng)然還要給每一項(xiàng)菜單設(shè)置事件，事件代碼如下：
// 單個(gè)菜單事件
OnClickListener SlideMenuOnClickListener = new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
String menuTag = v.getTag().toString();
if(v.isClickable()){
textView = (TextView)v;
Log.i("SlideMenu",
"width：" + textView.getWidth() +
"height：" + textView.getHeight());
textView.setBackgroundResource(R.drawable.menu_bg);
for(int i = 0;i < menuList.size();i++){
if(!menuTag.equals(menuList.get(i).getText())){
menuList.get(i).setBackgroundDrawable(null);
}
}
// 點(diǎn)擊菜單時(shí)改變內(nèi)容
slideMenuOnChange(menuTag);
}
}
};
上面代碼中的for循環(huán)是為了清除其它菜單項(xiàng)的背景，slideMenuOnChange(menuTag)方法是為了顯示下面的內(nèi)容。該方法中代碼如下：
// 點(diǎn)擊時(shí)改內(nèi)容
private void slideMenuOnChange(String menuTag){
LayoutInflater inflater = activity.getLayoutInflater();
ViewGroup llc = (ViewGroup)activity.findViewById(R.id.linearLayoutContent);
llc.removeAllViews();
if(menuTag.equals(SlideMenuUtil.ITEM_MOBILE)){
llc.addView(inflater.inflate(R.layout.item_mobile, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_WEB)){
llc.addView(inflater.inflate(R.layout.item_web, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_CLOUD)){
llc.addView(inflater.inflate(R.layout.item_cloud, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_DATABASE)){
llc.addView(inflater.inflate(R.layout.item_database, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_EMBED)){
llc.addView(inflater.inflate(R.layout.item_embed, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_SERVER)){
llc.addView(inflater.inflate(R.layout.item_server, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_DOTNET)){
llc.addView(inflater.inflate(R.layout.item_dotnet, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_JAVA)){
llc.addView(inflater.inflate(R.layout.item_java, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_SAFE)){
llc.addView(inflater.inflate(R.layout.item_safe, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_DOMAIN)){
llc.addView(inflater.inflate(R.layout.item_domain, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_RESEASRCH)){
llc.addView(inflater.inflate(R.layout.item_research, null));
}else if(menuTag.equals(SlideMenuUtil.ITEM_MANAGE)){
llc.addView(inflater.inflate(R.layout.item_manage, null));
}
}
另外，為了設(shè)置左右導(dǎo)航菜單中的圖片，需要在ViewPager控件中的onPageSelected監(jiān)聽事件中更改圖片狀態(tài)：
@Override
public void onPageSelected(int arg0) {
int pageCount = menuViews.size() - 1;
pagerIndex = arg0;
// 顯示右邊導(dǎo)航圖片
if(arg0 >= 0 && arg0 < pageCount){
imageNext.setVisibility(View.VISIBLE);
}else{
imageNext.setVisibility(View.INVISIBLE);
}
// 顯示左邊導(dǎo)航圖片
if(arg0 > 0 && arg0 <= pageCount){
imagePrevious.setVisibility(View.VISIBLE);
}else{
imagePrevious.setVisibility(View.INVISIBLE);
}
}
說明：如果有多個(gè)頁面，則直接顯示右邊導(dǎo)航圖片:
if(menuViews.size() > 1){
imageNext.setVisibility(View.VISIBLE);
}
如果到達(dá)最后一頁時(shí)，則隱藏右邊導(dǎo)航圖片；如果當(dāng)前頁不是第一頁，則直接顯示左邊導(dǎo)航圖片。
另外，還需要給這兩個(gè)導(dǎo)航圖片設(shè)置單擊事件，在點(diǎn)擊時(shí)直接顯示下一頁菜單或是上一頁菜單：
// 右導(dǎo)航圖片按鈕事件
class ImageNextOnclickListener implements OnClickListener{
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
pagerIndex ++;
viewPager.setCurrentItem(pagerIndex);
}
}
// 左導(dǎo)航圖片按鈕事件
class ImagePreviousOnclickListener implements OnClickListener{
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
pagerIndex --;
viewPager.setCurrentItem(pagerIndex);
}
}
到此，第一種解決方案大致思路和代碼就已經(jīng)完了，不過我這里的實(shí)現(xiàn)效果是在滑動時(shí)直接顯示下一頁菜單，本頁菜單就給隱藏掉了。有的朋友可能注意到，要想實(shí)現(xiàn)一點(diǎn)一點(diǎn)向左滑動或是向右滑動，而不是整個(gè)頁面的滑動，也就是如果沒有滑到下一頁會反彈到原來的那頁，就不能用這個(gè)方法了，那么就需要用到HorizontalScrollView，關(guān)于HorizontalScrollView實(shí)現(xiàn)的滑動菜單使用及示例，請看下面的第二種解決方案。
另外，在本示例中我沒有實(shí)現(xiàn)背景圖片的平滑向右或是向左的動畫效果，有興趣的的朋友可以把這樣的效果加上，網(wǎng)上有一些實(shí)現(xiàn)這樣的效果示例。
第二種解決方案：
第二種解決方案我是采用的HorizontalScrollView實(shí)現(xiàn)的，這種布局可以實(shí)現(xiàn)橫向滑動效果，但要注意只能有一個(gè)直接子標(biāo)簽。這種方案相比第一種方案要簡單得多，只需要設(shè)置好布局就可以了。先看下示例運(yùn)行效果：
上圖中實(shí)現(xiàn)的導(dǎo)航菜單左右滑動效果可以讓菜單逐步滑動，我這個(gè)示例中沒有出現(xiàn)反彈的現(xiàn)象。好了，讓我們看下布局代碼：
<HorizontalScrollView android:layout_width="match_parent" android:layout_height="35dp" android:scrollbars="none" > <LinearLayout android:id="@+id/linearLayoutMenu" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/top_bg" android:gravity="center_vertical" > </LinearLayout> </HorizontalScrollView>
其中的菜單項(xiàng)我仍然是用TextView控件，我這里是使用代碼添加的TextView，如下：
private void setSlideMenu(){
// 包含TextView的LinearLayout
LinearLayout menuLinerLayout = (LinearLayout) findViewById(R.id.linearLayoutMenu);
menuLinerLayout.setOrientation(LinearLayout.HORIZONTAL);
// 參數(shù)設(shè)置
LinearLayout.LayoutParams menuLinerLayoutParames = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT,
1);
menuLinerLayoutParames.gravity = Gravity.CENTER_HORIZONTAL;
// 添加TextView控件
for(int i = 0;i < menus.length;i++){
TextView tvMenu = new TextView(this);
tvMenu.setLayoutParams(new LayoutParams(30,30));
tvMenu.setPadding(30, 14, 30, 10);
tvMenu.setText(menus[i]);
tvMenu.setTextColor(Color.WHITE);
tvMenu.setGravity(Gravity.CENTER_HORIZONTAL);
menuLinerLayout.addView(tvMenu,menuLinerLayoutParames);
}
}
怎么樣，感覺不難吧。如果要在<HorizontalScrollView>上方標(biāo)題或是下方設(shè)置內(nèi)容，我們可以把<HorizontalScrollView>嵌套在其它的布局中，相信這個(gè)大家都可以做到，不再多說。
另外，還可以使用Gallery來實(shí)現(xiàn)導(dǎo)航菜單滑動，關(guān)于Gallery如何實(shí)現(xiàn)，本文就不再詳述，有興趣的朋友可以查詢幫助文檔。
更多關(guān)于滑動功能的文章，請點(diǎn)擊專題： 《Android滑動功能》
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Android左右滑出菜單實(shí)例分析
- Android實(shí)現(xiàn)原生側(cè)滑菜單的超簡單方式
- Android實(shí)現(xiàn)自定義滑動式抽屜菜單效果
- android實(shí)現(xiàn)上滑屏幕隱藏底部菜單欄的示例
- Android側(cè)滑菜單之DrawerLayout用法詳解
- android RecyclerView側(cè)滑菜單，滑動刪除，長按拖拽，下拉刷新上拉加載
- Android滑動優(yōu)化高仿QQ6.0側(cè)滑菜單（滑動優(yōu)化）
- Android仿微信滑動彈出編輯、刪除菜單效果、增加下拉刷新功能
- Android利用滑動菜單框架實(shí)現(xiàn)滑動菜單效果
- android自定義左側(cè)滑出菜單效果
相關(guān)文章
Android利用Sensor(傳感器)實(shí)現(xiàn)指南針小功能
這篇文章主要為大家詳細(xì)介紹了Android利用Sensor(傳感器)實(shí)現(xiàn)指南針小功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
Android仿微博個(gè)人詳情頁滾動到頂部的實(shí)例代碼
這篇文章主要介紹了Android仿微博個(gè)人詳情頁滾動到頂部的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒家，需要的朋友可以參考下2019-05-05
最近偶然接觸到了rxjava。關(guān)于rxjava，褒貶不一，有人說好用，有人說難用，不過它到底是什么？它有什么用？接下來，本文通過部分代碼及分析，向大家介紹rxjava及其相關(guān)內(nèi)容。2017-10-10
開源自研內(nèi)存分析利器Android?Bitmap?Monitor圖片定位詳解
這篇文章主要為大家介紹了Android?Bitmap?Monitor開源自研內(nèi)存分析利器，助你定位不合理的圖片使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要為大家詳細(xì)介紹了Android自定義view倒計(jì)時(shí)60秒，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
Android實(shí)現(xiàn)評論欄隨Recyclerview滑動左右移動
這篇文章主要介紹了Android實(shí)現(xiàn)評論欄隨Recyclerview滑動左右移動效果，仿約會吧應(yīng)用詳情頁實(shí)現(xiàn)，感興趣的小伙伴們可以參考一下2016-05-05
Android 自定義LayoutManager實(shí)現(xiàn)花式表格
這篇文章主要介紹了Android 自定義LayoutManager實(shí)現(xiàn)花式表格，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
解析android 流量監(jiān)測的實(shí)現(xiàn)原理
本篇文章是對android中流量監(jiān)測的實(shí)現(xiàn)原理進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
這篇文章主要為大家詳細(xì)介紹了android獲取ibeacon列表的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
Android實(shí)戰(zhàn)教程第二篇之簡單實(shí)現(xiàn)兩種進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)戰(zhàn)教程第二篇，簡單實(shí)現(xiàn)兩種進(jìn)度條效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11