Android implementation Comment Bar with Recyclerview sliding left and right moving _android

Source: Internet
Author: User
Tags xmlns recyclerview android

Recently played a call "date bar" application, is also watching the live app, the default download installation, installation point to see the application do a good job, it left. And then look at the bottom of the dynamic Details page there is an effect: Recyclerview slide to the comment list, the bottom point of the bar will slide to the left, a column to enter comments, and then down to the bottom when the input comment bar will slide to the right, there is a point of praise bar. Detailed details directly to see the effect of the map bar.

In fact, this effect is still very common in the application, there are pull, toolbar, bottom view hidden, drop-down display, or like the date bar so that the effect of sliding left and right. And there are a lot of information on the Internet now, there is through the objectanimation to achieve, here we adopt another method to achieve. Look at this effect carefully, in fact, he is the view scrolling effect, think of Android inside the scroll, immediately can think of Scroller class, Scroller has a startscroll () method, through this method we can scroll. Scrolling problem solved, then this effect is very simple, when entering the page, to show the view of the first display, should not show the temporary placed outside the screen, when the scrolling time, we control view into the screen or exit the screen. This is probably the way the idea is, below we will achieve this effect bar.

The realization of the effect

First of all, we put the layout out according to the above ideas. The structure is shown below:

Here is a description of the figure above, divided into 3 pieces ,
-When the Recyclerview pull, the screen 5 position of view will be hidden, that is, moved to the 6 position outside the screen, when Recyclerview drop-down, the screen outside the 6 position view will return to the 5 position display.
-When the Recyclerview is pulled, the 1-position view in the screen is hidden, that is, moving to the 4 position outside the screen, and the 4 position view on the outside of the screen will return to the 1 position when the Recyclerview is pulled down.
-When the Recyclerview is pulled up, and is set to slide horizontally, the 1 position view in the screen moves to the 3 position, and the 2 position view outside the screen moves to the 1 position on the screen to show that when Recyclerview is pulled down, The 3-bit outside the screen moves to the 1 position in the screen. The 1-position view will also return to the 2-bit hidden outside the screen. This is also the effect of the above application.

The layout effect and code are as follows (add two buttons here to toggle the bottom direction effect):

Effect chart
Activity_main.xml

<?xml version= "1.0" encoding= "Utf-8"?> <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 "> <android.support.v7.widget.recyclerview android:id=" @+id/id_recyclerview "Android:layout_ Width= "Match_parent" android:layout_height= "match_parent"/> <relativelayout android:id= "@+id/id_horization_" RL "Android:layout_width=" Match_parent "android:layout_height=" 60DP "android:layout_alignparentbottom=" true "Andro id:orientation= "Horizontal" > <textview android:id= "@+id/id_bottom_float" android:layout_width= "Match_parent" "Android:layout_height=" 60DP "android:text=" I'm a bit of a compliment. Operation Layout "android:textsize= 18sp" android:gravity= "Center" android: background= "#E2E2E2" > </TextView> <textview android:id= "@+id/id_bottom_comment" android:layout_width= " Match_parent "android:layout_height=" 60DP "Android:text= "I am comments input layout" android:textsize= "18SP" android:gravity= "center" android:background= "#FF4500" > </textvie w> </RelativeLayout> <textview android:id= "@+id/id_bottom_vertical" android:layout_width= "Match_parent" "Android:layout_height=" 60DP "android:text=" You slide, I change with you. Android:layout_alignparentbottom= "true" Android:background
  = "#eeeeee" android:gravity= "center" android:textsize= "16sp"/> <textview android:id= "@+id/id_top_vertical" Android:layout_width= "Match_parent" android:layout_height= "60DP" android:text= "You slide, I change with you" android:background= "#ee
  Eeee "android:gravity=" center "android:textsize=" 16sp "/> <linearlayout android:layout_width=" Wrap_content " android:layout_height= "Wrap_content" android:id= "@+id/id_switch" android:orientation= "vertical" android:layout_
   Alignparentright= "true" android:layout_centervertical= "true" > <textview android:layout_width= "wrap_content"
 android:layout_height= "60DP"  android:gravity= "center" android:background= "#eeeeee" android:text= "Toggle Bottom Horizontal Animation" android:onclick= "Showhorization"/
   > <textview android:layout_width= "wrap_content" android:layout_height= "60DP" android:gravity= "center" Android:background= "#eeeeee" android:onclick= "showvertical" android:layout_margintop= "10DP" android:text= "Toggle Bottom Vertical move Painting "/> </LinearLayout> </RelativeLayout>

