preface

Adjacent to the National Day, to bring you some dry goods, I hope to help you improve the efficiency of development

In the 2018 GDD conference, Google once again recommended a new Material Design component, which I am deeply fascinated by. Toolbar, a component that I believe everyone has touched, has almost replaced the previous ActionBar. However, the Toolbar provided by Google alone is not enough to cope with the changing UI styles in the development process, so this is an opportunity to re-enhance the components of the previously custom CommonToolbar for the vast majority of business scenarios

Here are a few scenarios to introduce this new component

The scene of a

Scene description

  • Build a title bar with a back button on the left
  • The title text is in the middle

Let’s look at the implementation via SToolbar

Methods a

In the XML file, use custom attributes

    <com.sharry.libtoolbar.SToolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:backIcon="@drawable/icon_back"
        app:titleGravity="Center"
        app:titleText="Sharry"
        app:titleTextSize="18dp" />
Copy the code
  • BackIcon: Resource file for the return button
  • TitleGravity: Position of the title (default center)
  • TextText: Title text
  • TitleTextSize: The size of the title text
  • TitleTextColor: The color of the title text

Way 2

Build in code, using stoolbar.Builder to build a Toolbar

SToolbar.Builder(this)
        .setStatusBarStyle(Style.TRANSPARENT)
        .setBackgroundColorRes(R.color.colorPrimary)
        .setTitleGravity(Gravity.CENTER_HORIZONTAL)
        .setTitleText("Sharry")
        .addBackIcon(R.drawable.icon_back)
        .apply()
Copy the code
  • apply()
    • The final call to Apply will build an instance of SToolbar,
    • And add it to the com. Android. Internal, R.i, dc ontent this ContentParent
      • I won’t go into much detail about this resource file.
    • And it will automatically move the layout that we set in our setContentView to the bottom of the Toolbar

If you want to get an object that you don’t want to insert into your layout file, just call the.build() method

SToolbar.Builder(this)
        .//...
        .build()
Copy the code

Scenario 2

Scene description

  • The title
    • The text size is 20 dp
    • The text is in the middle
  • There’s a back button on the left
  • The menu
    • There’s a text menu on the left
    • There is a text menu on the right
    • There’s a picture menu on the right
    • The text menu has a text size of 13DP
    • The spacing between each menu is 10dp

So this is a much more complicated scenario

Methods a

Even this complex text can be quickly built using attributes provided in XML

<com.sharry.libtoolbar.SToolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:backIcon="@drawable/icon_back"
        app:menuLeftText="left_menu"
        app:menuRightIcon="@drawable/icon_right"
        app:menuRightText="right_menu"
        app:menuTextColor="@android:color/white"
        app:menuTextSize="13dp"
        app:subItemInterval="10dp"
        app:titleGravity="Center"
        app:titleText="Sharry"
        app:titleTextColor="@android:color/white"
        app:titleTextSize="18dp" />
Copy the code
  • MenuLeftText: Left menu text
  • MenuRightText: Right menu text
  • MenuTextSize: Size of the menu text
  • SubItemInterval: The interval between each subitem

Way 2

Building with code

Stoolbar.builder (this).setStatusBarstyle (style.transparent).setBackgroundColorres (R.coor.colorprimary .setsubiteminterval (10) // set Gravity. SetTitleGravity (Gravity.CENTER_HORIZONTAL) // setTitleText."Sharry", 18).addBackicon (R.drable.icon_back) // Add the left menu text.addLeftMenutExt (textViewOptions.Builder ().settext ().addBackicon (r.drable.icon_back)"left")
                                .setListener { showMsg("U click left text")}.build()) // Add the right menu text.addrightMenutext (textViewOptions.Builder ().settext ()"right")
                                .setListener { showMsg("U click right text"AddRightMenuImage (imageViewOptions.Builder ().setAbleresId (R.drrawable.icon_right) .setListener { showMsg("U click right image") }
                                .build()
                )
                .apply()
Copy the code

You can see how a menu can be built by adding an Options

  • The SToolbar provides three Options
    • TextViewOptions
      • Passing this option will automatically create a TextView and add it to the specified menu
    • ImageViewOptions
      • Passing this option will automatically create the ImageView and add it to the specified menu
    • ViewOptions
      • This option cannot be used alone. It must be used in conjunction with the View

Options allows you to customize the properties of the View. You can accurately position the padding of the View to control the margins

Two ways of running renderings

Scenario 3

Scene description

  • Immersive status bar
  • There’s a back button on the left
  • There’s text on the left
  • There’s a checkbox on the right

implementation

  1. Define basic simple attributes in XML
<com.sharry.libtoolbar.SToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:statusBarStyle="Transparent"
        app:backIcon="@drawable/icon_back"
        app:subItemInterval="10dp"
        app:titleGravity="Left"
        app:titleTextSize="18dp" />
Copy the code
  • StatusBarStyle: This property controls the status bar
    • Transparent: Transparent
    • Translucent: Translucent
    • Hide: Hides the status bar
    • Default: Indicates the Default status
  • The other properties are already described in the above scenario and will not be repeated here
  1. Define a custom Menu in the code
    protected void initTitle() { SToolbar toolbar = findViewById(R.id.toolbar); MCheckIndicator = new CheckedIndicatorView(this); mCheckIndicator = New CheckedIndicatorView(this); // 2. Add this custom View to the Toolbar via addRightMenuView ViewOptions.Builder() .setVisibility(View.INVISIBLE) .setWidthExcludePadding(dp2px(this, 25)) .setHeightExcludePadding(dp2px(this, 25)) .setPaddingRight(dp2px(this, 10)) .setListener(new View.OnClickListener() { @Override public void onClick(View v) { mPresenter.handleToolbarCheckedIndicatorClick(mCheckIndicator.isChecked());  } }) .build() ); }Copy the code

You can see it here

  • We passed in a custom View
  • A ViewOptions is built, and the properties set by the Builder will eventually be applied to that View

conclusion

I believe that through the introduction of the above several scenarios, we have a certain degree of understanding of SToolbar in use, in fact, each position on the View, can be implemented in this way, so I believe that it should be able to meet the majority of the needs of the development process

You can use Options to adjust views for each location, and you can add custom views for each location, such as creating a Title like this

To learn more, go to Github below to see the source code

Github.com/SharryChoo/…