1. 程式人生 > >自定義控制元件-----ActionBar

自定義控制元件-----ActionBar

先宣告,一下用的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))
    }

}