做一个推片段动画 [英] Doing a push fragment animation

问题描述

我如何做一个动画的下一个碎片将当前片段

下面是我想要的动画：

我现在的动漫code只是重叠的第二个片段的第一个片段它没有推动它就像在画面

下面是code：

  result_list.setOnItemClickListener（新OnItemClickListener（）{

            @覆盖
            公共无效onItemClick（适配器视图＆LT;＆GT; AV，最终的视图中查看，
                     最终诠释我，长I2）{
                result_list.setEnabled（假）;
                view.animate（）。setDuration（300）.translationX（widthListView）阿尔法（0）。
                withEndAction（新的Runnable（）{
                    @覆盖
                    公共无效的run（）{
                        //setResult(Activity.RESULT_OK,new意图（）。putExtra（bussStop code，data.get（我）.getStop code（））。putExtra（bussStopName，data.get（我）.getStopName（）））;
                        //// INT获取1
                        //data.remove(i）;

                        INT temporaryInteger =我;
                        listLastPostion = temporaryInteger;
                        //customAdapter.notifyDataSetChanged（）;
                        //view.setTranslationX(0）;

                        Log.d（数据，conreq.getCollectedData（）getBusRouteSetData（）得到（temporaryInteger  -  1）.getRouteHeading（））;
                        束束=新包（）;
                        bundle.putString（busdestination，conreq.getCollectedData（）getBusRouteSetData（）得到（temporaryInteger-1）.getRouteHeading（））;
                        bundle.putString（busnumber，conreq.getCollectedData（）getBusRouteSetData（）得到（temporaryInteger-1）.getRouteNo（））;
                        片段片段=新FragmentNextTripForStop（）;
                        fragment.setArguments（包）;
                        FragmentTransaction fragmentManager = getFragmentManager（）的BeginTransaction（）。
                        fragmentManager.setCustomAnimations(R.anim.right_left_anim_x_left,R.anim.right_left_anim_x_right,R.anim.left_right_anim_x_left,R.anim.left_right_anim_x_right);
                        fragmentManager.add（R.id.fragment_searched_data_xml，片段）.addToBackStack（空）.commit（）;
                       // 完（）;
                        //overridePendingTransition(R.anim.right_left_anim_x_left,R.anim.right_left_anim_x_right）;

                    }
                }）;
            }}）;
 

解决方案

虽然这个问题是重复的，没有提供关于这个问题，对于许多观众无法正常工作，并要求他们对自己到底做一些假设的答案。

这是一个很好的问题，考虑到这个功能在许多应用程序存在，但它需要一个非常复杂的答案。我将设法打破答案分解成一系列的隔间的步骤，以确保它是可重复的<！/ P>

问题

问题阻止我们大多数人从这样做很容易是一个复合性的一个。要充分认识这个问题，让我列举的问题：

• 我们不应该使用典型的动画框架为 FragmentManager 和 FragmentTransaction 类提供了一个方便的方法， setCustomAnimations（INT，INT，INT INT），需要 ObjectAnimators
• 此外，我们不能用百分比标志物 ObjectAnimators （传统方法）
• 最后，我们只能确定屏幕宽度在运行，因此必须具有自定义功能在我们自己的布局

解决方案

为了解决这个问题，并提供了身临其境的体验期望，我们必须从多角度解决它。这接下来的几个步骤说明究竟是如何获得这种功能！

1. 我们首先需要定义每个自定义布局片段，因为我们必须有运行时获得了屏幕的宽度，和一个独立的方法操纵的x位置的查看（布局），在此基础上的宽度。

   FractionTranslateLinearLayout.java

    公共类FractionTranslateLinearLayout扩展的LinearLayout {
   
       私人诠释屏幕宽度;
       私人浮动fractionX;
   
       保护无效onSizeChanged（INT W，INT小时，INT oldW，诠释oldh）{
   
           //分配的实际屏幕宽度为我们的类变量。
           屏幕宽度= W;
   
           super.onSizeChanged（W，H，oldW，oldH）;
       }
   
       公众持股量getFractionX（）{
   
           返回fractionX;
       }
   
       公共无效setFractionX（浮动xFraction）{
   
           this.fractionX = xFraction;
   
           //当我们修改xFraction，我们要调整的X平移
           //相应。这里，规模是如果xFraction为-1，则
           //布局是关闭屏幕的左边，如果xFraction是0，则
           //布局是恰好在屏幕上，并且如果xFraction是1，则
           //布局是完全屏幕外右侧。
           setX的（（屏幕宽度大于0）（xFraction *屏幕宽度）：0）;
       }
   }
    

