2013-04-17 5 views
0

가이 같은 디자인 :메뉴 항목 배치, 스 와이프 기능 등

enter image description here

이 어떻게 왼쪽 상단에 슬라이딩 메뉴 아이콘을 통해 배치합니까? 게다가 나는 화면을 스 와이프 기능을 추가 할 않았다

enter image description here

지금까지 activity_main .XML 레이아웃으로 분류되어있는 코드, 플라이 오버를 구현하는 FlyOutContainer 된 .java 파일을/슬라이딩 메뉴, 마지막으로 앱 자체의 백본 인 MainActivity .java 파일이 있습니다.

activity_main

<com.example.btshome.FlyOutContainer xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" > 

    <LinearLayout 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="#444488" 
     android:orientation="vertical" > 

     <Button 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:onClick="toggleMenu" 
      android:text="Button 1" /> 

     <Button 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:onClick="toggleMenu" 
      android:text="Button 2" /> 

     <Button 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:onClick="toggleMenu" 
      android:text="Button 3" /> 
    </LinearLayout> 

    <LinearLayout 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="#888888" 
     android:orientation="vertical" 
     android:gravity="center"> 

     <TextView 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:text="this is some text that you will see" /> 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:onClick="toggleMenu" 
      android:text="Toggle Menu" /> 
    </LinearLayout> 

</com.example.btshome.FlyOutContainer> 

FlyOutContainer

public class FlyOutContainer extends LinearLayout{ 

    private View menu; 
    private View content; 

    protected static final int menuMargin =100; 
    public enum MenuState{ 
     CLOSED,OPEN 
    }; 

    protected int currentContentOffset = 0; 
    protected MenuState menuCurrentState = MenuState.CLOSED; 

    public FlyOutContainer(Context context, AttributeSet attrs, int defStyle) { 
     super(context, attrs, defStyle); 
     // TODO Auto-generated constructor stub 
    } 

    public FlyOutContainer(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     // TODO Auto-generated constructor stub 
    } 

    public FlyOutContainer(Context context) { 
     super(context); 
     // TODO Auto-generated constructor stub 
    } 

    protected void onAttachedToWindow(){ 
     super.onAttachedToWindow(); 
     this.menu = this.getChildAt(0); 
     this.content = this.getChildAt(1); 
     this.menu.setVisibility(View.GONE); 
    } 

    protected void onLayout(boolean changed, int left, int top, int right, int bottom){ 
     if(changed) 
      this.calculateChildDimensions(); 
     this.menu.layout(left, top, right - menuMargin, bottom); 

     this.content.layout(left + this.currentContentOffset, top, right + this.currentContentOffset, bottom); 

    } 

    public void toggleMenu(){ 
     switch(this.menuCurrentState){ 
     case CLOSED: 
      this.menu.setVisibility(View.VISIBLE); 
      this.currentContentOffset = this.getMenuWidth(); 
      this.content.offsetLeftAndRight(currentContentOffset); 
      this.menuCurrentState = MenuState.OPEN; 
      break; 
     case OPEN: 
      this.content.offsetLeftAndRight(-currentContentOffset); 
      this.currentContentOffset = 0; 
      this.menuCurrentState = MenuState.CLOSED; 
      this.menu.setVisibility(View.GONE); 
      break; 
     } 
     this.invalidate(); 
    } 

    private int getMenuWidth() { 
     // TODO Auto-generated method stub 
     return this.menu.getLayoutParams().width; 
    } 

    private void calculateChildDimensions() { 
     // TODO Auto-generated method stub 
     this.content.getLayoutParams().height = this.getHeight(); 
     this.content.getLayoutParams().width = this.getWidth(); 

     this.menu.getLayoutParams().width = this.getWidth()-menuMargin; 
     this.menu.getLayoutParams().height = this.getHeight(); 
    } 
} 

MainActivity

public class MainActivity extends Activity { 
FlyOutContainer root; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 

     this.root = (FlyOutContainer) this.getLayoutInflater().inflate(R.layout.activity_main, null); 

     this.setContentView(root); 
    } 

    @Override 
    public boolean onCreateOptionsMenu(Menu menu) { 
     // Inflate the menu; this adds items to the action bar if it is present. 
     getMenuInflater().inflate(R.menu.main, menu); 
     return true; 
    } 

    public void toggleMenu(View v){ 
     this.root.toggleMenu(); 
    } 

} 

지어져 일반적으로 FlyOutContainerLinearLayout을 확장하고 기존 LinearLayout 배치 기능을 활용합니다. 콘텐츠 화면이 onClick 이벤트에 반응하도록 만들었지 만 분명히 작동하지 않습니다. 아무도 내가 원하는 디자인을 얻을 수 있도록 도와 줄 수 있습니까? 스 와이프 화면 기능.

답변

0

은 어쩌면 당신은에 다음 코드를 추가 할 필요는 슬라이더와 현재의 레이아웃을 가지고,

수직 선형 레이아웃에 레이아웃을 감싸 원하는 모양 사용자 정의 이미지와 검색 막대를 사용 할 수 있습니다 onCreat() 메소드?

setSlidingActionBarEnabled(false); 
관련 문제