Android 는 사용자 정의 컨트롤 Horizontal ScrollView 를 사용 하여 역사상 가장 간단 한 사 이 드 메뉴 를 만 듭 니 다.

사 이 드 스 케 이 트 메뉴 는 많은 앱 에서 볼 수 있 습 니 다.최근 QQ 5.0 사 이 드 스 케 이 트 는 약간의 수작 도 부 렸 습 니 다~사 이 드 스 케 이 트 메뉴 에 대해 서 는 보통 ViewGroup 을 사용자 정의 한 다음 메뉴 표시 줄 을 숨 깁 니 다.손가락 이 미 끄 러 질 때 Scroller 나 left Margin 등 을 통 해 이 루어 집 니 다.다소 복잡 합 니 다.완 성 된 후에 미끄럼 충돌 등 을 처리 해 야 합 니 다~~오늘 여러분 께 간단 한 실현 을 가 져 다 드 리 겠 습 니 다.역사상 가장 간단 하고 과장 되 지만 제 가 지금 겪 고 있 는 가장 간단 한 실현 입 니 다~~
1.원리 분석
옆으로 미 끄 러 지 는 것 은 손바닥 이 큰 화면 일 뿐 입 니 다.두 손바닥 정도 큰 레이아웃 을 넣 고 미 끄 러 지 려 면 다른 것 이 나 올 수 있 습 니 다.그렇다면 안 드 로 이 드 가 제공 하 는 Horizontal ScrollView 를 사용 하 는 것 을 고려 하지 않 는 이 유 는 무엇 입 니까?
Horizontal ScrollView 를 사용 하려 면 ACTIONDOWN , ACTION_MOVE 에서 감청,판단,컨트롤 위치 가 계속 바 뀌 었 나 요?NO!!!Horizontal ScrollView 자체 가 미 끄 러 지 는 기능 을 가지 고 있 습 니 다.
각종 충돌 을 수 동 으로 처리 해 야 합 니까?NO!!!그럼요.사건 배포 체 제 를 알 아 봐 야 겠 어 요~~
2.효과 도

네,메 인 화면 에서 QQ 한 장의 그림 을 만 들 었 습 니 다.왼쪽 에 한 형제의 레이아웃 파일 을 도 용 했 습 니 다~죄 송 해 요~누가 보기 좋 은 레이아웃,그림,아이콘 신마 가 있 는 지 보 내 주세요.감사합니다.
3.레이아웃 파일

<com.example.zhy_slidingmenu.SlidingMenu xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="wrap_content" 
android:layout_height="fill_parent" 
android:scrollbars="none" > 
<LinearLayout 
android:layout_width="wrap_content" 
android:layout_height="fill_parent" 
android:orientation="horizontal" > 
<include layout="@layout/layout_menu" /> 
<LinearLayout 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:background="@drawable/qq" > 
</LinearLayout> 
</LinearLayout> 
</com.example.zhy_slidingmenu.SlidingMenu> 
먼저 우리 의 사용자 정의 View 입 니 다.그 안의 한 방향 수준의 LinearLayout 입 니 다.그 다음 에 하 나 는 메뉴 의 레이아웃 이 고 하 나 는 메 인 레이아웃 입 니 다~
4.사용자 정의 SlidingMenu
다음은 저희 의 핵심 코드 입 니 다.

