Android Butterknife (Butter Knife) Usage Summary

Preface:

ButterKnife is a View injection framework focused on the Android system. In the past, you always had to write a lot of findViewById to find the View object. With ButterKnife, you can easily save these steps. It is the masterpiece of the great god JakeWharton and is currently widely used. The most important point is that using ButterKnife has basically no performance loss, because the annotations used by ButterKnife are not reflected at runtime, but generate new classes at compile time. The project is also very convenient to integrate and very simple to use.

By studying this article, you will learn how to use ButterKnife in your project. This article contains the following points:

Preface

1. Brief Introduction
2. ButterKnife Advantages
3. Basic Configuration
4. ButterKnife registration and binding
5. ButterKnife usage experience and precautions
6. Bind ButterKnife in Activity
7. Binding ButterKnife in Fragment
8. Bind ButterKnife in Adapter
9. Basic use of ButterKnife
10. Binding View
11. Binding Resources
12. Event Binding
13. Binding Listener
14. Using findById
15. Setting properties of multiple views
16. Precautions for use
17. More binding annotations
18. More event notes
19. ButterKnife's code obfuscation
20. Butterknife plugin: zelezny
21. Plugin Installation
22. Plugin Usage

ButterKnife project address: https://github.com/JakeWharton/butterknife

▲ Advantages of ButterKnife:

1. Powerful View binding and Click event processing functions to simplify code and improve development efficiency
2. Conveniently handle ViewHolder binding issues in Adapter
3. It will not affect the efficiency of APP during operation and is easy to use and configure
4. The code is clear and readable

Basic Configuration

Configuring and using ButterKnife in an Android Studio project

Step one: Add the following code to the build.gradle file of the Project:

 buildscript {
 repositories {
 jcenter()
 }
 dependencies {
        classpath 'com.android.tools.build:gradle:2.3.3'  
 classpath 'com.jakewharton:butterknife-gradle-plugin:8.8.1' //Add this line
 }
 }

Step two: Add the following code to App's build.gradle:

 apply plugin: 'com.jakewharton.butterknife'  

Add in dependencies:

 compile 'com.jakewharton:butterknife:8.8.1'  
 annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'  

The construction environment is very simple. Next, let's see how to use it

ButterKnife registration and binding

▲ ButterKnife usage experience and precautions:

1. Bind in the Activity class: ButterKnife.bind(this); must be bound after setContentView(); and after the parent class is bound, the subclass does not need to bind again.
2. Binding in non-Activity classes (eg: Fragment, ViewHold): ButterKnife.bind(this, view); the this here cannot be replaced with getActivity().
3. There is no need to unbind in Activity, but it must be unbinded in onDestroyView() in Fragment.
4. Methods and controls modified with ButterKnife cannot be modified with private or static, otherwise an error will be reported. Error: @BindView fields must not be private or static. (com.zyj.wifi.ButterknifeActivity.button1)
5. setContentView() cannot be implemented via annotations. (Some other annotation frameworks can)
6. When using Activity to bind any object to the root view, if you use a design pattern like MVC, you can call ButterKnife.bind(this, activity) in Activity to bind the Controller.
7. Use ButterKnife.bind(this, view) to bind a view's child node fields. If you use inflate in the child View's layout or in the custom view's constructor, you can call this method immediately. Alternatively, custom view types from XML inflate can use it in the onFinishInflate callback method.

▲ Bind ButterKnife in Activity:

Since you need to bind the Activity in onCreate every time, I suggest you write a BaseActivity to complete the binding, and then the subclass can inherit it. The Activity must be bound after setContentView. Use ButterKnife.bind(this) to bind. The code is as follows:

 public class MainActivity extends AppCompatActivity{
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 //Binding and initializing ButterKnife
        ButterKnife.bind(this);
 }
 }

▲ Bind ButterKnife in Fragment:

The life cycle of a fragment is different from that of an activity. When you bind a fragment in onCreateView, set the view to null in onDestroyView. When you call bind to bind a fragment for you, Butter Knife returns an instance of Unbinder. Call its unbind method in the appropriate life cycle (onDestroyView) callback to unbind the fragment. Use ButterKnife.bind(this, view) to bind. The code is as follows:

 public class ButterknifeFragment extends Fragment{
    private Unbinder unbinder;
 @Override
 public   View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
 View   view = inflater.inflate(R.layout.fragment, container, false );
 //Return an Unbinder value (for unbinding). Note that this cannot use getActivity()
        unbinder = ButterKnife.bind(this, view );
 return   view ;
 } 
 
 /**
 * Perform unbinding operation in onDestroyView
 */
 @Override
 public void onDestroyView() {
        super.onDestroyView();
 unbinder.unbind();
 }
 }

