Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

The method of android Toolbar development

2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of the method of android Toolbar development, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on the method of android Toolbar development. Let's take a look.

A brief introduction to Toolbar

Toolbar is a new control introduced by android 5.0. before the advent of Toolbar, we used ActionBar and ActionActivity to implement the top navigation bar, so Toolbar can be understood as an updated version of ActionBar. Toolbar greatly expands the ActionBar, using more flexible, less fixed like ActionBar, Toolbar is more like a general View element, can be placed anywhere in the view tree system, you can apply animation, you can scroll with scrollView, and you can interact with other view in the layout.

Basic use of Toolbar

1. If you want to use Toolbar, you should first add the V7 compatibility package to the configuration script of Gradle (the code is as follows, the version is the version of Nan Sister when she wrote this article), or rely on the V7 compatibility package through the operation method of Android Studio's graphical interface.

Compile 'com.android.support:appcompat-v7:23.1.1'

2. Add Toolbar to the layout file where we need the top navigation bar, and configure some commonly used properties (when using custom attributes, you need to pay attention to adding the namespace "app" to the root node).

Xmlns:app= "http://schemas.android.com/apk/res-auto"

Only some common properties are listed here, such as the minimum height, the icon of the return button, the background, and so on. What should be noted here is the "?" in the attribute value. Represents the reuse of the theme style of the Android system. It means that if we change the colorPrimary property in the theme style, the background color of the Toolbar will change accordingly, so remind us to make some configuration in the theme style.

3. Make some common configurations in the styles.xml file. Because we're using

AppCompatActivity, so you must use AppCompat-related themes. I use bright-toned themes without ActionBar here, and note that you need to use your own defined themes in the manifest file. In order to completely remove ActionBar, you need to write down windowActionBar, windowNoTitle, and those declared by android, and make sure that the ActionBar that comes with the system and the third-party compatibility package is completely removed.

@ color/red @ color/green @ color/blue @ color/white false true false true

4. Several colors in the theme are explained below, please refer to the pictures below to understand.

ColorPrimaryDark is the background color of the status bar at the top of our phone (Android5.0 and above are required to change it).

ColorPrimary is the color of the navigation bar.

ColorAccent refers to the color of our common controls, such as Button, etc.

TextColorPrimary refers to the color of the title in our navigation bar.

WindowBackground is the default color of our form.

NavigationBarColor refers to the background color of the virtual buttons in the Android phone.

5. Perform common operations on Toolbar in the code. After you can find the Toolbar through ID, you can click and listen on the navigation icon, as long as the navigation icon is added to the layout file or java code. In the same way, you can also use the menu, look at the notes, and don't repeat them.

Toolbar toolbar = (Toolbar) findViewById (R.id.toolbar); / / A pair of navigation icons on the left of Toolbar are monitored by toolbar.setNavigationOnClickListener (new View.OnClickListener () {@ Override public void onClick (View v) {Toast.makeText (MainActivity.this, "return", Toast.LENGTH_SHORT). Show ();}}); / / menu toolbar.inflateMenu (R.menu.menu_main) is used in Toolbar Toolbar.setOnMenuItemClickListener (new Toolbar.OnMenuItemClickListener () {@ Override public boolean onMenuItemClick (MenuItem item) {switch (item.getItemId ()) {case R.id.action_item1: Toast.makeText (MainActivity.this, "menu 1", Toast.LENGTH_SHORT) .show (); return true Case R.id.action_item2: Toast.makeText (MainActivity.this, menu 2, Toast.LENGTH_SHORT). Show (); return true; case R.id.action_item3: Toast.makeText (MainActivity.this, menu 3, Toast.LENGTH_SHORT). Show () Return true;} return false;}})

6. Running effect diagram

Advanced use of Toolbar-Custom Toolbar

As you can see from the following comparison, the native Toolbar screen is too beautiful to look directly at. Generally speaking, if we want to use Toolbar in the project, we should customize Toolbar. Let's start by discussing how to customize Toolbar.

Let me first give you the core points:

Customize the layout and add it to Toolbar

Customize some properties when necessary

Custom Class inherits Toolbar, reads custom attributes, and sets the layout and content of Toolbar. * some functions need to be exposed for setting title, listening, and so on. The following steps are described in detail.

1. Write a custom layout to put into the custom Toolbar.

Let's use the following two effect pictures to illustrate O (∩ _ ∩) Olympiad.

Since it is generally not recommended to write unexpected properties of width and height on the outermost root node, I embedded a relative layout in the outermost relative layout and set the left and right margins (margin). As for the layout, it depends on the actual project. The demand here for sister Nan is that the title and search box can be switched at any time. So the title and the search box overlap through the project layout, hiding the other when one is needed. Another thing to note is that the left and right buttons do not use those that come with Toolbar, as it may cause asymmetry in the layout and make the title (search box) not centered. When the button is not in use, we do not hide it through the gone method, but through the @ mipmap/icon_background blank image to occupy space and keep the layout symmetrical.

2. Create a new attrs.mxl file in the values folder to store some custom attributes. These attributes can be read literally without detailed explanation.