Then, we write a thread to achieve the effect of scrolling. The code is as follows:

public class Animationutil implements runnable{the private context mcontext;
 Pass in the view private view manimationview that you want to manipulate;
 View wide and high private int mviewwidth;
 private int mviewheight;
 Animation execution Time private final int DURATION = 400;
 is horizontal or vertical sliding change public boolean morientaion;
 Scrolling operation class private scroller Mscroller;
 Private Boolean isshow;
  Public Animationutil (Context context,final View manimationview) {this.mcontext = context;
  This.manimationview = Manimationview;
  Mscroller = new Scroller (context,new linearinterpolator ());
  Horizontal layout here with screen width as quasi mviewwidth = Getscreenwidth ();
  Mviewheight = Manimationview.getmeasuredheight (); if (mviewheight==0) {manimationview.getviewtreeobserver (). Addonpredrawlistener (New Viewtreeobserver.onpredrawlistener () {@Override public boolean onpredraw () {Manimationview.getviewtreeobser
     Ver (). Removeonpredrawlistener (this);
     Mviewheight = Manimationview.getmeasuredheight ();
    return true;
  }
   }); }} public void SetorientaiOn (Boolean ishorization) {this.morientaion = ishorization; }//According to sliding change, Isscrollup is true horizontal left slide, otherwise,//False is hidden vertically, otherwise, public void Starthideanimation (Boolean isscrollup) {Issho
  W = false;
   if (!morientaion) {int dy = (int) (Manimationview.gettranslationy () +mviewheight);
   if (!isscrollup) {dy = (int) (Manimationview.gettranslationy ()-mviewheight);
   DY = Cling (-mviewheight,mviewheight,dy);
   Mscroller.startscroll (0, (int) manimationview.gettranslationy (), 0,dy,duration);
   Viewcompat.postonanimation (Manimationview,this);
  Return
  int dx = (int) (Manimationview.gettranslationx ()-mviewwidth);
  if (!isscrollup) {dx = (int) (Manimationview.gettranslationx () + mviewwidth);
  DX = Cling (-MVIEWWIDTH,MVIEWWIDTH,DX);
  Mscroller.startscroll ((int) Manimationview.gettranslationx (), 0,dx,0,duration);
 Viewcompat.postonanimation (Manimationview,this);
  }//Display control public void Startshowanimation () {isshow = true; if (!morientaion) {int dy = (int) viewcompat.gEttranslationy (Manimationview);
   DY = Cling (-mviewheight,mviewheight,dy);
   Mscroller.startscroll (0,dy,0,-dy,duration);
   Viewcompat.postonanimation (Manimationview,this);
  Return
  int dx = (int) Viewcompat.gettranslationx (manimationview);
  DX = Cling (-MVIEWWIDTH,MVIEWWIDTH,DX);
  Mscroller.startscroll (dx,0,-dx,0,duration);
 Viewcompat.postonanimation (Manimationview,this);
 //Determine if the current bound animation control is displayed, public boolean isshow () {return isshow;
 //Terminate animation public void Abortanimation () {mscroller.abortanimation (); @Override public void Run () {if (Mscroller.computescrolloffset ()) {//The animation continues to slide without stopping viewcompat.postonanimation (man
   Imationview,this);
    if (!morientaion) {viewcompat.settranslationy (Manimationview,mscroller.getcurry ());
   Return
  } Viewcompat.settranslationx (Manimationview,mscroller.getcurrx ()); } public int Getscreenwidth () {WindowManager WindowManager = (windowmanager) mcontext.getsystemservice (Context.WINDO
  W_service); Displaymetrics DM = new Displaymetrics ();
  Windowmanager.getdefaultdisplay (). Getmetrics (DM);
 return dm.widthpixels;
 ///control in a range of values public int cling (int min,int max,int value) {return math.min Math.max (min, value), max);
 }
}

