Android-switching control location: LayoutParams-Based Instant switching and ObjectAnimator-based animation effect switching

Android-switching control location: LayoutParams-Based Instant switching and ObjectAnimator-based animation effect switching

Now we need to exchange two controls (two RelativeLayout in this article) and find two methods:

1. LayoutParams is used to change the attributes of the two layout, that is, its relative relationship (such as below), to achieve location switching. However, it does not have an animated Effect of switching, which is an "instant" exchange.

2. I used animation to swap the control location to achieve the animation effect I needed.

 

For example, exchange layoutOne and layoutTwo.

 

 

1. First, we will introduce how to use LayoutParams.

 

 

package com.exchange;import com.exchange.R;import android.app.Activity;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.RelativeLayout;import android.widget.Toast;/* * Exchange layout with LayoutParams * Author : likun@stu.zzu.edu.cn * Date: 2015/7/15 */public class ParamsExchangeActivity extends Activity {private Button btnEx;private LayoutInflater inflater;private RelativeLayout myFirst,mySecond,layoutOne,layoutTwo;//set controls' id , the id is random as you like , do NOT use zeroprivate int btnExId = 11;private int layoutOneId  = 12;private int layoutTwoId   = 13;//exchange flag , in order to swap back and forthprivate boolean TAG_firstLayoutTop;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.layout_main);                btnEx=(Button)findViewById(R.id.button_exchange);                btnEx.setOnClickListener(new BtnExOnClickListener());        inflater=getLayoutInflater();                  TAG_firstLayoutTop = true;                //init layoutOne        myFirst = (RelativeLayout) inflater.inflate(                R.layout.layout_first, null).findViewById(R.id.myFirst);                layoutOne = (RelativeLayout)findViewById(R.id.LayoutOne);        layoutOne.removeAllViews();        layoutOne.addView(myFirst);                //init layoutTwo        mySecond = (RelativeLayout) inflater.inflate(                R.layout.layout_second, null).findViewById(R.id.mySecond);            layoutTwo = (RelativeLayout)findViewById(R.id.LayoutTwo);        layoutTwo.removeAllViews();        layoutTwo.addView(mySecond);            }        public class BtnExOnClickListener implements OnClickListener    {    @Override    public void onClick(View v){    Toast.makeText(getBaseContext(), exchange!, Toast.LENGTH_SHORT).show();        //set id for controls in order to change their Params    btnEx.setId(btnExId);    layoutOne.setId(layoutOneId);     layoutTwo.setId(layoutTwoId);        RelativeLayout.LayoutParams params;    if(TAG_firstLayoutTop){    params = (RelativeLayout.LayoutParams)layoutTwo.getLayoutParams();    params.removeRule(RelativeLayout.BELOW);//remove the exist 'BELOW' rule    params.addRule(RelativeLayout.BELOW,11);//add a new one 'BELOW' rule,below control NO. 11    layoutTwo.setLayoutParams(params);        params = (RelativeLayout.LayoutParams)layoutOne.getLayoutParams();    params.removeRule(RelativeLayout.BELOW);    params.addRule(RelativeLayout.BELOW,13);//below control NO. 13    layoutOne.setLayoutParams(params);        TAG_firstLayoutTop=false;// change the flag    }else{    //vice versa    params = (RelativeLayout.LayoutParams)layoutOne.getLayoutParams();    params.removeRule(RelativeLayout.BELOW);    params.addRule(RelativeLayout.BELOW,11);    layoutOne.setLayoutParams(params);        params = (RelativeLayout.LayoutParams)layoutTwo.getLayoutParams();    params.removeRule(RelativeLayout.BELOW);    params.addRule(RelativeLayout.BELOW,12);    layoutTwo.setLayoutParams(params);        TAG_firstLayoutTop=true;    }    }        }}

 

Ii. Use the animation Exchange Control

The method of using animation exchange is very simple:

 

    ObjectAnimator.ofFloat(layoutTwo, TranslationY, -300).setDuration(1000).start();    ObjectAnimator.ofFloat(layoutOne, TranslationY, 300).setDuration(1000).start();    

The Code is as follows:

 

 

package com.exchange;import android.animation.ObjectAnimator;import android.app.Activity;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.RelativeLayout;import android.widget.Toast;public class AnimExchangeActivity extends Activity {private Button btnEx;private LayoutInflater inflater;private RelativeLayout myFirst,mySecond,layoutOne,layoutTwo;private boolean TAG_firstLayoutTop;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.layout_main);                btnEx=(Button)findViewById(R.id.button_exchange);                btnEx.setOnClickListener(new BtnExOnClickListener());        inflater=getLayoutInflater();                  TAG_firstLayoutTop = true;                //init layoutOne        myFirst = (RelativeLayout) inflater.inflate(                R.layout.layout_first, null).findViewById(R.id.myFirst);                layoutOne = (RelativeLayout)findViewById(R.id.LayoutOne);        layoutOne.removeAllViews();        layoutOne.addView(myFirst);                //init layoutTwo        mySecond = (RelativeLayout) inflater.inflate(                R.layout.layout_second, null).findViewById(R.id.mySecond);            layoutTwo = (RelativeLayout)findViewById(R.id.LayoutTwo);        layoutTwo.removeAllViews();        layoutTwo.addView(mySecond);            }        public class BtnExOnClickListener implements OnClickListener    {    @Override    public void onClick(View v){    Toast.makeText(getBaseContext(), exchange!, Toast.LENGTH_SHORT).show();        if(TAG_firstLayoutTop){    //move upward and downward 300    ObjectAnimator.ofFloat(layoutTwo, TranslationY, -300).setDuration(1000).start();    ObjectAnimator.ofFloat(layoutOne, TranslationY, 300).setDuration(1000).start();    TAG_firstLayoutTop = false;    }else{    //back to normal position    ObjectAnimator.ofFloat(layoutOne, TranslationY, 0).setDuration(1000).start();    ObjectAnimator.ofFloat(layoutTwo, TranslationY, 0).setDuration(1000).start();    TAG_firstLayoutTop = true;    }        }        }}