2. 现在，因为我们有一个特殊的布局，使我们基于屏幕的物理宽度来翻译，我们可以在相关片段的XML文件中使用它。

   fragment_1.xml

    ＆LT;。com [your_package_here] .FractionTranslateLinearLayout
       //省略命名空间。
       机器人：layout_width =match_parent
       机器人：layout_height =match_parent＆GT;
   
       ＆LT;的TextView
           机器人：ID =@ + ID / text_view_1
           机器人：layout_width =match_parent
           机器人：layout_height =match_parent
           机器人：文本=片段1/＆GT;
   
   ＆LT; / COM [your_package_here] .FractionTranslateLinearLayout＆GT;
    

   fragment_2.xml

    ＆LT;。com [your_package_here] .FractionTranslateLinearLayout
       //省略命名空间。
       机器人：ID =@ + ID /布局
       机器人：layout_width =match_parent
       机器人：layout_height =match_parent＆GT;
   
       ＆LT;的TextView
           机器人：ID =@ + ID / text_view_2
           机器人：layout_width =match_parent
           机器人：layout_height =match_parent
           机器人：文本=片段2/＆GT;
   
   ＆LT; / COM [your_package_here] .FractionTranslateLinearLayout＆GT;
    

3. 然后，我们必须创建片段类将包含逻辑来实现过渡。

   Fragment1.java

    公共类片段1扩展片段{
   
       公共查看onCreateView（LayoutInflater INF，ViewGroup中VG，叠B）{
   
           //简单地膨胀从.xml文件的查看。
           返回inf.inflate（R.layout.fragment_1，VG，假）;
       }
   }
    

   Fragment2.java

    公共类Fragment2扩展片段{
   
       公共查看onCreateView（LayoutInflater INF，ViewGroup中VG，叠B）{
   
           //简单地膨胀从.xml文件的查看。
           返回inf.inflate（R.layout.fragment_2，VG，假）;
       }
   
       公共无效onActivityCreated（包savedInstanceState）{
   
           视图V = getView（）;
   
           FractionTranslateLinearLayout布局;
           布局=（FractionTranslateLinearLayout）v.findViewById（R.id.layout）;
   
           //将整个视图关闭的屏幕右侧​​现在。
           layout.setFractionX（1.0F）;
       }
   }
    

4. 现在，让我们创建 objectAnimator 的.xml我们将使用翻译查看文件正穿过屏幕。需要注意的是，我们将需要四个这些文件的，因为我们需要一个用于每个处理（出并在），和一个用于每个边（左和右）。

   slide_left_out.xml

    ＆LT; objectAnimator
       //省略命名空间。
       机器人：valueFrom =0
       机器人：valueTo = -  1
       //此字符串必须是类变量的确切名称。
       机器人：propertyName的=xFraction
       机器人：值类型=floatType
       //以毫秒为单位的持续时间。
       机器人：时间=500/＆GT;
    

   slide_right_out.xml

    ＆LT; objectAnimator
       //省略命名空间。
       机器人：valueFrom =0
       机器人：valueTo =1
       //此字符串必须是类变量的确切名称。
       机器人：propertyName的=xFraction
       机器人：值类型=floatType
       //以毫秒为单位的持续时间。
       机器人：时间=500/＆GT;
    

   slide_left_in.xml

    ＆LT; objectAnimator
       //省略命名空间。
       机器人：valueFrom = -  1
       机器人：valueTo =0
       //此字符串必须是类变量的确切名称。
       机器人：propertyName的=xFraction
       机器人：值类型=floatType
       //以毫秒为单位的持续时间。
       机器人：时间=500/＆GT;
    

   slide_right_in.xml

    ＆LT; objectAnimator
       //省略命名空间。
       机器人：valueFrom =1
       机器人：valueTo =0
       //此字符串必须是类变量的确切名称。
       机器人：propertyName的=xFraction
       机器人：值类型=floatType
       //以毫秒为单位的持续时间。
       机器人：时间=500/＆GT;
    

请注意，这些文件夹必须被放置在RES /动画目录中的项目结构。

