ETitleBar

A simple top navigation bar creation tool. Supports top navigation bar requirements in most cases. Git address

ETitleBar divides the top navigation bar area into three parts, left, middle and right

The default width and height of the left and right areas is equal to the height of the navigation bar, which is 48dp by default, and the width of the middle area is equal to the screen width minus 2* navigation bar height. When multiple buttons or text are added to the left or right area, the area width automatically expands and squeezes the width of the middle area.

By default, a button or text in the left area is displayed on the left, a button or text in the middle area is displayed in the center, and a button in the right area is displayed on the right.

The tree structure of the entire interface is as follows:

|-- DecorView
    |-- RelativeLayout // Encapsulates the Layout of TitleBar and ContentView
        |-- RelativeLayout // Top navigation bar View| - ConstraintLayout// mainly for fitSystemWindows| - LinearLayout// The left area Layout| - ImageTextView// Can set text and image View| -...// You can add multiple| - LinearLayout// The middle area Layout| - ImageTextView// Can set text and image View| -...// You can add multiple| - LinearLayout// The right area Layout| - ImageTextView// Can set text and image View| -...// You can add multiple
        |-- ShadowView The View / / shadow
        |-- ContentView // Real ContentView
Copy the code

Depend on the configuration

Project build.gradle

allprojects {
    repositories {
        ...
        maven { url 'https://www.jitpack.io'}}}Copy the code

Module build.gradle

dependencies {
    implementation 'com.github.RickyHal:ETitleBar:$latest_version'
}
Copy the code

Method of use

The Activity Theme needs to use the NoActionBar, for example

<resources xmlns:tools="http://schemas.android.com/tools">
    <! -- Base application theme. -->
    <style name="Theme.ETitleBar" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <! -- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <! -- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <! -- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">? attr/colorPrimaryVariant</item>
        <! -- Customize your theme here. -->
    </style>
</resources>
Copy the code

Create a navigation bar

Make your project’s BaseActivity inherit from ETitleBarActivity and override the createTitleBar method

abstract class BaseActivity : ETitleBarActivity() {
    override fun createTitleBar(a): ETitleBar.Builder {
        return ETitleBar.Builder(this)
            .setTitle("ETitleBar Demo")
            .fitsSystemWindows(true)
            .setLeftButtonPadding(left = 15.dp, right = 15.dp)
            .setLeftButtonIcon(R.drawable.icon_titlebar_back)
            .withShadow(true)}}Copy the code

In the MainActivity

class MainActivity : BaseActivity() {
    override fun onCreate(savedInstanceState: Bundle?). {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // Update the title, which needs to be called after setContentView to have any effect
        setTitle("Hello World")}}Copy the code

Update navigation bar

override fun onCreate(savedInstanceState: Bundle?). {
    super.onCreate(savedInstanceState)
    updateTitleBar {
        // Set the navigation bar properties in here
        setTitle("Hello world")
        setLeftBackgroundColor(Color.RED)
    }
}
Copy the code

Click event listening

Override the following three methods in the Activity

class MainActivity : BaseActivity() {
    override fun onCreate(savedInstanceState: Bundle?). {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // Update the title, which needs to be called in setContentView to have any effect
        setTitle("Hello World")}// Click the left button. Index is the number of buttons in the left area, View is the corresponding button, and Layout is the corresponding left area
    override fun onLeftClick(index: Int, view: View, layout: LinearLayout) {
        Toast.makeText(this."On left click index=$index view=$view layout=$layout", Toast.LENGTH_SHORT).show()
    }

    override fun onCenterClick(index: Int, view: View, layout: LinearLayout) {
        Toast.makeText(this."On center click index=$index view=$view layout=$layout", Toast.LENGTH_SHORT).show()
    }

    override fun onRightClick(index: Int, view: View, layout: LinearLayout) {
        Toast.makeText(this."On right click index=$index view=$view layout=$layout", Toast.LENGTH_SHORT).show()
    }
}
Copy the code

The available properties