3. Custom Class inherits Toolbar. The main work of the code is to initialize the interface and listeners to expose the interface for operation.

When initializing the interface, you need to read the values of the custom properties through TintTypedArray, and then make some interface display settings.

The callback of the interface is needed to initialize the listener. The specific steps are to declare the interface publicly, which has the onClick method; to declare the implementation of the interface as a private member variable of Toolbar; to expose the setListener method, which assigns the passed Listener implementation class to the member variable; and to call the onClick method of the member variable when necessary (such as in the click event of the left button).

Expose some functions, such as setting the title, setting whether to display the search box, title, and so on.

/ * Custom navigation bar * / public class CNToolbar extends Toolbar {private TextView toolbar_title; private EditText toolbar_searchview; private ImageView toolbar_leftButton; private ImageView toolbar_rightButton; private View mChildView; private boolean showSearchView; private Drawable left_button_icon; private Drawable right_button_icon; private String title; public CNToolbar (Context context) {this (context, null, 0) } public CNToolbar (Context context, @ Nullable AttributeSet attrs) {this (context, attrs, 0);} public CNToolbar (Context context, @ Nullable AttributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr) / / get the values of some attributes in the layout file through the code final TintTypedArray a = TintTypedArray.obtainStyledAttributes (getContext (), attrs, R.styleable.CNToolbar, defStyleAttr, 0); showSearchView = a.getBoolean (R.styleable.CNToolbar_showSearchView, false); left_button_icon = a.getDrawable (R.styleable.CNToolbar_leftButtonIcon); right_button_icon = a.getDrawable (R.styleable.CNToolbar_rightButtonIcon) Title = a.getString (R.styleable.CNToolbar_myTitle); a.recycle (); / / initial interface initView (); / / initial listener initListener () } / * initialize layout * / private void initView () {if (mChildView = = null) {mChildView = View.inflate (getContext (), R.layout.toolbar, null); toolbar_title = (TextView) mChildView.findViewById (R.id.toolbar_title); toolbar_searchview = (EditText) mChildView.findViewById (R.id.toolbar_searchview) Toolbar_leftButton = (ImageView) mChildView.findViewById (R.id.toolbar_leftButton); toolbar_rightButton = (ImageView) mChildView.findViewById (R.id.toolbar_rightButton); / / add custom layout to Toolbar addView (mChildView) / / set whether the title, search box, left and right buttons are displayed, and set the button icon if (showSearchView) {showSearchview (); hideTitle ();} else {hideSearchview (); showTitle () If (title! = null) {toolbar_title.setText (title);}} if (left_button_icon! = null) {toolbar_leftButton.setImageDrawable (left_button_icon) } if (right_button_icon! = null) {toolbar_rightButton.setImageDrawable (right_button_icon);} / * rewrite the method of setting the title * * @ param title * / @ Override public void setTitle (CharSequence title) {toolbar_title.setText (title) } @ Override public void setTitle (@ StringRes int resId) {toolbar_title.setText (resId);} / * set the icon for the left and right buttons * * @ param d * / public void setLeftButtonIconDrawable (Drawable d) {toolbar_leftButton.setImageDrawable (d);} public void setRightButtonIconDrawable (Drawable d) {toolbar_rightButton.setImageDrawable (d) Switch between title and search box * / public void setShowSearchView () {hideTitle (); showSearchview ();} public void setShowTitleView (String title) {hideSearchview (); showTitle (); toolbar_title.setText (title) * / private void initListener () {toolbar_leftButton.setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {if (onLeftButtonClickListener! = null) {onLeftButtonClickListener.onClick ()) }); toolbar_rightButton.setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {if (onRightButtonClickListener! = null) {onRightButtonClickListener.onClick () });} public interface OnLeftButtonClickListener {void onClick ();} public interface OnRightButtonClickListener {void onClick ();} private OnLeftButtonClickListener onLeftButtonClickListener; private OnRightButtonClickListener onRightButtonClickListener; public void setOnLeftButtonClickListener (OnLeftButtonClickListener listener) {onLeftButtonClickListener = listener } public void setOnRightButtonClickListener (OnRightButtonClickListener listener) {onRightButtonClickListener = listener;} / * set whether the title or search box displays * / private void showTitle () {toolbar_title.setVisibility (View.VISIBLE);} private void hideTitle () {toolbar_title.setVisibility (View.GONE) } private void showSearchview () {toolbar_searchview.setVisibility (View.VISIBLE);} private void hideSearchview () {toolbar_searchview.setVisibility (View.GONE);}} 4, use it like a general control where necessary, note that the namespace of the custom attribute is generally auto.

4, use, where necessary as general controls to use it, pay attention to add custom attributes of the namespace, generally auto on it.

It can also be used in the code, so I won't repeat it any more.

Final CNToolbar toolbar = (CNToolbar) v.findViewById (R.id.toolbar); toolbar.setOnLeftButtonClickListener (new CNToolbar.OnLeftButtonClickListener () {@ Override public void onClick () {toolbar.setShowSearchView ();}}); this is the end of the article on "methods for android Toolbar development". Thank you for reading! I believe you all have a certain understanding of the knowledge of "android Toolbar development methods". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 282

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report