1. 创建容器布局，将举行各片段，因为我们在它们之间进行转换。

   的main.xml

    ＆LT; com.android.FrameLayout
       //省略命名空间。
       机器人：ID =@ + ID / main_container
       机器人：layout_width =match_parent
       机器人：layout_height =match_parent/＆GT;
    

2. 现在，我们必须创建活动，将包裹得不得了！

   Main.java

    公共类主要扩展活动{
   
       私人布尔showingFirstFragment;
   
       公共无效的onCreate（包savedInstanceState）{
   
           的setContentView（R.layout.main）;
   
           FragmentManager经理= getFragmentManager（）;
   
           FragmentTransaction反式= manager.beginTransaction（）;
   
           //跟踪哪些片段，我们正面临着。
           showingFirstFragment = TRUE;
   
           //添加第一片段到容器上。
           trans.add（R.id.main_container，新片段1（），fragment_1）;
   
           trans.commit（）;
       }
   
       公共无效onBack pressed（）{
   
           //覆盖的后退按钮功能简单地切换
           //片段。注意，这通常会在点击进行
           //点​​击监听器。
           switchFragments（）;
       }
   
       私人无效switchFragments（）{
   
           FragmentManager经理= getFragmentManager（）;
           FragmentTransaction反式= manager.beginTransaction（）;
   
           //设置将模拟功能，你的动画
           //要求。
           INT rightIn = R.animator.slide_right_in;
           INT rightOut = R.animator.slide_right_out;
           INT leftIn = R.animator.slide_left_in;
           INT leftOut = R.animator.slide_left_out;
   
           //请注意，我们在4动画路过这里。请参阅
           //在此方法的文档，因为它是临界
           //该溶液的理解。
           trans.setCustomAnimations（rightIn，leftOut，leftIn，rightOut）;
   
           如果（showingFirstFragment）{
   
               INT容器= R.id.main_container;
   
               //显示第二个片段。
               trans.replace（容器，新Fragment2（），fragment_2）;
               trans.commit（）;
   
               showingFirstFragment = FALSE;
           }
           其他{
   
               //显示的第一个片段被弹出背叠！
               manager.popBackStack（空）;
   
               showingFirstFragment = TRUE;
           }
       }
   }
    

在此code例如，此类是大量使用。它的方法是至关重要的处理的执行<！/ P>

的几点思考

请注意，我在这里做了一些假设，并认为这code是相当独特的：

• 在本例中使用了原始的片段类，因此不会与支持包工作，除非做出必要的修改。
• 在该示例要求您使用 Android的API 13.0 或以上。
• 在这个例子的目的是要翔实，并希望在这里解释所涉及的问题。拼凑的code一起在自己的编辑器的东西，你应该做你自己的自由裁量权！

---

我希望有足够的细节在这里回答你的问题。请让你更多的要求我知道了。

在这一点上，应该有足够的code，以实现自己的扭曲的解决方案。我没有键入此时没有Eclipse编辑器的拐杖，所以如果有任何错误，请接受我的道歉提前！

How can I do a animation that pushes the current fragment by the next fragment

Here is the Animation that I want:

My current animation code just overlaps the first fragment by the second fragment it didnt push it just like in the picture

Here is the code:

result_list.setOnItemClickListener(new OnItemClickListener(){

            @Override
            public void onItemClick(AdapterView<?> av, final View view,
                     final int i, long i2) {
                result_list.setEnabled(false);
                view.animate().setDuration(300).translationX(widthListView).alpha(0).
                withEndAction(new Runnable() {
                    @Override
                    public void run() {
                        //setResult(Activity.RESULT_OK,new Intent().putExtra("bussStopCode", data.get(i).getStopCode()).putExtra("bussStopName", data.get(i).getStopName()));
                        ////int get 1
                        //data.remove(i);

                        int temporaryInteger = i;
                        listLastPostion = temporaryInteger;
                        //customAdapter.notifyDataSetChanged();
                        //view.setTranslationX(0);

                        Log.d("data",conreq.getCollectedData().getBusRouteSetData().get(temporaryInteger - 1).getRouteHeading());
                        Bundle bundle = new Bundle();
                        bundle.putString("busdestination", conreq.getCollectedData().getBusRouteSetData().get(temporaryInteger-1).getRouteHeading());
                        bundle.putString("busnumber", conreq.getCollectedData().getBusRouteSetData().get(temporaryInteger-1).getRouteNo());
                        Fragment fragment = new FragmentNextTripForStop();
                        fragment.setArguments(bundle);
                        FragmentTransaction fragmentManager = getFragmentManager().beginTransaction();
                        fragmentManager.setCustomAnimations(R.anim.right_left_anim_x_left,R.anim.right_left_anim_x_right,R.anim.left_right_anim_x_left,R.anim.left_right_anim_x_right);
                        fragmentManager.add(R.id.fragment_searched_data_xml, fragment).addToBackStack(null).commit();
                       // finish();
                        //overridePendingTransition(R.anim.right_left_anim_x_left,R.anim.right_left_anim_x_right);

                    }
                }); 
            }});

