仿QQ6.0側滑
阿新 • • 發佈：2018-12-30
思路分析：自定義一個水平滑動的控制元件，裡面分別有選單和主頁，這裡可以繼承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>