Android Custom Implementation Flip Card view

generally a view is only one side, but you can customize a view to achieve the flip effect like flipping a book.

Rotate view:

/** * Two ways to construct a flip card * 1: Directly provides a specific naming format for view * 2: provides two linear layouts (front and back) * Created by lips on 2015/4/8. */public class FlipView extends LinearLayout implements View.onclicklistener,    rotateanimation.interpolatedtimelistener{private LinearLayout m_first_ll, M_second_ll;    Private Boolean Enablerefresh;    Private LinearLayout view;    Private View clickview;//Current view private context context;        Public FlipView (Context context) {super (context);        This.context=context;    Initviews ();        } public FlipView (Context Context,attributeset attrs) {super (context,attrs);        This.context=context;    Initviews ();        }/** */public void Initviews () {view= (linearlayout) inflate (context,r.layout.flip_view,null);        M_first_ll= (LinearLayout) View.findviewbyid (R.ID.FIRST_LL);        M_second_ll= (LinearLayout) View.findviewbyid (R.ID.SECOND_LL);        M_first_ll.setonclicklistener (this);        M_second_ll.setonclicklistener (this); AddView (view, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);        }/** * @param ll1 Front * @param ll2 negative * * public void Addviews (LinearLayout ll1,linearlayout ll2) {        M_FIRST_LL=LL1;        M_second_ll=ll2;        M_first_ll.setonclicklistener (this);        M_second_ll.setonclicklistener (this);        AddView (M_first_ll, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);    AddView (M_second_ll, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); }/** * Flag=0 turn to Front * flag=1 to reverse * @param flag */public void show (int flag) {ENABLEREFR        Esh = true;        Rotateanimation Rotateanim = null;        float CX = this.getwidth ()/2.0f;        float CY = this.getheight ()/2.0f;        if (flag==0) Rotateanim = new Rotateanimation (CX, CY, rotateanimation.rotate_decrease); else if (flag==1) Rotateanim = new Rotateanimation (cX, CY, rotateanimation.rotate_increase);            if (Rotateanim! = null) {Rotateanim.setinterpolatedtimelistener (this);            Rotateanim.setfillafter (TRUE);        This.startanimation (Rotateanim);        }} @Override public void OnClick (View v) {log.d ("click:", V.tostring ());        Enablerefresh = true;        Clickview=v;        Rotateanimation Rotateanim = null;        float CX = this.getwidth ()/2.0f;        float CY = this.getheight ()/2.0f; if (m_first_ll==v) {Rotateanim = new rotateanimation (CX, CY, Rotateanimation.rotate_increas        E); } else if (m_second_ll = = v) {Rotateanim = new rotateanimation (CX, CY, Rotateanimation.rota        Te_decrease);            } if (Rotateanim! = null) {Rotateanim.setinterpolatedtimelistener (this);            Rotateanim.setfillafter (TRUE);        This.startanimation (Rotateanim);    }} @Overridepublic void Interpolatedtime (float interpolatedtime) {if (Enablerefresh && interpolatedtime > 0.5f) {            Sethint ();        Enablerefresh = false;            }} public void Sethint () {if (ClickView = = m_first_ll) {m_first_ll.setvisibility (view.gone);        M_second_ll.setvisibility (view.visible);            } else if (clickview==m_second_ll) {m_second_ll.setvisibility (view.gone);        M_first_ll.setvisibility (view.visible); }    }}

Let's take a look at how to use:

public class Flipactivity extends activity{private FlipView FlipView;    LinearLayout Firstll,secondll;    LinearLayout Root;        @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);        Setcontentview (R.layout.activity_flip);    Initviews (); private void Initviews () {root= (linearlayout) Layoutinflater.from (this). Inflate (R.layout.activity_flip,null        );        flipview= (FlipView) Root.findviewbyid (R.id.flip_view); /********* the first way (to actively call initviews) *************///firstll= (linearlayout) Layoutinflater.from (this). Inflate ( R.layout.flip_view1,null);//Secondll= (LinearLayout) Layoutinflater.from (this). Inflate (R.layout.flip_view2,null)        ;        /********* the second way *************/firstll= (linearlayout) Root.findviewbyid (R.ID.ROOT_LL1);        Secondll= (LinearLayout) Root.findviewbyid (R.ID.ROOT_LL2);        Root.removeview (FIRSTLL);        Root.removeview (Secondll); Flipview.addviews (FirstlL,secondll);    Setcontentview (root); }}

Since a view has two sides, it certainly needs to be proactive to set the front and back of the content.

   Flipview.addviews (Firstll,secondll); The first parameter is the positive view, the second argument is the negative view, and the two view is a linear layout. I've provided two ways to set the front and back, and if you have a little idea of the layout, it's actually the same.

</pre><p>    Rotary tools (online reference for others):</p><p>          <pre Name= "Code" class= "Java" >public class Rotateanimation extends Animation {/** value is true to explicitly view the direction of rotation of the animation. */public static Final Boolean DEBUG = false;/** along the y-axis positive direction, and the value minus 1 o'clock animation rotates counterclockwise. */public static Final Boolean rotate_decrease = true;/** along the y-axis positive direction, the value minus 1 o'clock animation rotates clockwise. */public static Final Boolean rotate_increase = maximum depth on the false;/** Z axis. */public static final Float depth_z = 310.0f;/** animated display duration. */public static final Long DURATION = 800l;/** picture Flip type. */private Final Boolean type;private final float centerx;private final float centery;private Camera camera;public Rotatean Imation (float CX, float CY, Boolean type) {CenterX = Cx;centery = Cy;this.type = type;//Set animation duration setduration (DURATION);} @Overridepublic void Initialize (int width, int height, int parentwidth,int parentheight) {//after constructor, Applytransformation () before calling this method. Super.initialize (width, height, parentwidth, parentheight), camera = new camera (); @Overrideprotected void Applytransformation (float interpolatedtime,transformation transformation) {//InterpolatedTime : Animation progress value, range 0~1,0.5 to just flip half if (listener! = null) {listener.interpolatedtime (interpolatedtime);} float from = 0.0f, to = 0.0f;if (type = = Rotate_decrease) {from = 0.0f;to = 180.0f;} else if (type = = rotate_increase) {fr Om = 360.0f;to = 180.0f;}  Angle of rotation float degree = from + (to-from) * Interpolatedtime;boolean overhalf = (Interpolatedtime > 0.5f); if (overhalf) {//Flip more than half of the case, in order to ensure that the number is still readable text instead of the mirror effect of the text, you need to flip 180 degrees. degree = degree-180;} Rotational depth float depth = (0.5f-math.abs (interpolatedtime-0.5f)) * depth_z;final Matrix matrix = Transformation.getmatrix () Camera.save ();//Depth--"equivalent to the distance from the screen camera.translate (0.0f, 0.0f, depth);//x-axis rotation//Camera.rotatex (degree);// Rotate Camera.rotatey (degree) with y-axis, Camera.getmatrix (matrix), Camera.restore (), if (DEBUG) {if (overhalf) { Matrix.pretranslate (-centerx * 2,-centery); Matrix.posttranslate (CenterX * 2, CenterY);}} else {//ensures that the picture's rollover is always at the center point of the component/* * PretranSlate refers to panning in front of the Setscale, posttranslate refers to panning after Setscale, and their parameters are translational distances, instead of panning the coordinates of the destination! * As the scaling is centered (0,0), so in order to align the center of the interface with (0,0), it is necessary to pretranslate (-centerx, *-centery), setscale after completion, call Posttranslate (CenterX, * CenterY), and then move the picture back, so that the animation effect is the activity of the interface image from the center of the constant Scaling * Note: CenterX and CenterY is the interface center coordinates */matrix.pretranslate (-centerx,- CenterY); Matrix.posttranslate (CenterX, CenterY);}} The/** is used to monitor the animation progress. The content to be updated when the value is half. */private interpolatedtimelistener listener;public void Setinterpolatedtimelistener (InterpolatedTimeListener Listener) {This.listener = listener;} /** Animation Progress Listener. */public static interface Interpolatedtimelistener {public void Interpolatedtime (float interpolatedtime);}

XML layout:

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "Http://schemas.and                Roid.com/tools "android:orientation=" vertical "android:layout_width=" match_parent "        android:layout_height= "Match_parent" > <cn.xindrace.viewflip.flipview android:id= "@+id/flip_view" Android:layout_width= "Match_parent" android:layout_height= "match_parent"/> <linearlayout androi D:id= "@+id/root_ll1" android:orientation= "vertical" android:layout_width= "wrap_content" android:layou t_height= "Wrap_content" > <textview android:layout_width= "match_parent" Android:layout_h        eight= "Match_parent" android:text= "It is the first side"/> </LinearLayout> <linearlayout Android:id= "@+id/root_ll2" android:orientation= "vertical" android:layout_width= "Wrap_content" Android Oid:layout_height= "Wrap_Content "> <textview android:layout_width=" match_parent "android:layout_height=" Match_pa Rent "android:text=" It is the first side "/> </LinearLayout></LinearLayout>

Android Custom Implementation Flip Card view