Here is a simple next animationutil thread, first it creates a scrolling operation class scroller, and then gets the width and height of the view that needs to scroll, where it's wide and straight to the screen. There is also a morientaion attribute, the direction of control. Then Starthideanimation and Startshowanimation two methods. In Starthideanimation, we calculate the x and y of the initial position of each effect. Then the x and Y axes move the offsets, then startscroll the method call, and then bind the move animation through the viewcompat.postonanimation to the incoming view. The same is true of the Startshowanimation method. We know that the call to the Startscroll, just tell Scroller to move to what position, the specific mobile information is obtained in Computescrolloffset. So we use this method to determine whether the view is moving, not moving, continuing to call the current thread, and setting settranslationy or Settranslationx according to the direction.

The Help class for view scrolling is done, so let's write a recyclerview to simply test the mainactivity code as follows:

public class Mainactivity extends Appcompatactivity {//through Recyclerview to provide sliding events private Recyclerview mrecyclerview;
 Some simple test data private testadapter mrecycleradapter;
 Level simple Praise layout view binding animation private Animationutil mzananimationutil;
 Horizontal Simple Comment Layout view binding animation private Animationutil mcommanimationutil;
 Vertical bottom View binding animation private Animationutil mbottomverticalutil;
 Vertical head View binding layout private Animationutil mtopverticalutil; Private list<string> Mdatalist=arrays.aslist ("To Ta whispered", "Chong elder brother", "Little Huan", "object, where Are you", "warm heart male God", "once Good", "to Ta whispered", "Chong elder brother", " Xiao Huan "," the object, where you are, "warm heart male God", "just Good", "to Ta whispered", "Chong elder brother", "Xiao Huan", "the object, where you are," warm heart male God "," a Good Time "," Ta said a secret message "," Chong elder brother "," Xiao Huan "," object, where you, "" Warm heart male God ","
 Once ");
 Private Linearlayoutmanager Mrecyclermanager;
 Praise layout Control private TextView Mzantextview;
 Comment Layout control private TextView Mcommentview;
 Private Relativelayout MHORIZATIONALRL;
 The bottom layout control is private TextView MVERTICALBOTTOMTV;
 Head layout control private TextView MVERTICALTOPTV; @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (saveDinstancestate);
  Setcontentview (R.layout.activity_main);
  Mrecyclerview = (Recyclerview) Findviewbyid (R.id.id_recyclerview);
  Mzantextview = (TextView) Findviewbyid (r.id.id_bottom_float);
  Mcommentview = (TextView) Findviewbyid (r.id.id_bottom_comment);
  MVERTICALBOTTOMTV = (TextView) Findviewbyid (r.id.id_bottom_vertical);
  MHORIZATIONALRL = (relativelayout) Findviewbyid (R.ID.ID_HORIZATION_RL);
  MVERTICALTOPTV = (TextView) Findviewbyid (r.id.id_top_vertical);
  Mzananimationutil = new Animationutil (This,mzantextview);
  Mcommanimationutil = new Animationutil (This,mcommentview);
  Mbottomverticalutil = new Animationutil (THIS,MVERTICALBOTTOMTV);
  Mtopverticalutil = new Animationutil (THIS,MVERTICALTOPTV);
  Mzananimationutil.setorientaion (TRUE);
  Mcommanimationutil.setorientaion (TRUE);
  Mcommanimationutil.starthideanimation (FALSE);
  Mhorizationalrl.setvisibility (View.gone);
  Mrecyclermanager = new Linearlayoutmanager (this);
  Mrecyclerview.setlayoutmanager (Mrecyclermanager); MREcycleradapter = new Testadapter (mdatalist,this);
  Mrecyclerview.setadapter (Mrecycleradapter); Mrecyclerview.addonscrolllistener (New Recyclerview.onscrolllistener () {@Override public void onscrollstatechanged (R Ecyclerview recyclerview, int newstate) {//When sliding stops animation start if (newstate = = Recyclerview.scroll_state_idle) {//On arrival Item Change horizontal layout if (mrecyclermanager.findfirstvisibleitemposition () >4) {Mzananimationutil.starthideanimation (True
      );
     Mcommanimationutil.startshowanimation ();
      }else{mzananimationutil.startshowanimation ();
      if (Mcommanimationutil.isshow ()) {mcommanimationutil.starthideanimation (false); }//Head and bottom animation operation if (Mrecyclermanager.findfirstvisibleitemposition () >0) {Mbottomverticalutil.starthi
      Deanimation (TRUE);
     Mtopverticalutil.starthideanimation (FALSE);
      }else{mbottomverticalutil.startshowanimation ();
     Mtopverticalutil.startshowanimation ();
  }}} @Override public void onscrolled (recyclerview recyclerview, int dx, int dy) {}});
  public void showvertical (view view) {mhorizationalrl.setvisibility (view.gone);
 Mverticalbottomtv.setvisibility (view.visible);
  public void showhorization (view view) {mhorizationalrl.setvisibility (view.visible);
 Mverticalbottomtv.setvisibility (View.gone);
 }
}