解决方案

Although this question is a duplicate, the answer that was provided on that question does not work for many viewers and requires them to make a few assumptions on their end.

This is an excellent question considering this functionality exists in many applications, however it requires a very elaborate answer. I will try to break the answer down into a series of compartmentalized steps to ensure that it is repeatable!

The Problem

The problem inhibiting most of us from doing this easily is one of a compound nature. To fully understand this problem, let me list the issues:

• We should not use typical animation frameworks as the FragmentManager and FragmentTransaction classes provide a convenience method, setCustomAnimations(int, int, int int), that require ObjectAnimators
• Further, we cannot use percentage markers in ObjectAnimators (the traditional approach)
• Finally, we can only determine the screen width at runtime, therefore must have custom functionality in our own layout

The Solution

In order to tackle this problem and provide the immersive experience desired, we must tackle the it from many angles. These next few steps explain exactly how to acquire this functionality!

1. We first need to define a custom layout for each Fragment as we must have runtime access to the width of the screen, and a self-contained method to manipulate the x-position of the View (the layout) based on this width.

   FractionTranslateLinearLayout.java

   public class FractionTranslateLinearLayout extends LinearLayout{
   
       private int screenWidth;
       private float fractionX;
   
       protected void onSizeChanged(int w, int h, int oldW, int oldh){
   
           // Assign the actual screen width to our class variable.
           screenWidth = w;            
   
           super.onSizeChanged(w, h, oldW, oldH);
       }
   
       public float getFractionX(){
   
           return fractionX;
       }
   
       public void setFractionX(float xFraction){
   
           this.fractionX = xFraction;
   
           // When we modify the xFraction, we want to adjust the x translation
           // accordingly.  Here, the scale is that if xFraction is -1, then
           // the layout is off screen to the left, if xFraction is 0, then the 
           // layout is exactly on the screen, and if xFraction is 1, then the 
           // layout is completely offscreen to the right.
           setX((screenWidth > 0) ? (xFraction * screenWidth) : 0);
       }
   }
   

2. Now, since we have a special layout that will allow us to translate based on the physical width of the screen, we can use it in the associated Fragment XML files.

   fragment_1.xml

   <com.[your_package_here].FractionTranslateLinearLayout
       // Omitted namespace.
       android:layout_width="match_parent"
       android:layout_height="match_parent" >
   
       <TextView
           android:id="@+id/text_view_1"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:text="Fragment 1" />
   
   </com.[your_package_here].FractionTranslateLinearLayout>
   

   fragment_2.xml

   <com.[your_package_here].FractionTranslateLinearLayout
       // Omitted namespace.
       android:id="@+id/layout"
       android:layout_width="match_parent"
       android:layout_height="match_parent" >
   
       <TextView
           android:id="@+id/text_view_2"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:text="Fragment 2" />
   
   </com.[your_package_here].FractionTranslateLinearLayout>
   

3. Then, we must create the Fragment classes that will contain the logic to implement the transitions.

   Fragment1.java

   public class Fragment1 extends Fragment {
   
       public View onCreateView(LayoutInflater inf, ViewGroup vg, Bundle b){
   
           // Simply inflate the View from the .xml file.
           return inf.inflate(R.layout.fragment_1, vg, false);
       }
   }
   

   Fragment2.java

   public class Fragment2 extends Fragment {
   
       public View onCreateView(LayoutInflater inf, ViewGroup vg, Bundle b){
   
           // Simply inflate the View from the .xml file.
           return inf.inflate(R.layout.fragment_2, vg, false);
       }
   
       public void onActivityCreated (Bundle savedInstanceState){
   
           View v = getView();
   
           FractionTranslateLinearLayout layout;
           layout = (FractionTranslateLinearLayout) v.findViewById(R.id.layout);
   
           // Move the entire View off to the right of the screen for now.
           layout.setFractionX(1.0f);               
       }
   }
   

