显示隐藏的工具栏动画不流畅

时间:2016-02-11 14:40:56

标签: android android-animation toolbar android-coordinatorlayout

在我最近的一个应用程序中,当用户在列表中滚动时,我实现了隐藏/显示工具栏(Recyclerview)。我的应用程序有3个片段和一个视图寻呼机来呈现它们。工具栏在滚动时适当隐藏。但是,当我更改片段(在视图页面上调用onPageChange侦听器)时,我正在扩展工具栏。有时当它正在扩展时,动画是平滑的,但有时会有轻微的延迟。我不明白我做错了什么。 为了说明这一点,我录制了我的屏幕,请舔here观看视频。

这是我的main_layout:

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.studentsins.lust.MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/appBarLayouy"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"
        app:layout_scrollFlags="scroll|enterAlways" />

    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="@dimen/tabsHeight"
        style="@style/NavigationTab"/>


</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>


<include layout="@layout/content_main"/>

<com.getbase.floatingactionbutton.FloatingActionsMenu
    android:id="@+id/floatingActionMenu"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    fab:fab_addButtonColorNormal="@color/blood_orange"
    fab:fab_addButtonColorPressed="@color/dirtyWhite"
    fab:fab_addButtonPlusIconColor="@color/dirtyWhite"
    fab:fab_addButtonSize = "normal"
    fab:fab_labelStyle="@style/menu_labels_style"
    fab:fab_labelsPosition="left"
    app:layout_anchor="@id/viewpager"
    app:layout_anchorGravity="bottom|end">

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/createPlanBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fab:fab_colorNormal="@color/blood_orange"
        fab:fab_title="Create a plan"
        fab:fab_size="normal"
        app:fab_icon="@drawable/ic_event_white_48dp"
        fab:fab_colorPressed="@color/dirtyWhite"/>

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/changeStatusBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fab:fab_colorNormal="@color/blood_orange"
        fab:fab_size="normal"
        app:fab_icon="@drawable/ic_textsms_white_48dp"
        fab:fab_title="Change status"
        fab:fab_colorPressed="@color/dirtyWhite"/>

</com.getbase.floatingactionbutton.FloatingActionsMenu>

这是我的feed_fragment:

public class FeedFragment extends Fragment {
public static final String ARG_PAGE = "ARG_PAGE";
private static final String TAG = FeedFragment.class.getSimpleName();
private int mPage;
private RecyclerView mRefreshLayout;
private Context mActivity;

public static FeedFragment newInstance(int page) {
    Bundle args = new Bundle();
    args.putInt(ARG_PAGE, page);
    FeedFragment fragment = new FeedFragment();
    fragment.setArguments(args);
    return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mPage = getArguments().getInt(ARG_PAGE);
    mActivity = getActivity();
    Log.d("MainActivity", "onCreate" + mPage);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_feed_layout,container,false);

    mRefreshLayout = (RecyclerView) view.findViewById(R.id.feedCardViewList);
    LinearLayoutManager linearLayoutManager = new LinearLayoutManager(mActivity);
    linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
    mRefreshLayout.setLayoutManager(linearLayoutManager);

    mRefreshLayout.addOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);

            if (dy >= 0) {
                // Scrolling up.. hide the FAB
                MainActivity.mFloatingActionsMenu.animate()
                        .setDuration(150)
                        .translationY(300);
            } else {
                // Scrolling down.. show the FAB
                MainActivity.mFloatingActionsMenu.animate()
                        .setDuration(150)
                        .translationY(0);
            }

            Log.d(TAG,"DY value: "+dy);

        }
    });
    ArrayList<String> users = new ArrayList<>();
    users.add("Georgi Koemdzhiev");
    users.add("Mariya Menova");
    users.add("Simeon Simeonov");
    users.add("Ivan Dqkov");
    users.add("Dymityr Vasilev");
    users.add("Petar Dimov");
    users.add("Stoyan Stoyanov");
    users.add("Alexander Lunar");
    users.add("Awesome Jhon");

    FeedCardAdapter adapter = new FeedCardAdapter(users,mActivity);

    mRefreshLayout.setAdapter(adapter);
    Log.d("MainActivity", "onCreateView" + mPage);
    return view;
}
}

这是我的MainActivity onCreate方法:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);


    sharedPreferences = PreferenceManager.getDefaultSharedPreferences(MainActivity.this);
    editor = sharedPreferences.edit();

   Boolean isUserLoggedIn = sharedPreferences.getBoolean(Constants.USER_IF_LOG_IN,false);
    if(!isUserLoggedIn){
        navigateToLogin();
    }

    // Get the ViewPager and set it's PagerAdapter so that it can display items
    final ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    viewPager.setAdapter(new LustFragmentPagerAdapter(getSupportFragmentManager(), this));
    // Give the TabLayout the ViewPager
    final TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
    tabLayout.setupWithViewPager(viewPager);

    mFloatingActionsMenu = (FloatingActionsMenu)findViewById(R.id.floatingActionMenu);

    mChangeStatus = (FloatingActionButton)findViewById(R.id.changeStatusBtn);
    mChangeStatus.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Log.d(TAG,"Change Status pressed! | " + viewPager.getCurrentItem());
            mFloatingActionsMenu.collapse();
        }
    });
    mCreatePlan = (FloatingActionButton)findViewById(R.id.createPlanBtn);
    mCreatePlan.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Log.d(TAG,"Create plan pressed! | " + viewPager.getCurrentItem());
            mFloatingActionsMenu.collapse();
        }
    });

    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            //Make sure that the fab is visible when scrolling the pages...
            MainActivity.mFloatingActionsMenu.animate()
                    .setDuration(150)
                    .translationY(0);
            //show the toolbar
            expandToolbar();

        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });


}

这是我的expandToolbar方法代码:

public void expandToolbar(){
    //setExpanded(boolean expanded, boolean animate)
    AppBarLayout appBarLayout = (AppBarLayout)findViewById(R.id.appBarLayouy);
    appBarLayout.setExpanded(true, true);
}

3 个答案:

答案 0 :(得分:3)

我可以建议你另一种方法吗?只需显示/隐藏顶部栏,使用从GONE到VISIBLE的设置可见性,或从可见到​​显示/隐藏需要。并将var through = require('through2'); module.exports = function() { return through.obj(function(file, encoding, callback) { function processFile(file){ console.log(file); // returns <File "relative/path/to/file/aaa.js" ... } callback(null, processFile(file)); }); }; 添加到顶栏的父级。

答案 1 :(得分:0)

我发现造成工具栏扩展动画延迟的原因。问题是,在监听器中的onPageChanged方法被多次调用,因此波纹管代码被多次调用:

 onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        //Make sure that the fab is visible when scrolling the pages...
        MainActivity.mFloatingActionsMenu.animate()
                .setDuration(150)
                .translationY(0);
        //show the toolbar
        expandToolbar();

所以我认为这会导致系统在处理如此多的调用/动画时不时有点挣扎。

我为解决这个问题所做的只是将我的代码从onScrolled转移到&#34; onPageScrollStateChanged&#34;方法(每个viewpager向左/向右滑动一次调用。)

答案 2 :(得分:0)

请将android.support.design.widget.AppBarLayout更改为其他ViewGroup 它可以解决您的问题。 振作起来!