Android imitate to circle personal data interface cascade fade and fade display effect _android

A few days ago to do a copy to the loop personal data interface to achieve the results

Here is the effect GIF for the to loop:

To do this thing in fact also spent the afternoon, a beginning of thinking has not been clear, began to blindly do, the results instead of less.

To learn from the future, the first detailed thinking about the logical relationship, and then began to write code, so easier to straighten out.

You can see that this effect is not difficult to achieve, scoring the following three steps:

1: First you have to have a drag detail layout (the lower part).

2: The upper part can follow moving.

3: Title bar from hidden to display.

The technical points involved are:

1: Screen pixel density DP conversion.

2: Ontouchlistener Events for Custom views

3: Use of transparency properties animation

According to these three requirements, the layout of the design is as follows:

Userinfo_layout.xml

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "match_parent "Android:layout_height=" match_parent "android:background=" @android: Color/white "> <relativelayout android: 
Layout_width= "Match_parent" android:layout_height= "260DP" > <imageview android:layout_width= "match_parent" android:layout_height= "Match_parent" android:background= "@color/colortheme"/> <linearlayout android:id= "@+ Id/mainheadview "android:layout_width=" match_parent "android:layout_height=" match_parent "android:background=" @ Drawable/top "></LinearLayout> </RelativeLayout> <linearlayout android:id=" @+id/ Myscrolllinearlayout "android:layout_width=" match_parent "android:layout_height=" Match_parent "Android:background" = "#EEEEEE" android:clickable= "true" android:orientation= "vertical" > <relativelayout android:layout_width= " 
Match_parent "android:layout_height=" 60DP "android:background=" @android: Color/white "><textview android:layout_width= "wrap_content" android:layout_height= "Match_parent" 20DP "android:gravity=" "Center_vertical" android:text= "guardian angel" android:textcolor= "#DB4E61" android:textsize= "14SP"/ > <textview android:layout_width= "wrap_content" android:layout_height= "Match_parent" Android:layout_ Alignparenttop= "true" android:layout_marginend= "66DP" android:layout_tostartof= "@+id/imageview" android:gravity= " 
Center_vertical "android:text=" There is no guardian angel "android:textcolor=" "#C0C0C0" android:textsize= "14sp"/> <imageview Android:id= "@+id/imageview" android:layout_width= "wrap_content" android:layout_height= "Match_parent" Android: Layout_alignparentend= "true" android:layout_alignparenttop= "true" android:layout_marginright= "20DP" Android: Paddingbottom= "34DP" android:paddingtop= "34DP" android:src= "@drawable/ic_more"/> </RelativeLayout> < View android:layout_width= "match_parent" android:layout_height= "1DP" android:backgrOund= "#CCCCCC" ></View> <view android:layout_width= "match_parent" android:layout_height= "1DP" Android: layout_margintop= "15DP" android:background= "#CCCCCC" ></View> <linearlayout android:layout_width= " Match_parent "android:layout_height=" 50DP "android:background=" @android: Color/white "android:orientation=" Horizontal "> <textview android:layout_width=" 80dp "android:layout_height=" Match_parent "Android:layout_ marginleft= "15DP" android:gravity= "center_vertical" android:text= "nickname" android:textcolor= "#C0C0C0" android:textsize = "14sp"/> <linearlayout android:layout_width= "0DP" android:layout_height= "Match_parent" Android:layout_ marginleft= "10DP" android:layout_weight= "1" android:orientation= "vertical" > <textview android:layout_width= " Match_parent "android:layout_height=" 0DP "android:layout_weight=" 1 "android:gravity=" center "android:textcolor=" @ Android:color/black "android:textsize=" 12DP "/> <view android:layout_Width= "Match_parent" android:layout_height= "1DP" android:background= "#CCCCCC" ></View> </linearlayout 
> </LinearLayout> <linearlayout android:layout_width= "match_parent" android:layout_height= "50DP" Android:background= "@android: Color/white" android:orientation= "horizontal" > <textview android:layout_width= 
"80DP" android:layout_height= "match_parent" android:layout_marginleft= "15DP" android:gravity= "center_vertical" android:text= "Personality signature" android:textcolor= "#C0C0C0" android:textsize= "14sp"/> <textview android:layout_width= " 0DP "android:layout_height=" match_parent "android:layout_marginleft=" 10DP "android:layout_weight=" 1 "android: 
Background= "@android: Color/transparent"/> </LinearLayout> <view android:layout_width= "Match_parent" android:layout_height= "1DP" android:background= "#CCCCCC" ></View> <view android:layout_width= "Match_ Parent "android:layout_height=" 1DP "android:layout_margintop=" 15DP "AndroiD:background= "#CCCCCC" ></View> <linearlayout android:layout_width= "Match_parent" Android:layout_ height= "100DP" android:background= "@android: Color/white" android:orientation= "vertical" > <textview android: Layout_width= "Match_parent" android:layout_height= "35DP" android:layout_marginleft= "15DP" android:gravity= "center _vertical "android:text=" personal album android:textcolor= "#C0C0C0" android:textsize= "14sp"/> <view android:layout_ Width= "Match_parent" android:layout_height= "1DP" android:background= "#CCCCCC" ></View> </linearlayout > <view android:layout_width= "match_parent" android:layout_height= "1DP" android:background= "#CCCCCC" >< 
/view> <view android:layout_width= "match_parent" android:layout_height= "1DP" android:layout_margintop= "15DP" Android:background= "#CCCCCC" ></View> <linearlayout android:layout_width= "Match_parent" android:layout _height= "120DP" android:background= "@android: Color/white" android:orientation= "vertical" > <textview android:layout_width= "match_parent" android:layout_height= "30DP" android:layout_marginleft= "15DP" android:gravity= "center_vertical" android:text= "private video" android:textcolor= "#DB4E61 
"Android:textsize=" 14sp "/> <textview android:layout_width=" match_parent "android:layout_height=" 20DP " android:layout_marginleft= "15DP" android:gravity= "Start" android:text= "every other person viewing your private video, you say get 100 flowers" Android: Textcolor= "#C0C0C0" android:textsize= "10sp"/> <view android:layout_width= "Match_parent" Android:layout_ height= "1DP" android:background= "#CCCCCC" ></View> </LinearLayout> <view android:layout_width= " Match_parent "android:layout_height=" 1DP "android:background=" #CCCCCC "></View> <view android:layout_ Width= "Match_parent" android:layout_height= "1DP" android:layout_margintop= "15DP" android:background= "#CCCCCC" > </View> <linearlayout android:layout_width= "Match_parent" Android:layout_height= "0DP" android:layout_weight= "1" android:background= "@android: Color/white" android:orientation= " Vertical "> <textview android:layout_width=" match_parent "android:layout_height=" 35DP "Android:layout_ marginleft= "15DP" android:gravity= "center_vertical" android:text= "Fate Impression" Android:textcolor= "#C0C0C0" Android: Textsize= "14sp"/> <textview android:layout_width= "match_parent" android:layout_height= "0DP" Android:layout_ weight= "1" android:gravity= "center" android:text= "TA has no fate impression" android:textcolor= "#C0C0C0"/> </linearlayout 
> </LinearLayout> <relativelayout android:id= "@+id/mainactionbar" android:layout_width= "Match_parent" 
android:layout_height= "55DP" > <imageview android:id= "@+id/userinfo_topbar" android:visibility= "Invisible" android:background= "@color/colortheme" android:layout_width= "match_parent" android:layout_height= "match_parent"/ > <imagebutton android:id= "@+id/userinfo_returnbtn" style= "? Android:attr/boRderlessbuttonstyle "android:layout_width=" 55DP "android:layout_height=" 55DP "android:padding=" 15DP "Android: Scaletype= "Fitcenter" android:src= "@drawable/topbar_returnbtn"/> </RelativeLayout> </relativelayout >