▲ Bind ButterKnife in Adapter:

Use it in the ViewHolder of the Adapter, add a constructor to the ViewHolder, and pass the view into it when creating a new ViewHolder. Use ButterKnife.bind(this, view) to bind, the code is as follows:

 public class MyAdapter extends BaseAdapter { 
 
 @Override
 public   View getView( int position, View   view , ViewGroup parent) {
 ViewHolder holder;
 if ( view != null ) {
      holder = (ViewHolder) view .getTag();
 } else {
 view = inflater.inflate(R.layout.testlayout, parent, false );
      holder = new ViewHolder( view );
 view .setTag(holder);
 } 
 
    holder.name .setText( "Donkor" );
    holder.job.setText( "Android" );
 // etc...
 return   view ;
 } 
 
 static class ViewHolder {
    @BindView(R.id.title) TextView name ;
    @BindView(R.id.job) TextView job; 
 
 public ViewHolder( View   view ) {
      ButterKnife.bind(this, view );
 }
 }
 }

Basic use of ButterKnife

▲ Binding View:

Control id annotation: @BindView()

 @BindView( R2.id.button)
 public Button button;

Multiple control IDs in the layout Annotation: @BindViews()

 public class MainActivity extends AppCompatActivity { 
 
    @BindViews({ R2.id.button1, R2.id.button2, R2.id.button3})
 public List<Button> buttonList; 
 
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); 
 
        ButterKnife.bind(this); 
 
        buttonList.get( 0 ).setText( "hello 1 " );
        buttonList.get( 1 ).setText( "hello 2 " );
        buttonList.get( 2 ).setText( "hello 3 " );
 }
 }

▲ Binding resources:

Bind string: @BindString()

 public class MainActivity extends AppCompatActivity { 
 
 @BindView(R2.id.button) //Bind button control
 public Button button ; 
 
 @BindString(R2.string.app_name) //Bind the string in the resource file
 String str; 
 
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 //Bind activity
        ButterKnife.bind( this );
        button.setText( str );
 }
 }

Bind the array in the string: @BindArray()

 <resources>
    <string name = "app_name" >City</string> 
 
    <string-array name = "city" >
 <item>Beijing City</item>
 <item>Tianjin</item>
 <item>Harbin</item>
 <item>Dalian City</item>
 <item>Hong Kong City</item>
 </string-array> 
 
 </resources> 
 
 ----------------------------------------------------------------------------------   
 
 public class MainActivity extends AppCompatActivity { 
 
 @BindView(R2.id.button) //Bind button control
 public Button button ; 
 
 @BindString(R2.string.app_name) //Bind the string in the resource file
 String str; 
 
 @BindArray(R2.array.city) //Bind the array in string
 String [] cities; 
 
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 //Bind activity
        ButterKnife.bind( this );
        button.setText(citys[0]);
 }
 }

Bind Bitmap resource: @BindBitmap()

 public class MainActivity extends AppCompatActivity { 
 
 @BindView( R2.id.imageView ) //Bind the ImageView control
 public ImageView imageView ; 
 
 @BindBitmap(R2.mipmap.bm) //Bind Bitmap resources
 public Bitmap bitmap ; 
 
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); 
 
 //Bind activity
        ButterKnife.bind( this ); 
 
        imageView.setImageBitmap(bitmap);
 } 
 
 }

Bind a color value: @BindColor()

 public class MainActivity extends AppCompatActivity { 
 
 @BindView( R2.id.button) //Bind a control
 public Button button; 
 
 @BindColor( R2.color.colorAccent ) //Specific color value is in the color file
 int black ; //bind a color value 
 
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); 
 
 //Bind activity
        ButterKnife.bind( this ); 
 
        button.setTextColor( black );
 }
 }

▲ Event binding:

Bind click event:

• Bind control click event: @OnClick()
• Bind control long press event: @OnLongClick()

 public class MainActivity extends AppCompatActivity { 
 
 @OnClick(R2.id.button1 ) //Set a click event for button1
 public void showToast(){
        Toast.makeText(this, "is a click" , Toast.LENGTH_SHORT).show();
 } 
 
 @OnLongClick( R2.id.button1 ) //Set a long press event for button1
 public boolean showToast2(){
        Toast.makeText(this, "is a long click" , Toast.LENGTH_SHORT).show();
 return   true ;
 } 
 
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); 
 
 //Bind activity
        ButterKnife.bind( this );
 }
 }

Specify multiple id binding events:

 public class MainActivity extends AppCompatActivity { 
 
 //Tip: When it comes to binding multiple id events, we can use Butterknife of Android studio
 //The plugin zelezny is generated automatically and quickly. The installation and use of the plugin will be introduced below.
    @OnClick({R.id.ll_product_name, R.id.ll_product_lilv, R.id.ll_product_qixian, R.id.ll_product_repayment_methods})
 public void onViewClicked( View   view ) {
        switch ( view .getId()) {
 case R.id.ll_product_name:
 System.out.print ( "I am click event 1" );
 break;
 case R.id.ll_product_lilv:
 System.out.print ( "I am click event 2" );
 break;
 case R.id.ll_product_qixian:
 System.out.print ( "I am click event 3" ); 
 
 break;
 case R.id.ll_product_repayment_methods:
 System.out.print ( "I am click event 4" );
 break;
 }
 } 
 
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); 
 
 //Bind activity
        ButterKnife.bind( this );
 }
 }

From the above example, we can see that multiple click events cannot be written in R2. If you must use R2, you can write them one by one. The correct way to write them is as follows:

 public class MainActivity extends AppCompatActivity { 
 
    @OnClick(R2.id.ll_product_name)
 public void onViewClicked1( View   view ) {
 System.out.print ( "I am click event 1" );
 }
    @OnClick(R2.id.ll_product_lilv)
 public void onViewClicked2( View   view ) {
 System.out.print ( "I am click event 2" );
 }
    @OnClick(R2.id.ll_product_qixian)
 public void onViewClicked3( View   view ) {
 System.out.print ( "I am click event 3" );
 }
    @OnClick(R2.id.ll_product_repayment_methods)
 public void onViewClicked4( View   view ) {
 System.out.print ( "I am click event 4" );
 } 
 
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); 
 
 //Bind activity
        ButterKnife.bind( this );
 }
 }

Custom View uses binding events

No need to specify an id, just annotate OnClick. Looking at the code, it seems to be similar to the method of implementing a click event. In fact, the OnClickListener interface is not implemented. The code is as follows:

 public class MyButton extends Button {
 @OnClick
 public void onClick() {}
 }

▲ Binding monitoring:

Listeners can be automatically configured into methods

 @OnClick(R.id.submit)
 public void submit( View   view ) {
  // TODO submit data to server...
 }

All parameters to listener methods are optional

 @OnClick(R.id.submit)
 public void submit() {
  // TODO submit data to server...
 }

Customize a specific type and it will be converted automatically

 @OnClick(R.id.submit)
 public void sayHi(Button button) {//You will understand the changes in the parameters in the brackets
      button.setText( "Hello!" );
 }

Specify multiple ids in a single binding for common event handling. Here we use click event as an example. Other event listeners are also possible.

 @OnClick(R.id.submitCode,R.id.submitFile,R.id.submitTest)
 public void sayHi(Button button) {//Multiple controls correspond to common events
      button.setText( "Success!" );
 }

Custom views can bind to their own listeners by not specifying an ID.

 public class FancyButton extends Button {
 @OnClick
 public void onClick() {
 // TODO do something!
 }
 }

Multiple method annotations in Listener

Method annotations whose corresponding listeners have multiple callbacks that can be used to bind to any of them. Each annotation has a default callback that it is bound to. Use the callback parameter to specify a replacement. Take Spinner as an example.

Original code:

 Spinner s = new Spinner(this);
 //Original method: Spinner item selection listener event normal writing
       s.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener(){
 @Override
 public void onItemSelected(AdapterView<?> parent, View   view , int position, long id) {
 }
 @Override
 public void onNothingSelected(AdapterView<?> parent) {
 }
 });