package com.example.zhy_slidingmenu; 
import android.content.Context; 
import android.util.AttributeSet; 
import android.util.TypedValue; 
import android.view.MotionEvent; 
import android.view.ViewGroup; 
import android.widget.HorizontalScrollView; 
import android.widget.LinearLayout; 
import com.zhy.utils.ScreenUtils; 
public class SlidingMenu extends HorizontalScrollView 
{ 
/** 
*      
*/ 
private int mScreenWidth; 
/** 
* dp 
*/ 
private int mMenuRightPadding = 50; 
/** 
*       
*/ 
private int mMenuWidth; 
private int mHalfMenuWidth; 
private boolean once; 
public SlidingMenu(Context context, AttributeSet attrs) 
{ 
super(context, attrs); 
mScreenWidth = ScreenUtils.getScreenWidth(context); 
} 
@Override 
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) 
{ 
/** 
*           
*/ 
if (!once) 
{ 
LinearLayout wrapper = (LinearLayout) getChildAt(0); 
ViewGroup menu = (ViewGroup) wrapper.getChildAt(0); 
ViewGroup content = (ViewGroup) wrapper.getChildAt(1); 
// dp to px 
mMenuRightPadding = (int) TypedValue.applyDimension( 
TypedValue.COMPLEX_UNIT_DIP, mMenuRightPadding, content 
.getResources().getDisplayMetrics()); 
mMenuWidth = mScreenWidth - mMenuRightPadding; 
mHalfMenuWidth = mMenuWidth / 2; 
menu.getLayoutParams().width = mMenuWidth; 
content.getLayoutParams().width = mScreenWidth; 
} 
super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
} 
@Override 
protected void onLayout(boolean changed, int l, int t, int r, int b) 
{ 
super.onLayout(changed, l, t, r, b); 
if (changed) 
{ 
//       
this.scrollTo(mMenuWidth, 0); 
once = true; 
} 
} 
@Override 
public boolean onTouchEvent(MotionEvent ev) 
{ 
int action = ev.getAction(); 
switch (action) 
{ 
// Up ,    ,                   ,     
case MotionEvent.ACTION_UP: 
int scrollX = getScrollX(); 
if (scrollX > mHalfMenuWidth) 
this.smoothScrollTo(mMenuWidth, 0); 
else 
this.smoothScrollTo(0, 0); 
return true; 
} 
return super.onTouchEvent(ev); 
} 
}
하하,완공~위의 데모 그림 은 이 정도 코드 로~~
코드 어때요?
네,코드 가 너무 짧 아서 설명 을 안 하 겠 습 니 다.여러분 스스로 주석 을 보 세 요~
5.확장
응,내 려 와.우 리 는 다음 절 차 를 보완 할 거 야.나 는 먼저 메뉴 레이아웃 을 ListView 로 바 꾸 어서 우리 가 충돌 하지 않 았 다 는 것 을 증명 하려 고 해.그리고 메뉴 의 오른쪽 여백 값 을 설정 할 속성 을 추가 합 니 다.한 가지 방법 을 알려 드 리 겠 습 니 다.자동 으로 메뉴 를 열 어 사용자 가 어떤 단 추 를 누 르 면 메뉴 가 천천히 미끄러져 나 올 수 있 습 니 다~
1.사용자 정의 속성 추가
a.우선 values 폴 더 아래 에 attr.xml 를 새로 만 들 고 다음 내용 을 기록 합 니 다.

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
<attr name="rightPadding" format="dimension" /> 
<declare-styleable name="SlidingMenu"> 
<attr name="rightPadding" /> 
</declare-styleable> 
</resources> 
b.레이아웃 에서 네 임 스페이스 와 사용 속성 을 설명 합 니 다.
정의 가 끝 났 습 니 다.꼭 사용 하 시 겠 습 니까?

<com.example.zhy_slidingmenu.SlidingMenu xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
xmlns:zhy="http://schemas.android.com/apk/res/com.example.zhy_slidingmenu" 
android:layout_width="wrap_content" 
android:layout_height="fill_parent" 
android:scrollbars="none" 
zhy:rightPadding="100dp" > 
우리 의 네 임 스페이스 를 볼 수 있 습 니 다:xmlns:zhy="http://schemas.android.com/apk/res/com.example.zhy_slidingmenuhttp://schemas.android.com/apk/res/우리 가방 이름 추가 하기;
우리 의 속성:zhy:rightPadding="100 dp"여기 100 dp 를 설 치 했 습 니 다.
주:많은 사람들 이 저 에 게 힌트 가 없 으 면 어떻게 하 냐 고 물 었 습 니 다.그러면 클 린 은 프로젝트 를 내 렸 습 니 다.운 이 좋 으 면 힌트 가 있 습 니 다.음,운 이 좋 습 니 다~
c.사용자 정의 클래스 에서 속성 획득

