Third play of Android development: Custom left and right menus (sliding animation + mask effect)

Third play of Android development: Custom left and right menus (sliding animation + mask effect)

The following ...... Alas, although 1080P is adapted to Windows 10, most of the software is not keeping up with it. For example, if a GIF recording software is used, a certain offset may cause incomplete pictures, but the effect is probably the same.

MainUI. java

First of all, we need such a class. Here we will define some UI slides and so on. First of all, define these variables. Of course, in actual development, you must add either of them.

Private Context context; // Context private FrameLayout leftMenu; // private FrameLayout middleMenu on the left; // private FrameLayout rightMenu in the middle; // private FrameLayout middleMask on the right; // mask effect private Scroller mScroller; // sliding animation public static final int ID = 0; // ID public static final int LEFT_ID = ID + 0 xaabbcc; public static final int MIDDLE_ID = ID + 0 xaaccbb; public static final int RIGHT_ID = ID + 0 xccbbaa;

Constructors are also indispensable.

    public MainUI(Context context) {        super(context);        initView(context);    }    public MainUI(Context context, AttributeSet attrs) {        super(context, attrs);        initView(context);    }

InitView is used to initialize the view. I have written comments on the corresponding functions, so there is not much nonsense.

// Initialize the private void initView (Context context) {this. context = context; mScroller = new Scroller (context, new DecelerateInterpolator (); leftMenu = new FrameLayout (context); middleMenu = new FrameLayout (context ); rightMenu = new FrameLayout (context); middleMask = new FrameLayout (context); leftMenu. setBackgroundColor (Color. RED); // set the background color middleMenu. setBackgroundColor (Color. GREEN); rightMenu. setBackgroundColor (Color. RED); middleMask. setBackgroundColor (0x88000000); leftMenu. setId (LEFT_ID); middleMenu. setId (MIDDLE_ID); rightMenu. setId (RIGHT_ID); addView (leftMenu); // Add to View addView (middleMenu); addView (rightMenu); addView (middleMask); middleMask. setAlpha (0); // sets the transparency of middleMask}

Then there are some of their la S, balabala ......