Through Butter Knife annotation

 public class MainActivity extends AppCompatActivity {
 /*Use annotations to select and listen to the event processing method for the Spinner item*/
 @OnItemSelected(R.id.my_spiner) //The default callback is ITEM_SELECTED
    void onItemSelected( int position) {
        Toast.makeText(this, "position: " + position, Toast.LENGTH_SHORT).show();
 }
 /*
 * To annotate onNothingSelected, you need to add a callback to the annotation parameter.
 * Note that as long as there is data in the Spinner, the 0th data will be selected by default, so if you want to enter the onNothingSelected() method, you need to clear all the data in the Adapter
 */
    @OnItemSelected(value = R.id.my_spiner, callback = OnItemSelected.Callback.NOTHING_SELECTED)
    void onNothingSelected() {
        Toast.makeText(this, "Nothing" , Toast.LENGTH_SHORT).show();
 } 
 
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); 
 
 //Bind activity
        ButterKnife.bind( this );
        Spinner s=new Spinner(this);
 }
 }

Use of @OnCheckedChanged listener

The original method should be: setOnCheckedChangeListener(). Example

 <?xml version= "1.0" encoding= "utf-8" ?>
 <LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android"    
    android:layout_width= "match_parent"    
    android:layout_height= "match_parent"    
    android:orientation= "vertical" > 
 
 <RadioGroup
        android:id= "@+id/rg_main"    
        android:layout_width= "fill_parent"    
        android:layout_height= "48dp"    
        android:layout_alignParentBottom= "true"    
        android:background= "@color/white"    
        android:orientation= "horizontal" > 
 
 <RadioButton
            android:id= "@+id/rg_home"    
            android:layout_width= "match_parent"    
            android:layout_height= "match_parent"    
            android:focusable= "false"    
            android:text= "@string/nav_one" /> 
 
 <RadioButton
            android:id= "@+id/rg_wealth"    
            android:layout_width= "match_parent"    
            android:layout_height= "match_parent"    
            android:focusable= "false"    
            android:text= "@string/nav_two" /> 
 
 <RadioButton
            android:id= "@+id/rg_account"    
            android:layout_width= "match_parent"    
            android:layout_height= "match_parent"    
            android:focusable= "false"    
            android:text= "@string/nav_four" />
 </RadioGroup> 
 
 </LinearLayout> 
 
 -------------------------------------------------------------------------------   
 
 @OnCheckedChanged({R.id.rg_home,R.id.rg_wealth,R.id.rg_account})
 public void OnCheckedChangeListener(CompoundButton view , boolean ischanged){
        switch ( view .getId()) {
 case R.id.rg_home:
 if (ischanged){//Note: This judgment must be made here. Only when the button corresponding to the id is clicked and the ischanged state changes, the following content will be executed
 //Write your button state change UI and related logic here
 }
 break;
 case R.id.rg_wealth:
                if (ischanged) {
 //Write your button state change UI and related logic here
 }
 break;
 case R.id.rg_account:
                if (ischanged) {
 //Write your button state change UI and related logic here
 }
 break;
 default :
 break;
 }
 }

▲ Using findById:

Butter Knife still includes the findById() method for when you still need to initialize a view from a view, Activity, or Dialog, and it can automatically convert types.

 View   view = LayoutInflater. from (context).inflate(R.layout.thing, null );
 TextView firstName = ButterKnife.findById( view , R.id.first_name);
 TextView lastName = ButterKnife.findById( view , R.id.last_name);
 ImageView iv = ButterKnife.findById( view , R.id.iv);

▲ Set the properties of multiple views:

apply()

Effect: Allows you to perform operations on all views in the list at once.

Action and Setter Interfaces

Purpose: Action and Setter interfaces allow simple behaviors to be specified.

 public class MainActivity extends AppCompatActivity { 
 
    @BindViews({R2.id.first_name, R2.id.middle_name, R2.id.last_name})
 List<EditText> nameViews; 
 
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); 
 
 //Bind activity
        ButterKnife.bind(this); 
 
 //Set the properties of multiple views
 //Method 1: passing value
        ButterKnife.apply(nameViews, DISABLE);
 //Method 2: Specify a value
        ButterKnife.apply(nameViews, ENABLED, false );
 ////Method 3: Set the Property of View
 ButterKnife.apply(nameViews, View .ALPHA, 0.0f); //An Android attribute can also be used in application methods.
 } 
 
 /*
 * Action interface setting properties
 */
 static final ButterKnife. Action < View > DISABLE = new ButterKnife. Action < View >() {
 @Override
 public void apply( View   view , int   index ) {
 view .setEnabled( false ); //The purpose is to enable multiple views to have this attribute
 }
 };
 /*
 * Setter interface to set properties
 */
 static final ButterKnife.Setter< View , Boolean> ENABLED = new ButterKnife.Setter< View , Boolean>() {
 @Override
 public void set ( View   view , Boolean value, int   index ) {
 view .setEnabled(value); //The purpose is to enable multiple views to have this attribute. The variable Boolean value can be passed
 }
 };
 }

