2017-04-17 197 views
0

我目前正在爲android應用程序構建自定義按鈕導航欄。它包含幾個可點擊的部分(見下面的cod)和一個晶圓廠按鈕,它們應該與導航欄的頂部重疊一半。如何在android中添加重疊按鈕

我設法做到這一點,通過使用負邊距和設置clipChildren爲每個父元素爲false。在視覺上,它看起來就像我想要的,但導航欄外部的fab按鈕部分無法單擊。

我該如何實現仍可點擊的懸垂按鈕?

這是應該的樣子: 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

現在我敢肯定,它僅僅是不可能的,我想做到這一點。 我發現了另一種效果很好的方法:只需將fab按鈕放在菜單外面,並使用相對佈局+負填充等方式將其定位恰到好處。這裏是工作佈局:

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