public SlidingMenu(Context context, AttributeSet attrs, int defStyle) 
{ 
super(context, attrs, defStyle); 
mScreenWidth = ScreenUtils.getScreenWidth(context); 
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, 
R.styleable.SlidingMenu, defStyle, 0); 
int n = a.getIndexCount(); 
for (int i = 0; i < n; i++) 
{ 
int attr = a.getIndex(i); 
switch (attr) 
{ 
case R.styleable.SlidingMenu_rightPadding: 
//   50 
mMenuRightPadding = a.getDimensionPixelSize(attr, 
(int) TypedValue.applyDimension( 
TypedValue.COMPLEX_UNIT_DIP, 50f, 
getResources().getDisplayMetrics()));//    10DP 
break; 
} 
} 
a.recycle(); 
}
세 개의 매개 변수의 구조 방법 중 TypeArray 를 통 해 얻 으 면 됩 니 다~
자,이렇게 하면 됩 니 다~사용자 정의 속성 이 많다 면 위의 절차 에 따라 하 시 면 됩 니 다~~
2.메뉴 를 여 는 방법 공개
우선 boolean isOpen 변 수 를 정의 하여 현재 메뉴 의 상 태 를 표시 합 니 다~~그리고 ACTIONUP 시 상태 변경:

case MotionEvent.ACTION_UP: 
int scrollX = getScrollX(); 
if (scrollX > mHalfMenuWidth) 
{ 
this.smoothScrollTo(mMenuWidth, 0); 
isOpen = false; 
} else 
{ 
this.smoothScrollTo(0, 0); 
isOpen = true; 
} 
return true; 
}
다음 추가 방법:

/** 
*      
*/ 
public void openMenu() 
{ 
if (isOpen) 
return; 
this.smoothScrollTo(0, 0); 
isOpen = true; 
} 
/** 
*      
*/ 
public void closeMenu() 
{ 
if (isOpen) 
{ 
this.smoothScrollTo(mMenuWidth, 0); 
isOpen = false; 
} 
} 
/** 
*        
*/ 
public void toggle() 
{ 
if (isOpen) 
{ 
closeMenu(); 
} else 
{ 
openMenu(); 
} 
}
가 는 김 에 두 개 더...
다음은 하 나 를 골 라 테스트 를 진행 하 겠 습 니 다.
홈 레이아웃 에 단 추 를 하나 더 추가 하여 toggleMenu()방법 을 터치 합 니 다.
주 활동

public class MainActivity extends Activity 
{ 
private SlidingMenu mMenu ; 
@Override 
protected void onCreate(Bundle savedInstanceState) 
{ 
super.onCreate(savedInstanceState); 
requestWindowFeature(Window.FEATURE_NO_TITLE); 
setContentView(R.layout.activity_main); 
mMenu = (SlidingMenu) findViewById(R.id.id_menu); 
} 
public void toggleMenu(View view) 
{ 
mMenu.toggle(); 
} 
}
자,현재 효과 도 를 보 세 요.

저희 가 패 딩 을 100 dp 로 바 꿨 어 요.
그리고 저희 버튼 을 눌 러 서 하 효 과 를 보 세 요~
3.ListView 테스트 추가

자~~ListView 도 테스트 끝 났 습 니 다~여러분 은 원 하 는 대로 수정 하 실 수 있 습 니 다~~
참,오늘 테스트 용 QQ 의 목적 은 다음 에 제 가 위의 코드 를 가지 고 QQ 5.0 과 똑 같은 효 과 를 개조 하려 는 것 입 니 다.여러분 이 관심 이 있 으 면 미리 시도 해 보 세 요.QQ 의 메뉴 는 메 인 화면 아래 에 숨겨 져 있 는 것 처럼 그 려 진 것 이 아니 라 는 느낌 을 줄 수 있 습 니 다.우리 의 이 예 도 그런 효 과 를 낼 수 있 으 니 지 켜 보 세 요.나머지 는 다양한 크기 조정,투명도 애니메이션 입 니 다~~
위 내용 은 소 편 이 공유 하 는 안 드 로 이 드 가 사용자 정의 컨트롤 인 Horizontal ScrollView 를 사용 해 역사상 가장 간단 한 사 이 드 메뉴 를 만 드 는 것 으로 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기