自定義控制元件-----ActionBar
阿新 • • 發佈:2019-01-11
先宣告,一下用的kotlin寫的,不是java,但是這兩個是相通的,如果使用java的話類比就行
寫這個主要是解決原生系統存在的一些問題,比如如果是系統原生的ActionBar的話:
1、getActionBar的時候要考慮到activity引用的主題theme,如果是NoActionBar之類的主題的話,會取不到ActionBar,報空指標
2、即使是theme選對了,也能取到ActionBar了,實際用的時候左右會有16dp的邊距,這是系統在寫theme的時候,左右設定了邊距,雖然網上有一些是解決這個問題的,但是方法都是用的toolBar(需要在xml裡新增控制元件),既然xml裡要新增控制元件還不如自己自定義一個ActionBar,使用起來也靈活,還不用考慮theme的問題,下面來實現自己的自定義ActionBar
=====================================華麗的分割線=========================================
比如我們做一下如下效果
一、我們叫自定義的ActionBar為BaseActionBar
class BaseActionBar constructor(context: Context, attrs: AttributeSet? = null) : RelativeLayout(context, attrs) , View.OnClickListener{ var mListener : ActionBarTouchListener? = null init { val array = context.obtainStyledAttributes(attrs, R.styleable.BaseActionBar) var title = array.getString(R.styleable.BaseActionBar_title) var rightMsg = array.getString(R.styleable.BaseActionBar_rightMessage) var rightMsgIsShow = array.getBoolean(R.styleable.BaseActionBar_rightMessageIsShow, false) val view = LayoutInflater.from(context).inflate(R.layout.base_view_action_bar, null) view.findViewById<ImageView>(R.id.iv_left).setOnClickListener(this) view.findViewById<TextView>(R.id.tv_title).text = title var tvRight = view.findViewById<TextView>(R.id.tv_right) tvRight.setOnClickListener(this) tvRight.text = rightMsg tvRight.visibility = if(rightMsgIsShow) View.VISIBLE else View.INVISIBLE addView(view) } override fun onClick(v: View?) { if (mListener == null) return when(v!!.id){ R.id.iv_left -> mListener!!.onActionBarLeft() R.id.tv_right -> mListener!!.onActionBarRight() } } interface ActionBarTouchListener{ fun onActionBarLeft() fun onActionBarRight() } public fun setActionBarTouchListener(listener: ActionBarTouchListener){ mListener = listener } }
二、資原始檔attrs(放在res/values/下,如果沒有這個檔案就新建一個)
<?xml version="1.0" encoding="utf-8"?> <resources> <!--標題欄--> <declare-styleable name="BaseActionBar"> <attr name="title" format="string"/>//中間標題 <attr name="rightMessage" format="string"></attr>//右側文字 <attr name="rightMessageIsShow" format="boolean"></attr>//右側文字是否顯示 </declare-styleable> </resources>
三、資原始檔layout佈局(用到的圖片資源或是dimen可以自己修改)
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="@dimen/base_action_bar_height" android:background="@color/base_action_bar_bg"> //返回按鈕 <ImageView android:id="@+id/iv_left" android:layout_width="50dp" android:layout_height="match_parent" android:paddingLeft="@dimen/base_padding" android:paddingRight="@dimen/base_padding" android:scaleX="0.5" android:scaleY="0.5" android:src="@mipmap/base_btn_back_white" /> //中間標題 <TextView android:id="@+id/tv_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="標題" android:textColor="#fff" android:textSize="17sp" /> //右側文字 <TextView android:id="@+id/tv_right" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:gravity="center_vertical" android:paddingLeft="@dimen/base_padding" android:paddingRight="@dimen/base_padding" android:text="其他" android:textColor="#fff" android:textSize="15sp" /> </RelativeLayout>
四、引用,分為xml引用和Activity裡的引用
1、在xml裡引用,效果圖如下
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <!--這個一定是自己的包名路徑,不知道的可以隨便在一個類裡new出一個BaseActionBar就可以找到包名 這個裡面有三個重要的屬性,即以app:開頭的三個自定義屬性, app:title是中間的title文字 app:rightMessage是右側文字 app:rightMessageIsShow="true"右側文字是否顯示 且引用的時候注意在根佈局裡新增 xmlns:app="http://schemas.android.com/apk/res-auto"--> <com.baibai.bai.BaseActionBar android:id="@+id/base_action_bar" android:layout_width="match_parent" android:layout_height="@dimen/base_action_bar_height" app:rightMessageIsShow="true" app:rightMessage="我是右側" app:title="支付方式" /> </LinearLayout>
2、在Activity裡設定監聽,跟button設定監聽類似
class TestActivity : Activity() ,BaseActionBar.ActionBarTouchListener{ override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_test) base_action_bar.setActionBarTouchListener(this) } override fun onActionBarLeft() { //左側返回按鈕監聽 finish() } override fun onActionBarRight() { //右側文字監聽 startActivity(Intent(this, MainActivity::class.java)) } }