溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
自己實現了一下側滑的三種方式（注釋都寫代碼里了）
本文Demo下載地址：Andriod側滑
本文實現所需框架：nineoldandroids下載地址：nineoldandroids
1.普通側滑：
主要是基于HorizontalScrollView做的：示例代碼如下
主要布局：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:gaoyu="http://schemas.android.com/apk/res/gaoyu.com.myapplication" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_qqsideslip" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="gaoyu.com.myapplication.sideslip.QQSideslipActivity"> <!--xmlns:gaoyu自定義命名空間 原有到res+包名--> <gaoyu.com.myapplication.sideslip.SlidingMenu_qq android:id="@+id/SlMenu_sideslip" android:layout_width="wrap_content" android:layout_height="fill_parent" gaoyu:rightPadding="100dp"> <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="horizontal"> <include layout="@layout/sideslip_menu" /> <!--這個LinearLayout就是content--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/sliding"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="onClick_sideslip_qq" android:text="切換菜單" /> </LinearLayout> </LinearLayout> </gaoyu.com.myapplication.sideslip.SlidingMenu_qq> </RelativeLayout>
菜單的布局
<?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:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_centerInParent="true"> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/iv_sideslip1" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginTop="20dp" android:layout_marginBottom="20dp" android:layout_marginLeft="20dp" android:src="@drawable/icon"/> <TextView android:layout_centerVertical="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/iv_sideslip1" android:layout_marginLeft="20dp" android:text="第一個item"/> </RelativeLayout> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/iv_sideslip2" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginTop="20dp" android:layout_marginBottom="20dp" android:layout_marginLeft="20dp" android:src="@drawable/icon"/> <TextView android:layout_centerVertical="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/iv_sideslip2" android:layout_marginLeft="20dp" android:text="第二個item"/> </RelativeLayout><RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/iv_sideslip3" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginTop="20dp" android:layout_marginBottom="20dp" android:layout_marginLeft="20dp" android:src="@drawable/icon"/> <TextView android:layout_centerVertical="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/iv_sideslip3" android:layout_marginLeft="20dp" android:text="第三個item"/> </RelativeLayout><RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/iv_sideslip4" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginTop="20dp" android:layout_marginBottom="20dp" android:layout_marginLeft="20dp" android:src="@drawable/icon"/> <TextView android:layout_centerVertical="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/iv_sideslip4" android:layout_marginLeft="20dp" android:text="第四個item"/> </RelativeLayout><RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/iv_sideslip5" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginTop="20dp" android:layout_marginBottom="20dp" android:layout_marginLeft="20dp" android:src="@drawable/icon"/> <TextView android:layout_centerVertical="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@+id/iv_sideslip5" android:layout_marginLeft="20dp" android:text="第五個item"/> </RelativeLayout> </LinearLayout> </RelativeLayout>
定義view類
public class SlidingMenu_qq extends HorizontalScrollView {
private LinearLayout mWapper;
private ViewGroup mMenu;
private ViewGroup mContent;
//menu的寬度
private int mMenuWidth;
//屏幕的寬度（內容區的寬度就是屏幕寬度）
private int mScreenWdith;
//菜單與右邊的距離50dp
private int mMenuRightPidding = 50;
//調用一次
private boolean once;
//標識狀態
private boolean isOPen;
/**
* 未使用自定義屬性時調用
* 由于設置了attr所以...
*
* @param context
* @param attrs
*/
public SlidingMenu_qq(Context context, AttributeSet attrs) {
//調用三個參數的構造方法
this(context, attrs, 0);
//獲取屏幕寬度（窗口管理器）
/*WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
//展示度量
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
mScreenWdith = outMetrics.widthPixels;
//把dp轉換成px
mMenuRightPidding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics());
*/
}
/**
* 當實現自定義屬性時會執行三個參數的方法
*
* @param context
* @param attrs
* @param defStyleAttr
*/
public SlidingMenu_qq(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//獲取自定義的屬性
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.SlidingMenu_qq, defStyleAttr, 0);
//自定義屬性個數
int n = a.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = a.getIndex(i);
switch (attr) {
case R.styleable.SlidingMenu_qq_rightPadding:
//設置默認值是50dp
mMenuRightPidding = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics()));
break;
}
}
//釋放一下
a.recycle();
//獲取屏幕寬度（窗口管理器）
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
//展示度量
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
mScreenWdith = outMetrics.widthPixels;
}
/**
* new 一個TextView時傳一個上下文
*
* @param context
*/
public SlidingMenu_qq(Context context) {
//調用兩個參數的構造方法
super(context, null);
}
/**
* 設置HorizontalScrollView子VIew的寬和高
* 設置HorizontalScrollView自己的寬和高
*
* @param widthMeasureSpec
* @param heightMeasureSpec
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//設置循環之調用一次
if (!once) {
//HorizontalScrollView 內部只能有一個元素 所以直接get（0）就行就是那個Linerlayout mWapper
mWapper = (LinearLayout) getChildAt(0);
//獲取mWapper里的第一個元素menu
mMenu = (ViewGroup) mWapper.getChildAt(0);
//獲取mWapper里的第二個元素content
mContent = (ViewGroup) mWapper.getChildAt(1);
//菜單和內容寬度
mMenuWidth = mMenu.getLayoutParams().width = mScreenWdith - mMenuRightPidding;
mContent.getLayoutParams().width = mScreenWdith;
//由于子對象被設置了，mWapper就先不用了
once = true;
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
/**
* 通過設置偏移量 將menu隱藏
* @param changed
* @param l
* @param t
* @param r
* @param b
*/
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
//限制多次調用
if (changed) {
//x為正滾動條向右 內容向左（移動mMenuWidth 正好將菜單隱藏）
this.scrollTo(mMenuWidth, 0);
}
}
/**
* 判斷將菜單滑出來多少了
*
* @param ev
* @return
*/
@Override
public boolean onTouchEvent(MotionEvent ev) {
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_UP:
//隱藏在左邊的寬度
int scrollX = getScrollX();
if (scrollX >= mMenuWidth / 2) {
//scrollTo也行但是動畫效果不好 （隱藏）
this.smoothScrollTo(mMenuWidth, 0);
//代表菜單隱藏
isOPen = false;
} else {
this.smoothScrollTo(0, 0);
//表菜單打開
isOPen = true;
}
return true;
}
return super.onTouchEvent(ev);
}
/**
* 打開菜單
*/
public void openMenu() {
//已經打開
if (isOPen) return;
this.smoothScrollTo(0, 0);
isOPen = true;
}
/**
* 關閉菜單
*/
public void closeMenu() {
//正在打開
if (!isOPen) return;
this.smoothScrollTo(mMenuWidth, 0);
isOPen = false;
}
/**
* 切換菜單
*/
public void toggle(){
if (isOPen){
closeMenu();
}else {
openMenu();
}
}
}
2.抽屜側滑（添加此方法）
/**
* 實現抽屜滑動
* l隱藏在左邊的寬度
* 后邊是變化梯度
*/
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
float scale = l*1.0f/mMenuWidth;//1~0梯度的值
//調用屬性動畫
ViewHelper.setTranslationX(mMenu,mMenuWidth*scale);
}
3.qq5.0側滑，實現這個方法
/**
* 實現仿qq5.0
* l等于隱藏在左邊的寬度（越來越小）
* 后邊是變化梯度
*/
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
float scale = l * 1.0f / mMenuWidth;//1~0梯度的值
//調用屬性動畫
//菜單的縮放操作
float leftScale = 1.0f-scale*0.3f;
//透明度
float leftAlpha = 0.6f + 0.4f*(1-scale);
ViewHelper.setTranslationX(mMenu, mMenuWidth * scale*0.8f);
ViewHelper.setScaleX(mMenu,leftScale);
ViewHelper.setScaleY(mMenu,leftScale);
ViewHelper.setAlpha(mMenu,leftAlpha);
//內容區域不斷縮小
float rightScale = 0.7f+0.3f*scale;
//橫向縱向縮放（不更改縮放中心點就全隱藏了）
ViewHelper.setPivotX(mContent,0);
ViewHelper.setPivotY(mContent,mContent.getHeight()/2);
ViewHelper.setScaleX(mContent,rightScale);
ViewHelper.setScaleY(mContent,rightScale);
}
更多學習內容，可以點擊《Android側滑效果匯總》學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
