思路分析:自定义一个水平滑动的控件,里面分别有菜单和主页,这里可以继承HorizontalScrollView,在onFinishInflate()方法中设置布局参数,主菜单会有阴影的出现,这里可以这样来设置把原来的主页控件移除,新建一个RelativeLayout把主页再次添加上去,最后把阴影控价添加上去,再把RelativeLayou这个控件放回去,在onScrollChanged(int l, int t, int oldl, int oldt)控制阴影的透明度动画。
代码实现:
/** * QQ6.0侧滑效果 * 阴影就是在在上面放一个半透明的控件,内容布局单独拿出来,在外面套一层阴影,再放回去 */ public class SlidingMenu extends HorizontalScrollView { private int mMenuWidth; private View mMenuView; private View mContentView; private View shadowView; public SlidingMenu(Context context) { this(context, null); } public SlidingMenu(Context context, AttributeSet attrs) { this(context, attrs, 0); } public SlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SlidingMenu); float rightMargin = typedArray.getDimension(R.styleable.SlidingMenu_menuRightMargin, ScreenUtils.dip2px(context, 20)); mMenuWidth = (int) (getScreenWidth(context) - rightMargin); typedArray.recycle(); } private int getScreenWidth(Context context) { WindowManager wm = (WindowManager) context .getSystemService(Context.WINDOW_SERVICE); DisplayMetrics outMetrics = new DisplayMetrics(); wm.getDefaultDisplay().getMetrics(outMetrics); return outMetrics.widthPixels; } @Override protected void onFinishInflate() { super.onFinishInflate(); ViewGroup container = (ViewGroup) getChildAt(0); int childCount = container.getChildCount(); if (childCount != 2) { throw new RuntimeException("只能放置两个"); } mMenuView = container.getChildAt(0); ViewGroup.LayoutParams layoutParams = mMenuView.getLayoutParams(); layoutParams.width = mMenuWidth; mMenuView.setLayoutParams(layoutParams); mContentView = container.getChildAt(1); //移除原来控件 container.removeView(mContentView); RelativeLayout contentContainer = new RelativeLayout(getContext()); //把原来主页添加到contentContainer contentContainer.addView(mContentView); //添加阴影 shadowView = new View(getContext()); shadowView.setBackgroundColor(Color.parseColor("#55000000")); contentContainer.addView(shadowView); ViewGroup.LayoutParams params = mContentView.getLayoutParams(); params.width = getScreenWidth(getContext()); // mContentView.setLayoutParams(params); contentContainer.setLayoutParams(params); //添加新的带有阴影的控件 container.addView(contentContainer); shadowView.setAlpha(0.0f); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { super.onLayout(changed, l, t, r, b); scrollTo(mMenuWidth, 0); } @Override public boolean onTouchEvent(MotionEvent ev) { if (ev.getAction() == MotionEvent.ACTION_UP) { int scrollX = getScrollX(); if (scrollX > mMenuWidth / 2) { closeMenu(); } else { openMenu(); } return true; } return super.onTouchEvent(ev); } private void openMenu() { smoothScrollTo(0, 0); } private void closeMenu() { smoothScrollTo(mMenuWidth, 0); } @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { super.onScrollChanged(l, t, oldl, oldt); System.out.println("l:" + l); float scale = 1f * l / mMenuWidth;//1-0 float rightScale = (float) (1- scale);//1-0.7 shadowView.setAlpha(rightScale); //l menuWidth-0 // float scale = 1f * l / mMenuWidth;//1-0 //0.7-1 // float rightScale = (float) (0.7f + 0.3 * scale);//1-0.7 // ViewCompat.setPivotX(mContentView, 0); // ViewCompat.setPivotY(mContentView, mContentView.getMeasuredHeight() / 2); // ViewCompat.setScaleX(mContentView, rightScale); // ViewCompat.setScaleY(mContentView, rightScale); //透明度同理 0.5-1; //float leftAlpha = (float) (0.2f + (1 - scale) * 0.5); // ViewCompat.setAlpha(mMenuView, leftAlpha); //缩放0.7-1.0 // float leftScale = (float) (0.7 + (1 - scale) * 0.3); // ViewCompat.setScaleX(mMenuView, leftScale); // ViewCompat.setScaleY(mMenuView, leftScale); //fx ViewCompat.setTranslationX(mMenuView, (float) (0.25 * l)); } }
布局文件:
<?xml version="1.0" encoding="utf-8"?> <com.cmj.myapplication.view.SlidingMenu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/home_sliding_menu" app:menuRightMargin="62dp" android:background="@drawable/home_menu_bg" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <include layout="@layout/layout_home_menu" /> <include layout="@layout/layout_home_content" /> </LinearLayout> </com.cmj.myapplication.view.SlidingMenu>
layout_home_content.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFFFFF" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_centerInParent="true" android:text="主页内容" android:layout_height="wrap_content" /> </RelativeLayout>
layout/layout_home_menu.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="72dp" android:orientation="vertical"> <LinearLayout android:id="@+id/enter_login" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="23dp" android:orientation="horizontal"> <ImageView android:id="@+id/user_head_iv" android:layout_width="56dp" android:layout_height="56dp" android:src="@drawable/morentouxiang" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="22dp" android:orientation="vertical"> <TextView android:id="@+id/user_name_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawablePadding="10dp" android:drawableRight="@drawable/user_write_paint" android:text="请登录" android:textColor="#c6b178" android:textSize="18dp" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="42dp" android:orientation="horizontal"> <TextView android:id="@+id/user_attention_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawablePadding="10dp" android:text="关注 0" android:textColor="#c6b178" android:textSize="12dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="40dp" android:drawablePadding="10dp" android:text="粉丝 0" android:textColor="#c6b178" android:textSize="12dp" /> </LinearLayout> </LinearLayout> </LinearLayout> <ListView android:id="@+id/menu_item_lv" android:layout_width="match_parent" android:layout_height="wrap_content" android:divider="@null" android:dividerHeight="0dp" android:layout_marginTop="60dp"/> </LinearLayout> <TextView android:layout_width="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_margin="20dp" android:text="退出" android:textColor="#FFFFFF" android:layout_height="wrap_content" /> </RelativeLayout>
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="SlidingMenu"> <attr name="menuRightMargin" format="dimension"/> </declare-styleable> </resources>