Android: ViewGroup, androidviewgroup

Android: ViewGroup, androidviewgroup
Slide with hand

Many developers do not know much about the layout and hand sliding. Here is an example to show a slide display of RelativeLayout.

Principle

Whether it is sliding with your hands or popping up an animation, it is essentially modifying the position of the View or ViewGroup, that is, the setX () setY () method.

• Slide with hand

Sliding with the hand means that when a user slides on the screen, a piece of layout slides as the finger slides. Therefore, its implementation principle is to dynamically obtain the finger sliding distance in the onTouch event, and then modify the view position.

• Pop-up animation

When sliding with the hand, it is possible that the user will just slide out the part of the View and then let it go. For better results, we will display the view in an animated form according to the user's sliding direction. Therefore, it uses ValueAnimator to dynamically modify the view location.

Codexml Layout

Our goal is to make the RelativeLayout with the id rl_left slide out from the left side of the screen and hide it to the left side of the screen.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@android:color/white" >    <Button        android:id="@+id/btn_1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentEnd="true"        android:layout_alignParentRight="true"        android:text="show" />    <Button        android:id="@+id/btn_2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentEnd="true"        android:layout_alignParentRight="true"        android:layout_below="@id/btn_1"        android:text="hide" />    <TextView        android:id="@+id/tv_show"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true" />    <RelativeLayout        android:id="@+id/rl_left"        android:layout_width="@dimen/rl_left_w"        android:layout_height="match_parent"        android:background="#00ff00" >        <ListView            android:id="@+id/lv_test"            android:layout_width="match_parent"            android:layout_height="match_parent" />    </RelativeLayout></RelativeLayout>

How to focus on the control of MianActivity-sliding and Animation:

• SlideToShow
• SlideToHide
• OnTouch

Package com.example.net. mobctrl. ottotest; import java. util. arrayList; import java. util. list; import android. animation. valueAnimator; import android. animation. valueAnimator. animatorUpdateListener; import android. app. activity; import android. OS. bundle; import android. view. motionEvent; import android. view. view; import android. view. view. onClickListener; import android. view. animation. decelerateInterpolator; import Android. widget. adapterView; import android. widget. adapterView. onItemClickListener; import android. widget. arrayAdapter; import android. widget. listView; import android. widget. relativeLayout; import android. widget. textView;/***** @ author Zheng Haibo **/public class MainActivity extends Activity {private RelativeLayout rl_left; private ListView listView; private TextView tvShow; private int rlWidth ;// The layout width is private static final int MAX_OFFSET = 5; // five pixel errors. If the sliding is smaller than 5 pixels, no animation private float downX is displayed; // the point when the press is private float viewXdown; // when the View is pressed, the position of the View is private boolean lastSlidePull = false; // the direction of the last sliding is private float maxOffset = 0; // maximum sliding distance @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); System. out. println ("debug: onCreate"); setContentView (R. layout. activity_mai N); findViewById (R. id. btn_1 ). setOnClickListener (new OnClickListener () {@ Override public void onClick (View arg0) {slideToShow () ;}}); findViewById (R. id. btn_2 ). setOnClickListener (new OnClickListener () {@ Override public void onClick (View arg0) {slideToHide () ;}}); tvShow = (TextView) findViewById (R. id. TV _show); initLeftView ();} private void initLeftView () {rl_left = (RelativeLayout) findViewB YId (R. id. rl_left); rlWidth = getResources (). getDimensionPixelSize (R. dimen. rl_left_w); rl_left.setX (-rlWidth); // move the location of rl_left to the left of the mobile phone screen. // initialize the View of RelativeLayout. In this example, ListView = (listView) rl_left.findViewById. id. lv_test); listView. setAdapter (new ArrayAdapter <String> (this, android. r. layout. simple_expandable_list_item_1, getItemData (); listView. setOnItemClickListener (itemListener );}/** * Fill in false data ** @ return */private List <String> getItemData () {List <String> list = new ArrayList <String> (); for (int I = 0; I <16; I ++) {list. add ("item" + I);} return list;} private OnItemClickListener itemListener = new OnItemClickListener () {@ Override public void onItemClick (AdapterView <?> Arg0, View arg1, int arg2, long arg3) {slideToHide (); tvShow. setText (String. format ("you click item % s! ", Arg2) ;}};/*** use ValueAnimator to insert rl_left into the interface as an animation */private void slideToShow () {float startX = rl_left.getX (); valueAnimator valueAnimator = ValueAnimator. ofInt (int) startX, 0); valueAnimator. addUpdateListener (new AnimatorUpdateListener () {@ Override public void onAnimationUpdate (ValueAnimator animation) {int offset = (Integer) animation. getAnimatedValue (); rl_left.setX (offset) ;}}); va LueAnimator. setInterpolator (new DecelerateInterpolator (); float fraction = Math. abs (startX/rlWidth); valueAnimator. setDuration (long) (600 * fraction); valueAnimator. start ();}/*** use ValueAnimator to bring up rl_left as an animation */private void slideToHide () {float startX = rl_left.getX (); ValueAnimator valueAnimator = ValueAnimator. ofInt (int) startX,-rlWidth); valueAnimator. addUpdateListener (new Animat OrUpdateListener () {@ Override public void onAnimationUpdate (ValueAnimator animation) {int offset = (Integer) animation. getAnimatedValue (); rl_left.setX (offset) ;}}); valueAnimator. setInterpolator (new DecelerateInterpolator (); float fraction = Math. abs (rlWidth + startX)/rlWidth); valueAnimator. setDuration (long) (400 * fraction); valueAnimator. start () ;}@ Override public boolean onTouchEven T (MotionEvent event) {float x = event. getX (); switch (event. getAction () {case MotionEvent. ACTION_DOWN: this. downX = x; this. viewXdown = rl_left.getX (); break; case MotionEvent. ACTION_MOVE: float offset = (event. getX ()-downX); // The sliding distance from float posX = viewXdown + offset; // calculate the possible position maxOffset = maxOffset> Math. abs (offset )? MaxOffset: Math. abs (offset); if (offset> 0) {// pull to show rl_left.setX (posX <0? PosX: 0); if (posX> = 0) {// update the value of downX instead of hand. downX + = posX;} lastSlidePull = true;} else {// push to hide rl_left.setX (posX>-rlWidth? PosX:-rlWidth); if (posX <=-rlWidth) {// this. downX + = (posX + rlWidth);} lastSlidePull = false;} break; case MotionEvent. ACTION_UP: if (maxOffset <MAX_OFFSET) {// prevents jitter return super. onTouchEvent (event) ;}// use an animation to slide to the specified position if (lastSlidePull) {slideToShow () ;}else {slideToHide () ;} break; default: break ;} return super. onTouchEvent (event) ;}@ Override protected void onDestroy () {super. onDestroy ();}}

Effect

Forgive me. It is too troublesome to cut the Gif ..

More communication

Android Development Alliance QQ group: 272209595