ETitleBar.Builder(this)
    .setLeftButtonText("Back")  // Set the text of the left button
    .setLeftButtonText(R.string.app_name)   // Set the text of the left button
    .setLeftButtonTextSize(16f) // Set the font size for the left button text
    .setLeftButtonTextSize(TypedValue.COMPLEX_UNIT_SP, 16f)  // Set the font size for the left button text
    .setLeftButtonIcon(R.drawable.icon_back)    // Set the left button icon, which is mutually exclusive with the text. Only one can be set
    .setLeftButtonIcon(ContextCompat.getDrawable(this, R.drawable.icon_back))   // Set the left button icon
    .setLeftButtonTextColor(Color.BLACK)    // Set the text color of the left button
    .setLeftButtonTypeface(Typeface.DEFAULT)    // Set the text font for the left button
    .setLeftButtonPadding(left = 10.dp, top = 0.dp, right = 20.dp, bottom = 0.dp)    // Set the left button Padding
    .setLeftButtonMargin(left = 10.dp, top = 0.dp, right = 20.dp, bottom = 0.dp)    // Set the left button Margin
    .applyLeftButton { imageTextView ->
        // Set the left button properties
        imageTextView.setText("Cancel")
    }
    .applyLeftLayout { layout ->
        // Set the attributes of the left area
        layout.setHorizontalGravity(Gravity.CENTER)
    }
    .setLeftView(TextView(this))    // Set a custom left button that will empty the previous button
    .resetLeftView() // Resetting the left area clears out the custom buttons in the left area and adds the default buttons
    .addLeftView(TextView(this))    // Add a custom left button
    .setLeftGravity(Gravity.START)  // Set left Gravity
    .setTitle("ETitleBar Demo") // Set the navigation bar title
    .setTitle(R.string.app_name)    // Set the navigation bar title
    .setTitleColor(Color.BLACK)     // Set the title font color
    .setTitleTextSize(16f)  // Set the title font size
    .setTitleTextSize(TypedValue.COMPLEX_UNIT_SP, 16f) // Set the title font size
    .setTitleTypeface(Typeface.DEFAULT) // Set the title font
    .setTitleViewPadding(left = 0, top = 0, right = 0, bottom = 0) // Set the title View Padding
    .setTitleViewMargin(left = 0, top = 0, right = 0, bottom = 0) // Set the title View Margin
    .applyTitleView { imageTextView ->
        // Set the title View property
        imageTextView.setText("ETitleBar Demo")
    }
    .applyCenterLayout { layout ->
        // Set the middle region properties
        layout.setHorizontalGravity(Gravity.START)
    }
    .setCenterView(TextView(this)) // Set the custom title View
    .resetCenterView() // Resetting the middle area clears the custom headings in the middle area and adds the default headings
    .addCenterView(TextView(this))  // Add a custom title View
    .setCenterGravity(Gravity.START)    // Set the middle Gravity
    .setRightButtonText("More")  // Set the text of the right button
    .setRightButtonText(R.string.app_name)   // Set the text of the right button
    .setRightButtonTextSize(16f) // Set the font size of the right button text
    .setRightButtonTextSize(TypedValue.COMPLEX_UNIT_SP, 16f)  // Set the font size of the right button text
    .setRightButtonIcon(R.drawable.icon_back)    // Set the right button icon, which is mutually exclusive with the text. Only one can be set
    .setRightButtonIcon(ContextCompat.getDrawable(this, R.drawable.icon_back))   // Set the right button icon
    .setRightButtonTextColor(Color.BLACK)    // Set the text color of the right button
    .setRightButtonTypeface(Typeface.DEFAULT)    // Set the text font for the right button
    .setRightButtonPadding(left = 10.dp, top = 0.dp, right = 20.dp, bottom = 0.dp)    // Set the right button Padding
    .setRightButtonMargin(left = 10.dp, top = 0.dp, right = 20.dp, bottom = 0.dp)    // Set the right button Margin
    .applyRightButton { imageTextView ->
        // Set the right button properties
        imageTextView.setText("More")
    }
    .applyRightLayout { layout ->
        // Set the properties of the area on the right
        layout.setHorizontalGravity(Gravity.CENTER)
    }
    .setRightView(TextView(this))    // Set a custom right button, which will empty the previous button
    .resetRightView() // Resetting the right area clears the custom buttons in the right area and adds the default buttons
    .addRightView(TextView(this))    // Add a custom right button
    .setRightGravity(Gravity.START)    // Set the right area Gravity
    .setShadowColor(Color.BLACK)    // Set the navigation bar shadow color
    .setShadowDrawable(R.drawable.shadow_titlebar)  // Set the image as the navigation shadow
    .setShadowDrawable(ContextCompat.getDrawable(this, R.drawable.shadow_titlebar)) // Set the image as the navigation shadow
    .setShadowHeight(5.dp)  // Set the height of the navigation shadow
    .withGradient(true) // Whether to add a transition effect to the navigation shadows
    .withShadow(true)   // Whether to display navigation shadows
    .setTitleBarBackgroundColor(Color.WHITE) // Set the background color of the navigation bar
    .setTitleBarBackground(R.drawable.bg_titlebar)  // Set the navigation background image
    .setLeftLayoutBackgroundColor(Color.WHITE)  // Set the background color of the left area
    .setLeftLayoutBackground(R.drawable.bg_titlebar)    // Set the left area background image
    .setCenterLayoutBackgroundColor(Color.WHITE)    // Set the middle area background color
    .setCenterLayoutBackground(R.drawable.bg_titlebar)  // Set the middle area background image
    .setRightLayoutBackgroundColor(Color.WHITE) // Set the background color of the right area
    .setRightLayoutBackground(R.drawable.bg_titlebar)   // Set the background image of the right area
    .setTitleBarAlpha(1f) // Set navigation transparency
    .fitsSystemWindows(true)    // Add a status bar Padding to the top of the navigation bar
    .overlapTitleBar(false) // Whether the navigation bar and ContentView overlap
    .setTitleBarHeight(48.dp)   // Set the navigation bar height
    .hasLeftButton(true) // Whether to display the left area
    .hasCenter(true)    // Whether to display the middle area
    .hasRightButton(true)   // Whether to display the right area
    .setOnClickListener(object : OnTitleBarClickListener {
        // The left area button is clicked
        override fun onLeftClick(index: Int, view: View, layout: LinearLayout){}// The middle area button is clicked
        override fun onCenterClick(index: Int, view: View, layout: LinearLayout){}// The right area button is clicked
        override fun onRightClick(index: Int, view: View, layout: LinearLayout) {

        }
    })
    .build()
Copy the code