▲ Precautions for use:

ButterKinfe's annotation labels vary from version to version.

The Bind tag before 8.0.0 became BindView after 8.0.0, and after 8.7.0, when binding a view, you need to use R2.id.XXX instead of the commonly used R.id.XXX.

Specific changes and view the submission log on gitHub:

• https://github.com/JakeWharton/butterknife/blob/master/CHANGELOG.md#version-800-2016-04-25

By default, @bind and listener binding are required. If the target view cannot be found, an exception will be thrown.

To suppress this behavior and create optional binding, you can add the @Nullable annotation to a field, or the @Optional annotation to a method.

Any annotation named @Nullable can be used for member variables. It is recommended to use the @Nullable annotation from the android "support-annotations" library.

 @Nullable
 @BindView(R.id.might_not_be_there)
 TextView mightNotBeThere; 
 
 @Optional
 @OnClick(R.id.maybe_missing)
 public void onMaybeMissingClicked() {
 // TODO ...
 }

▲ More binding notes:

• @BindView—->Bind a view; id is a view variable
• @BindViews —-> Bind multiple views; id is a list variable of a view
• @BindArray—-> bind the array in string; @BindArray(R.array.city) String[] cities;
• @BindBitmap—->Bind image resources to Bitmap; @BindBitmap( R.mipmap.wifi ) Bitmap bitmap;
• @BindBool —-> Bind a boolean value
• @BindColor —->Bind color;@BindColor(R.color.colorAccent) int black;
• @BindDimen —->Bind Dimen;@BindDimen(R.dimen.borth_width) int mBorderWidth;
• @BindDrawable —-> Bind Drawable; @BindDrawable(R.drawable.test_pic) Drawable mTestPic;
• @BindFloat —->Bind float
• @BindInt —-> Binds int
• @BindString —->Bind a String id to a String variable; @BindString( R.string.app_name ) String meg;

▲ More event notes:

• @OnClick—->Click event
• @OnCheckedChanged —-> Check, Uncheck
• @OnEditorAction —-> Function keys of the soft keyboard
• @OnFocusChange —-> Focus changed
• @OnItemClick item—-> is clicked (note that there is a pitfall here. If there are Button and other control events with click events in the item, you need to set the focusable property of these controls to false)
• @OnItemLongClick item—->Long press (return true to intercept onItemClick)
• @OnItemSelected —->item selected event
• @OnLongClick —-> Long press event
• @OnPageChange —->Page change event
• @OnTextChanged —->Text change event in EditText
• @OnTouch —->Touch event
• @Optional —-> Selective injection. If the current object does not exist, an exception will be thrown. In order to suppress this exception, you can add an annotation to the variable or method to make the injection selective. If the target View exists, it will be injected. If it does not exist, nothing will be done.

 //Test @Optional
 @Optional
 @OnCheckedChanged(R.id.cb_test)
 public void onCheckedChanged(CompoundButton buttonView,boolean isChecked){
 if(isChecked){
 tvTest.setText( "Selected..." );
 } else {
 tvTest.setText( "Cancelled..." );
 }
 }

ButterKnife's code obfuscation

In the obfuscated file, add the following code:

 -keep class butterknife.** { *; }
 -dontwarn butterknife.internal.**
 -keep class **$$ViewBinder { *; } 
 
 -keepclasseswithmembernames class * {
 @butterknife.* <fields>;
 } 
 
 -keepclasseswithmembernames class * {
 @butterknife.* <methods>;
 }

Plugin Installation:

Go to File in the toolbar and find Settings… or use the shortcut Ctrl+Alt+s to open it. Search for zelezny, download the plugin and install it. Restart Android Studio

Plugin usage:

After installing the plugin, you will be prompted to restart AS. After restarting, you can write a layout and create a new code class for testing. During the test, please note that you need to move the cursor to setContentView(R.layout.acty_login), put the cursor in R.layout.acty_login, and then right-click Generate. Here is a gif effect chart to more intuitively show the advantages of the plugin. For multiple IDs that need to be bound, it saves the time of manually typing the code.