Linux編程
點擊右側關注,免費入門到精通!
內容目錄
Toggle作者丨丶Ehttps://www.jianshu.com/p/8c15fc4114a7
前言
標題欄是app開發經常用到的東西,幾乎每個頁面都有,那就一定需要一個通用的標題欄了。
說到標題欄,很多人會想到Toolbar,Google爸爸的東西,毋庸置疑;可RadioButton你還在用麼,為什麼?拓展性差,我曾經也封裝改造過Toolbar,標題字體顏色、字體大小、標題居中、更改高度、左側留白等等等等,成功的用了一段時間、但心里還是有些不舒服(別說新手用、面對多變的需求,還是會顯得很無力吧)
請不要噴我、因為我曾經也是一個倔強的堅信Google爸爸所有東西的Android開發者;
說了這麼多、進入正題吧。
效果及做到
1.最簡單的做到和效果
xml
<com.next.easytitlebar.view.EasyTitleBarandroid:id="@+id/titleBar"android:layout_width="match_parent"android:layout_height="wrap_content"></com.next.easytitlebar.view.EasyTitleBar>
Activity
/***歷史記錄*/publicclassHistoryActivityextendsBaseActivity{@OverrideprotectedintgetScreenMode(){return0;}@OverrideprotectedintgetLayoutId(){returnR.layout.activity_history;}@OverrideprotectedvoidonViewCreated(){}@OverrideprotectedvoidinitEventAndData(){}}
效果
Activity中什麼操作都沒有就完成了這個做到、點擊箭頭直接返回、標題顯示的是AndroidManifest.xml中的label(當然這些都是封裝好的、下面會提到)
<activityandroid:name=".ui.HistoryActivity"android:label="歷史記錄"android:launchMode="singleTask"android:screenOrientation="portrait"/>
2.左右兩側新增menu,可能是圖片、文字、也可能是一個稍複雜的View(數量也都不一定),這也是經常見的需求
Java代碼添加文字、圖片及監聽事件
titleBar.addRightImg(R.mipmap.icon_contact,newEasyTitleBar.MenuBuilder.OnMenuClickListener(){@OverridepublicvoidOnMenuEvent(){Toast.makeText(getContext(),"沒有聯繫人",Toast.LENGTH_SHORT).show();}});
也可以這樣添加menu、同時設置之間的距離
locationText=(TextView)newEasyTitleBar.MenuBuilder(getContext(),titleBar).text("北京").paddingleft(15).paddingright(15).menuTextColor(ContextCompat.getColor(getContext(),R.color.appColor)).onItemClickListener(newEasyTitleBar.MenuBuilder.OnMenuClickListener(){@OverridepublicvoidOnMenuEvent(){locationText.setText("上海");}}).createText();titleBar.addLeftView(locationText);
Java代碼添加稍複雜view
Viewview=LayoutInflater.from(getContext()).inflate(R.layout.schedule_menu_view,null);titleBar.addRightView(view);
xml中也可以添加(xml左右兩邊最多添加三個、應該夠了吧,滿足不了可以在Java代碼中添加)
<!--右邊圖標--><attrname="Easy_rightOneImage"format="reference"/><!--右邊文字--><attrname="Easy_rightOneText"format="string"/><!--右邊圖標--><attrname="Easy_rightTwoImage"format="reference"/><!--右邊文字--><attrname="Easy_rightTwoText"format="string"/><!--右邊圖標--><attrname="Easy_rightThreeImage"format="reference"/><!--右邊文字--><attrname="Easy_rightThreeText"format="string"/>
等等、那點擊事件呢?
你可以通過getRightLayout(position)直接獲取到view、然後設置點擊事件
titleBar.getRightLayout(0).setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewview){//點擊了}});
這里需要注意的是右側添加的view是從右向左排列的
3.滑動漸變
可使用attachScrollView方法(支持NestedScrollView和RecyclerView),當然你也可以自己監聽滑動距離、然後調用titleBar.setBackgroundColor(color)設置背景的顏色;
titleBar.attachScrollView(mSrollView,R.color.white,EasyUtil.dip2px(getContext(),250)+titleBar.getHeight(),newEasyTitleBar.OnSrollAlphaListener(){@OverridepublicvoidOnSrollAlphaEvent(floatalpha){if(alpha>0.8){titleBar.setTitle("我的");titleBar.setTitleColor(ContextCompat.getColor(getContext(),R.color.common_text_3));EasyStatusBarUtil.StatusBarLightMode(getActivity(),R.color.white,R.color.status_bar_color);//設置白底黑字isBlack=true;}else{isBlack=false;EasyStatusBarUtil.StatusBarDarkMode(getActivity(),((MainActivity)getActivity()).getMode());titleBar.setTitle("");titleBar.setTitleColor(ContextCompat.getColor(getContext(),R.color.white));}}});
4.雙擊事件
處理些滑動到頂部之類的需求
titleBar.setOnDoubleClickListener(newEasyTitleBar.OnDoubleClickListener(){@OverridepublicvoidonDoubleEvent(Viewview){mSrollView.post(newRunnable(){@Overridepublicvoidrun(){mSrollView.fling(0);//mSrollView.smoothScrollTo(0,0);mSrollView.fullScroll(ScrollView.FOCUS_UP);}});}});
配置
1. 依賴
Step 1. Add it in your root build.gradle at the end of repositories:
allprojects{repositories{...maven{url'https://jitpack.io'}}}
Step 2. Add the dependency
implementation'com.github.forvv231:EasyTitleBar:1.0.0'
2. Application中設置全局默認配置
privatevoidinitEasyTitleBar(){EasyTitleBar.init().backIconRes(R.mipmap.icon_l).backgroud(ContextCompat.getColor(instance,R.color.appColor)).titleSize(18).titleColor(ContextCompat.getColor(instance,R.color.white)).titleBarHeight(56);}
封裝
默認點擊返回箭頭、關閉界面
參考
https://www.jianshu.com/p/75a5c24174b2
在Application的onCreate加入以下代碼
registerActivityLifecycleCallbacks(newActivityLifecycleCallbacks(){@OverridepublicvoidonActivityCreated(finalActivityactivity,BundlesavedInstanceState){//ActivityBeanbean=newActivityBean();//Unbinderunbinder=ButterKnife.bind(activity);//bean.setUnbinder(unbinder);//activity.getIntent().putExtra("ActivityBean",bean);//這里全局給Activity設置toolbar和title,你想像力有多豐富,這里就有多強大,以前放到BaseActivity的操作都可以放到這里if(activity.findViewById(R.id.titleBar)!=null){//找到Toolbar並且替換ActionbarEasyTitleBareasyTitleBar=activity.findViewById(R.id.titleBar);easyTitleBar.getBackLayout().setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewview){activity.onBackPressed();}});}}@OverridepublicvoidonActivityStarted(Activityactivity){}@OverridepublicvoidonActivityResumed(Activityactivity){}@OverridepublicvoidonActivityPaused(Activityactivity){}@OverridepublicvoidonActivityStopped(Activityactivity){}@OverridepublicvoidonActivitySaveInstanceState(Activityactivity,Bundlebundle){}@OverridepublicvoidonActivityDestroyed(Activityactivity){//ActivityBeanbean=activity.getIntent().getParcelableExtra("ActivityBean");//bean.getUnbinder().unbind();}});
註:xml使用時id要和Application中findViewById中的一樣,代碼中屏蔽的為ButterKnife的部分、你也可以嘗試下、就不用每次都在Activity中綁定了
屬性
<declare-styleablename="EasyTitleBar"><!--標題欄高度--><attrname="Easy_titleBarHeight"format="dimension"/><!--標題欄背景顏色--><attrname="Easy_titleBarBackground"format="color"/><!--填充狀態欄的顏色--><attrname="Easy_fitColor"format="color|reference"/><!--返回箭頭、左右viewgroup距兩邊的距離--><attrname="Easy_parentPadding"format="dimension"/><!--左右添加的view之間的距離--><attrname="Easy_viewPadding"format="dimension"/><!--標題文字--><attrname="Easy_title"format="string"/><!--標題大小--><attrname="Easy_titleSize"format="dimension"/><!--標題顏色--><attrname="Easy_titleColor"format="color"/><!--標題位置--><attrname="Easy_titleStyle"><flagname="center"value="0"/><flagname="left"value="1"/></attr><!--標題欄分割線的有無--><attrname="Easy_lineState"><flagname="gone"value="0"/><flagname="visiable"value="1"/></attr><!--標題欄分割線高度--><attrname="Easy_lineHeight"format="dimension"/><!--標題欄分割線顏色--><attrname="Easy_lineColor"format="color"/><!--左邊第一個返回箭頭的有無--><attrname="Easy_backLayoutState"><flagname="visiable"value="1"/><flagname="gone"value="0"/></attr><!--左邊箭頭icon--><attrname="Easy_backRes"format="reference"/><!--左邊圖標--><attrname="Easy_leftOneImage"format="reference"/><!--左邊文字--><attrname="Easy_leftOneText"format="string"/><!--左邊圖標--><attrname="Easy_leftTwoImage"format="reference"/><!--左邊文字--><attrname="Easy_leftTwoText"format="string"/><!--左邊圖標--><attrname="Easy_leftThreeImage"format="reference"/><!--左邊文字--><attrname="Easy_leftThreeText"format="string"/><!--左邊ViewGroup的有無--><attrname="Easy_leftLayoutState"><flagname="gone"value="0"/><flagname="visiable"value="1"/></attr><!--右邊圖標--><attrname="Easy_rightOneImage"format="reference"/><!--右邊文字--><attrname="Easy_rightOneText"format="string"/><!--右邊圖標--><attrname="Easy_rightTwoImage"format="reference"/><!--右邊文字--><attrname="Easy_rightTwoText"format="string"/><!--右邊圖標--><attrname="Easy_rightThreeImage"format="reference"/><!--右邊文字--><attrname="Easy_rightThreeText"format="string"/><!--右邊viewGroup的有無--><attrname="Easy_rightLayoutState"><flagname="gone"value="0"/><flagname="visiable"value="1"/></attr><!--設置是否充滿狀態欄--><attrname="Easy_fitsSystemWindows"format="boolean"/><!--設置是否充滿狀態欄--><attrname="Easy_hasStatusPadding"format="boolean"/><!--菜單圖標大小--><attrname="Easy_menuImgSize"format="dimension"/><!--菜單文字大小--><attrname="Easy_menuTextSize"format="dimension"/><!--菜單文字顏色--><attrname="Easy_menuTextColor"format="color"/></declare-styleable>
Demo
github:
https://github.com/forvv231/EasyTitleBar
apk:
https://fir.im/EasyTitleBar
By the way
狀態欄白底黑字以及涉及到Fragment狀態欄的處理,參考
https://www.jianshu.com/p/f6a4433cfd0f
Demo中快速做到底部導航欄,參考
https://www.jianshu.com/p/ce8e09cda486
推薦↓↓↓
長
按
關
註
?【16個技術公眾號】都在這里!
涵蓋:工程師大咖、源碼共讀、工程師共讀、數據結構與算法、黑客技術和網路安全、大數據科技、編程前端、Java、Python、Web編程開發、Android、iOS開發、Linux、數據庫研發、幽默工程師等。