JellyToolbar

  • 工具条(Toolbar/actionbar)
  • ★★★★★
  • 2017-04-06 02:20
  • 594 kb
  • Android Studio

介绍:

一个果冻肉效果的Toolbar,动画超赞。

运行效果:

使用说明:

要求

  • Android SDK 16+

 root build.gradle:

allprojects {
  repositories {
    ...
    maven { url "https://jitpack.io" }
  }
}

添加dependency:

dependencies {
  compile 'com.github.yalantis:jellytoolbar:v1.0'
}

首先把JellyToolbar添加到activity的布局中:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.yalantis.jellytoolbar.widget.JellyToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingStart="@dimen/activity_horizontal_margin"
        app:cancelIcon="@drawable/ic_close"
        app:endColor="@color/colorEnd"
        app:icon="@drawable/ic_search"
        app:startColor="@color/colorStart"
        app:title="@string/str_news_feed"
        app:titleTextColor="@android:color/white" />

</LinearLayout>

然后为JellyToolbar传入一个JellyListener和content view(一个插入到toolbar中的view)。JellyToolbar有一个 getToolbar()方法,它可以让你使用标准Toolbar的所有方法。

public class MainActivity extends AppCompatActivity {

    private JellyToolbar toolbar;
    private AppCompatEditText editText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (JellyToolbar) findViewById(R.id.toolbar);
        toolbar.getToolbar().setNavigationIcon(R.drawable.ic_menu);
        toolbar.setJellyListener(jellyListener);

        editText = (AppCompatEditText) LayoutInflater.from(this).inflate(R.layout.edit_text, null);
        editText.setBackgroundResource(R.color.colorTransparent);
        toolbar.setContentView(editText);
    }

    private JellyListener jellyListener = new JellyListener() {
        @Override
        public void onCancelIconClicked() {
            if (TextUtils.isEmpty(editText.getText())) {
                toolbar.collapse();
            } else {
                editText.getText().clear();
            }
        }
    };

}

控制动画使用collapse() 和 expand()方法。

重写JellyListener的onToolbarExpandingStarted(), onToolbarCollapsingStarted(), onToolbarExpanded() 和 onToolbarCollapsed() 方法可以得到所有的动画事件。