@ Override protected void onMeasure (int widthMeasureSepc, int heightMeasureSpec) {super. onMeasure (widthMeasureSepc, heightMeasureSpec); middleMenu. measure (widthMeasureSepc, heightMeasureSpec); middleMask. measure (widthMeasureSepc, heightMeasureSpec); int realWidth = MeasureSpec. getSize (widthMeasureSepc); // get the actual (screen) width int tempWidthMeasure = MeasureSpec. makeMeasureSpec (int) (realWidth * 0.7f), MeasureSpec. EXACTLY); // The width on the left side is 0.7 leftMenu of the middle width. measure (tempWidthMeasure, heightMeasureSpec); // The height of the left right side is the same as that of the middle rightMenu. measure (tempWidthMeasure, heightMeasureSpec);} @ Override protected void onLayout (boolean changed, int l, int t, int r, int B) {// l, t, r, B is the left, top, right, and bottom boundary super of the center. onLayout (changed, l, t, r, B); // sets the layout of middleMenu. layout (l, t, r, B); // The Four boundary of the intermediate part is unchanged. layout (l, t, r, B); // The Four boundary of the mask is the same as that of the middle part. leftMenu. layout (l-leftMenu. getMeasuredWidth (), t, r, B); // The left boundary of the left part is equal to the left boundary of the middle part minus the rightMenu of the left part. layout (l + middleMenu. getMeasuredWidth (), t, // The left boundary of the right part is equal to the left boundary of the middle part plus the width of the middle part l + middleMenu. getMeasuredWidth () + // The right border of the right part is equal to the left border of the middle part plus the width of the right side of the rightMenu. getMeasuredWidth (), B );}

Public float onMiddleMask () {System. out. println (Transparency + middleMask. getAlpha (); return middleMask. getAlpha () ;}@ Override public void scrollTo (int x, int y) {super. scrollTo (x, y); onMiddleMask (); // output transparency int curX = Math. abs (getScrollX (); float scale = curX/(float) leftMenu. getMeasuredWidth (); // sets the transparency gradient middleMask. setAlpha (scale );}

Use two boolean values to determine whether to slide between the left and right.

Private boolean isTestComete; // test whether the private boolean isleftrightevent is complete; // check whether the Left and Right slides

@ Override public boolean dispatchTouchEvent (MotionEvent ev) {if (! IsTestComete) {// The slide action getEventType (ev) is not completed; // you can call the event to determine return true;} if (isleftrightevent) {// slide switch (ev. getActionMasked () {case MotionEvent. ACTION_MOVE: int curScrollX = getScrollX (); int dis_x = (int) (ev. getX ()-point. x); int expectX =-dis_x + curScrollX; int finalX = 0; if (expectX <0) {finalX = Math. max (expectX,-leftMenu. getMeasuredWidth ();} else {finalX = Math. min (expectX, rightMenu. getMeasuredWidth ();} scrollTo (finalX, 0); point. x = (int) ev. getX (); break; case MotionEvent. ACTION_UP: case MotionEvent. ACTION_CANCEL: curScrollX = getScrollX (); if (Math. abs (curScrollX)> leftMenu. getMeasuredWidth ()> 1) {if (curScrollX <0) {mScroller. startScroll (curScrollX, 0,-leftMenu. getMeasuredWidth ()-curScrollX, 0,200);} else {mScroller. startScroll (curScrollX, 0, leftMenu. getMeasuredWidth ()-curScrollX, 0,200) ;}} else {mScroller. startScroll (curScrollX, 0,-curScrollX, 0,200);} invalidate (); isleftrightevent = false; isTestComete = false; break ;}} else {switch (ev. getActionMasked () {case MotionEvent. ACTION_UP: isleftrightevent = false; isTestComete = false; break; default: break ;}} return super. dispatchTouchEvent (ev );}

@Override    public void computeScroll(){        super.computeScroll();        if(!mScroller.computeScrollOffset()){            return;        }        int tempX = mScroller.getCurrX();        scrollTo(tempX, 0);    }    private Point point = new Point();    private static final int TEST_DIS = 20;

Private void getEventType (MotionEvent ev) {switch (ev. getActionMasked () {case MotionEvent. ACTION_DOWN: point. x = (int) ev. getX (); point. y = (int) ev. getY (); super. dispatchTouchEvent (ev); break; case MotionEvent. ACTION_MOVE: int dX = Math. abs (int) ev. getX ()-point. x); int dY = Math. abs (int) ev. getY ()-point. y); if (dX >=test_dis & dX> dY) {// sliding isleftrightevent = true; isTestComete = true; point. x = (int) ev. getX (); point. y = (int) ev. getY ();} else if (dY >=test_dis & dY> dX) {// slide isleftrightevent = false; isTestComete = true; point. x = (int) ev. getX (); point. y = (int) ev. getY ();} break; case MotionEvent. ACTION_UP: case MotionEvent. ACTION_CANCEL: super. dispatchTouchEvent (ev); isleftrightevent = false; isTestComete = false; break ;}}

LeftMenu. java

Next let's continue to see how to add a Button in the left-side directory.

You need to create a LeftMenu class and extend the Fragment, so you need

import android.support.v4.app.Fragment;

If you do not know how to add it, see here:

Before the following code, you need to create a new left. xml layout file and add a Button1 file.

    @Override      public View onCreateView(LayoutInflater inflater,                               @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View v = inflater.inflate(R.layout.left, container,false);        v.findViewById(R.id.button1).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                System.out.println(Hello nomasp);            }        });        return v;    }

MainActivity. java

Now you need to create them.

    private MainUI mainUI;    private LeftMenu leftMenu;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        mainUI = new MainUI(this);        setContentView(mainUI);        leftMenu = new LeftMenu();        getSupportFragmentManager().beginTransaction()                .add(MainUI.LEFT_ID, leftMenu).commit();    }

Of course, the MainActivity here also needs to expand the FragmentActivity, that is, to import Android − support − v4.jar For how to import data, see the preceding navigation link.

Of course, you can use the complete code here Fork: GitHub