Mainly is the Onscrollstatechanged method inside the operation. The main thing is to notice the initialization of the comment layout control.

And then put down other classes.
Testadapter.class

public class Testadapter extends recyclerview.adapter<testadapter.simpleviewholder>{private list<string
 > mdatalist;
 Private context Mcontext;

 Private Layoutinflater Minflater;
  Public Testadapter (list<string> mdatalist, context mcontext) {this.mdatalist = mdatalist;
  This.mcontext = Mcontext;
 Minflater = Layoutinflater.from (Mcontext); @Override public Simpleviewholder Oncreateviewholder (viewgroup parent, int viewtype) {return new Simpleviewholder (
 Minflater.inflate (R.layout.simple_item,parent,false)); @Override public void Onbindviewholder (simpleviewholder holder, int position) {Holder.mTextView.setText (mdatalist.
 Get (position));
 @Override public int GetItemCount () {return mdatalist.size ();
  public class Simpleviewholder extends recyclerview.viewholder{private TextView mtextview;
   Public Simpleviewholder (View Itemview) {super (Itemview);
  This.mtextview = (TextView) Itemview.findviewbyid (R.id.id_text);
 }
 }
}

Simple_item.xml

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= "http://schemas.android.com/apk/res/"
 Android "android:orientation=" vertical "android:layout_width=" match_parent "android:layout_height=" Match_parent " Android:background= "@android: Color/white" > <linearlayout android:layout_width= "match_parent" android:layout _height= "100DP" android:orientation= "horizontal" android:gravity= "center_vertical" > <imageview android:layo Ut_width= "60DP" android:layout_height= "60DP" android:background= "#EEEEEE" android:layout_margin= "10DP" Android : src= "@drawable/post_default_avatar" "/> <textview android:id=" @+id/id_text "android:layout_width=" Wrap_conte NT "android:layout_height=" Wrap_content "android:text=" 21111111 "android:textsize=" 14SP "Android:layout_margin
  left= "10DP"/> </LinearLayout> <view android:layout_width= "match_parent" android:layout_height= "0.5DP" android:layout_margintop= "10DP" android:background= "#eeeeee"/> </LinearLayout> 

Finally, look at the effect of the implementation:

Here the development environment for Android Studio 2.1.0-preview4

SOURCE Download: Recyclerview slide left and right move

This is the entire content of this article, I hope to learn more about Android software programming help.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.