Android實(shí)現(xiàn)帶有指示器的自定義底部導(dǎo)航欄
今天這篇文章,主要是給大家實(shí)現(xiàn)一個自定義的帶有指示器的底部導(dǎo)航欄。
先看一下實(shí)現(xiàn)的效果吧。
這個自定義控件的使用要注意以下幾個方面:
1.沒有布局文件及資源文件,只需要一個java文件就可調(diào)用
2.可以非常靈活的使用,一句代碼就可以添加到項(xiàng)目中
3.暫時只支持4.0以上版本,顏色值使用的是系統(tǒng)自帶色值,如需在低版本使用,請自己替換顏色值
4.支持智能適配,可以根據(jù)底部按鈕的數(shù)量,自動的調(diào)整布局
5.主內(nèi)容區(qū)域,必須使用Fragment實(shí)現(xiàn),通過附加到Viewpager上實(shí)現(xiàn)界面的左右滑動
下面給出主程序的實(shí)現(xiàn),注釋很清楚哈
package com.example.indicatornavigationbar; import android.app.Activity; import android.content.Context; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.DisplayMetrics; import android.view.Gravity; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import android.widget.ImageView; import android.widget.ImageView.ScaleType; import android.widget.LinearLayout; import android.widget.TextView; /** * * @ClassName: com.mengle.activity.IndicatorNavigationBar * @Description: 帶有指示器的底部導(dǎo)航欄 * @author zhaokaiqiang * @date 2014-10-17 上午11:07:40 * */ public class IndicatorNavigationBar extends LinearLayout implements OnClickListener, OnPageChangeListener { // 導(dǎo)航欄默認(rèn)高度,不包括指示器高度,單位是dp private static final int HEIGHT_NAVIGATION_BAR = 40; // 指示器默認(rèn)高度,單位是dp private static final int HEIGHT_INDICATOR = 4; private Context context; private ViewPager viewPager; // 指示器 private ImageView ivBottomLine; // 當(dāng)前顯示的index private int currIndex = 0; // 存儲移動位置 private int positions[]; // 標(biāo)題數(shù)量 private int titleCount; public IndicatorNavigationBar(Context context) { super(context); this.context = context; } /** * * @Description: 依附到父布局上 * @param viewGroup * 要依附在的父布局 * @param titles * 底部顯示的導(dǎo)航文字 * @param viewPager * 綁定的ViewPager對象 * @return void */ public void attachToParent(ViewGroup viewGroup, String[] titles, ViewPager viewPager) { this.viewPager = viewPager; titleCount = titles.length; // 初始化主布局 setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, dip2px(HEIGHT_NAVIGATION_BAR + HEIGHT_INDICATOR))); setBackgroundColor(getResources().getColor(android.R.color.transparent)); setOrientation(VERTICAL); // 導(dǎo)航欄布局 LinearLayout ll_navigation = new LinearLayout(context); ll_navigation.setLayoutParams(new LayoutParams( LayoutParams.MATCH_PARENT, dip2px(HEIGHT_NAVIGATION_BAR))); ll_navigation.setBackgroundColor(getResources().getColor( android.R.color.holo_blue_light)); ll_navigation.setOrientation(HORIZONTAL); // 生成導(dǎo)航按鈕(TextView) for (int i = 0; i < titles.length; i++) { TextView textView = new TextView(context); textView.setLayoutParams(new LayoutParams(0, dip2px(HEIGHT_NAVIGATION_BAR), 1)); textView.setText(titles[i]); textView.setGravity(Gravity.CENTER); textView.setTextSize(16); textView.setTextColor(getResources() .getColor(android.R.color.white)); textView.setId(i); textView.setOnClickListener(this); ll_navigation.addView(textView); } // 添加導(dǎo)航 this.addView(ll_navigation); // 指示器布局 LinearLayout ll_indicator = new LinearLayout(context); ll_indicator.setLayoutParams(new LayoutParams( LayoutParams.MATCH_PARENT, dip2px(HEIGHT_INDICATOR))); ll_indicator.setBackgroundColor(getResources().getColor( android.R.color.holo_blue_light)); ll_indicator.setOrientation(HORIZONTAL); // 指示器 ivBottomLine = new ImageView(context); ivBottomLine.setImageResource(android.R.color.holo_orange_light); ivBottomLine.setScaleType(ScaleType.MATRIX); ivBottomLine .setLayoutParams(new LinearLayout.LayoutParams( getScreenWidth(context) / titleCount, dip2px(HEIGHT_INDICATOR))); ll_indicator.addView(ivBottomLine); // 添加指示器 this.addView(ll_indicator); viewGroup.addView(this); viewPager.setOnPageChangeListener(this); // 初始化移動位置 positions = new int[titleCount]; positions[0] = 0; int distance = (int) (getScreenWidth(context) / titleCount); for (int i = 1; i < titleCount; i++) { positions[i] = distance * i; } } @Override public void onClick(View v) { viewPager.setCurrentItem(v.getId()); } @Override public void onPageScrollStateChanged(int arg0) { } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { Animation animation = new TranslateAnimation(currIndex * positions[1], positions[position], 0, 0); currIndex = position; animation.setFillAfter(true); animation.setDuration(300); ivBottomLine.startAnimation(animation); } private int dip2px(float dpValue) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); } // 獲取屏幕寬度 private int getScreenWidth(Context context) { DisplayMetrics dm = new DisplayMetrics(); ((Activity) context).getWindowManager().getDefaultDisplay() .getMetrics(dm); return dm.widthPixels; } }
在我的github上可以下載這個項(xiàng)目的DEMO
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 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仿網(wǎng)易客戶端頂部導(dǎo)航欄效果
- Android 沉浸式狀態(tài)欄與隱藏導(dǎo)航欄實(shí)例詳解
- Android項(xiàng)目實(shí)戰(zhàn)之仿網(wǎng)易頂部導(dǎo)航欄效果
- Android實(shí)現(xiàn)頂部導(dǎo)航欄可點(diǎn)擊可滑動效果(仿微信仿豆瓣網(wǎng))
- Android中TabLayout+ViewPager 簡單實(shí)現(xiàn)app底部Tab導(dǎo)航欄
- Android design包自定義tablayout的底部導(dǎo)航欄的實(shí)現(xiàn)方法
- Android實(shí)現(xiàn)沉浸式導(dǎo)航欄實(shí)例代碼
相關(guān)文章
android 仿微信demo——微信消息界面實(shí)現(xiàn)(移動端)
本系列文章主要介紹了微信小程序-閱讀小程序?qū)嵗╠emo),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,希望能給你們提供幫助2021-06-06Android開發(fā)實(shí)現(xiàn)調(diào)節(jié)屏幕亮度功能
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)調(diào)節(jié)屏幕亮度功能,涉及Android權(quán)限控制及屏幕亮度相關(guān)屬性操作技巧,需要的朋友可以參考下2018-03-03Android中FTP上傳、下載的功能實(shí)現(xiàn)(含進(jìn)度)
本篇文章主要介紹了Android中FTP上傳、下載(含進(jìn)度),具有一定的參考價值,有需要的可以了解一下。2016-11-11Android設(shè)置TextView顯示指定個數(shù)字符,超過部分顯示...(省略號)的方法
這篇文章主要介紹了Android設(shè)置TextView顯示指定個數(shù)字符,超過部分顯示...(省略號)的方法,涉及Android TextView屬性設(shè)置的相關(guān)技巧,需要的朋友可以參考下2016-02-02Android Activity啟動模式之singleTop實(shí)例詳解
這篇文章主要介紹了Android Activity啟動模式之singleTop,結(jié)合實(shí)例形式較為詳細(xì)的分析了singleTop模式的功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-01-01Android源碼學(xué)習(xí)之單例模式應(yīng)用及優(yōu)點(diǎn)介紹
動態(tài)確保某一個類只有一個實(shí)例,而且自行實(shí)例化并向整個系統(tǒng)提供這個實(shí)例這就是Android單例模式應(yīng)用,接下來詳細(xì)介紹,有需求的朋友可以參考下2013-01-01Android RecyclerView item選中放大被遮擋問題詳解
這篇文章主要介紹了Android RecyclerView item選中放大被遮擋問題詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04Android 抽屜效果的導(dǎo)航菜單實(shí)現(xiàn)代碼實(shí)例
本篇文章主要介紹了Android 抽屜效果的導(dǎo)航菜單實(shí)現(xiàn)代碼實(shí)例,這種側(cè)滑的抽屜效果的菜單很好,有興趣的可以了解一下。2016-12-12