The layout is nested three layers from the inside out, the top half of which I cut directly to the graph of the to loop.

android:background= "@drawable/top"

Code implementation:

Package Com.whale.nangua.toquan; 
Import Android.animation.ObjectAnimator; 
Import android.app.Activity; 
Import Android.content.Context; 
Import Android.os.Bundle; 
Import android.support.v7.app.AppCompatActivity; 
Import Android.util.Log; 
Import android.view.MotionEvent; 
Import Android.view.View; 
Import Android.view.ViewGroup; 
Import Android.widget.ImageView; 
Import Android.widget.LinearLayout; 
Import Android.widget.RelativeLayout; 
Import Android.widget.ScrollView; 
Import Android.widget.Toast; 
public class Mainactivity extends activity {linearlayout myscrolllinearlayout; LinearLayout Mainheadview; Top profile view Relativelayout Mainactionbar; 
The top menu bar @Override protected void onCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); 
Setcontentview (r.layout.userinfo_layout); 
Initview (); 
int Y; int position = 0; Drag the distance of the y-axis from the linearlayout int scrollviewdistancetotop = 0; 
Headview High int menubarheight = 0; int chufaheight = 0; High float scale that need to trigger animation; Pixel density int headviewposition = 0; 
ImageView Userinfo_topbar; 
Static Boolean flag = TRUE; 
static Boolean Topmenuflag = true; 
private void Initview () {Userinfo_topbar = (ImageView) Findviewbyid (R.id.userinfo_topbar); 
Get pixel density scale = this.getresources (). Getdisplaymetrics (). density; 
Mainheadview = (linearlayout) Findviewbyid (R.id.mainheadview); 
Mainactionbar = (relativelayout) Findviewbyid (R.id.mainactionbar); 
Menubarheight = (int) (scale); 
Chufaheight = (int) (scale); 
Scrollviewdistancetotop = (int) ((a) *scale); 
Position = Scrollviewdistancetotop; 
Myscrolllinearlayout = (linearlayout) Findviewbyid (r.id.myscrolllinearlayout); Myscrolllinearlayout.sety (Scrollviewdistancetotop); To subtract the height of the absolote layout from the top Myscrolllinearlayout.setonclicklistener (new View.onclicklistener () {@Override public void 
OnClick (View v) {}}); Myscrolllinearlayout.setontouchlistener (New View.ontouchlistener () {@Override public boolean Ontouch View V, Motionevent event) {switch(Event.getaction ()) 
{Case Motionevent.action_down://Press Y position y = (int) Event.getrawy (); 
Break Case MotionEvent.ACTION_MOVE:int nowy = (int) myscrolllinearlayout.gety (); Drag the Y-axis position of the interface int tempy = (int) (Event.getrawy ()-y); 
The offset of the hand movement Y = (int) Event.getrawy (); if ((Nowy + tempy >= 0) && (Nowy + tempy <= scrollviewdistancetotop)) {if (Nowy + tempy <= Menubarheig 
HT) && (Topmenuflag = = True)) {userinfo_topbar.setvisibility (view.visible); 
Topmenuflag = false; else if ((Nowy + tempy > Menubarheight) && (Topmenuflag = = flag)) {userinfo_topbar.setvisibility (View.invis 
ible); 
Topmenuflag = true; 
int temp = position + = Tempy; 
Myscrolllinearlayout.sety (temp); 
int headviewtemp = headviewposition + = (TEMPY/5); 
Mainheadview.sety (headviewtemp); ///Top animation effect if ((Myscrolllinearlayout.gety () <= chufaheight) && (flag = = True)) {Objectanimator Anim = Obje 
Ctanimator.offloat (Mainheadview, "Alpha", 1, 0.0f); Anim.setduration (500); 
Anim.start (); 
Flag = false; else if ((Myscrolllinearlayout.gety () > Chufaheight +) && (flag = = False)) {Objectanimator Anim = Object 
Animator.offloat (Mainheadview, "Alpha", 0.0f, 1f); 
Anim.setduration (500); 
Anim.start (); 
Flag = true; 
} break; 
return false; 
} 
}); } 
}

Code implementation Ideas:

This is mainly done with the following three layout:

LinearLayout myscrolllinearlayout; Drag at the bottom of the detailed interface
LinearLayout Mainheadview; Top profile View
Relativelayout Mainactionbar; Top menu Bar

The position of each layout section is initialized first, and then the dynamic event listener is mainly the bottom drag layout.

It is troublesome to have to handle interacting with two other layouts in this listener, but there are detailed comments in the code.

And this is the effect I realized:

You can see the effect is almost exactly the same as the to circle Oh.

The above is a small set to introduce Android imitation to circle Personal data interface cascade fade Display effect, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!