4. Let's now create the objectAnimator .xml files that we will use to translate the Views across the screen. Note that we will need four of these files because we need one for each process (out and in), and one for each side (left and right).

   slide_left_out.xml

   <objectAnimator
       // Omitted namespace.
       android:valueFrom="0"
       android:valueTo="-1"
       // This String must be the exact name of the class variable.
       android:propertyName="xFraction"
       android:valueType="floatType"
       // Duration in milliseconds.
       android:duration="500"/>
   

   slide_right_out.xml

   <objectAnimator
       // Omitted namespace.
       android:valueFrom="0"
       android:valueTo="1"
       // This String must be the exact name of the class variable.
       android:propertyName="xFraction"
       android:valueType="floatType"
       // Duration in milliseconds.
       android:duration="500"/>
   

   slide_left_in.xml

   <objectAnimator
       // Omitted namespace.
       android:valueFrom="-1"
       android:valueTo="0"
       // This String must be the exact name of the class variable.
       android:propertyName="xFraction"
       android:valueType="floatType"
       // Duration in milliseconds.
       android:duration="500"/>
   

   slide_right_in.xml

   <objectAnimator
       // Omitted namespace.
       android:valueFrom="1"
       android:valueTo="0"
       // This String must be the exact name of the class variable.
       android:propertyName="xFraction"
       android:valueType="floatType"
       // Duration in milliseconds.
       android:duration="500"/>
   

Note that these folders must be placed in the 'res/animator' directory in your project structure.

1. Create the container layout that will hold each Fragment as we transition between them.

   main.xml

   <com.android.FrameLayout
       // Omitted namespace.
       android:id="@+id/main_container"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />
   

2. Now, we must create the Activity that will wrap everything together!

   Main.java

   public class Main extends Activity {
   
       private boolean showingFirstFragment;            
   
       public void onCreate(Bundle savedInstanceState){
   
           setContentView(R.layout.main);
   
           FragmentManager manager = getFragmentManager();
   
           FragmentTransaction trans = manager.beginTransaction();
   
           // Keep track of which Fragment we are facing.
           showingFirstFragment = true;
   
           // Add the first Fragment to the container.
           trans.add(R.id.main_container, new Fragment1(), "fragment_1");
   
           trans.commit();
       }
   
       public void onBackPressed(){
   
           // Override the back button functionality to simply switch 
           // Fragments. Note that this would normally be done in a click
           // click listener.
           switchFragments();
       }
   
       private void switchFragments(){
   
           FragmentManager manager = getFragmentManager();
           FragmentTransaction trans = manager.beginTransaction();
   
           // Set the animations that will emulate the functionality you
           // requested.    
           int rightIn = R.animator.slide_right_in;
           int rightOut = R.animator.slide_right_out;
           int leftIn = R.animator.slide_left_in;
           int leftOut = R.animator.slide_left_out;
   
           // Note that we pass in 4 animations here.  Please see the 
           // documentation on this method as it is critical to the 
           // understanding of this solution.
           trans.setCustomAnimations(rightIn, leftOut, leftIn, rightOut);          
   
           if(showingFirstFragment){
   
               int container = R.id.main_container;                
   
               // Show the second Fragment.
               trans.replace(container, new Fragment2(), "fragment_2");
               trans.commit();
   
               showingFirstFragment = false;    
           }
           else{
   
               // Show the first Fragment by popping the back stack!
               manager.popBackStack(null);
   
               showingFirstFragment = true;
           }
       }
   }
   

In this code example, this class is used heavily. Its methods are crucial to the execution of the process!

Some Considerations

Note that I have made a few assumptions here, and that this code is quite unique:

• This example uses the original Fragment class, and thus will not work with the support package unless the necessary modifications are made.
• This example requires that you are using Android API 13.0 or above.
• The intent of this example was to be informative and to hopefully explain the issues involved here. Piecing the code together in your own editor is something that you should do at your own discretion!

---

Hopefully there is sufficient detail here to answer your question. Please let me know if you require any more.

At this point, there should be enough code to implement your own twist on the solution. I did type this up without the crutch of the Eclipse editor, so if there are any errors, please accept my apologies in advance!

这篇关于做一个推片段动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！