Анимация фрагмента макета 3-х панелей заикается
Информация о реализации: Я реализовал трехпанельный макет, следуя ответу CommonsWare, опубликованному здесь на его собственный вопрос:Полный рабочий пример сценария анимации трех фрагментов Gmail?
Как общая идея, у меня есть макет, состоящий из следующих уровней (от 1 до 3):
MainActivity
SlidingMenu
(Шаблон Side Drawer UI) фрагмент скрывается на левой стороне иContentFragment
как фрагмент, который содержит 3 панели макета.ВнутриContentFragment
: LeftListFragment
(строки с 3 TextViews каждый),MiddleListFragment
(строки с 8 TextViews каждый),DetailFragment
.LeftListFragment
а такжеMiddleListFragment
использованиеCursorLoaders
загрузить данные изContentProvider
внутри каждого списка.DetailFragment
также вызывает курсор с данными при необходимости. Так что я даже не реализовал кастомAdapters
(намного приятнее дизайн таким образом). Затем я добавил макет 3 панели + анимацию. Что касается работы, она работает как задумано, никаких проблем нет.Animation
время 500мс.
Проблема: Анимации немного заикаются. Несколько пропущенных кадров. И когда видны левый и средний, и я щелкаю на элемент среднего списка, чтобы открыть деталь; а также когда я нажимаю кнопку «Назад», чтобы снова увидеть левый и средний списки (когда на самом деле ничего не загружается).
Что я пробовал:
Удален код, который загружает фрагмент вDetailView
, Я просто нажимаю на элемент вMiddleFragment
и анимация начинается без какой-либо детализации. Все еще заикается. Кроме того, при ответном ударе ничего не загружается и все еще заикается, поэтому я предполагаю, что загрузчики / курсоры не являются причиной этого.Я использовал dumpsys gfxinfo, чтобы увидеть среднее время в мс для вычисления каждого кадра. Действительно, среднее время вычислений составляет 18 мс, что выше порога 16 мс. Значит ли это, что заикание происходит из-за времени, которое требуется для рисования списков при анимации? Если так, то почему? Я имею в виду ... у меня нет никаких изображений в представлениях строк. И я не мог испортить код Адаптеров, потому что я не написал ни одного ...УменьшениеAnimation
время от 500мс до 200мс. Это все еще заикается, если вы действительно внимательно смотрите, это просто быстрее.РЕДАКТИРОВАТЬ: Я перешел сrightPaneWidth
вleftPaneWidth
ниже (да, это удаляет анимацию изменения размеров) и заикание теперь исчезло. Список по-прежнему скользит влево, но его ширина не уменьшается. Так что, если больше нет заикания, значит ли это, что в моем коде есть проблема с ObjectAnimator?
ObjectAnimator.ofInt(this, "middleWidth", rightPaneWidth, leftPaneWidth)
.setDuration(ANIM_DURATION).start();
Спасибо за ваше время !
Код для 3-х панельного макета:
package com.xyz.view.widget;
import android.animation.ObjectAnimator;
import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewPropertyAnimator;
import android.widget.LinearLayout;
public class ThreePaneLayout extends LinearLayout
{
private View leftView = null;
private View middleView = null;
private View rightView = null;
private static final int ANIM_DURATION = 500;
private int leftPaneWidth = -1;
private int rightPaneWidth = -1;
// -------------------------------------------------------------------------------------------
// -------------- Constructor
// -------------------------------------------------------------------------------------------
public ThreePaneLayout(Context context, AttributeSet attrs)
{
super(context, attrs);
setOrientation(HORIZONTAL);
}
@Override
public void onFinishInflate()
{
super.onFinishInflate();
leftView = getChildAt(0);
middleView = getChildAt(1);
rightView = getChildAt(2);
}
// -------------------------------------------------------------------------------------------
// -------------- Public methods
// -------------------------------------------------------------------------------------------
public View getLeftView()
{
return leftView;
}
public View getMiddleView()
{
return middleView;
}
public View getRightView()
{
return rightView;
}
@SuppressLint("NewApi")
public void hideLeft()
{
if (leftPaneWidth == -1)
{
leftPaneWidth = leftView.getWidth();
rightPaneWidth = middleView.getWidth();
resetWidget(leftView, leftPaneWidth);
resetWidget(middleView, rightPaneWidth);
resetWidget(rightView, rightPaneWidth);
requestLayout();
}
translateWidgets(-1 * leftPaneWidth, leftView, middleView, rightView);
ObjectAnimator.ofInt(this, "middleWidth", rightPaneWidth, leftPaneWidth)
.setDuration(ANIM_DURATION).start();
}
@SuppressLint("NewApi")
public void showLeft()
{
translateWidgets(leftPaneWidth, leftView, middleView, rightView);
ObjectAnimator.ofInt(this, "middleWidth", leftPaneWidth, rightPaneWidth)
.setDuration(ANIM_DURATION)
.start();
}
// -------------------------------------------------------------------------------------------
// -------------- Private methods
// -------------------------------------------------------------------------------------------
private void setMiddleWidth(int value)
{
middleView.getLayoutParams().width = value;
requestLayout();
}
@TargetApi(12)
private void translateWidgets(int deltaX, View... views)
{
for (final View view : views)
{
ViewPropertyAnimator viewPropertyAnimator = view.animate();
viewPropertyAnimator.translationXBy(deltaX)
.setDuration(ANIM_DURATION);
}
}
private void resetWidget(View view, int width)
{
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams)view.getLayoutParams();
layoutParams.width = width;
layoutParams.weight = 0;
}
}
XML для ContentFragment:
<?xml version="1.0" encoding="utf-8"?>
<com.xyz.view.widget.ThreePaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/fragment_content_three_pane_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:id="@+id/fragment_content_framelayout_left"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3" />
<FrameLayout
android:id="@+id/fragment_content_framelayout_middle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="7" />
<FrameLayout
android:id="@+id/fragment_content_framelayout_right"
android:layout_width="0dp"
android:layout_height="match_parent" />
</com.xyz.view.widget.ThreePaneLayout>