2017-04-17 2 views
0

현재 Android 앱용 맞춤 버튼 탐색 바를 만들고 있습니다. 여기에는 여러 개의 클릭 할 수있는 섹션이 포함되어 있으며 (아래의 대구 참조) 중앙에는 탐색 모음의 윗면과 반으로 겹치는 팹 버튼이 하나씩 있습니다.android에 오버랩 버튼을 추가하는 방법

음수 여백을 사용하고 모든 부모 요소에서 clipChildren을 false로 설정하여이 작업을 처리했습니다. 시각적으로는 원하는대로 보이지만 탐색 바깥의 팹 버튼 부분은 클릭 할 수 없습니다.

클릭 할 수있는 오버행 버튼을 어떻게 얻을 수 있습니까? enter image description here

여기 내 테스트 코드는 다음과 같습니다

은 같이하는 방법입니다. 부모 안의 팹을 클릭하면 너무 바깥 쪽에서 일합니다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:clipChildren="false"> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Hello World!" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" /> 

    <LinearLayout 
     android:layout_width="0dp" 
     android:layout_height="50dp" 
     android:background="@color/colorPrimary" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     android:orientation="horizontal" 
     android:clipChildren="false"> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:orientation="vertical" 
      android:gravity="center" 
      android:id="@+id/menu1"> 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/ic_check"/> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Menu 1"/> 

     </LinearLayout> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:orientation="vertical" 
      android:gravity="center"> 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/ic_check"/> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Menu 2"/> 

     </LinearLayout> 

     <RelativeLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:orientation="vertical" 
      android:gravity="center" 
      android:clipChildren="false"> 

      <android.support.design.widget.FloatingActionButton 
       android:id="@+id/fabMenu" 
       android:layout_width="40dp" 
       android:layout_height="40dp" 
       android:src="@drawable/ic_check" 
       android:layout_marginTop="-20dp" 
       android:layout_alignParentTop="true"/> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Menu 2" 
       android:layout_alignParentBottom="true"/> 

     </RelativeLayout> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:orientation="vertical" 
      android:gravity="center"> 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/ic_check"/> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Menu 4"/> 

     </LinearLayout> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:orientation="vertical" 
      android:gravity="center"> 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/ic_check"/> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Menu 5"/> 

     </LinearLayout> 
    </LinearLayout> 

</android.support.constraint.ConstraintLayout> 

그리고 MainActivity.java

public class MainActivity extends AppCompatActivity { 


    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
     Log.d("MainActivity", "Started main activity"); 

     findViewById(R.id.menu1).setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       Log.d("MenuListener", "Clicked on menu 1 - working!"); 
      } 
     }); 

     findViewById(R.id.fabMenu).setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       Log.d("MenuListener", "Clicked on fab - partly working!"); 
      } 
     }); 
    } 
} 

답변

0

지금은 그냥 내가하고 싶었던 방법 불가능하다고 확신합니다. 잘 작동하는 또 다른 방법을 찾았습니다. 단지 메뉴 바깥에 팹 버튼을 놓고 상대 레이아웃 + 네거티브 패딩과 같은 것을 사용하면 바로 배치 할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Hello World!" 
     android:layout_centerInParent="true" /> 

    <!-- just placed outside of the menu --> 
    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fabMenu" 
     android:layout_width="40dp" 
     android:layout_height="40dp" 
     android:src="@drawable/ic_check" 
     android:layout_marginTop="-20dp" 
     android:layout_alignTop="@+id/menu" 
     android:layout_centerHorizontal="true"/> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="50dp" 
     android:background="@color/colorPrimary" 
     android:layout_alignParentBottom="true" 
     android:orientation="horizontal" 
     android:id="@+id/menu"> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:orientation="vertical" 
      android:gravity="center"> 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/ic_check"/> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Menu 1"/> 

     </LinearLayout> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:orientation="vertical" 
      android:gravity="center"> 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/ic_check"/> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Menu 2"/> 

     </LinearLayout> 

     <RelativeLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:orientation="vertical" 
      android:clipChildren="false"> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Menu 3" 
       android:layout_alignParentBottom="true" 
       android:layout_centerHorizontal="true"/> 

     </RelativeLayout> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:orientation="vertical" 
      android:gravity="center"> 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/ic_check"/> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Menu 4"/> 

     </LinearLayout> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:orientation="vertical" 
      android:gravity="center"> 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/ic_check"/> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Menu 5"/> 

     </LinearLayout> 
    </LinearLayout> 

</RelativeLayout> 

그리고 사진 : The fab button is now fully usable

다음 작업 레이아웃입니다
관련 문제