2017-04-17 4 views
0

Je suis actuellement la construction d'une barre de navigation de bouton personnalisé pour une application Android. Il contient plusieurs sections cliquables à l'intérieur (voir la légende ci-dessous) et un bouton Fab au centre qui devrait chevaucher la moitié supérieure de la barre de navigation.Comment ajouter un bouton se chevauchant dans android

J'ai réussi à le faire en utilisant une marge négative et en définissant clipChildren sur false sur chaque élément parent. Visuellement, il ressemble à ce que je veux, mais la partie du bouton Fab en dehors de la barre de navigation ne peut pas être cliqué.

Comment puis-je obtenir ce bouton en saillie encore cliquable?

Voici comment cela devrait ressembler à: enter image description here

Voici mon code de test. Les clics sur le fab dans le parent fonctionnent, dehors pas tellement.

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> 

Et le 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!"); 
      } 
     }); 
    } 
} 

Répondre

0

Je suis assez sûr qu'il est tout simplement impossible la façon dont je voulais le faire. J'ai trouvé un autre moyen qui fonctionne bien: il suffit de mettre le bouton fab en dehors du menu et d'utiliser quelque chose comme une mise en page relative + le padding négatif pour le positionner correctement. Voici la mise en page de travail:

<?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> 

Et une image: The fab button is now fully usable